Les notes d'apprentissage CSS les plus concises-tutoriel CSS-php.cn

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.

1. Attributs communs

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 ;

2. >

Relation descendante : relation père-fils (y compris relation) ;

Relation fraternelle : relation même père ;
3.Table de style CSS en cascade

Commentaire CSS : /

/;
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
4.

Introduction en ligne : Comment introduire des styles dans les balises ;Format : Content;

Remarque : Le code la maintenabilité est extrêmement mauvaise et le code CSS et la structure html ne sont pas séparés ;La portée de l'influence se situe uniquement dans la balise actuelle ;

Introduction en ligne : ajouter Style CSS< dans l'en-tête de la page Web /style>;Remarque : la maintenabilité du code est relativement mauvaise, la séparation du code CSS et de la structure HTML n'est pas implémentée et la portée de l'influence est uniquement sur la page actuelle ;
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 ;

Accolades : écrivez le contenu du style à l'intérieur des accolades ;

Sélecteur de base :
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;};

Sélecteur de balise : ajouter du style à la balise spécifiée ; format : p{color:green ;};

Sélecteur de classe : choisissez de spécifier le style du sélecteur de classe : .class name{background:pink;};
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 ;

;
Faites attention au point précédent - l'ID doit être la capacité de déterminer de manière unique les nœuds DOM. Si vous utilisez le sélecteur d'ID tout au long de l'article, même si les deux styles de nœuds DOM sont exactement les mêmes, vous devez écrire le style de nœud deux fois. Si vous souhaitez le conserver plus tard, vous devez conserver le code aux deux endroits ! ! ! Augmente considérablement le coût de maintenance ;
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{};

list class : li:link{color:jaune;};li:visited{color:blue;} li:hover { color:red;} li:active{color:pin;};

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;
1. 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;
7.

Éléments de bloc : utilisés pour la composition, les structures typiques sont : p, p, li, h1, dt ;

L'élément s'affiche dans sa propre ligne (indépendamment de la largeur);
Vous pouvez définir la largeur et la hauteur;
Lors de l'imbrication d'un élément au niveau du bloc , si la largeur de l'élément enfant n'est pas définie, la largeur de l'élément enfant sera la largeur de l'élément parent

Éléments en ligne : utilisés pour ajouter des styles ; span, a, font, strong;

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) ;

;

Éléments de bloc en ligne : image, entrée

Relation de conversion : les éléments de bloc en ligne contiennent des éléments de bloc, et les éléments de bloc peuvent contenir des éléments en ligne ;

Display : Inline convertit l'élément en élément en ligne

Display : Inline-Block transforme l'élément en élément de bloc interne
8. Propriétés CSS

Propriétés liées à la police :

font-size : taille de la police, combien de pixels, px ;

Remarque : la concaténation des attributs de police doit inclure font-size et font -family (d'autres attributs peuvent être omis) ; 🎜>
Texte :
color : color;

text-indent : indent [l'unité est em ];

[Lorsque la hauteur de la ligne est égale à la hauteur de l'élément, le texte est centré verticalement];
Taille : C'est la taille de l'élément de bloc. La largeur et la hauteur ne peuvent pas être définies pour les éléments en ligne. il, vous devez le convertir;
largeur: largeur

hauteur: hauteur;

Liste des attributs ul, li : list-style-type peut être ajouté à ul mais n'a pas besoin d'être ajouté à li ;
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;

list -style-image:url(1.jpg)

Image

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 ;
Définissez si l'arrière-plan est fixe. background-attachment : Défilement (valeur par défaut) défilement fixe (image). fixe);
Écriture conjointe d'attribut : pas de limite de quantité ni limite de commande : background:url("") rouge no-peat 30px 40px;

line-height :

Modèle de boîte : utilisé pour la mise en page de la page Web, la largeur

attribut de bordure de boîte doit être défini :

Composants :

Largeur et hauteur de la bordure : border-width :1px;
Couleur de la bordure : rouge ;
Style de la bordure : solide/pointillé/tiret/aucun Aucun ;
Écriture conjointe d'attribut : bordure : 1px rouge uni ; Remarque : il n'y a aucune restriction d'ordre lors de l'écriture conjointe d'attribut, la couleur et la largeur de la bordure n'ont pas besoin d'être écrites
Écriture séparée :
border border :
padding padding : définir la distance entre le contenu et la boîte. La distance entre les bordures
marge : définir la distance entre les boîtes

     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;
        }

Copier après la connexion

6. 单独设置属性法：

Copier après la connexion

     border-top-color:red;
     border-top-style:solid;
     border-top-width:1px;

Copier après la connexion

Taille de la boîte :

Affecté par la taille de la boîte :
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

Calcul de la taille de la boîte : largeur = largeur du contenu + bordures gauche et droite + remplissage gauche et droit

Les bordures peuvent affecter la taille de la boîte
Le remplissage affecte la taille de la boîte
Mise en page de la zone de page dans le futur Implémentation, si la marge intérieure est défini pour la boîte, la valeur correspondante doit être soustraite de la largeur ou de la hauteur du contenu

marge : définir la marge entre les boîtes Distance

Centrage de la boîte :

Attribut écriture conjointe :

Le la boîte sous flux standard est centrée : margin:0px auto;
La boîte positionnée est centrée : prenez d'abord la moitié de la boîte parent, puis revenez à sa propre largeur La moitié de
Marge : 10px 10px haut et bas 20px gauche et droite
Marge : 10px 20px 30px 10px en haut 20px à gauche 30px en bas
Marge : 10px 20px 30px 40px en haut à droite en bas à gauche

 one{
       width: 100px;
      height:100px;
      border: solid red  1px;
     position: absolute;
     left: 50%;
     margin-left: -50px;
      }

Copier après la connexion

Remarque :

Attribution d'écriture conjointe :
Remplissage : 10px ; 10px de haut en bas environ 10px 20px

Remplissage : 10px 20px 30px ; Haut 10px Gauche et droite 20px Bas 30px
Rembourrage : 10px 20px 30px 40px ; haut, droite, bas, gauche
Lorsque deux cases sont affichées verticalement, les marges sont soumises à la valeur maximale définie (premier cas de fusion des marges ). Lorsque les cases sont affichées horizontalement, les marges se chevauchent
et les marges s'effondrent (un problème difficile. Étapes de la solution :

rembourrage intérieur). margins : Définissez la distance entre le contenu et la bordure de la boîte
Définissez la bordure de la boîte parent
Définissez débordement pour la boîte parent : caché ;

清除边距：

方法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;}

9.CSS的三大特性

继承性：

可继承性：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)
把权重相加，值越大越有先
权重一样，后面的样式起作用

10.补充知识笔记

表单优化写法：用户名：
格式化列表图标：list-style: none
表单合并：border-collapse:collapse(设置表格边框合并，适用于表格）
Bfc “格式化上下文”
overflow:

visible:默认值。内容不会被修剪，会呈现在元素框之外
hidden:内容会被修剪，并且其余内容是不可见的;当图片改变位置时带动父元素也改变位置，给父元素加此属性值可使父元素位置不变
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

11.标准流：块级元素独占一行显示；标准流的显示方式：元素默认的显示方式

12.浮动：浮动用来解决文字图片环绕问题；用来制作导航栏，网页布局

用法： 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>

Copier après la connexion

  [x]给父盒子设置overflow:hidden;**注意：如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动**

Copier après la connexion

     .content{
     width:500px；
     overflow:hidden;
     }

Copier après la connexion

  [x]使用伪元素清除浮动

Copier après la connexion

     .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>

Copier après la connexion

13.定位：方位：left、right、top、bottom

静态定位：静态定位就是元素标准流的显示方式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
Problème de niveau :

Il y aura des problèmes hiérarchiques uniquement si le positionnement est défini
Il existe des positionnements relatifs, absolus et autres dans les éléments frères dont la structure du document HTML est à l'arrière et qui est à la couche la plus externe (hiérarchie) Élevé)
Z- index : Définissez le niveau, la valeur est un nombre, tant qu'il y a un positionnement, le paramètre de positionnement sera utilisé

14. CSS Wizard Rabbit : Sélectionnez le document transparent

Le système de coordonnées dans le navigateur
La bonne direction du point est la direction positive, et la direction positive est vers la droite en dessous le point. Positif
Le sprite CSS est un moyen de traiter les images d'arrière-plan des pages Web ; la carte des sprites est également une sorte d'image d'arrière-plan
Utiliser. de la carte des sprites

Assurez-vous d'ouvrir le sprite avec la méthode open lorsque vous utilisez fw
Lors de l'utilisation du sprite comme image d'arrière-plan, souvent avec Utilisez background-position avec
pour mesurer les coordonnées des éléments dans la carte des sprites. Utilisez le sélecteur de rectangle

Chaque élément du bloc intégré a un vertical-align:baseline

vertical-align:middle vertical alignement ; vertical-align et inline-block correspondent mieux

Dans le processus de mise en page des pages Web, utilisez le flux standard si vous pouvez l'utiliser

Le flux standard ne peut pas résoudre le flottement

p peut contenir des balises sous n'importe quel flux standard

La balise p ne peut pas contenir de balises p et de titre ni de listes Balises

Après avoir flotté, l'élément peut définir la largeur et la hauteur. hauteur

Après un positionnement absolu, l'élément peut La largeur et la hauteur peuvent être définies

CSS3 et CSS2 : CSS est puissant et le code est concis

Sélecteur de pseudo-classe :

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

Résumé complet de connaissance de l'héritage des valeurs d'attribut en CSS
Explication détaillée des propriétés des paragraphes CSS

Un résumé de 20 techniques CSS avancées

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Les notes d'apprentissage CSS les plus concises

1. Attributs communs

2. >

Remarque : Le code la maintenabilité est extrêmement mauvaise et le code CSS et la structure html ne sont pas séparés ;La portée de l'influence se situe uniquement dans la balise actuelle ;

Sélecteur de balise : ajouter du style à la balise spécifiée ; format : p{color:green ;};

7.

9.CSS的三大特性

10.补充知识笔记

11.标准流：块级元素独占一行显示；标准流的显示方式：元素默认的显示方式

12.浮动：浮动用来解决文字图片环绕问题；用来制作导航栏，网页布局

13.定位：方位：left、right、top、bottom