Les propriétés CSS peuvent être définies différentes polices différents éléments pages Web, ainsi que de spécifier leur style, leur taille, leur couleur et d'autres paramètres.

Regardons les propriétés disponibles.

famille de polices

Permet de déterminer dans quelle police le texte sera écrit. Il existe deux types de noms utilisés pour regrouper les polices en CSS : famille-générique Et nom de famille.

famille-générique contient cinq familles de polices de base que l'on peut trouver sur presque tous les ordinateurs.

• sans empattement- polices sans empattement. Le texte qu’ils écrivent est mieux perçu que les autres.
• empattement- polices serif.
• monospace- les polices dont les caractères ont une largeur fixe. Ils sont généralement utilisés pour afficher le code du programme.
• cursive- polices manuscrites.
• fantaisie- polices décoratives (artistiques).

nom de famille ne définit pas une famille, mais une police : « Arial Black », Verdana.

Comme valeurs de propriété famille de polices les familles et les polices sont répertoriées séparées par des virgules. Le navigateur détermine si la première police de la liste est installée sur le PC de l'utilisateur, et si c'est le cas, il affiche le texte qu'elle contient ; sinon, il passe à la suivante, etc. Si le nom de la police contient des caractères spéciaux ou est constitué de caractères spéciaux ; de plusieurs mots (contient un espace), alors il doit être mis entre guillemets.

H1 (famille de polices : Arial, sans-serif ;) h2 (famille de polices : " Horaires Nouveau Romain", empattement ; )

style de police

Définit l'italique (valeur italique), oblique ( oblique) ou standard ( normale) style de texte.

Texte en italique.

Texte en italique.

Style de texte normal.

Crée une page comme celle-ci :

taille de police

Une propriété importante qui détermine la taille de la police. Il peut être spécifié de différentes manières.

• Pixels (px). Ils sont utilisés assez souvent car ils permettent de préciser la taille le plus précisément possible. Par défaut, le navigateur affiche le texte à 16 pixels.

P (taille de police : 12 px ; )

Attention : il ne doit y avoir aucun espace entre le nombre et les unités de mesure.

• Pourcentage (%). Calculé à partir de la taille de police de l'élément parent. Si le parent l'a défini par défaut, vous pouvez alors mémoriser environ 16 pixels et les prendre à 100 %.

P (taille de police : 120 % ; )

• Points (pt).Également utilisé très souvent. De plus, lorsque vous sélectionnez un nombre en définissant la taille de la police sur éditeurs de texte(Word, Bloc-notes, Bloc-notes, etc.), puis utilisez également les points.

P (taille de police : 15 pt ; )

• Hauteur relative de la police (em). La hauteur de police du parent est considérée comme une et la hauteur de police de l'élément actuel est définie par rapport à celle-ci.

P (taille de police : 1,2 em ; )

• Constantes. On pense que les valeurs xx-petit, x-petit, petit, moyen, grand, x-large, xx-large(du plus petit au plus grand) définissez la taille absolue de la police, même si en fait, lors de leur utilisation, la taille dépendra toujours des paramètres système opérateur et navigateur. Il existe également des constantes relatives : plus petit(plus petit) et plus grand(plus grand), ce qui rend la police plus petite ou plus grande par rapport à l'élément parent.

P (taille de police : x-large ; )

• Autres unités de mesure. Pour définir la police vous pouvez utiliser tout ce qui est disponible en CSS : millimètres ( mm), centimètres ( cm), pouces ( dans), les sommets ( pièce, 1 pièce = 12 pts), taille des caractères x (ex).

P (taille de police : 1,5 pièce ; )

variante de police

Offre deux significations :

• petites capitalisations. Lettres minuscules passer aux petites majuscules.
• normale. Texte brut.

Pour comprendre la différence, mieux vaut la voir une fois :

H1 (variante de police : petites majuscules ; ) h2 (variante de police : normale ; )

poids de la police

Affecte la saturation (audace) de la police. Les valeurs pourraient être :

• Nombres de 100 à 900 par incréments de cent. Avec leur aide, vous pouvez définir la teneur en matières grasses avec la plus grande précision. Le poids d'une police normale que vous voyez généralement sur les pages est de 400, tandis que le gras est de 700. Le problème est que de nombreux navigateurs ne prennent pas en charge toute cette plage, donc utiliser des valeurs numériques est souvent inutile.
• normale. Police régulière.
• audacieux. Définit le style en gras.

Div ( poids de la police : gras ; )

• plus audacieux et plus léger. Rend la police respectivement plus grasse ou plus fine que la police du texte parent.

couleur

Spécifie la couleur de la police. Peut être réglé des manières suivantes

• Par nom. Utilisé mots réservés, indiquant les noms de couleurs (par exemple, bleu- bleu, jaune- jaune). Le plus simple, mais en même temps le plus méthode limitée, car il ne prend en charge que 140 couleurs, même si elles sont généralement suffisantes.

P ( couleur : rouge ; )

• Par code hexadécimal(hexagonal). Le système de numérotation hexadécimal comprend 16 chiffres, dont les six derniers sont indiqués par des lettres alphabet latin de A à F, et nombre décimal 255 s'écrit FF dans ce système. Comme vous le savez, toutes les couleurs sont créées en mélangeant seulement trois : le rouge, le vert et le bleu. Le degré de présence de chacun d'eux est précisé par des nombres de 0 à 255, écrits en système hexadécimal. Le numéro est précédé d'un symbole dièse ( # ). Blanc - #000000 , noir - #ffffff.

L'exemple ci-dessous définit la couleur du paragraphe sur gris :

P ( couleur : #808080 ; )

• Dans le système RVB. Tout de même rouge, vert et bleu (rouge, vert, bleu), mais déjà précisés par des nombres de 0 à 255 séparés par des virgules. La présence de chacun trois couleurs peut également être exprimé en pourcentage. Alors 100% correspondra au nombre 255.

A (couleur : rgb(0,128,201) ;)

• RVBA. Tout est pareil qu'en RVB, seulement à la fin un nombre supplémentaire de 0 à 1 est ajouté - un canal alpha, qui définit la transparence du texte.

A (couleur : rgba(0,128,201,0.5);)

• HSL. La valeur dans ce format est spécifiée par trois paramètres séparés par des virgules.

1. H (teinte - nuance). Défini en degrés de 0 à 359° selon la couleur sur la roue chromatique (photo ci-dessous).

2. S (Saturé - ombre). Indiqué en pourcentage. Il est clair que de 0 à 100 %, et il est clair que plus le pourcentage est élevé, plus la couleur est saturée.

3. L (légèreté - luminosité). Tout comme la saturation, elle est définie en pourcentage.

A (couleur : hsl(0,100%,100%);)

• HSLA. Identique au HSL, mais avec un canal alpha supplémentaire (comme RGBA).

A (couleur : hsla(0,100 %,100 %,0,7);)

fonte

Vous permet de combiner toutes les propriétés de police sur une seule ligne et peut ainsi réduire considérablement le code. A la structure suivante :

Police : style de police variante de police poids de la police taille de la police/hauteur de la ligne famille de polices

Les propriétés doivent être écrites exactement dans cet ordre (afin de ne pas définir de valeur, vous pouvez simplement l'ignorer).

Voici un exemple :

Div (police : petites majuscules obliques 12pt/1.2 Arial, sans empattement ;)

Pour indiquer la taille de la police en CSS, vous devez spécifier la propriété correspondante et sa valeur. La taille de la police est déterminée par la propriété font-size, qui peut être définie sur plusieurs valeurs. Vous pouvez définir la taille de la police en pixels, en pourcentages, à l'aide de mots-clés, etc. Nous verrons tout cela plus tard dans ce sous-chapitre, mais pour l'instant, jetez un œil aux exemples de définition de la taille de la police :

/* en pourcentage : */ h1 ( taille de police : 100% ; ) /* en unités em : */ h2 ( taille de police : 1em ; ) /* en pixels : */ h3 ( taille de police : 18px ; ) /* utilisant le mot-clé : */ p ( font-size: small; )

Taille de la police en pixels

Le moyen le plus simple et le plus compréhensible de définir la taille de la police consiste à utiliser l'unité px. Vous spécifiez vous-même la hauteur de la police. Disons que vous avez besoin d'une taille de police de 24 pixels. Pour ce faire, notez le style CSS :

Taille de la police : 24 px ;

Taille de la police en pourcentage

Vous avez probablement déjà rencontré une situation dans laquelle la taille de la police en CSS n'est pas spécifiée, ce qui oblige le navigateur à déterminer la taille de la police « à sa discrétion ». Plus précisément, la valeur par défaut prédéfinie est prise. Les valeurs fixées en pourcentages en dépendent. Par exemple, la taille de base du corps du texte p est généralement de 16 pixels. Une valeur de 100% équivaut taille de base police préinstallée dans le navigateur. C'est pourquoi :

P ( taille de police : 100 % ; ) /* ... identique à la valeur par défaut du navigateur : */ p ( taille de police : 16 px ; )

Si dans ce cas vous définissez la taille de la police à 50 %, elle sera alors égale à la moitié de la taille de base. Une valeur de 200%, au contraire, doublera la taille de la police.

Important: Les pourcentages de taille de police sont hérités. Par exemple, si la taille de police d'une balise parent est définie sur 150 %, toutes les balises imbriquées hériteront également de cette valeur.

Unité de mesure em

L’unité de mesure em fonctionne de la même manière que les pourcentages. Une valeur de 1em équivaut à 100 % et correspond à la taille de police de base par défaut. En conséquence, 0,6em = 60 %, 3em = 300 % et ainsi de suite. Exemple d'entrée :

Taille de la police : 0,9 em ; /* vous pouvez omettre le zéro avant le point : */ font-size: .9em;

Les tailles de police spécifiées dans em sont héritées (tout comme les pourcentages). Cela crée quelques difficultés lorsque vous travaillez avec CSS. Par exemple, si pour le parent élément div Si la taille de la police est définie sur 2em, alors pour le même élément div imbriqué à l'intérieur, la taille de la police sera doublée. Un bon exemple peut être vu sur la capture d'écran :

Comme alternative, vous pouvez utiliser la nouvelle unité de mesure introduite dans CSS3 - rem, qui est toujours basée sur la taille de police de base. Si dans notre exemple nous modifions la valeur du div de 2em à 2rem , alors la taille de la police de l'élément div imbriqué deviendra la même que celle du div parent. L'inconvénient de l'unité rem est qu'elle n'est pas prise en charge par certains navigateurs, à savoir Internet Explorer versions 8 (et antérieures), ainsi qu'Opera Mini 8.

Mots-clés

Définir la taille Texte CSS Vous pouvez également utiliser des mots-clés spéciaux, qui dépendent également de la taille de police de base du navigateur. Si vous vous concentrez sur taille standard police du corps du texte (16 pixels) et ne tenant pas compte des cas où la taille de base a été modifiée, alors le tableau ci-dessous présente la correspondance entre le mot-clé et la taille de la police en pixels :

Comme vous pouvez le constater, la valeur moyenne correspond à la taille de police de base de 16 pixels. L'utilisation de mots-clés est limitante et manque de flexibilité, c'est pourquoi les développeurs professionnels ne les utilisent pas.

Achèvement

Dans ce sous-chapitre, vous avez appris à définir la taille de la police en CSS. Nous avons également examiné les unités de mesure les plus souvent utilisées pour définir la taille de la police dans les feuilles de style. D'autres unités peuvent également convenir à ces fins. Dimensions CSS, comme les pouces dans, centimètres cm, millimètres mm. Mais ils ne sont pas très efficaces pour déterminer la taille du texte sur les pages Web affichées sur un moniteur.

Permet de surligner du texte en italique, italique ou vice versa pour rendre le texte vue standard. Cette propriété n'a que trois significations :

• normal - texte standard avec un style normal, c'est-à-dire ni italique ni italique
• italique - style italique
• oblique - style oblique

Paragraphe avec la valeur normale.

Paragraphe avec valeur en italique.

Paragraphe avec le sens oblique.

Essayer "

Les polices italiques sont traditionnellement des versions stylisées d'une police basée sur la calligraphie, tandis que l'italique a été créée par simple addition légère inclinaison des symboles. La plupart des polices ne contiennent pas de jeu de caractères italiques, c'est pourquoi le navigateur utilise souvent un algorithme incliné pour les caractères de texte. Cela signifie que dans de nombreux cas, vous ne verrez pas de différence entre les valeurs italiques et obliques.

Taille de la police

Changer la taille de la police dans un élément - bonne façon le mettre en valeur visuellement et lui donner une signification, ou vice versa, montrer que ces informations ne devrait pas attirer une attention accrue.

Pour modifier la taille de la police, utilisez la propriété font-size. Il existe plusieurs façons de spécifier la taille de la police, examinons les plus courantes :

Pixels

Les valeurs de pixels sont souvent utilisées car cette approche permet un contrôle très fin de la taille. Valeur numérique finitions caractères alphabétiques px, qui doit venir immédiatement après le nombre (il ne doit y avoir aucun espace entre le nombre et px).

Corps (taille de police : 14 px ; )

Intérêt

La taille de police par défaut dans les navigateurs est de 16 px. Ainsi, une valeur de 100 % équivaut à 16 px et 200 % équivaut à 32 px. Si vous définissez une règle qui indique tout le texte à l'intérieur d'un élément valeur 75% de la taille par défaut (cela correspondra à 12px), puis définissez une autre règle qui définit la valeur à 75% pour son élément enfant, alors la taille de la police dans cet élément sera de 9px (soit 75% de 12px ).

Corps (taille de police : 100 % ; )

E.M.

L'unité de mesure em vous permet de modifier la taille de la police par rapport à la taille de la police dans élément parent. Étant donné que la taille de police par défaut dans les navigateurs est de 16 px, vous pouvez utiliser les règles sujets similaires, qui sont utilisés pour les valeurs en pourcentage.

Corps (taille de police : 14 px ; ) h2 (taille de police : 1,2em ; )

Dans l'exemple, nous définissons l'élément la taille de la police est de 14 px, et pour tous les éléments

- 1,2em. Cela signifie que la taille de la police des titres de deuxième niveau sera multipliée par 1,2. Dans notre cas, la taille de tous les en-têtes

sera une taille de police de 1,2 élément , ce qui signifie 1,2 fois plus grand que 14px et est approximativement égal à 17px. (La taille réelle sera de 16,8, mais la plupart des navigateurs l'arrondiront à 17.)

Remarque : les pourcentages et les em sont essentiellement deux manières différentes d'atteindre le même objectif. Ils offrent tous deux la possibilité de définir la taille par rapport à la taille de la police de l'élément parent.

Mots-clés

CSS propose sept mots-clés qui vous permettent d'attribuer une taille de police par rapport à la taille par défaut (16 px) : xx-small, x-small, small, medium, large, x-large et xx-large.

P (taille de police : petite ; )

Medium est la taille de police par défaut dans les navigateurs. Les valeurs restantes réduisent ou augmentent la taille de la police selon différents facteurs. La plus petite taille de police xx-small est d'environ 9 pixels, chaque taille suivante est environ 20 % plus grande que la précédente :

Redimensionnez en utilisant des pourcentages.

Redimensionnez en utilisant les pixels.

Redimensionner à l'aide du mot-clé x-small.

Dans ce chapitre :

Certains sites attirent les utilisateurs non pas avec des animations, ni avec des images ou des photographies, ni avec des vidéos, mais uniquement avec leur contenu textuel. Le texte fait partie intégrante de nombreux sites populaires ; dans le chapitre précédent, nous avons examiné les propriétés CSS qui vous permettent de changer la couleur du texte, d'y ajouter une ombre, de l'aligner et d'ajouter un soulignement, un surlignement ou même un retrait. Dans ce chapitre, nous verrons comment changer la police du texte, quel style vous pouvez choisir, et enfin, nous verrons comment modifier la taille du texte par défaut.

Différence entre les familles de polices Sans-serif et Serif

Familles de polices en CSS

En CSS, les polices sont divisées en familles, chaque famille étant constituée d'un ensemble de polices qui ont caractéristiques générales. Il n'existe que cinq familles de polices :

• sans-serif - polices sans-serif, elles sont considérées comme mieux lisibles sur un écran d'ordinateur que les polices de la famille serif.
• serif est une famille de polices serif. Beaucoup de gens les associent à des articles de journaux. Les empattements sont des traits et des tirets décoratifs le long des bords des lettres.
• monospace est une famille de polices dont les caractères ont la même largeur fixe. Ces polices sont principalement utilisées pour afficher des exemples de code de programme.
• cursive - polices qui imitent le texte manuscrit.
• fantasy - polices artistiques et décoratives. Ils ne sont pas très répandus, ne sont pas disponibles sur tous les ordinateurs et sont rarement utilisés dans la conception de sites Web.

La possibilité de contrôler la police - que vous modifiiez sa famille, sa taille ou son épaisseur - vous permet d'augmenter l'éclat et le caractère unique des pages WEB.

famille de polices

Spécifie la famille de polices utilisée dans ce texte. Il peut y avoir plusieurs familles de ce type, séparées par des virgules. La priorité est déterminée par l'ordre dans cette liste.

Signification:

• nom de famille : la famille de polices utilisée pour afficher le texte. Les noms composés de plusieurs mots doivent être mis entre guillemets.
• nom de la police standard utilisée pour afficher le texte. Les polices typiques peuvent être : serif, sans-serif, fantasy et monospce.

p (famille de polices : "Times roman", courier, serif)

style de police

Spécifie les styles de police, tels que italique ou italique.

Signification:

• italique - italique.
• oblique - style oblique. Il s’agit uniquement d’une conception de police d’écran. Son inclinaison est légèrement plus petite que celle de l'italique.
• hériter - la valeur de l'élément parent est appliquée.

p (style de police : italique; )

variante de police

Détermine si la police sera affichée en petites majuscules.

Signification:

• normal - style normal (par défaut).
• small-caps - affiche la police en petites majuscules.
• hériter - la valeur de l'élément parent est appliquée.

p (variante de police : petites majuscules)

poids de la police

propriétés police de caractères css

Détermine l'épaisseur de la police de sortie.

Signification:

• normal - style normal (par défaut).
• gras - style semi-gras. Le gras fait ressortir le texte. Les lignes deviennent plus épaisses et le texte lui-même est légèrement plus large qu'avec un style normal.
• plus gras - police en gras.
• plus léger - police claire. Les styles de police fins et légers sont moins impressionnants que les polices normales ou grasses, mais ils sont parfaits lorsque vous souhaitez une apparence légère et simple.
• 100-900 est un nombre indiquant l’épaisseur de la police. 100 correspond à l'épaisseur la plus légère (plus claire), 400 - normale, 700 - gras, 900 - plus gras.
• hériter - la valeur de l'élément parent est appliquée.

p (police-poids : gras ;)

police-étirement

Définit l'épaisseur de la police.

Signification:

• normal - largeur normale (par défaut)
• plus large - augmente la largeur actuelle.
• plus étroit - diminue la largeur actuelle de un.
• ultra-condensé - plus petite valeur largeur.
• extra-condensé - valeur supérieure à la précédente
• condensé - une valeur supérieure à la précédente.
• semi-condensé - une valeur supérieure à la précédente.
• semi-expansé - la valeur est supérieure à celle d'une épaisseur normale.
• élargi - valeur supérieure à la précédente.
• extra-expansé - valeur supérieure à la précédente.
• ultra-expansé - valeur maximale largeur.
• hériter - la valeur de l'élément parent est appliquée.

corps (police-stretch : condensé)

taille de police

Détermine la taille en points (hauteur des caractères) de la police.

Signification:

• taille absolue - utilisée pour exprimer la taille de la police mots-clés: xx-small (extrêmement petit), petit (petit), moyen (moyen) (par défaut), grand (grand), x-large (très grand), xx-large (extrêmement grand).
• taille relative - pour exprimer la taille de la police, les mots-clés suivants sont utilisés : plus grand (plus petit), plus petit (plus grand),
• toute hauteur correspondant à la norme correspond à la taille de police absolue. Une valeur négative n'est pas autorisée.
• n’importe quelle valeur de pourcentage standard.
• hériter - la valeur de l'élément parent est appliquée.

p (taille de police : 20 px)

propriétés CSS de la police

ajuster la taille de la police

Détermine le rapport entre la largeur et la hauteur des caractères pris en charge lors de la définition de la taille de la police. Cela donne à l'utilisateur le contrôle sur les changements de hauteur du texte.

Signification:

• aucun - par défaut.
• toute valeur standard - un nombre représentant le rapport entre la hauteur et la largeur des caractères.
• hériter - la valeur de l'élément parent est appliquée.

p (ajustement de la taille de la police : 0,45)

fonte

Une propriété pratique pour définir tous les paramètres de police à la fois. S'il manque des valeurs, leur valeur par défaut est prise.

Signification:

• style de police - style.
• font-variant - une valeur qui détermine si la police est affichée en petites majuscules.
• police-poids-épaisseur.
• taille de police - taille de police.
• hauteur de ligne - leader.
• font-family - famille de polices.
• hériter - la valeur de l'élément parent est appliquée.

p (police : oblique 12 pts "Helvetica Nue", serif ; police-stretch : condensée)

propriétés CSS de la police

Implémentation de polices personnalisées.

Avant Internet Explorer 4.0, les webmasters devaient utiliser les polices intégrées du navigateur ou utiliser les polices disponibles sur le système. CSS donne au webmaster la possibilité de spécifier les polices d'affichage chargées avec la page Web, garantissant ainsi que la page est affichée correctement. La police téléchargeable est déterminée à l'aide de nouveaux éléments dans Syntaxe CSS. Ci-dessous la syntaxe pour définir la police chargée en CSS :

@font-face (famille de polices : Nom de la police; src : url(failMame.eot) )

la valeur fontName qui est ensuite référencée Propriété CSS famille de polices, définie par l'utilisateur. Ci-dessous se trouve exemple complet:

Le texte est affiché à l'aide d'une police téléchargeable

Une fois qu'une nouvelle police est définie, son nom peut être utilisé comme propriété font-family valide. La propriété font-family peut être associée à une liste égale de polices, de sorte que si la première police de la liste ne peut pas être chargée, le navigateur essaiera de charger la police ou la famille de polices suivante. DANS dans cet exemple La dernière police définie est sans-serif, ce qui permet au navigateur d'utiliser n'importe quelle police de la famille sans-serif pour restituer l'élément.