Définissez la police du texte. L'attribut face de la balise font. CSS : Changer la police

Il semblerait, pourquoi connaître les balises HTML pour le texte, si désormais presque tous les panneaux d'administration en ont une pratique qui les définit automatiquement ?

Le fait est que le formatage du contenu sur un site Web est fondamentalement différent du travail dans applications bureautiques. Ici, il ne suffit pas de donner au texte une apparence attrayante, car conception correcte Non seulement l'affichage d'une page Web en dépend, mais aussi sa promotion dans les moteurs de recherche.

Balises et attributs HTML : syntaxe de base

Tout texte a code caché, qui « explique » à l’ordinateur quoi et comment afficher à l’écran. Toutes les informations sont enregistrées à l'aide d'un ensemble d'éléments universels.

Essentiellement, les balises de texte HTML sont des commandes qui ajoutent certains blocs à une page ou modifient leur apparence. Le format d'enregistrement correct ressemble à ceci :

Veuillez noter que toutes les balises ne sont pas appariées. Par exemple,
(saut de ligne) ou

(ajout ligne horizontale) n'a pas du tout besoin d'être fermé.

Pourquoi vous ne pouvez pas copier des articles de Word et d'autres programmes dans l'éditeur de site Web

Bien que moderne programmes de bureau utilisez les mêmes balises HTML pour le texte, dans 99% des cas le code natif est inutilisable pour les pages web. Même si le document s'affiche normalement dans l'application elle-même, une fois inséré sur un site Web, le formatage peut être perdu. De plus, en raison de grande quantité balises et attributs supplémentaires, les moteurs de recherche ne peuvent pas analyser correctement le contenu de la page. Ce qui, à son tour, rend difficile la promotion de votre ressource.

Pour obtenir un code propre et pertinent, vous devez d'abord supprimer le texte des balises HTML générées par un éditeur classique. Il existe plusieurs façons de procéder :

  1. « Exécutez » l'article via le Bloc-notes et insérez-le ensuite seulement sur le site. L'application efface tout le code HTML, vous devrez donc à nouveau formater le texte (à l'aide des outils de l'éditeur ou manuellement).
  2. Rédigez et publiez des articles à l'aide de LiveWriter. L'éditeur de blog populaire génère immédiatement code correct. Et dans un onglet séparé, vous pouvez voir à quoi ressemblera le texte sur le site.
  3. Utilisez HTML Cleaner. Ce service en ligne ne détruit pas l'intégralité du code, mais uniquement les fragments inutiles. À l'aide de filtres, vous choisissez les balises que vous souhaitez enregistrer. Il existe également un puissant éditeur visuel pour le formatage, qui ajoute des commandes déjà optimisées au code.

Paragraphes

Cet élément est présent dans presque tous les articles. Chaque paragraphe doit être situé à l'intérieur d'un tel conteneur - cela simplifie le formatage et vous permet d'enregistrer style uniforme sur toutes les pages du site. Pour plus de commodité, l'étiquette

Écrivez toujours avec nouvelle ligne.

Alignement

La balise HTML distincte "Text Alignment" n'a plus été utilisée depuis longtemps. Au lieu de cela, un attribut ALIGN générique a été créé. Pour changer de position bloc de texte sur la page, vous devez sélectionner l'une des 3 valeurs - CENTRE, DROITE ou GAUCHE. Vous pouvez définir l'alignement d'autres éléments, tels que les titres, de la même manière.

Dans certaines situations, d'autres balises sont utilisées pour l'alignement, par exemple, vous pouvez positionner à l'aide de l'élément

...
. Pourquoi une balise distincte est-elle utile ? Contrairement à l'attribut, il fonctionne avec n'importe quel contenu, y compris les photos, vidéos, flash, etc.

Titres et sous-titres

Le système de sous-titres vous permet de créer une structure de contenu logique. Lorsque le texte est divisé en blocs significatifs, il est beaucoup plus facile pour le lecteur de se concentrer et d'absorber. nouvelles informations. Les moteurs de recherche analysent également les titres pour comprendre pour quelles requêtes promouvoir la page. C’est pourquoi les experts SEO recommandent d’y utiliser des mots-clés d’actualité.

HTML utilise six niveaux de sous-titres - de

à

. Il existe une hiérarchie claire dans ce système :

  • ...

    . Article principal, produit dans une boutique en ligne, etc.). Il ne peut y en avoir qu'un dans le texte

    . En règle générale, il contient le mot-clé principal.

  • ...

    . Les sous-titres de deuxième niveau divisent le texte en blocs significatifs. Par exemple, si vous évaluez des ordinateurs portables, vous pouvez effectuer plusieurs

    avec les noms des différents modèles.

  • ...

    . Le troisième niveau est nécessaire si le texte est compris entre deux

    est également décomposé en petits blocs. Dans notre exemple, il pourrait s'agir de critères d'évaluation - « Performances », « Mémoire », « Carte graphique », etc. pour chaque modèle.

  • ,

    ,
    . En pratique, ils sont extrêmement rares. Mais le principe général est le même : ils doivent être « imbriqués » dans un bloc avec un sous-titre de niveau supérieur.

Assurez-vous de maintenir la hiérarchie correcte. En revenant à notre exemple, cela signifie que vous ne pouvez pas saisir immédiatement les noms de modèles comme

ou

. Et plus encore, utilisez des sous-titres de différents niveaux pour des blocs de sens homogène (par exemple, mettez en avant un ordinateur portable qui a pris la dernière place du classement en utilisant
).

Voici un diagramme qui vous aidera instantanément à comprendre et à mémoriser la structure correcte des titres en HTML.

Listes

Il est préférable de formater toutes les listes et instructions sous forme de listes, en utilisant des balises HTML spéciales pour le texte ( erreur typique- juste quelques paragraphes

Qui commencent par un trait d'union ou un chiffre).

La structure de ces blocs est très simple. Tout d’abord, nous déterminons le type de liste – à puces ou numérotées.

Tous les éléments se trouvent entre les balises d'ouverture et de fermeture. Chaque élément de la liste commence sur une nouvelle ligne et a le format . Le nombre d'éléments n'est pas limité.

Le choix et ses attributs

Que peut-on changer en utilisant cette police et cette couleur - et sans ajouter de nouvelles classes au CSS. Ceci est très pratique lorsque vous devez mettre en évidence une seule phrase ou un seul fragment.

possède plusieurs attributs :

  • Affronter. Vous permet de changer la police du texte. Vous pouvez lister plusieurs options séparées par des virgules (Tahoma, Verdana). Si l'utilisateur n'a pas installé la première police, le système utilise simplement une alternative.
  • Taille. Pour agrandir ou réduire le texte, saisissez une valeur comprise entre 1 et 7 entre guillemets.
  • Couleur. Selon le design, vous pouvez choisir l'une des teintes standards (rouge, vert, bleu) ou saisir un code pour la couleur de votre choix.

N'utilisez pas de paragraphes formatés avec , au lieu de sous-titres. Il est préférable de définir les mêmes paramètres de conception avec la bonne balise.

Façons de surligner du texte

Un texte monotone est fatiguant, même découpé en paragraphes. Pour attirer l'attention et aiguiser l'intérêt du lecteur, points clés Il est recommandé de mettre en évidence graphiquement. Voici quelques commandes qui vous aideront à faire face à cette tâche.

... . Une balise HTML extrêmement populaire. Le texte en gras attire immédiatement le regard et il est donc pratique de l'utiliser pour mettre en évidence des points et des faits importants.

Beaucoup de gens confondent les balises Et . Il n'y a pas de différence visuelle, mais ils fonctionnent différemment. Le premier change simplement l'apparence du texte, et le second sert d'« index » et met en évidence les fragments les plus importants (thématiques mots-clés et expressions pour le référencement).

... . L'italique élégant et strict est idéal pour la conception de termes scientifiques, de mots étrangers et d'une variété de citations. Dans les publications sérieuses, les noms des œuvres d'art sont également mis en évidence en italique.

... . Peut-être qu’aucune autre balise HTML n’a suscité autant de controverses. Le texte souligné est rarement utilisé car cette méthode Les surlignages ont toujours été attribués à des hyperliens. Si vous utilisez dans les articles, veuillez noter que cela ne convient qu'aux fragments courts - pas plus d'une ligne.

... . Une balise intéressante qui permet de réaliser une pièce très pertinente en publicité - par exemple, pour souligner le contraste entre les anciens et les nouveaux prix.

... . Le moyen le plus simple d’augmenter la taille de la police sans aucune option supplémentaire.

... . Elle fonctionne sur le même principe que la balise précédente. Le texte situé à l'intérieur est réduit par rapport au texte principal.

... . Le nom correct pour ce format est exposant. Cette balise est principalement destinée aux diplômes mathématiques et aux notes de bas de page. Il réduit la taille de la police et déplace le texte sélectionné vers le haut.

... . Les indices se trouvent souvent dans diverses formules. Le fragment sélectionné est situé sous le texte principal.

Des conteneurs significatifs

Étant donné que certains blocs ont été trouvés dans de nombreux textes, des balises spéciales ont commencé à être créées pour eux. Cela simplifie le formatage, car si chaque type de contenu a son propre ensemble de styles, il suffit de mettre en évidence un morceau de texte et d'indiquer les informations qu'il contient.

... . Balise pour ajouter des codes informatiques. Indispensable dans les articles sur la programmation avec exemples - les commandes ne sont pas exécutées, mais sont affichées sous forme de texte brut.

... . Conçu pour formater des citations - par exemple, des extraits clés d'une interview.

. Place une partie du texte dans un bloc séparé. Par défaut, la sélection comporte davantage de remplissage à gauche, mais vous pouvez également modifier la taille, le style et la couleur du texte en CSS.

...
. Une balise supplémentaire qui contient des informations sur l'auteur, y compris des liens.

ligne de partage

Une simple ligne peut être utilisée pour marquer la fin logique d’une grande section.

ne s'applique pas aux balises appariées. Cela signifie que l'élément de format de fermeturepas nécessaire.

À l'aide de l'attribut WIDTH, vous pouvez raccourcir le séparateur en spécifiant une taille appropriée en pixels ou un pourcentage de la largeur de la fenêtre.

En apprenant à utiliser correctement les balises pour formater le texte en HTML, vous rendrez non seulement vos articles plus faciles à lire, mais augmenterez également votre efficacité SEO.

Dans ce tutoriel, nous examinerons le dernier attribut de balise , qui définit la couleur du texte. Par défaut, le texte est noir et s'affiche sur fond blanc. Pour changer la couleur du texte en HTML, vous devez appliquer l'attribut color de la balise :

Pour définir une couleur, précisez simplement son nom, par exemple : rouge, vert, bleu. Regardons un petit exemple :

<span>Leçon 6. Changer la couleur du texte</span>

Texte vert

Texte rouge

Texte violet



Voyons le résultat dans le navigateur :

Le texte du premier paragraphe est devenu vert, le deuxième paragraphe est devenu rouge et le troisième paragraphe est devenu violet. Au total, il existe 16 noms de couleurs primaires et 130 supplémentaires. Vous pouvez voir la liste complète des couleurs dans la table des couleurs HTML.

Cette manière d’indiquer la couleur est très simple, mais très limitée. Par conséquent, afin de changer la couleur dans le code HTML, ils utilisent souvent un nombre hexadécimal précédé d'un signe dièse (#), par exemple :

En utilisant cette désignation, vous pouvez obtenir plus de 16 millions de couleurs et leurs nuances ! Vous pouvez obtenir le code couleur en utilisant le convertisseur de couleurs HEX, disponible sur le site, ou en utilisant la palette de couleurs de Photoshop. Regardons un exemple et écrivons le code suivant :

<span>Leçon 6. Changer la couleur du texte</span>

Texte vert

Texte rouge

Texte violet



Sauvons le fichier et regardons le résultat :

Comme vous pouvez le voir, nous avons donné au texte les mêmes couleurs que dans le premier exemple, seulement ici nous avons utilisé système hexadécimal calcul ou en d’autres termes, nous avons spécifié la couleur au format HEX.

Vous avez maintenant appris à changer la couleur du texte en HTML et à la fin de la leçon, je suggère de répéter tous les attributs des balises. , et définissez plusieurs paramètres sur le texte à la fois, à savoir : la police, la taille et la couleur. Écrivez un exemple :

<span>Nous donnons au texte plusieurs paramètres</span>

Définir la police, la taille et la couleur du texte

Définir la police, la taille et la couleur du texte



Salutations à tous les lecteurs de cet article et abonnés de mon blog ! Je souhaite consacrer la publication d'aujourd'hui à un sujet sans connaissance duquel vos ressources Internet ne seront ni lisibles ni attrayantes : « Comment définir une police en HTML ». Le sujet en lui-même est simple et je suis sûr que vous le maîtriserez rapidement.

Cependant, il ne faut pas oublier que les langages Web sont riches en toutes sortes d’outils de conception de polices que, idéalement, vous devez connaître. Après avoir lu l'article, vous maîtriserez en toute confiance le formatage du texte, apprendrez à définir différents styles, types de styles de police et de décorations, ainsi qu'à modifier la taille et la couleur des phrases et des lettres individuelles. Commençons !

Les polices sont différentes

La plupart des panneaux, de la presse et de la littérature, des sites Internet et autres services utilisent des polices standards. Bien qu'ils soient confortables, ils sont depuis longtemps devenus ennuyeux et n'attirent pas l'attention. C'est pourquoi de nombreux designers modifient légèrement le type de design ou créent complètement de nouveaux styles. Les polices les plus connues et les plus influentes sont :

  • Helvétique ;
  • Futura ;
  • Garamond;
  • Bodoni ;
  • Bembo;
  • Rockwell ;
  • Times New Roman.

Leurs principales différences résident dans leurs relations avec certaines familles. Il existe des familles serif (serif), sans serif, décoratives, italiques et monospaces.

Je tiens également à souligner qu'il existe 5 tailles de police.

Commençons par le langage HTML et ses « capacités créatives »

Formatage du texte à l'aide de balises HTML

Nom d'abord en-tête

P. sous-titre avec une lettre rouge !

Ici se trouve d'abord paragraphe actuel exemple. Pour plus de clarté ces mots sera écrit en italique.



Permettez-moi de vous rappeler que l'attribut aligner = "centre" définit le texte à afficher au centre.

Et maintenant, le moment est venu pour le CSS de montrer ses compétences

Malgré l'ensemble des diverses balises fournies par HTML, CSS est un outil plus pratique et plus flexible pour concevoir apparence polices.

Les principales propriétés utilisées pour formater le contenu sont : fonte et ses composants : décoration de texte.

Regardons-le d'abord fonte. Ce paramètre universel, grâce auquel vous pouvez définir plusieurs valeurs en même temps. De plus, chaque paramètre fonctionne avec ses propres mots-clés.

Nom de la propriété Mots-clés
famille de polices Peut être installé en tant que familles de polices standard :

· sans empattement (sans-serif);

· antique (serif);

· décoratif (fantastique) ;

· italique (cursif) ;

· monospace (monospace),

Il en va de même pour les styles standards existants (Arial, Calibri, etc.).
taille de police Pour définir la taille absolue des symboles, les notations suivantes sont utilisées : xx-small, x-small, small, medium, large, x-large, xx-large. Vous pouvez également spécifier une valeur unique.
poids de la police Responsable de la saturation du style du texte. Change de plage ou est spécifié à l'aide des mots normal, gras, plus clair ou plus gras.
variante de police Spécifie la représentation des lettres à l'aide des mots-clés small-caps, normal ou hériter.
style de police Définit le parent normal, oblique, italique ou hérite.
police-étirement Indique la densité des lettres. Les valeurs suivantes peuvent être spécifiées : ultra-condensé, ultra-expansé, extra-condensé, extra-expansé, semi-condensé, semi-expansé, normal, expansé, condensé et hérité.

Propriété décoration de texte aide à décorer le texte éléments supplémentaires, tel que le soulignement ( souligner), barré ( passage en ligne), surligné ( surligner), et hérite également des paramètres du parent ( hériter) ou annuler toute inscription ( aucun).

Il est maintenant temps de passer au deuxième exemple. J'ai pris le code précédent et je l'ai stylisé en utilisant CSS. Ainsi, le titre a été décoré d'une ombre (en utilisant la propriété texte-ombre) et avec un contour autour de ( frontière-couleur). En même temps, j’ai agrandi un mot. Je voulais aussi utiliser le paramètre opacité pour définir la transparence du sous-titre.

Formatage du texte à l'aide <a href="https://rokwell.ru/fr/podskazka-pri-navedenie-na-div-vsplyvayushchaya-podskazka-na-css-dopolnitelnye/">propriétés CSS</a>

Nom d'abord en-tête

Sous-titre translucide !

Ici se trouve d'abord paragraphe actuel exemple. Pour plus de clarté ces mots sera écrit en italique.



27/11/14 88,7K

En HTML, la taille de la police joue un rôle important. Il permet d'attirer l'attention de l'utilisateur sur informations importantes, publié sur la page du site. Bien que non seulement la taille des lettres soit importante, mais aussi leur couleur, leur épaisseur et même leur famille.

Balises et attributs lorsque vous travaillez avec des polices HTML

Le langage hypertexte dispose d'une large gamme d'outils pour travailler avec les polices. Après tout, le formatage du texte est la tâche principale du HTML.

La raison de la création du langage HTML était le problème de l'affichage des règles de formatage du texte dans les navigateurs.


Examinons les balises utilisées pour travailler avec les polices HTML et leurs attributs. Le principal est le tag . A l'aide des valeurs de ses attributs, vous pouvez définir plusieurs caractéristiques de la police :
  • color – définit la couleur du texte ;
  • size – taille de la police en unités conventionnelles.

Les valeurs d'attribut positives de 1 à 7 sont prises en charge.

  • face – utilisé pour définir la famille de polices de texte qui sera utilisée à l'intérieur de la balise . Plusieurs valeurs sont supportées, séparées par des virgules.

Seul le texte situé entre les parties de la balise de police appariée est formaté. Le reste du texte s'affiche police standard, installé par défaut.


En HTML également, il existe un certain nombre de balises appariées qui spécifient une seule règle de formatage. Ceux-ci incluent :
  • — définit la police grasse en HTML. Étiqueter similaire en action au précédent;
  • — la taille est plus grande que la taille par défaut ;
  • — taille plus petite fonte;
  • — texte en italique (italique). Étiquette similaire ;
  • — texte souligné;
  • - barré ;
  • — afficher le texte uniquement en minuscules ;
  • - en majuscule.

Texte brut

Texte en gras

Texte en gras

Plus que d'habitude

Moins que d'habitude

Italique

Italique

Avec trait de soulignement

Barré

Capacités des attributs de style

En plus des balises décrites, il existe plusieurs autres façons de modifier la police en HTML. L’une d’elles consiste à utiliser l’attribut style générique. En utilisant les valeurs de ses propriétés, vous pouvez définir le style d'affichage de la police :

1) font-family – la propriété définit la famille de polices. Il est possible de lister plusieurs valeurs.
Le changement de la police en HTML vers la valeur suivante se produira si la famille précédente n'est pas définie sur système opérateur utilisateur.

Syntaxe d'écriture :

famille de polices : nom de police [, nom de police [, ...]]

2) taille de la police – la taille est définie entre 1 et 7. C'est l'un des principaux moyens d'augmenter la police en HTML.
Syntaxe d'écriture :

taille de police : taille absolue | taille relative | sens | intérêt | hériter

Vous pouvez également définir la taille de la police :

  • En pixels ;
  • En termes absolus ( xx-petit, x-petit, petit, moyen, grand);
  • En pourcentage ;
  • En points (pt).

Taille de police : 7

Taille de la police : 24 px

Taille de la police : x-large

Taille de la police : 200 %

Taille de la police : 24 pts


3) font-style – définit le style d’écriture de la police. Syntaxe:

style de police : normal | italique | oblique | hériter

Valeurs:

  • normal – orthographe normale ;
  • italique – italique ;
  • oblique – police inclinée vers la droite ;
  • hériter – hérite de l’orthographe de l’élément parent.

Un exemple de comment changer la police en HTML en utilisant cette propriété :

style de police: hériter

style de police : italique

style de police : normal

style de police : oblique


4) font-variant – traduit tout lettres majuscules en majuscules. Syntaxe:

variante de police : normal | petites capitalisations | hériter

Un exemple de comment changer la police en html avec cette propriété :

variante de police : hériter

variante de police : normale

variante de police : petites majuscules


5) font-weight – vous permet de définir l’épaisseur du texte (saturation). Syntaxe:

poids de la police : gras|plus gras|plus léger|normal|100|200|300|400|500|600|700|800|900

Valeurs:

  • gras – définit la police HTML en gras ;
  • plus audacieux – plus audacieux par rapport à la normale ;
  • plus léger – moins saturé par rapport à la normale ;
  • normal – orthographe normale ;
  • 100-900 – définit l'épaisseur de la police en équivalent numérique.

poids de la police : gras

poids de la police : plus gras

poids de la police : plus léger

poids de la police : normal

poids de la police : 900

poids de la police : 100

Propriété de police HTML et couleur de police

La police est une autre propriété du conteneur. En lui-même, il combinait les valeurs de plusieurs propriétés destinées au changement de polices. syntaxe de police :

police : taille de police famille de polices | hériter

En outre, la valeur peut être définie sur les polices utilisées par le système dans les inscriptions sur divers éléments contrôles :

  • légende – pour les boutons ;
  • icône – pour les icônes ;
  • menu - menu ;
  • message-box – pour les boîtes de dialogue ;
  • small-caption – pour les petits contrôles ;
  • barre d'état – police de la barre d'état.

police:icône

police: légende

police:menu

police: boîte de message

petite légende

police: barre d'état

police:italique 50px gras "Times New Roman", Times, serif

Comment changer la police ?

Lors de la création d'un site Web, il est toujours nécessaire de modifier la police du texte pour diverses parties et éléments des pages HTML, car cela ajoute non seulement un caractère unique et un style au site, mais améliore également la qualité de la perception de l'information. En HTML, il existe des balises spéciales pour cela, nous en parlerons dans cette leçon, qui sera l'une des plus importantes de ce tutoriel. Mais, comme je vous l'ai dit plus tôt, n'essayez pas de tout mémoriser par cœur, non, l'essentiel est de comprendre et de comprendre ce qui est discuté à chaque étape de la leçon.

Changer les styles de police

Il existe plusieurs façons de modifier les styles d’écriture des polices en HTML, et vous le verrez bientôt. Examinons maintenant quelques nouvelles balises :

... Et ...- surligner le texte audacieux fonte.

... Et ...- surligner le texte italique.

...- affiche le texte en exposant, par exemple E = mc 2 .

...- affiche le texte en indice, par exemple H 2 SO 4.

Toutes ces balises sont intégré (en ligne, niveau ligne), c'est-à-dire qu'ils ne créent pas de sauts de ligne avant et après eux-mêmes, mais sont situés sur une seule ligne. Ils ne peuvent également contenir que des éléments intégrés, de sorte qu’ils peuvent être librement imbriqués les uns dans les autres. Le plus important est de ne pas oublier l'imbrication correcte : une balise ouverte plus tôt doit être fermée plus tard.

Je pense que vous avez remarqué qu'il y a deux balises chacune pour le gras et l'italique. Le fait est que navigateurs classiques afficher le contenu de ces balises de manière égale, mais les navigateurs non visuels (vocaux) peuvent particulièrement mettre l'accent sur le texte à l'intérieur Et . Par conséquent, si vous souhaitez mettre en évidence certains mots ou expressions pour attirer le lecteur, il est préférable d'utiliser ces balises, même si, dans l'ensemble, il n'y a pas de différence.

Vous vous demandez peut-être : « Mais les balises ci-dessus sont-elles vraiment tout ce qui peut être utilisé pour surligner du texte en HTML ? Et bien sûr que non ! Il y a aussi des balises Et , en soulignant le texte ainsi que la balise , affichant du texte barré. Mais voyez-vous, ces balises sont obsolètes en HTML et, comme l’attribut align, les navigateurs pourraient bientôt ne plus les comprendre. Je vais donc vous montrer une autre méthode que vous pouvez utiliser sans crainte. Et cela consiste à utiliser l'attribut style, et il est permis de le spécifier à l'intérieur de toutes les balises. La syntaxe générale est la suivante :

<тег style= "text-decoration:underline" >... - souligne le texte.

<тег style= "text-decoration:overline" >... - souligne le texte.

<тег style= "décoration de texte : passage en ligne">... - raye le texte.

Exemple de modification des styles de police

Changer les styles de police

Caractère gras. Italique.

Italique gras.

H 2 DONC 4- formule de l'acide sulfurique écrite en italique.

Paragraphe de texte souligné.

Texte brut, barré en gras.



Résultat dans le navigateur

Je voudrais maintenant apporter une précision sur l'attribut style. Le style est un attribut de balise tout à fait ordinaire, mais il concerne les feuilles de style en cascade (CSS). Dans un passé lointain, toutes les fonctions de structuration de la page HTML dans son ensemble et de présentation externe de chaque élément séparément (couleur, forme, position sur la page, etc.) étaient reprises par Langage HTML. Mais ensuite, les développeurs du langage ont décidé de séparer ces fonctions et ont créé CSS. En conséquence, de nombreuses balises ou attributs de balise sont devenus obsolètes. Alors, pour ne pas vous déranger informations inutiles, dans ce tutoriel, je les ai également remplacés par des styles, c'est-à-dire l'attribut style. Sa syntaxe générale est la suivante :

<тег style= "Propriété CSS : valeur">...

En utilisant le style, vous ne perdrez rien du tout, mais vous apprendrez à écrire du HTML compétent, et en prime, vous maîtriserez également un peu de CSS.

Étiqueter ou que faire quand il n'y a pas de balises nécessaires

Eh bien, est-ce que tout est clair jusqu'à présent ? Bon, alors une question. Que ferez-vous si, par exemple, vous devez rayer non pas tout le paragraphe, mais seulement la moitié du texte, et ne pas le mettre en gras ou en italique ? Eh bien, ne vous inquiétez pas, une balise très pratique et nécessaire vous aidera ici.

Alors, rencontrez -... . Cette balise est également intégré (en ligne, niveau ligne) et peut contenir n’importe quelle balise intégrée, mais ce n’est pas l’essentiel. Tout seul , sans attributs, n'ajoute aucune modification ni au texte ni aux balises qu'il contient. Et il a été créé spécifiquement pour les styles, c'est-à-dire essentiellement pour l'attribut style. C'est grâce à cet attribut, ou plutôt à lui différentes significations, oui certaines propriétés apparaissent. Voilà, étudions maintenant un exemple.

Exemple d'utilisation de la balise SPAN

Utilisation de la balise SPAN

Texte brut sans modifications.

Texte plus régulier. Stressé. Barré.



Résultat dans le navigateur

Texte brut sans modifications.

Texte plus régulier. Stressé.

Barré.

Changer le nom (police) de la police Vous ne savez pas ce qu'est un nom de police ? Vous êtes sûrement nombreux à avoir au moins une fois tapé du texte dans ou Microsoft WordÉcrivain OpenOffice

et j'ai vu ce menu :

Ce sont les noms des polices disponibles sur votre ordinateur et utilisées non seulement par Word ou Writer, mais également par de nombreuses autres applications, y compris les navigateurs. Le nom (police) d’une police détermine lui-même sa conception, qui distingue une police d’une autre. Je déconseille fortement d'utiliser des polices exotiques, car elles peuvent ne pas se trouver sur l'ordinateur de la personne qui visite votre site et alors, au lieu de lettres, il en verra différentes symboles étranges

ou des carrés. Voici une liste des polices les plus courantes que presque tous les utilisateurs possèdent sur leur ordinateur : Par défaut, presque tous les navigateurs utilisent la police "Times New Roman", et pour la modifier, le même attribut de style est utilisé, qui peut être appliquéà l'intérieur de n'importe quelle balise

<тег style= . La syntaxe générale de spécification est la suivante :>...

Si le nom de la police est composé de plusieurs mots, il doit alors être fermé en guillemets simples. Il est permis de spécifier non pas un, mais plusieurs noms de polices séparés par des virgules, puis, si la première police n'est pas sur l'ordinateur, la deuxième, la troisième, etc. seront utilisées. Mais à la fin, veillez à mettre le nom de toute la famille de polices, dans ce cas, si le navigateur ne détecte pas une seule police, il utilisera la police la plus adaptée à cette famille.

Pour changer la police sur toute la page, précisez simplement l'attribut style dans la balise . Et si vous devez modifier la police d'une partie distincte du texte, placez-la dans une balise et appliquez-lui l'attribut.

Exemple de modification des noms de police

Changer les noms de police

Il s'agit d'une police Arial, si elle n'est pas là, alors Verdana, et si elle n'est pas là, alors n'importe quelle autre police sans empattement.

Il s'agit de Comic Sans MS ou de n'importe quelle cursive.

C'est encore Arial, Verdana ou n'importe quel sans-serif. Et c'est Courier ou n'importe quel monospace.



Résultat dans le navigateur

Eh bien, avez-vous compris l'exemple ? Je vais faire une explication dont la compréhension vous rendra la vie beaucoup plus facile à l'avenir, même si je pense que beaucoup l'ont déjà deviné. Ainsi, si les balises sont imbriquées les unes dans les autres et que plusieurs d'entre elles apporter des modifications du même type(par exemple, ils changent le nom de la police), puis les balises descendantes remplacent les propriétés des balises ancêtres. Si les balises imbriquées implémentent divers changements, puis ils se complètent, c'est tout.

Changer la taille de la police

Le langage HTML est limité à seulement sept tailles de police, ce qui, voyez-vous, est très petit pour un bon site Web. C'est pourquoi tout le monde utilise CSS pour le redimensionnement depuis longtemps, et maintenant vous allez l'apprendre aussi.

Il existe une dizaine d'unités de mesure en CSS, mais nous n'examinerons que les trois plus populaires : les points (pt), les pixels (px) et les pourcentages (%). Donc:

  • pt-Pointes. Un point équivaut à 1/72 de pouce et un pouce équivaut à 2,54 cm. Par conséquent, 1 pt = 0,03527778 cm. Il s'agit d'une valeur absolue, puisque la taille indiquée en points ne dépend de rien.
  • px- Pixels. Mesuré en pixels d'écran d'ordinateur. Un pixel est le plus petit point du moniteur et c'est une valeur relative, puisque sa taille dépend de résolution actuelle l'écran et la taille du moniteur lui-même.
  • % - Intérêt. Il est calculé en pourcentage, où 100 % est pris comme valeur de la balise parent, et si elle n'est pas spécifiée, alors la valeur par défaut dans le navigateur. Il s'agit également d'une valeur relative, car la taille de la police parente peut être complètement différente et les utilisateurs peuvent librement modifier la taille de la police dans le navigateur.

Pour spécifier la taille de la police, l'attribut style est utilisé et peut être spécifié Par défaut, presque tous les navigateurs utilisent la police "Times New Roman", et pour la modifier, le même attribut de style est utilisé, qui peut être appliqué. La syntaxe générale est :

<тег style = "taille de police: taille">...

Comme pour les noms de polices, pour modifier la taille de la police sur toute la page, spécifiez simplement l'attribut style dans la balise. . Et si vous devez changer la police d'un morceau de texte, placez-le dans une balise et appliquez-lui l'attribut.

Exemple de modification de la taille des polices

Changer la taille de la police

Cette taille de police représente 90 % de la taille par défaut du navigateur.

Cette taille correspond à 90 % de la taille indiquée dans la balise BODY.

La taille de la police du titre correspond à 120 % de la taille du CORPS.

Cela représente encore 90 % de la taille par défaut du navigateur. Cette taille de police est de 15 points.



Résultat dans le navigateur

Cette taille de police représente 90 % de la taille par défaut du navigateur.

Cette taille représente 90 % de la taille du CORPS.

La taille de la police du titre correspond à 120 % de la taille du CORPS.

Cela représente encore 90 % de la taille par défaut du navigateur. Cette taille de police est de 15 points.

La taille d'une police dépend non seulement de son indication explicite, mais aussi de son nom (police de caractères) - différentes polices peuvent avoir des hauteurs et des largeurs de lettres complètement différentes, ainsi que l'espacement des lettres.

Un peu plus sur l'attribut style

Il est temps de vous révéler un autre secret de ce merveilleux attribut, mais encore une fois, je vais d'abord vous poser une question. Que feriez-vous si vous deviez définir un paragraphe entier sur un nom de police Arial d'une taille de 80 % ? Et je vais vous le dire, vous écririez quelque chose comme ceci :

Texte du paragraphe.

Texte du paragraphe.

Ou même comme ça.

Texte du paragraphe.

Ai-je raison ? Eh bien, si les deux premières options sont correctes en principe, alors la dernière est généralement une erreur, car, si vous vous en souvenez, une balise ne peut pas avoir deux attributs identiques. Il est maintenant temps de se rappeler que le style n'est pas seulement un attribut, mais un attribut CSS. Regardez ça :

Texte du paragraphe.

Beaucoup plus facile, non ? Le plus important est de ne pas oublier de mettre un point-virgule (;) entre les styles adjacents et de prendre en compte toute cette « économie » guillemets doubles(" "), sinon seul le premier style sera appliqué et le navigateur ignorera le reste. Eh bien, nous mettons toujours des guillemets doubles, n'est-ce pas ?

Donc, cette leçon s'est avérée très intense, tout comme devoirs et repose-toi un peu.

Devoirs.

  1. Créez un titre pour l'article et ses deux sections, mais soulignez également les titres des sections.
  2. Assurez-vous que lorsque vous passez votre souris sur le titre d'un article, une légende correspondante apparaît.
  3. Écrivez un paragraphe au début de l'article et deux dans chaque section.
  4. Définissez la page entière sur la police Arial à 90 % de la taille par défaut du navigateur.
  5. Définissez tous les titres sur la police Times et définissez le titre de l'article sur une taille de police de 150 % et les sous-titres sur 120 %.
  6. Dans le premier paragraphe, surlignez deux mots en gras et un en italique. Dans le second - une phrase de plusieurs mots en italique gras. Dans le troisième, soulignez la phrase en italique. Dans le quatrième, rayez la moitié de la phrase en gras.
  7. Écrivez la formule de l'alcool dans le dernier paragraphe : C 2 H 5 OH.


ARTICLES CONNEXES