recherche

Maison  >  Article  >  interface Web  >  Les notes d'apprentissage CSS les plus concises

Les notes d'apprentissage CSS les plus concises

小云云
小云云original
2017-12-12 13:59:464422parcourir

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

  1. nom : nom, peut être répété, peut être le même

  2. class : nom de la classe, peut être répété ou en avoir plusieurs, utilisé pour CSS tel que

    ;

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

  4. title : titre, qui peut être ajouté dans ; la balise ; telle que ;

2. >

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

  1. Relation fraternelle : relation même père ;

  2. 3.Table de style CSS en cascade

Commentaire CSS : /
    Le contenu du commentaire est écrit ici pour que le programmeur puisse le voir. Il ne sera pas affiché sur la page.
  1. /;

    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

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

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

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

  3. Sélecteur : un outil pour sélectionner les éléments de la page ;

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

    6. Sélecteur

  2. Sélecteur de base :

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

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

    2. sélecteur d'identifiant : identifiant unique, ne peut pas apparaître à plusieurs reprises ; Format : #id name{backgound-image:url(1.jpg);>
    Remarque : le nom de l'identifiant est défini dans la balise id=" un" ; l'identifiant ne peut pas être ajouté avec le tableau, et plusieurs blocs ont le même style de contenu. Les noms d'identifiant des blocs doivent être différents ;
  • ;

    • La différence entre l'identifiant et la classe :
  • 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 ;

    • Sélecteur de pseudo-classe : principe séquentiel de LoVe HAte, vous pouvez sauter par-dessus, mais l'ordre ne peut pas être modifié respectivement, l'état du lien (lien ; ), statut visité (visité), statut actif (survol) et statut cliqué (actif

  • 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 texte et la couleur d'arrière-plan peuvent être ajoutés au les attributs et les images ; a{} et a:link{} obtiennent le même effet ;
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 composés :

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

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

      • les éléments sont affichés sur une seule ligne ;

      • ne peut pas définir directement la largeur et la hauteur

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

      • les éléments sont affichés sur une seule ligne ;

      • peuvent être définis. la largeur et la hauteur ;

    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

      • Affichage : Bloc : Bloquer convertit l'élément pour convertir la conversion d'élément Pour l'élément bloc

    • 8. Propriétés CSS

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

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

      font- poids : épaisseur de la police, gras (700-900), normal, vous pouvez écrire 100 -900 ;

      • style de police : police italique, italique, normale ;

      • font-family : police, Microsoft YaHei, HeiTi ;

      • Concaténation d'attributs : police : font-style font-weight font-size/line-height font-family ;
    • 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 ];

      • text-decoration : Ligne de texte [souligné, surligné, barré, aucune ligne d'annulation]

      • espacement des mots : distance entre les mots ;

      • espacement des lettres : distance entre les touches des lettres ;

      • alignement du texte : alignement horizontal [gauche, centre, droite par défaut ];

      • line-height : line height, la hauteur de la ligne où se trouve le texte
    • [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 :

    1. Largeur et hauteur de la bordure : border-width :1px;

    2. Couleur de la bordure : rouge ;

    3. Style de la bordure : solide/pointillé/tiret/aucun Aucun ;

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

    5. Écriture séparée :

    6. border border :

    7. padding padding : définir la distance entre le contenu et la boîte. La distance entre les bordures

    8. 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;
        }
    6. 单独设置属性法：
         border-top-color:red;
     border-top-style:solid;
     border-top-width:1px;
    1. 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

    1. Les bordures peuvent affecter la taille de la boîte

    2. Le remplissage affecte la taille de la boîte

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

    1. Le la boîte sous flux standard est centrée : margin:0px auto;

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

    3. Marge : 10px                                                                       10px haut et bas 20px gauche et droite

    4. Marge : 10px 20px 30px 10px en haut 20px à gauche 30px en bas

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


    • Remarque :

      • Attribution d'écriture conjointe :

      • Remplissage : 10px ; 10px de haut en bas environ 10px 20px
    1. Remplissage : 10px 20px 30px ; Haut 10px Gauche et droite 20px Bas 30px

    2. Rembourrage : 10px 20px 30px 40px ; haut, droite, bas, gauche

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

    4. et les marges s'effondrent (un problème difficile. Étapes de la solution :
    1. rembourrage intérieur). margins : Définissez la distance entre le contenu et la bordure de la boîte

    2. Définissez la bordure de la boîte parent

    3. Définissez débordement pour la boîte parent : caché ;

    1. 清除边距：

      1. 方法1：*{padding：0；margin：0；}

      2. 方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}

    9.CSS的三大特性

    1. 继承性：

    • 可继承性：color，text-align，text-indent，font-size，font-weight，font-family

    • 不可继承：text-decoration，border，display，margin，float，padding

    • 继承性发生的前提是标签之间属于一种嵌套关系

    • 文字颜色可以实现继承；文字大小可以实现继承；字体可以实现继承；与文字有关的属性都可以 实现继承

    • 行高可以实现继承

    • 特殊性：

    1. 不能继承父元素中的文字颜色（层叠掉了）

    2.         标题标签不能继承父元素中的文字大小

  • 重叠性：层叠性是指样式的覆盖

    • 样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。

    • 层叠性发生的前提： 样式冲突

  • 优先级：

    • 权重：行内引入（1000）>id(100)>class(10)>标签（1）>通用(0)

    • 把权重相加，值越大越有先

    • 权重一样，后面的样式起作用

    10.补充知识笔记

    1. 表单优化写法：用户名：

    2. 格式化列表图标：list-style: none

    3. 表单合并：border-collapse:collapse(设置表格边框合并，适用于表格）

    4. Bfc   “格式化上下文”

    5. overflow:

    • visible:默认值。内容不会被修剪，会呈现在元素框之外

    • hidden:内容会被修剪，并且其余内容是不可见的;当图片改变位置时带动父元素也改变位置，给父元素加此属性值可使父元素位置不变

    • scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

    • auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

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

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

    • 用法： Float:left| right

    • 特点：要浮动都浮动

    1. 设置了浮动的元素不占原来的位置（脱标）

    2. 可以让块级元素在一行上显示

    3. 浮动可以行内元素转化为行内块元素

    4. 模式转换的过程中，能用display就用display

  • 清除浮动：

    1. 定义：清除浮动不是删除浮动；清除浮动指的是清除浮动的影响

    2. 注意使用时机：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱；这种情况下进行清除浮动。

    3. 清除浮动方法：
       [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>

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

    • 静态定位：静态定位就是元素标准流的显示方式position:static;就是默认的定位

    • 绝对定位：相对于定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就会找到最初的包含层；不占有以前的位置；position：absolute；

    1. 当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。

    2. 当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。

    3. 当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。

    4. Après avoir défini le positionnement absolu de la boîte, la boîte n'occupe pas la position (hors étiquette)

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

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

    1. L'élément occupera la position d'origine après avoir défini le positionnement relatif

    2. Définissez le positionnement relatif en utilisant votre propre position comme référence pour définir la position

    3. Le positionnement relatif ne peut pas effectuer la conversion de mode des éléments

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

    1. Il y aura des problèmes hiérarchiques uniquement si le positionnement est défini

    2. 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é)

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

    1. Assurez-vous d'ouvrir le sprite avec la méthode open lorsque vous utilisez fw

    2. Lors de l'utilisation du sprite comme image d'arrière-plan, souvent avec Utilisez background-position avec

    3. pour mesurer les coordonnées des éléments dans la carte des sprites. Utilisez le sélecteur de rectangle

      4. ou utilisez la lettre de raccourci : k

      5. 15. Visibilité CSS

      débordement : caché Masquer la partie excédentaire

      • affichage : aucun                                                                                                                                               affichage :  

      • affichage : aucun masquer l'élément et occuper sa position d'origine

      • visibilité ; : caché ; Masquer l'élément et occuper sa position d'origine

      • 16. Centrer les images et le texte

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

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

       ; 17. Évitez les flux hors standard

    • 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

      Le flottement ne peut pas résoudre le positionnement

      • Utilisez margin-left/margin-right avec la valeur auto pour pousser automatiquement la boîte aux deux côtés extérieurs

      • 18. Spécifications d'inclusion des balises

    • 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

      Les notes de titre peuvent contenir d'autres balises

      • Éléments en ligne ne doit pas contenir d'autres balises

      • 19.Résumé du réglage de la largeur et de la hauteur

    • 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

      Après un positionnement fixe, l'élément peut définir la largeur et hauteur

      • 20. Mise à niveau vers CSS3

    • 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

      nième élément enfant : nth -child(n);n donne la valeur

      2. les nombres impairs sont des éléments enfants : nième-enfant(impair); ou (ntième-enfant(2n+1))

      3. Élément pair : nième-enfant(pair) ou (ntième-enfant(2n); ))

    4. Text-shadow : text-shadow : horizontal, vertical, ombre

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

    Déclaration：
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent：Méthode de mise en page flexible de l'attribut d'affichage en CSS3Article suivant：Méthode de mise en page flexible de l'attribut d'affichage en CSS3

    Articles Liés

    Voir plus