CSS est un langage informatique utilisé pour exprimer des styles de fichiers tels que HTML (une application du Standard Generalized Markup Language) ou XML (un sous-ensemble du Standard Generalized Markup Language). CSS peut non seulement modifier statiquement les pages Web, mais peut également coopérer avec divers langages de script pour formater dynamiquement divers éléments des pages Web. CSS peut effectuer un contrôle précis au niveau des pixels sur la disposition des positions des éléments dans les pages Web, prend en charge presque tous les styles de taille de police et a la capacité de modifier les objets de page Web et les styles de modèle.
nom : nom, peut être répété, peut être le même
class : nom de la classe, peut être répété ou en avoir plusieurs, utilisé pour CSS tel que
;id : identifiant unique, non répétable, généralement utilisé en JavaScript ; les règles de dénomination sont les mêmes que celles des autres langages
title : titre, qui peut être ajouté dans ; la balise ; telle que 
;
Règles de grammaire CSS : tous les symboles doivent être saisis en utilisant la méthode de saisie anglaise, en minuscules, et les attributs doivent être écrits entre accolades. Chaque instruction d'attribut doit se terminer par. un point-virgule, et la valeur de l'attribut doit avoir une unité de pixel (px) : Attribut : valeur de l'attribut
Introduction en ligne : ajouter
Introduction externe : Créez un fichier xx.css en dehors de la page Web et utilisez ;Remarque : maintenabilité du code dans l'en-tête de la page Web Élevée, le code CSS est complètement séparé de la structure HTML, et la portée de l'impact est sur tout le Web pages qui introduisent des fichiers CSS dans l'ensemble du site ; >
Format de structure : sélecteur {attribut : valeur d'attribut ; attribut : valeur d'attribut ;...} ; :20px;};Sélecteur : un outil pour sélectionner les éléments de la page ;
Sélecteur universel : utilisé pour initialiser le style par défaut de la page web, écrit au début de la feuille de style ; format : *{padding:0;margin:0;};
Remarque : le nom de la classe est défini dans la balise, par exemple, class="one" ; Si les styles de contenu de plusieurs blocs sont les mêmes, alors donnez-leur simplement le même style ;
Classe de points de dessin : a:link{color:jaune;} a : visité le style {color:blue;} a:hover{color:red;} a:active{color:pin;} lors de l'obtention du focus a:focus{};
Remarque : les attributs de la série de texte, les couleurs d'arrière-plan et les images peuvent être ajoutés aux attributs ;
Sélecteur de groupe (sélecteur d'union, sélecteur multiple) : utilisé pour ajouter le même style à plusieurs éléments exemple : .one,#one,a,span{color :red;font- size:14px;} signifie que la classe un, #one, une balise, une balise span ont des attributs communs
Sélecteur descendant : ajouter des attributs aux éléments de sous-classe ; decoration:none;} signifie que le contenu modifié par la balise a du descendant de la classe un n'est pas souligné
Sélecteur d'élément enfant (sélecteur spécifié) : Ajouter des attributs au sous spécifié ; -element; exemple : #one>p{color:red;}; signifie ajouter des attributs au contenu reposant sur la balise p du fils du sélecteur d'identifiant un
Élément adjacent ; sélecteurs :
1. Deux sélecteurs frères et sœurs adjacents ajoutent des attributs. Ils n'ajoutent pas d'attributs à eux-mêmes, mais uniquement aux frères derrière eux. p{background:red;};
2.one~p{background:green} signifie ajouter des attributs à tous les éléments de balise p après le sélecteur, à condition qu'ils aient une classe parent ;
Sélecteur d'attribut :
1. Ajoutez des attributs aux éléments avec des attributs ; id;
Ajouter des attributs aux éléments avec des valeurs d'attribut spécifiées : img[src="b.jpg"]{background:red ;}Ajouter des attributs aux éléments avec b.jpg;
3. Ajoutez des attributs aux éléments commençant par le caractère spécifié : img[src^="b"]{background: red;}Ajoutez des attributs à tous les éléments commençant par b;
4. . Le sélecteur a des éléments se terminant par la valeur d'attribut spécifiée : img[src$="b"]{background:red;}Ajouter des attributs se terminant par b Ajouter des attributs à tous les éléments contenant b;
5. la valeur d'attribut spécifiée : img[src*="b"]{background:red;}Ajouter des attributs à tous les éléments contenant b;
Remarque : ne donnez pas de marges supérieure et inférieure ni de remplissage aux éléments en ligne, et les valeurs gauche et droite fonctionneront (généralement non utilisées) ;
Display : Inline convertit l'élément en élément en ligne
color : color;
largeur: largeur
list- style-type:aucun;
Supprimez les symboles, le carré, le cercle, le disque, le cercle plein, vous pouvez ajouter des images sans écrire list-style-type: none;border:1px solid red;Définissez la bordure pour ul dans son ensemble
list-style-position:outside;Positionnement de l'image de style : intérieur, extérieur
Fond :
couleur de fond ;
Image d'arrière-plan background-imageRemarque : assurez-vous de définir la largeur et la hauteur lors de la définition de l'image d'arrière-plan ;
Arrière-plan background-repeat : répéter (valeur par défaut) | pas de répétition (pas de carrelage) | répéter-x (carrelage horizontal) répéter-y (carrelage vertical)
position d'arrière-plan- position : Définissez des valeurs spécifiques : left| right| bottom| cneter ; lors de la définition de valeurs spécifiques, l'ordre n'est pas distingué lors de la définition de nombres spécifiques, la première valeur représente la direction horizontale et la deuxième valeur représente la direction verticale ; direction., définissez le format de paramètre de l'image d'arrière-plan avant sur background-image ;
p{
width:300px;
height:200px;
border-top:1px solid red;
border-left:1px solid red;
border-right:1px solid red;
border-bottom:1px solid red;
}6. 单独设置属性法：
border-top-color:red; border-top-style:solid; border-top-width:1px;
Si la boîte héritée se trouve dans la largeur de la boîte parent, la valeur de remplissage n'affectera pas la taille de la boîte
one{
width: 100px;
height:100px;
border: solid red 1px;
position: absolute;
left: 50%;
margin-left: -50px;
}
Remarque :
清除边距：
方法1：*{padding：0；margin：0；}
方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
继承性：
可继承性：color，text-align，text-indent，font-size，font-weight，font-family
不可继承：text-decoration，border，display，margin，float，padding
继承性发生的前提是标签之间属于一种嵌套关系
文字颜色可以实现继承；文字大小可以实现继承；字体可以实现继承；与文字有关的属性都可以 实现继承
行高可以实现继承
特殊性：
不能继承父元素中的文字颜色（层叠掉了）
重叠性：层叠性是指样式的覆盖
样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。
层叠性发生的前提： 样式冲突
优先级：
权重：行内引入（1000）>id(100)>class(10)>标签（1）>通用(0)
把权重相加，值越大越有先
权重一样，后面的样式起作用
表单优化写法：
格式化列表图标：list-style: none
表单合并：border-collapse:collapse(设置表格边框合并，适用于表格）
Bfc “格式化上下文”
overflow:
visible:默认值。内容不会被修剪，会呈现在元素框之外
hidden:内容会被修剪，并且其余内容是不可见的;当图片改变位置时带动父元素也改变位置，给父元素加此属性值可使父元素位置不变
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
用法： Float:left| right
特点：要浮动都浮动
设置了浮动的元素不占原来的位置（脱标）
可以让块级元素在一行上显示
浮动可以行内元素转化为行内块元素
模式转换的过程中，能用display就用display
清除浮动：
定义：清除浮动不是删除浮动；清除浮动指的是清除浮动的影响
注意使用时机：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱；这种情况下进行清除浮动。
清除浮动方法：
[x]注意：在要清除浮动的元素后面添加一个空块元素（,标签），在添加的空元素中加clear:both | left |right
.clearfix{
clrar:both;
}
<p class="content">
<p class="left"></p>
<p class="right"></p>
<p class="clearfix"></p>
</p>[x]给父盒子设置overflow:hidden;**注意：如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动**
.content{
width:500px；
overflow:hidden;
}[x]使用伪元素清除浮动
.clearfix:after{
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix
{
zoom:1;
}
<p class="content clearfix">
<p class="left"></p>
<p class="right"></p>
</p>静态定位：静态定位就是元素标准流的显示方式position:static;就是默认的定位
绝对定位：相对于定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就会找到最初的包含层；不占有以前的位置；position：absolute；
当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。
当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。
当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。
Après avoir défini le positionnement absolu de la boîte, la boîte n'occupe pas la position (hors étiquette)
Après avoir défini le positionnement absolu pour l'élément en ligne, l'élément est converti en élément Block en ligne
Remarque : Une fois l'élément défini sur un positionnement absolu, la position de l'élément peut être définie à volonté via le nom d'orientation spécifique
Positionnement relatif : par rapport à la position d'origine de l'élément, il occupera la position précédente :
L'élément occupera la position d'origine après avoir défini le positionnement relatif
Définissez le positionnement relatif en utilisant votre propre position comme référence pour définir la position
Le positionnement relatif ne peut pas effectuer la conversion de mode des éléments
L'enfant a un positionnement absolu (l'élément enfant est défini sur un positionnement absolu et l'élément parent est défini sur un positionnement relatif)
Positionnement fixe : par rapport à l'ensemble de la position stable ; Le positionnement fixe n'occupe pas la position (convertit les éléments en ligne en éléments de bloc en ligne position : fixe
Le premier élément enfant : premier-enfant
Le meilleur élément : dernier enfant
Text-shadow : text-shadow : horizontal, vertical, ombre
box-shaadow : box -shaadow : horizontal, vertical, ombre
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
