Résumé des styles couramment utilisés en CSS et résumé des attributs couramment utilisés en CSS-tutoriel CSS-php.cn

Cet article vous apporte un résumé des styles couramment utilisés en CSS et un résumé des attributs couramment utilisés en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Feuille de style CSS :

Fonction : Définir comment afficher les balises HTML
Structure de syntaxe :

Premier type : sélecteur {
Déclaration d'attribut de style ; > }Explication : Ce style de feuille de style CSS se compose de deux parties : un sélecteur et une ou plusieurs déclarations ; cette feuille de style ne peut être définie que dans une balise de style ou un fichier css, et chaque balise de style ou fichier css peut définir plusieurs feuilles de style.
Le deuxième type : style="Déclaration d'attribut de style 1 ; Déclaration d'attribut de style 2 ;..." Description : La feuille de style CSS de cette manière ne comprend qu'une ou plusieurs déclarations, ces tables de style ne peuvent être définies que dans le attribut de balise de style ; chaque balise du document HTML a un attribut de balise de style

Quelle que soit la méthode utilisée pour définir la feuille de style CSS, la déclaration de l'attribut de style dans la feuille de style consiste en un attribut de style (non- les attributs d'étiquette, c'est-à-dire que les attributs de style ne peuvent pas être utilisés directement dans les balises comme attributs d'étiquette) et une valeur d'attribut de style et la valeur de l'attribut de style sont séparés par des points-virgules ; utilisez des points-virgules pour séparer les déclarations

Remarque : 1 . Si un attribut de style a plusieurs valeurs d'attribut de style, les valeurs d'attribut de style sont séparées par des virgules

2. En CSS, les attributs de style et leurs valeurs d'attribut de style ne sont pas sensibles à la casse, et les espaces ne le sont pas. ignoré
3. Si la valeur de l'attribut est composée de plusieurs mots, il est recommandé d'utiliser des guillemets simples

sélecteur :

sélecteur de balise : sélecteur de balise dans le HTML document Le nom de balise défini est le nom du sélecteur, et sa syntaxe est la suivante :

标签名{
    样式属性声明1;    ...}

Copier après la connexion

Objets d'action : Toutes les balises du document HTML dont les noms de balise sont les mêmes que le nom du sélecteur de balise seront affectées

sélecteur de classe :Le sélecteur de classe utilise la valeur d'attribut de la balise de classe dans la balise comme nom du sélecteur. Sa syntaxe est la suivante :

.class  标签属性的属性值{
    样式属性声明1;    ...}

Copier après la connexion

Objets d'action : Les objets Action. La valeur de l'attribut class tag est la même que celle du sélecteur de classe. Toutes les balises sont affectées. Remarque : l'attribut class tag ne peut pas commencer par un nombre

sélecteur d'identifiant : Le sélecteur d'identifiant utilise la valeur de l'attribut. de l'attribut id tag dans la balise comme nom du sélecteur. Sa syntaxe est la suivante :

#id 标签属性的属性值{
    样式属性声明1;    ...}

Copier après la connexion

Objets concernés : Seules les balises dont la valeur d'attribut est la même que celle après le sélecteur id # sont affectées. Remarque : La valeur de l'attribut id tag ne peut pas commencer par un nombre ; la valeur de l'attribut id tag doit être unique dans le document HTML et la valeur de l'attribut class tag n'a pas besoin d'être unique

Sélecteur descendant :

语法：父代选择器1 子父代选择器2 子父代选择器3...子代选择器{
        样式属性声 明1;        ...
    }

Copier après la connexion

Remarque : Séparez les sélecteurs par des espaces

Sélecteurs de groupe : Si les styles partiels dans plusieurs feuilles de style CSS d'un document HTML sont de même, vous pouvez définir une sélection de groupe. Le sélecteur est extrait pour simplifier le code de style CSS. Le nom du sélecteur de ce type de sélecteur est constitué de plusieurs sélecteurs, séparés par des virgules. La syntaxe est la suivante :

<. 🎜>

选择器1,选择器2,选择器3...{
    样式属性声明;    ...}

Copier après la connexion

Sélecteur de caractères génériques :

Le sélecteur de caractères génériques est équivalent à un sélecteur de groupe qui répertorie toutes les balises du document HTML. Sa syntaxe est la suivante :

Comment utiliser les styles CSS <. 🎜>

*{
    样式属性声明1;    ...}

Copier après la connexion

pour insérer des styles CSS dans HTML Il existe trois manières : feuille de style externe, feuille de style interne, style en ligne

Feuille de style externe :

Lorsque les règles de style de certaines balises dans plusieurs documents HTML sont les mêmes, afin de réaliser la réutilisation de ces feuilles de style, et en même temps, afin de faciliter la gestion des feuilles de style, le style CSS sera écrit dans le fichier de style css, et la balise de lien sera utilisée pour introduire le fichier css dans le document HTML
Supplémentaire : La balise link est également utilisée pour définir la taille de l'en-tête du document HTML Icône, structure syntaxique : < link rel="shortcut icon" type="image/x- icon" href="image path" />
Feuille de style interne :

Quand un Les styles dans les documents HTML ne sont pas courants dans d'autres documents HTML, mais les styles de plusieurs balises dans celui-ci Les documents HTML sont les mêmes. Afin de réutiliser ces règles de style et de faciliter la gestion des règles de style, vous devez convertir les styles CSS écrits directement dans la balise de style du document HTML

Style en ligne. :

Lorsqu'un style de balise dans un document HTML est différent des autres styles de balise ou que le style de balise dans le document est différent de celui du parent Lorsque les styles de balise ne sont pas uniformes, le style CSS est écrit dans la valeur d'attribut du style attribut de balise d'une certaine balise dans le document HTML

Priorité de style CSS

Priorité du sélecteur : <🎜 > sélecteur d'identifiant > sélecteur d'étiquette > ne pas tenir compte de l'ordre des sélecteurs

Priorité de la méthode d'insertion des styles : Si CSS est inséré comme d'habitude En termes d'ordre des styles (c'est-à-dire, utilisez d'abord le lien pour insérer la feuille de style externe, puis utilisez la balise de style pour insérer la feuille de style interne, et enfin insérez le style en ligne dans l'attribut de balise de style), la priorité est le style en ligne > la feuille de style interne > la feuille de style externe

常用CSS样式属性

边框样式属性
border-width属性：用于为元素的所有边框设置宽度或单独的为各边边框设置宽度
注意：如果不设置border-style属性或将其设置为none或hidden属性值，则border-width属性不会起作用，这时边框宽度实际上会重置为0
border-style属性：用于设置元素所有边框的样式，或者单独为各边设置边框样式，该属性有多个值（none默认值，定义无边框；hidden与none相同；dotted定义点状边框；dashed定义虚线；solid定义实线）
注意：只有当值不为none或hidden时才能出现
border-color属性：用于设置一个元素所有边框的颜色或为四个边框分别设置不同的颜色
注意：把border-style属性声明到border-color属性之前，元素需先获得边框再改变其颜色
边框简写属性：
注意：1.把边框的宽度，样式和颜色设置到一个声明中，需要按照宽度，样式，颜色的顺序进行设置，允许不设置其中某个值
2.使用border设置边框属性时，border-width，border-style，border-color的值只能取一种

border:2px solid greenyellow;border-bottom:2px solid orange;

Copier après la connexion

轮廓线样式属性：轮廓线是在标签边框边缘绘制一条线，该线不会占据空间，也不一定是矩形，主要起到突出标签的作用
outline-color样式属性：设置轮廓线的颜色，使用该样式属性时必须设定outline-style样式属性的属性值不能为none，否则看不到效果
outlin-style样式属性：设置轮廓线的样式，该属性有多个值（none默认值，定义无轮廓；dotted定义点状轮廓；dashed定义虚线轮廓；solid定义实线轮廓）
outline-width样式属性：设置轮廓线的宽度，使用该样式属性时必须设定outline-style样式属性的属性值不能为none，否则看不到效果（如果outline-style为none，宽度实际上会重置为0）
outlilne样式属性：用于在一个声明中设置所有的轮廓线样式属性（即颜色，样式，宽度），且该样式属性设置属性值时不需要设置所有轮廓线样式属性所对应的属性值，但需按照outline-color，outline-style，outline-width的顺序进行排列，中间用空格隔开

内容溢出样式属性：
overflow样式属性：当标签中的内容溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：visible默认值，所溢出内容不会被修剪，会呈现在元素框之外；scroll所溢出内容会被修剪，但浏览器会显示滚动条以便查看其余的内容；auto如果所溢出内容被修剪，浏览器会显示滚动条以便查看其余的内容
overflow-x样式属性：当标签中的内容x方向溢出标签时，用于设定如何处理溢出的内容
overflow-y样式属性：当标签中的内容y方向溢出标签时，用于设定如何处理溢出的内容

背景样式
background-color样式属性：设置标签背景颜色，该样式属性设置的背景颜色会填充背景的内容，内边距和边框区域，扩展到标签边框的外边界，但不包括外边距
background-image样式属性：设置标签背景图片，该样式属性有多个属性值：url（’URL’）指向图片的路径；none默认值，不显示背景图片
background-repeat样式属性：设置标签背景图片重复模式，该样式属性有多个属性值：repeat默认值，背景图片将在水平和垂直方向重复；repeat-x背景图片将在水平方向重复；repeat-y背景图片将在垂直方向重复；no-repeat背景图片将仅显示一次
background-attachment样式属性：设置标签背景图片是否随着
页面其余部分的滚动而滚动，该样式属性有多个属性值：scroll默认值，背景图片会随着页面其余部分的滚动而滚动；fixed当页面的其余部分滚动时，背景图片不会移动
background-position样式属性：随着标签背景图片的位置
background-size样式属性：设置单张背景图片的尺寸，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
background样式属性：用于在一个声明中设置所有的背景样式属性，且该样式属性设置属性值时不需要设置所有背景样式属性所对应的属性值且设置的属性值没有顺序要求

字体样式
font-style样式属性：设定字体的风格（normal默认值，显示标准的字体风格；italic显示斜体的字体风格）
font-variant样式属性：设定是否以小型大写字母的字体显示文本（normal默认值，显示标准的字体；small-caps显示小型大写字母的字体）
font-weight样式属性：设置字体的粗细（normal默认值，定义标准的字符；bold定义粗体字符；bolder定义更粗的字符；lighter定义更细的字符；值px直接设定）
font-size样式属性：设置字体大小
font-family样式属性：设置字体系列，使用逗号分割每种字体，如果浏览器不支持第一个字体则会尝试第二个字体；如果字体系列中的所有字体都不支持，则使用浏览器默认支持的字体
font样式属性：用于在一个声明中设置所有的字体样式属性，且该样式属性设置属性值时不需要设置所有字体样式属性所对应的属性值，但需要按照font-style、font-variant、font-weight、font-size/line-height和font-family顺序进行排列，中间用空格隔开。
注意：1.font样式属性至少要指定字体大小和字体系列；
2.没有font-color样式属性，如果要设置字体的颜色需要使用color样式属性；

文本样式
letter-spacing样式属性：设置字符间距，样式属性值可以为负，但这时字符之间更加拥挤
line-height样式属性：设置行间距（即行高），不能为负值
text-align样式属性：设置标签内文本的水平对齐方式，该属性有多个值：left把文本排到左边；right把文本排到右边；center把文本排到中间；justify实现两端对齐文本效果
text-transform样式属性：设置文本的大小写，该属性有多个值：none默认值，定义带有小写字母和大写字母的标准的文本；capitalize文本中的每个单词首字母大写；uppercase定义仅有大写字母；lowercase定义仅有小写字母
text-indent样式属性：设定文本块中首行文本的缩进，如果样式属性值为负值，则首行会被缩进到左边
text-decoration样式属性：设定文本装饰（比如是否有下划线及划线显示的位置），该属性有多个值：none默认值，定义标准的文本；underline定义文本下的一条线；overline定义文本上的一条线；line-through定义穿过文本的一条线

列表样式
list-style-type样式属性：设置列表项标记的类型
list-style-position样式属性：设置列表项标记相对于列表项内容的位置，该属性有多个值：inside列表项目标记放置在文本以内；outside默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外
list-style-image样式属性：将列表项标记设定为指定的图片
list-style样式属性：用于在一个声明中设置所有的所有的列表样式属性，且该样式属性设置属性值时不需要设置所有列表样式属性所对应的属性值，但需要按照list-style-type、list-style-position和list-style-image顺序进行排列，中间用空格隔开

超链接样式
CSS 伪类用于向某些选择器添加特殊效果，伪类使用语法：

选择器:伪类{
    样式属性声明1;    ...}

Copier après la connexion

CSS中常用的伪列如下：
：link 向未被访问的链接添加样式
：visited 向已被访问的链接添加样式
：hover 当鼠标悬浮在标签上时向标签添加样式
：active 向被激活的标签添加样式
：focus 向拥有键盘输入焦点的标签添加样式
注意：如果:link，:visited，:hover和:active一起使用，为了产生预期的效果，在 CSS 定义中需按照:link、:visited，:hover，:active的顺序进行

光标样式属性
cursor样式属性用于设定光标的显示形状，该属性有多个属性值，其中pointer使光标呈现为指示链接的指针