Qu'est-ce que le CSS ? Introduction à trois styles CSS et attributs de texte-tutoriel CSS-php.cn

Qu'est-ce que le CSS ? Introduction à trois styles CSS et attributs de texte

不言

Libérer： 2018-08-09 15:31:55

original

2704 Les gens l'ont consulté

Cet article vous présente qu'est-ce que le CSS ? L'introduction des trois styles CSS et attributs de texte a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Qu'est-ce que CSS ?

Feuilles de style en cascade, appelées CSS, feuilles de style en cascade.
Utilisé pour modifier des fichiers HTML et effectuer des opérations telles que la composition ou le contrôle de la taille sur les éléments d'une page Web.
En d'autres termes, le fichier HTML remplit le contenu de la page Web, tandis que CSS contrôle les performances du contenu
Par exemple : la taille de l'élément, la position de l'élément dans la page Web, l'arrière-plan de l'élément et d'autres attributs.

Où est écrit le code CSS ?

1 Style en ligne (inline) : le code CSS peut être écrit dans des balises html, utilisez style="css style";

<p style="color: red;">这是一个段落</p>

Copier après la connexion

2 Style interne :

Écrivez le code CSS dans la balise style
En théorie, la balise style peut être écrite n'importe où dans le document pour prendre effet, mais nous écrirons tous le style dans la balise head

<html>
    <head>        ...
        <style type="text/css">
            css样式
        </style>
    </head>
</html>

Copier après la connexion

3 Style externe :

Le style externe est pour séparer le code css Écrit dans un fichier css (fichier de suffixe css)
Utilisez ensuite la balise link pour introduire le fichier de style externe
Il n'y a pas besoin de balises de style dans les fichiers de style externes, écrivez simplement du code CSS directement

<html>
    <head>        ...
        <link rel="stylesheet" type="text/css" href="css文件路径" />
    </head>
</html>

Copier après la connexion

Trois styles peuvent être utilisés de plusieurs manières en même temps

Attribut de texte : attribut de police

1 Taille de police : font-size

Définissez la taille de la police, utilisez des valeurs avec des unités, telles que px, em, pt, etc.

font-size: 12px;

Copier après la connexion

2 Couleur de police : couleur

couleur : rouge;

3 Style de police : font-family

Définir la police, telle que Song Dynasty, Yahei, etc.
Peut avoir plusieurs valeurs
Mais un seul style de police est affiché
Si la première police est disponible, utilisez la première, sinon utilisez la seconde
Si la deuxième police n'est pas disponible, utilisez la troisième, et ainsi de suite
Les polices sont séparées par des virgules anglaises. Si la valeur est chinoise ou plusieurs mots, elle doit être placée entre guillemets doubles anglais

font-family: "宋体",Times,"New Century Schoolbook";

Copier après la connexion

4 Poids de la police : font-weight

< table>Valeur facultativeDescription< td>normalValeur par défaut, pas de grasgras

可选值	说明
normal	默认值，不加粗
bold
bolder	加粗，效果比bold更明显
value	100~900的不带单位数值，一般100~500为正常效果，600~900为加粗，数值越大，字体越粗

< tr>plus gras Gras, l'effet est plus évident que le grasvaleur100~900 sans unités Valeur, généralement 100~500 est l'effet normal, 600~900 est gras, plus la valeur est grande, plus la police est grasse

font-weight: bold;

Copier après la connexion

5 Casse du texte : texte- transformer

可选值	说明
none	默认值，无效果
capitalize	首字母大写
uppercase	全部大写
lowercase	全部小写

text-transform: capitalize;

Copier après la connexion

6 Alignement horizontal du texte : text-align

可选值	说明
left	默认值，左对齐
right	右对齐
center	居中对齐
justify	两端对齐

text-align: left;

Copier après la connexion

7 Alignement vertical du texte

可选值	说明
baseline	默认。元素放置在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐
inherit	规定应该从父元素继承 vertical-align 属性的值