Introduction détaillée aux techniques de mise en page CSS

Ce qui suit est une introduction détaillée aux techniques de mise en page CSS que j'ai compilée pour vous. Les étudiants intéressés peuvent y jeter un œil.

Définir le style de texte

1. 🎜>Les polices chinoises par défaut prises en charge par la plupart des systèmes utilisateur sont Song, Hei, Youyuan et Kai ; les polices anglaises prises en charge par défaut sont Arial, Arial Black, Arial Narrow, Century Gothic, Comic SansMS, Times New Roman, etc. . En utilisation, Song Dynasty et Arial sont utilisés le plus fréquemment.

CSS fournit la propriété font-family pour définir le type de police.

Exemple : p{font-family: 宋体;}

Remarque : Si plusieurs attributs de police sont définis en même temps, la priorité est dans l'ordre.

2. Taille de la police

CSS fournit l'attribut font-size pour définir la taille de la police. Exemple : p{font-size: 12px;}

Taille relative
px, em, 10%, plus grand, plus petit (les deux derniers sont relatifs à l'élément parent)

Taille absolue
pt, pc, en cm, mm

Mots clés
xx-small, x-small, petit, grand, x-large,xx-large

3. Font bold

CSS fournit l'attribut font-weight pour définir la police en gras. Exemple : p{font-weight : bold;}

Chiffres : 100, 200,…,900

Mots clés : gras, plus audacieux, plus léger, normal

4. Couleur du texte

CSS fournit l'attribut color pour définir la couleur du texte. Exemple : p{color : rouge;>

Nom de la couleur : rouge, vert,……

Valeur RVB : (255 255 255),…….

十Valeur hexadécimale : #ff0000,...

5. Italique

CSS fournit l'attribut font-style pour définir la police en italique. Il existe trois valeurs d'attribut : normale, italique et oblique. Exemple : p{font-style: italic;}

6 Souligné, topline, barré

CSS fourni La police-. Les attributs de décoration définissent le soulignement, le soulignement et le barré. Il existe quatre valeurs d'attribut : souligner (souligné), clignoter (texte clignotant), surligner (ligne supérieure) et passer à la ligne (barré). Exemple : p{font-decoration: underline;}

7. Casse des lettres anglaises

CSS fournit l'attribut font-transform Définissez les majuscules et les minuscules des lettres anglaises. Il existe quatre valeurs d'attribut : aucune, majuscule (la première lettre est en majuscule), majuscule (toutes en majuscules) et minuscule (toutes en minuscules). Exemple : p{font-transform : none;}

8. Style de paragraphe de texte

Alignement horizontal CSS Fournir attribut text-align pour définir l’alignement horizontal. Il existe quatre valeurs d'attribut : gauche (aligné à gauche), droite (aligné à droite), centre (centré) et justifier (aligné aux deux extrémités).

Exemple : p{text-align: left;>

Alignement vertical
CSS fournit des attributs de mode d'écriture et de flux de mise en page pour définir l'alignement vertical.

Grammaire : mode d'écriture : lr-tb ; (gauche-droite-haut-bas)
mode d'écriture : tb-rl (haut-bas-droite-gauche)
flux de mise en page : horizontal ; (disposition horizontale)
layout-flow: vertical-ideographic; (disposition verticale)

Indentation de première ligne
CSS fournit l'attribut text-indent pour définir l'indentation de première ligne. Les valeurs d'attribut peuvent être des valeurs de pixels ou des pourcentages.
Exemple : p{text-indent: 12px;}

Espacement des lignes
CSS fournit l'attribut line-height pour définir l'espacement des lignes. La valeur d'attribut peut être une valeur de longueur.
Exemple : p{line-height: 12px;}

Espacement des caractères
CSS fournit l'attribut letter-spacing pour définir l'espacement des caractères. La valeur d'attribut peut être une valeur de longueur.
Exemple : p{letter-spacing : 12px;} (espacement des lettres)
p{word-spacing: 12px;} (espacement des mots)

Ce qui précède est la page CSS que j'ai compilée pour tout le monde Compétences en mise en page, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Explication détaillée des points de connaissances de base en CSS

Quelles sont les façons de faire fonctionner dynamiquement js/css fichiers

Implémentation CSS des sprites et des icônes de polices

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!