Cet article est suffisant pour CSS. Il s'agit d'une collection complète de bases CSS, qui peuvent être utilisées pour réviser rapidement les connaissances. C'est le premier choix pour les entretiens.

Language 2024-02-10 13:52:14 views: null

1 Introduction au CSS

CSS est l'abréviation de Feuilles de style en cascade.
CSS est également un langage de balisage, principalement utilisé pour définir le contenu du texte (police, taille, alignement, etc.), la forme de l'image (largeur et hauteur, style de bordure,
marges, etc.) dans les pages HTML, ainsi que la mise en page et apparence style d'affichage de la page. .

Pour plus de contenu CSS, veuillez consulter MDN : Cliquez pour envoyer

1.1 Spécifications de la syntaxe CSS

Tous les styles sont inclus dans

<head>
 <style>
 h4 {
      
      
 color: blue;
 font-size: 100px;
 }
 </style>
</head>

1.2 Trois fonctionnalités majeures de CSS

CSS a trois caractéristiques très importantes : la cascade, l'héritage et la priorité.

1.2.1 Empilabilité

Si le même sélecteur définit le même style, un style écrasera (en cascade) l'autre style en conflit. La cascade résout principalement
le problème des conflits de style.Principe
de la cascade :

  • Les conflits de styles suivent le principe de proximité : le style le plus proche de la structure sera exécuté.
  • Les styles n'entrent pas en conflit ou ne se chevauchent pas

1.2.2 Héritage

Héritage en CSS : les balises enfants hériteront de certains styles de la balise parent, tels que la couleur du texte et la taille de la police.
Une utilisation appropriée de l'héritage peut simplifier le code et réduire la complexité des styles CSS.
Les éléments enfants peuvent hériter des styles des éléments parents (les éléments text, font, line au début de ces éléments peuvent être hérités, ainsi que l'attribut color )

  • héritage de la hauteur des lignes
body {
 font:12px/1.5 Microsoft YaHei；
}
  1. La hauteur des rangées peut ou non suivre l'unité.
  2. Si l'élément enfant ne définit pas de hauteur de ligne, il héritera de la hauteur de ligne de l'élément parent, qui est de 1,5.
  3. À l'heure actuelle, la hauteur de ligne de l'élément enfant est : taille du texte de l'élément enfant actuel * 1,5
  4. hauteur de la ligne du corps 1,5 Le plus grand avantage de cette façon d'écrire est que les sous-éléments à l'intérieur peuvent ajuster automatiquement la hauteur de la ligne en fonction de leur propre taille de texte.

1.2.3 Priorité

Lorsque plusieurs sélecteurs sont spécifiés pour le même élément, la priorité sera générée.
Si les sélecteurs sont identiques, une mise en cascade sera effectuée. Si les sélecteurs sont différents, alors les sélecteurs seront exécutés en fonction du poids du sélecteur.
Insérer la description de l'image ici

  1. Le poids est composé de 4 groupes de chiffres, mais il n'y aura pas de report.
  2. On comprend que le sélecteur de classe est toujours supérieur au sélecteur d'élément, le sélecteur d'identifiant est toujours supérieur au sélecteur de classe, et ainsi de suite...
  3. Le jugement de niveau s'effectue de gauche à droite. Si la valeur d'un certain chiffre est la même, la valeur du chiffre suivant est jugée.
  4. Un mnémonique simple : le caractère générique et le poids d'héritage sont 0, le sélecteur de balise est 1, le sélecteur de classe (pseudo-classe) est 10, le sélecteur d'identifiant est 100, la feuille de style en ligne est
    1000, !important est l'infini.
  5. Le poids hérité est 0. Si l'élément n'est pas directement sélectionné, quel que soit le poids de l'élément parent, l'élément enfant aura un poids de 0.

Chevauchement des poids : s'il s'agit d'un sélecteur composé, le poids se chevauchera et le poids devra être calculé.

  • div ul li ------> 0,0,0,3
  • .nav ul li ------> 0,0,1,2
  • a: survol -----—> 0,0,1,1
  • .nav a ------> 0,0,1,1

2 sélecteurs CSS

Les sélecteurs sont divisés en deux grandes catégories 基础选择器: et复合选择器

2.1 Sélecteurs de base

Le sélecteur de base est composé d'un seul sélecteur, comprenant : un sélecteur d'étiquette, un sélecteur de classe, un sélecteur d'identifiant et un sélecteur de caractère générique.

2.1.1 Sélecteur de balises

Le sélecteur de balises (sélecteur d'éléments) fait référence à l'utilisation de noms de balises HTML comme sélecteurs, à leur classification en fonction des noms de balises et à la spécification d'un
style CSS unifié pour un certain type de balises dans la page.

标签名{
 属性1: 属性值1; 
 属性2: 属性值2; 
 ...
}

Le sélecteur de balises peut sélectionner toutes les balises d'un certain type, telles que toutes <div>les balises et toutes <span>les balises.
Avantages : Il peut définir rapidement et uniformément des styles pour les étiquettes du même type sur la page.
Inconvénients : Vous ne pouvez pas concevoir de styles différenciés, vous pouvez uniquement sélectionner toutes les balises actuelles.

2.1.2 Sélecteur de classe

Si vous souhaitez sélectionner différemment différentes balises ou sélectionner une ou plusieurs balises individuellement, vous pouvez utiliser un sélecteur de classe. Le sélecteur de classe est représenté par l'attribut class en HTML. En CSS, le sélecteur de classe est affiché avec un point "." .

.类名 {
 属性1: 属性值1; 
 ...
}

Plusieurs noms de classe peuvent être écrits dans l'attribut de classe label et plusieurs noms de classe doivent être séparés par des espaces.

2.1.3 sélecteur d'identifiant

Le sélecteur d'identifiant peut spécifier un style spécifique pour les éléments HTML marqués d'un identifiant spécifique.
L'élément HTML utilise l'attribut id pour définir le sélecteur d'identifiant, et le sélecteur d'identifiant en CSS est défini avec "#".

#id名 {
 属性1: 属性值1; 
 ...
}

Remarque : L'attribut id ne peut apparaître qu'une seule fois dans chaque document HTML.

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

En CSS, le sélecteur de caractères génériques est défini par "*", ce qui signifie que tous les éléments (balises) de la page sont sélectionnés.

* {
 属性1: 属性值1; 
 ...
}

2.1.5 Résumé des sélecteurs de base

Insérer la description de l'image ici

2.2 Sélecteur composite

Les sélecteurs composés couramment utilisés comprennent : les sélecteurs descendants, les sous-sélecteurs, les sélecteurs d'union, les sélecteurs de pseudo-classe, etc.

2.2.1 Sélecteurs descendants

Le sélecteur descendant, également appelé sélecteur conteneur, peut sélectionner des éléments enfants au sein de l'élément parent. La façon de l'écrire est d'écrire l'étiquette extérieure au recto et l'étiquette intérieure au
dos, séparées par des espaces. Lorsque les balises sont imbriquées, la balise interne devient un descendant de la balise externe.

元素1 元素2 { 样式声明 }
  1. L'élément 1 et l'élément 2 sont séparés par un espace.
  2. L'élément 1 est le parent, l'élément 2 est l'enfant et l'élément 2 est finalement sélectionné.
  3. L'élément 2 peut être un fils, un petit-fils, etc., à condition qu'il soit un descendant de l'élément 1.
  4. L'élément 1 et l'élément 2 peuvent être n'importe quel sélecteur de base

2.2.2 Sous-sélecteur

Les sélecteurs d'éléments enfants (sélecteurs enfants) ne peuvent sélectionner que les éléments qui sont l'enfant le plus récent d'un élément. La compréhension simple est de choisir l’élément fils.

元素1 > 元素2 { 样式声明 }
  1. L'élément 1 et l'élément 2 sont séparés par un signe supérieur à.
  2. L'élément 1 est le parent, l'élément 2 est l'enfant et l'élément 2 est finalement sélectionné.
  3. L'élément 2 doit être un fils biologique, et ses petits-enfants et arrière-petits-enfants ne sont pas sous son contrôle. Il peut aussi être appelé sélecteur de fils biologiques.

2.2.3 Sélecteur d'union

Le sélecteur d'union est composé de sélecteurs reliés par des virgules anglaises (,). Toute forme de sélecteur peut être utilisée dans le cadre du sélecteur d'union.

元素1,元素2 { 样式声明 }

2.2.4 Sélecteur de pseudo-classe

Les sélecteurs de pseudo-classe sont utilisés pour ajouter des effets spéciaux à certains sélecteurs, comme l'ajout d'effets spéciaux aux liens ou la sélection du 1er ou du nième élément.
La plus grande caractéristique de l'écriture de sélecteurs de pseudo-classes est qu'ils sont exprimés par des deux-points (:), tels que :hover et :first-child.

2.2.4.1 Sélecteur de pseudo-classe de lien
  1. Pour garantir l'efficacité, veuillez déclarer : link-:visited-:hover-:active dans l'ordre de LVHA.
  2. Étant donné qu'un lien a un style par défaut dans le navigateur, nous devons spécifier un style distinct pour le lien dans le travail réel.
 /* a 是标签选择器 所有的链接 */ 
 a { 
 color: gray;
 }
 /* :hover 是链接伪类选择器 鼠标经过 */
 a:hover { 
 color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
 }
2.2.4.2 :sélecteur de pseudo-classe focus

Le sélecteur de pseudo-classe :focus est utilisé pour sélectionner l'élément de formulaire ciblé.
Le focus est le curseur, qui peut généralement <input>être obtenu par les éléments de formulaire, ce sélecteur est donc principalement destiné aux éléments de formulaire.

input:focus { 
 background-color:yellow;
}

2.2.5 Résumé des sélecteurs composés

Insérer la description de l'image ici

3 propriétés de police CSS

Les propriétés des polices CSS sont utilisées pour définir la famille de polices, la taille, l'épaisseur et le style de texte (comme l'italique).

3.1 Famille de polices

CSS utilise la propriété font-family pour définir la famille de polices du texte.

p { font-family:"微软雅黑";} 
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

Les polices les plus courantes : body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

3.2 Taille de la police

CSS utilise la propriété font-size pour définir la taille de la police.

p { 
 font-size: 20px; 
}

Différents navigateurs peuvent afficher différentes tailles de police par défaut. La taille du texte par défaut de Google Chrome est de 16 px.

3.3 Poids de la police

CSS utilise la propriété font-weight pour définir le poids des polices de texte.

p { 
 font-weight: bold;
}

Insérer la description de l'image ici

3.4 Style de texte

CSS utilise la propriété font-style pour styliser le texte.

p { 
 font-style: normal;
}

Insérer la description de l'image ici

3.5 Propriétés du composite de police

body { 
 font: font-style font-weight font-size/line-height font-family;
}

Lorsque vous utilisez l'attribut font, il doit être écrit dans l'ordre dans le format de syntaxe ci-dessus. L'ordre ne peut pas être modifié et chaque attribut est séparé par un espace.
Les attributs qui n'ont pas besoin d'être définis peuvent être omis (prenez la valeur par défaut value), mais font-size et font-family doivent être conservés., sinon l'attribut font n'aura aucun effet

3.6 Résumé des attributs de police

Insérer la description de l'image ici

4 attributs de texte

La propriété CSS Text définit l'apparence du texte, comme la couleur du texte, l'alignement du texte, la décoration du texte, l'indentation du texte, l'espacement des lignes, etc.

4.1 Couleur du texte

L'attribut color est utilisé pour définir la couleur du texte.

div { 
 color: red;
}

Insérer la description de l'image ici

4.2 Aligner le texte

L'attribut text-align est utilisé pour définir l'alignement horizontal du contenu du texte dans un élément.

div { 
 text-align: center;
}

Insérer la description de l'image ici

4.3 Texte de décoration

L'attribut text-decoration spécifie les décorations ajoutées au texte. Vous pouvez ajouter du soulignement, du barré, du surlignement, etc. au texte.

div { 
 text-decoration：underline；
}

Insérer la description de l'image ici

4.4 Retrait du texte

L'attribut text-indent est utilisé pour spécifier l'indentation de la première ligne de texte, généralement la première ligne d'un paragraphe.

div { 
 text-indent: 10px;
}

p { 
 text-indent: 2em;
}

em est une unité relative, qui est la taille d'un texte de l'élément actuel (font-size). Si l'élément actuel ne définit pas de taille, ce sera
une taille de texte de l'élément parent.

4.5 Espacement des lignes

La propriété line-height est utilisée pour définir la distance entre les lignes (hauteur de ligne). Vous pouvez contrôler la distance entre les lignes de texte.

p { 
 line-height: 26px;
}

4.6 Résumé des attributs de texte

Insérer la description de l'image ici

5 méthodes d'introduction CSS

Selon l'endroit où les styles CSS sont écrits (ou la manière dont ils sont introduits), les feuilles de style CSS peuvent être divisées en trois grandes catégories :

  1. Feuilles de style en ligne (en ligne)
  2. Feuille de style interne (embarquée)
  3. Feuille de style externe (liée)
引入外部样式表：
<link rel="stylesheet" href="css文件路径">

Insérer la description de l'image ici

6 modes d'affichage des éléments CSS

Il permet de mieux mettre en page la page Web. Le mode d'affichage des éléments est la manière dont les éléments (étiquettes) sont affichés. Par exemple, ils <div>occupent une ligne à part, et par exemple, plusieurs éléments peuvent être placés sur une seule ligne <span>.
Les éléments HTML sont généralement divisés en deux types : les éléments de bloc et les éléments en ligne.

6.1 Éléments de bloc

Les éléments de bloc courants incluent <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>etc., parmi lesquels <div>la balise est l'élément de bloc le plus typique.
Caractéristiques des éléments de niveau bloc :
① Occupent une ligne.
② La hauteur, la largeur, les marges et le remplissage peuvent tous être contrôlés.
③ La largeur par défaut est 100 % du conteneur (largeur parent).
④ Il s'agit d'un conteneur et d'une boîte, qui peuvent contenir des éléments de niveau ligne ou bloc.
Avis :

  • Les éléments de niveau bloc ne peuvent pas être utilisés dans des éléments de type texte.
  • <p>Les balises sont principalement utilisées pour stocker du texte, de sorte que <p>les éléments de niveau bloc ne peuvent pas être placés à l'intérieur, en particulier<div>
  • De la même manière, <h1>~<h6>etc. sont toutes des balises de niveau bloc de texte, et d'autres éléments de niveau bloc ne peuvent pas être placés à l'intérieur.

6.2 Éléments en ligne

Les éléments en ligne courants incluent <a>, <strong>, <b>, , <em>, <i>, <del>, <s>, <ins>, <u>etc. <span>Parmi eux,
<span>la balise est l'élément en ligne le plus typique. À certains endroits, les éléments en ligne sont également appelés éléments en ligne.
Caractéristiques des éléments en ligne :
① Les éléments en ligne adjacents sont sur une seule ligne et plusieurs peuvent être affichés sur une même ligne.
② Le réglage direct de la hauteur et de la largeur n'est pas valide.
③ La largeur par défaut est la largeur de son propre contenu.
④ Les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne.
Avis:

  • Aucun autre lien ne peut être placé à l'intérieur du lien
  • Les éléments de niveau bloc peuvent être placés dans des liens spéciaux <a>, mais il <a>est plus sûr de les convertir en mode de niveau bloc.

6.3 Éléments de bloc en ligne

Il existe plusieurs balises spéciales dans les éléments en ligne - <img />, <input />, <td>, qui présentent les caractéristiques à la fois des éléments de bloc et des éléments en ligne.
Certaines sources les appellent des éléments de bloc en ligne.
Caractéristiques des éléments de bloc en ligne :
① Sur la même ligne que les éléments en ligne adjacents (blocs en ligne), mais il y aura un espace vide entre eux. Une ligne peut afficher plusieurs éléments (caractéristiques des éléments en ligne).
② La largeur par défaut est la largeur de son propre contenu (caractéristiques des éléments en ligne).
③ La hauteur, la hauteur de ligne, les marges et le remplissage peuvent tous être contrôlés (caractéristiques des éléments au niveau du bloc).

6.4 Résumé des modes d'affichage des éléments

Insérer la description de l'image ici

6.5 Conversion du mode d'affichage des éléments

Dans des cas particuliers, une conversion de mode élément est requise. Compréhension simple : les éléments d'un mode ont besoin des caractéristiques d'un autre mode
, comme vouloir augmenter <a>la plage de déclenchement d'un lien.

  • Convertir en élément de bloc : display:block ;
  • Convertir en élément en ligne : display:inline;
  • Convertir en bloc en ligne : display : inline-block ;

7 arrière-plan CSS

Les propriétés d'arrière-plan peuvent définir la couleur d'arrière-plan, l'image d'arrière-plan, la mosaïque d'arrière-plan, la position de l'image d'arrière-plan, la fixation de l'image d'arrière-plan, etc.

7.1 Couleur de fond

La propriété background-color définit la couleur d'arrière-plan de l'élément.

background-color:颜色值;

Généralement, la valeur par défaut de la couleur d'arrière-plan d'un élément est transparente. Vous pouvez également spécifier manuellement la couleur d'arrière-plan comme étant transparente.

background-color:transparent;

7.2 Image d'arrière-plan

L'attribut background-image décrit l'image d'arrière-plan de l'élément. Dans le développement réel, il est courant d'utiliser des logos ou des petites images décoratives ou
des images d'arrière-plan surdimensionnées. L'avantage est qu'il est très facile de contrôler la position. (Les sprites sont également un scénario d'utilisation).

background-image : none | url (url)

Insérer la description de l'image ici
Remarque : N'oubliez pas d'ajouter l'url à l'adresse derrière l'image de fond, et n'ajoutez pas de guillemets au chemin à l'intérieur.

7.3 Carrelage d'arrière-plan

Si vous devez mosaïquer l'image d'arrière-plan sur la page HTML, vous pouvez utiliser l'attribut background-repeat.

background-repeat: repeat | no-repeat | repeat-x | repeat-y

Insérer la description de l'image ici

7.4 Emplacement de l'image d'arrière-plan

Utilisez la propriété background-position pour modifier la position de l'image en arrière-plan.

background-position: x y;

Insérer la description de l'image ici

  1. Le paramètre est un nom directionnel.
    Si les deux valeurs spécifiées sont toutes deux des noms directionnels, l'ordre des deux valeurs n'a rien à voir avec cela. Par exemple, en haut à gauche et en haut à gauche ont le même effet
    . Si un seul un nom directionnel est spécifié et l'autre valeur est omise, la deuxième valeur sera par défaut.
  2. Le paramètre est une unité exacte.
    Si la valeur du paramètre est une coordonnée exacte, la première doit être la coordonnée x et la seconde doit être la coordonnée y
    . Si une seule valeur est spécifiée, alors la valeur doit être la coordonnée x. coordonnée, et l’autre est centré verticalement par défaut.
  3. Le paramètre est une unité mixte
    Si les deux valeurs spécifiées sont un mélange d'unités précises et de noms azimutaux, la première valeur est la coordonnée x et la deuxième valeur est la coordonnée y.

7.5 Fixation de l'image d'arrière-plan (pièce jointe d'arrière-plan)

La propriété background-attachment définit si l'image d'arrière-plan est fixe ou défile avec le reste de la page.
background-attachment peut créer un effet de défilement de parallaxe plus tard.

background-attachment : scroll | fixed

Insérer la description de l'image ici

7.6 Méthode d'écriture composite en arrière-plan

Afin de simplifier le code de l’attribut background, nous pouvons fusionner ces attributs dans le même attribut background. Cela permet d'économiser la quantité de code.
Lors de l'utilisation d'attributs abrégés, il n'y a pas d'ordre d'écriture spécifique. L'ordre généralement convenu est le suivant :
arrière-plan : couleur d'arrière-plan adresse de l'image d'arrière-plan tuile d'arrière-plan défilement de l'image d'arrière-plan position de l'image d'arrière-plan ;

background: transparent url(image.jpg) repeat-y fixed top ;

7.7 Couleur de fond translucide

CSS3 fournit un effet de couleur d'arrière-plan translucide.

background: rgba(0, 0, 0, 0.3);
  1. Le dernier paramètre est la transparence alpha, la plage de valeurs est comprise entre 0 et 1
  2. Nous avons l'habitude d'omettre le 0 dans 0.3 et de l'écrire en arrière-plan : rgba(0, 0, 0, .3);
  3. Remarque : La translucidité de l'arrière-plan signifie que l'arrière-plan de la boîte est translucide et que le contenu à l'intérieur de la boîte n'est pas affecté.
  4. Les nouveaux attributs CSS3 ne sont pris en charge que par les navigateurs IE9+

7.8 Résumé du contexte

Insérer la description de l'image ici

Modèle 8 cases

Processus de mise en page Web :

  1. Préparez d’abord les éléments pertinents de la page Web, qui sont essentiellement des cases.
  2. Utilisez CSS pour définir le style de la boîte, puis placez-la à la position correspondante.
  3. Remplissez la boîte avec son contenu.

L’essence même de la mise en page d’une page Web est d’utiliser CSS pour placer des zones.
Le modèle dit de boîte : l'élément de mise en page dans la page HTML est considéré comme une boîte rectangulaire, qui est un conteneur contenant du contenu.
Le modèle de boîte CSS est essentiellement une boîte qui encapsule les éléments HTML environnants, notamment : la bordure, la marge, le remplissage et le contenu réel.
Insérer la description de l'image ici

8.1 Frontière

border peut définir la bordure d'un élément. La bordure se compose de trois parties : la largeur (épaisseur), le style et la couleur de la bordure.

border : border-width || border-style || border-color

Insérer la description de l'image ici
Le style de bordure border-style peut être défini sur les valeurs suivantes :

  • none : pas de bordure, c'est-à-dire ignorer la largeur de toutes les bordures (valeur par défaut)
  • solide : la bordure est une seule ligne continue (la plus couramment utilisée)
  • pointillé : la bordure est en pointillés
  • pointillé : la bordure est une ligne pointillée

Abréviation de la frontière :

border: 1px solid red; 没有顺序

Comment écrire des bordures séparées :

border-top: 1px solid red; /* 只设定上边框， 其余同理 */

8.1.1 Bordures fines des tableaux

La propriété border-collapse contrôle la façon dont le navigateur dessine les bordures du tableau. Il contrôle les bordures des cellules adjacentes.

border-collapse: collapse;
  • effondrement : le mot signifie fusionner
  • border-collapse : effondrement ; signifie que les frontières adjacentes fusionnent

La bordure ajoute un supplément à la taille réelle de la boîte. Il y a donc deux solutions :

  1. Lorsque vous mesurez la taille de la boîte, ne mesurez pas la bordure.
  2. Si la mesure inclut une bordure, vous devez soustraire la largeur de la bordure de la largeur/hauteur.

8.1.2 Bordure arrondie

En CSS3, un nouveau style de bordure arrondie est ajouté et l'attribut border-radius est utilisé pour définir les coins arrondis de la bordure extérieure d'un élément.

border-radius:length;
  • Les valeurs des paramètres peuvent être sous forme de nombres ou de pourcentages
  • S'il s'agit d'un carré et que vous souhaitez le définir sur un cercle, modifiez simplement la valeur à la moitié de la hauteur ou de la largeur, ou écrivez-la directement sous la forme 50 %
  • Cet attribut est un attribut abrégé qui peut être suivi de quatre valeurs, représentant respectivement le coin supérieur gauche, le coin supérieur droit, le coin inférieur droit et le coin inférieur gauche.
  • Écrivez séparément : bordure en haut à gauche, bordure en haut à droite, bordure en bas à droite et
    bordure en bas à gauche.
  • Compatibilité Prise en charge du navigateur IE9+, mais n'affectera pas la mise en page, vous pouvez l'utiliser en toute confiance.

8.2 Rembourrage

La propriété padding est utilisée pour définir le remplissage, qui correspond à la distance entre la bordure et le contenu.
Insérer la description de l'image ici
Insérer la description de l'image ici
Après avoir attribué la valeur de remplissage à la boîte, deux choses se produisent :

  1. Il y a une distance entre le contenu et la bordure, et un remplissage est ajouté.
  2. Le remplissage affecte la taille réelle de la boîte.

En d’autres termes, si la boîte a déjà une largeur et une hauteur, et que vous spécifiez alors une bordure intérieure à ce moment-là, la boîte sera agrandie.
Solution :
Si vous vous assurez que la taille de la boîte est cohérente avec le rendu, soustrayez simplement le remplissage supplémentaire de la largeur/hauteur.

8.3 Marges

La propriété margin est utilisée pour définir la marge, qui contrôle la distance entre la boîte et la boîte.
Insérer la description de l'image ici
L’abréviation de margin signifie exactement la même chose que padding.

Les marges peuvent centrer horizontalement les boîtes au niveau des blocs, mais deux conditions doivent être remplies :
① La boîte doit spécifier une largeur (width).
② Définissez les marges gauche et droite de la boîte sur automatique.

.header{ width:960px; margin:0 auto;}

Les méthodes d'écriture courantes comprennent les trois méthodes suivantes :

  • marge gauche : auto ; marge droite : auto ;
  • marge : voiture ;
  • marge : 0 automatique ;

Remarque : La méthode ci-dessus consiste à centrer horizontalement les éléments au niveau du bloc et à ajouter des éléments en ligne ou des éléments de bloc en ligne à leurs éléments parents text-align:center.

Lorsque vous utilisez margin pour définir des marges verticales pour des éléments de bloc, une fusion des marges peut se produire.
Il existe deux situations principales :

  1. Fusion des marges verticales des éléments de bloc adjacents
  2. Effondrement des marges verticales sur les éléments de bloc imbriqués

8.3.1 Fusion des marges verticales des éléments de bloc adjacents

Lorsque deux éléments de bloc adjacents (frères et sœurs) se rencontrent, si l'élément supérieur a une marge inférieure inférieure et l'élément inférieur une
marge supérieure supérieure, alors l'espacement vertical entre eux n'est pas une marge inférieure. La somme des marges supérieures. Le phénomène consistant à prendre la plus grande des deux valeurs
est appelé la fusion des marges verticales des éléments de blocs adjacents.
Solution :
essayez d’ajouter une valeur de marge à une seule case.
Insérer la description de l'image ici

8.3.2 Effondrement des marges verticales sur les éléments de blocs imbriqués

Pour deux éléments de bloc avec une relation imbriquée (relation parent-enfant), l'élément parent a une marge supérieure et l'élément enfant a également une marge supérieure. À ce moment, l'élément parent s'effondrera avec une valeur de marge plus grande.
Solution :
① Vous pouvez définir une bordure supérieure pour l'élément parent.
② Vous pouvez définir un remplissage supérieur pour l'élément parent.
③ Vous pouvez ajouter overflow:hidden à l'élément parent.
④ Il existe d'autres méthodes, telles que les boîtes flottantes, fixes et positionnées de manière absolue, qui n'auront pas de problèmes d'effondrement.
Insérer la description de l'image ici

8.4 Marges internes et externes claires

De nombreux éléments de page Web ont des marges internes et externes par défaut, et les valeurs par défaut sont incohérentes d'un navigateur à l'autre. Par conséquent, avant la mise en page, nous devons d’abord effacer
les marges intérieures et extérieures des éléments de la page Web.

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }

Remarque : Afin de garantir la compatibilité, les éléments en ligne doivent uniquement définir des marges intérieures et extérieures gauche et droite, et non des marges intérieures et extérieures supérieures et inférieures. Mais la conversion en éléments de bloc au niveau bloc et en ligne
fonctionne très bien

9 ombres

9.1 Ombre de boîte

L'ombre de la boîte est une nouveauté dans CSS3 et vous pouvez utiliser la propriété box-shadow pour ajouter une ombre à la boîte.

box-shadow: h-shadow v-shadow blur spread color inset;

Insérer la description de l'image ici
Avis:

  1. La valeur par défaut est l'ombre extérieure (début), mais vous ne pouvez pas écrire ce mot, sinon l'ombre ne sera pas valide.
  2. Les ombres des boîtes ne prennent pas de place et n’affecteront pas les autres dispositions des boîtes.

9.2 Ombre du texte

En CSS3, vous pouvez appliquer une ombre au texte en utilisant la propriété text-shadow

text-shadow: h-shadow v-shadow blur color;

Insérer la description de l'image ici

10 méthodes de mise en page

CSS propose trois méthodes de mise en page traditionnelles (en termes simples, comment les boîtes sont disposées) : flux normal (flux standard), flottant et positionnement.

10.1 Flux standard (flux ordinaire/flux de documents)

Ce qu'on appelle le flux standard : les étiquettes sont disposées d'une manière par défaut prescrite. Le flux standard est la méthode de mise en page la plus basique.

  1. Les éléments de niveau bloc occuperont leur propre rangée, disposées de haut en bas.
    Éléments couramment utilisés : div, hr, p, h1~h6, ul, ol, dl, form, table
  2. Les éléments en ligne seront disposés dans l'ordre de gauche à droite et s'enrouleront automatiquement lorsque vous toucherez le bord de l'élément parent.
    Éléments communs : span, a, i, em, etc.

10.2 Flotteur

La propriété float est utilisée pour créer une boîte flottante, en la déplaçant de côté jusqu'à ce que le bord gauche ou droit touche le bord du bloc conteneur ou une autre boîte flottante.

选择器 { float: 属性值; }

Insérer la description de l'image ici
Les éléments après l'ajout de flotteurs auront de nombreuses caractéristiques :

  1. Les éléments flottants sortiront du flux standard (hors standard)
  2. Les éléments flottants seront affichés sur une seule ligne et le haut de l'élément sera aligné
  3. Les éléments flottants auront les caractéristiques des éléments blocs en ligne.
    Insérer la description de l'image ici
    Insérer la description de l'image ici
    Remarque : Les éléments flottants sont proches les uns des autres (il n'y aura pas d'espace). Si la largeur parent ne peut pas accueillir ces boîtes flottantes, les boîtes supplémentaires
    seront alignées sur une autre ligne. .

Les éléments flottants auront des propriétés d'élément de bloc en ligne

  • N'importe quel élément peut être flottant. Quel que soit le mode d'origine de l'élément, l'ajout de float aura des caractéristiques similaires aux éléments de bloc en ligne.
  • Si la boîte au niveau du bloc n'a pas de largeur définie, la largeur par défaut est la même que celle du parent, mais après avoir ajouté un flottant, sa taille est déterminée en fonction du contenu.

Les éléments flottants sont souvent utilisés conjointement avec le parent du flux standard.Tout d'abord, l'élément parent du flux standard est utilisé pour organiser les positions supérieure et inférieure, puis les éléments enfants internes sont flottants pour organiser les positions gauche et droite.
Insérer la description de l'image ici

Points à noter concernant la mise en page flottante

  1. Les flotteurs correspondent aux boîtes parents des flux standard.
    Tout d'abord, utilisez l'élément parent du flux standard pour organiser les positions supérieure et inférieure, puis utilisez la disposition flottante des éléments enfants internes aux positions gauche et droite.
  2. Si un élément flotte, théoriquement les autres éléments frères devraient également flotter.
    Il y a plusieurs sous-boîtes dans une boîte. Si l'une des boîtes flotte, les autres frères doivent également flotter pour éviter des problèmes.
    La boîte flottante n'affectera que le flux standard derrière la boîte flottante, mais pas le flux standard devant elle.

10.2.1 Effacer le flotteur

Dans de nombreux cas, il n'est pas pratique de donner de la hauteur à la boîte parent, mais la boîte enfant flotte et n'occupe pas de position. Enfin, lorsque la hauteur de la boîte parent est 0, cela affectera
la boîte de flux standard ci-dessous.
Étant donné que l'élément flottant n'occupe plus la position du flux de documents d'origine, cela affectera la disposition des éléments suivants.

Essence de flotteur claire :

  • L'essence du nettoyage des flotteurs est l'impact du nettoyage des éléments flottants
  • Si la boîte parent elle-même a de la hauteur, il n'est pas nécessaire d'effacer le flotteur.
  • Après avoir effacé le flotteur, le parent détectera automatiquement la hauteur en fonction de la boîte enfant flottante. Si le parent a une hauteur, cela n'affectera pas le débit standard en dessous.
选择器{clear:属性值;}

Insérer la description de l'image ici
La stratégie pour effacer les flotteurs est la suivante : Fermer le flotteur

Méthode Clear Float :

  1. La méthode d'étiquetage supplémentaire, également connue sous le nom de méthode de partition, est une pratique recommandée par le W3C.
  2. Ajouter un attribut de débordement au parent
  3. Ajouter un pseudo-élément après au parent
  4. Ajouter un double pseudo-élément au parent
10.2.1.1 Méthode d'étiquetage supplémentaire

La méthode d'étiquetage supplémentaire, également connue sous le nom de méthode de partition, est une pratique recommandée par le W3C.
La méthode extra tag ajoute une balise vide à la fin de l’élément flottant. Par exemple <div style=”clear:both”></div>, ou d'autres balises
(telles que <br />etc.)
Inconvénients : Ajout de nombreuses balises dénuées de sens, mauvaise structure
Remarque : Il est obligatoire que cette nouvelle balise vide soit un élément de niveau bloc.

10.2.1.2 Ajouter un débordement au parent

Vous pouvez ajouter un attribut de débordement au parent et définir sa valeur d'attribut sur caché, automatique ou défilement.
Inconvénients : Impossible d'afficher les parties en débordement

10.2.1.3 : méthode du pseudo-élément après

La méthode :after est une version améliorée de la méthode de balise supplémentaire. Également ajouté à l'élément parent

.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
} 
.clearfix { /* IE6、7 专有 */ 
 *zoom: 1;
}

Inconvénients : prendre soin des versions inférieures des navigateurs

10.2.1.4 Flotteur clair à double pseudo-élément
.clearfix:before,.clearfix:after {
 content:"";
 display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
}

Inconvénients : prendre soin des versions inférieures des navigateurs

10.2.2 Résumé flottant clair

Insérer la description de l'image ici

10.2 Positionnement

Le positionnement permet à la boîte de se déplacer librement dans une boîte ou de fixer une certaine position sur l'écran, et il peut supprimer d'autres boîtes.
Positionnement : positionnez la boîte à une certaine position. Le positionnement consiste donc également à placer la boîte et à la déplacer selon la méthode de positionnement.

10.2.1 Composants de positionnement

Positionnement = mode de positionnement + décalage de bord.
Le mode de positionnement est utilisé pour spécifier comment un élément est positionné dans le document. Le décalage des bords détermine la position finale de l'élément.

10.2.1.1 Mode de positionnement

Le mode de positionnement détermine la méthode de positionnement de l'élément. Il est défini via l'attribut position du CSS. Sa valeur peut être divisée en quatre :
Insérer la description de l'image ici

10.2.1.2 Décalage des bords

Le décalage des bords se produit lorsque la boîte positionnée est déplacée vers sa position finale. Il y a 4 attributs : haut, bas, gauche et droite.
Insérer la description de l'image ici

10.2.2 Positionnement statique statique

Le positionnement statique est la méthode de positionnement par défaut des éléments et n'a aucune signification de positionnement.

选择器 { position: static; }

Le positionnement statique place les positions en fonction des caractéristiques de flux standard. Il n'a pas de décalage de bord. Le positionnement statique est rarement utilisé dans la mise en page.

10.2.3 Positionnement relatif relatif

Le positionnement relatif signifie que lorsqu'un élément se déplace, il se déplace par rapport à sa position d'origine.

选择器 { position: relative; }

Caractéristiques du positionnement relatif :

  1. Il se déplace par rapport à sa position d'origine (lors du déplacement de la position, le point de référence est sa position d'origine).
  2. La position d'origine dans le flux standard continue d'être occupée et les cases suivantes la traitent toujours comme un flux standard.

Par conséquent, le positionnement relatif n’est pas hors norme. Son application la plus typique est le positionnement absolu. . .

10.2.4 Positionnement absolu absolu

Le positionnement absolu signifie que lorsqu'un élément se déplace, il se fait par rapport à ses éléments ancêtres.

选择器 { position: absolute; }

Caractéristiques du positionnement absolu :

  1. S'il n'y a pas d'élément ancêtre ou si l'élément ancêtre n'est pas positionné, le positionnement du navigateur prévaudra (Document document).
  2. Si l'élément ancêtre a un positionnement (positionnement relatif, absolu, fixe), la position sera déplacée en utilisant l'élément ancêtre positionné le plus proche comme point de référence.
  3. Le positionnement absolu n'occupe plus sa position d'origine. (Hors standard)
    Le positionnement absolu est donc hors standard.

Si l'enfant est en position absolue, le parent doit utiliser le positionnement relatif.
① L'enfant est en position absolue et n'occupera pas de position. Il peut être placé n'importe où dans la case parent sans affecter les autres cases frères et sœurs.
② La zone parent doit être positionnée de manière à empêcher l'affichage de la zone enfant dans la zone parent.
③ Lorsque la boîte parent est disposée, elle doit occuper une position, de sorte que le parent ne peut être positionné que de manière relative.

10.2.5 Positionnement fixe fixe

Le positionnement fixe est l'endroit où un élément est fixe dans la zone visible du navigateur. Principaux scénarios d'utilisation : La position de l'élément ne changera pas lors du défilement de la page du navigateur.

选择器 { position: fixed; }

Caractéristiques du positionnement fixe :

  1. Déplacez les éléments en utilisant la fenêtre du navigateur comme point de référence. Cela n'a rien à voir avec l'élément parent et ne défile pas avec la barre de défilement.
  2. Le positionnement fixe n'occupe plus la position d'origine.

Le positionnement fixe est également hors étiquette. En fait, le positionnement fixe peut également être considéré comme un type particulier de positionnement absolu.

10.2.5 Positionnement collant

Le positionnement collant peut être considéré comme un hybride de positionnement relatif et de positionnement fixe.

选择器 { position: sticky; top: 10px; }

Caractéristiques du positionnement collant :

  1. Déplacer les éléments en utilisant la fenêtre visuelle du navigateur comme point de référence (fonction de positionnement fixe)
  2. Le positionnement collant occupe la position d'origine (caractéristiques de positionnement relatives)
  3. L'un des éléments haut, gauche, droite et bas doit être ajouté pour être valide.

Utilisé conjointement avec le défilement des pages. Mauvaise compatibilité et non pris en charge par IE.

10.2.6 Résumé du positionnement

Mode de positionnement Est-ce hors norme ? déplacer un lieu
positionnement statique statique Non Le décalage de bord ne peut pas être utilisé
positionnement relatif relatif Non (occuper le poste) Se déplacer par rapport à sa propre position
se déplacer
positionnement absolu Oui (n'occupe pas de poste) Parent positionné
positionnement fixe fixe Oui (n'occupe pas de poste) Zone visible du navigateur
positionnement collant Non (occuper le poste) Zone visible du navigateur

10.2.7 Positionnement du z-index de l'ordre d'empilement

Lors de l'utilisation de la disposition de positionnement, les cases peuvent se chevaucher. À ce stade, vous pouvez utiliser l'index z pour contrôler l'ordre des cases (axe z)

选择器 { z-index: 1; }
  • La valeur peut être un entier positif, un entier négatif ou 0. La valeur par défaut est auto. Plus la valeur est grande, plus la case est haute.
  • Si les valeurs des attributs sont les mêmes, l'ordre d'écriture est suivi, le dernier venant en premier.
  • Aucune unité ne peut être ajoutée après le numéro
  • Seules les cases positionnées ont l'attribut z-index

10.2.8 Extension du positionnement

10.2.8.1 Centrage d'une boîte en position absolue

Une boîte avec un positionnement absolu ne peut pas être centrée horizontalement via margin:0 auto, mais elle peut être centrée horizontalement et verticalement via les méthodes de calcul suivantes.
① gauche : 50 % ; : déplace le côté gauche de la boîte vers la position centrale horizontale de l'élément parent.
② margin-left: -100px; : Laissez la boîte se déplacer de la moitié de sa largeur vers la gauche.

10.2.8.2 Localisation des caractéristiques particulières

Le positionnement absolu et le positionnement fixe sont également similaires au flottement.

  1. Ajoutez un positionnement absolu ou fixe aux éléments en ligne et vous pouvez définir directement la hauteur et la largeur.
  2. Les éléments au niveau du bloc ajoutent un positionnement absolu ou fixe. Si aucune largeur ou hauteur n'est donnée, la taille par défaut est la taille du contenu.
10.2.8.3 Les boîtes hors AMM ne déclencheront pas l'effondrement des marges

Les éléments flottants et les éléments à position absolue (position fixe) ne déclencheront pas le problème de la fusion des marges.

10.2.8.4 Le positionnement absolu (positionnement fixe) appuiera complètement sur la boîte

L'élément flottant est différent. Il supprimera uniquement la zone de flux standard en dessous, mais il ne supprimera pas le texte (image) dans la zone de flux standard en dessous.
Cependant, le positionnement absolu (positionnement fixe) supprimera tout le contenu de l'élément standard. couler ci-dessous.
La raison pour laquelle le flottement ne supprime pas le texte est que le but du flottement est à l'origine de créer un effet d'habillage du texte. Le texte s'enroulera autour de l'élément flottant

10.3 Résumé de la mise en page de la page Web

Une page Web complète est présentée selon un flux, un flottement et un positionnement standard, chacun ayant sa propre utilisation spécialisée.

  1. Le flux standard
    permet de disposer les boîtes de haut en bas ou de gauche à droite. Les boîtes verticales au niveau des blocs sont affichées en utilisant une disposition de flux standard.
  2. Flottant
    permet d'afficher plusieurs éléments au niveau du bloc sur une seule ligne ou d'aligner les boîtes à gauche et à droite. Utilisez la disposition flottante pour afficher plusieurs boîtes au niveau du bloc horizontalement.

  3. Positionnement La plus grande caractéristique du positionnement est le concept d'empilement, ce qui signifie que plusieurs cases peuvent être affichées les unes après les autres .
    Utilisez la disposition de positionnement si l'élément est libre de se déplacer dans une boîte .

11 Ordre d'écriture des propriétés CSS

Il est recommandé de suivre l'ordre suivant :

  1. Attributs de positionnement de la mise en page : affichage/position/flottant/clair/visibilité/débordement (il est recommandé d'écrire d'abord l'affichage, après tout, cela est lié au mode)
  2. Attributs personnels : largeur / hauteur / marge / remplissage / bordure / arrière-plan
  3. Propriétés du texte : couleur/police/text-decoration/text-align/vertical-align/white-space/break-word
  4. Autres propriétés (CSS3) : content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

12 Afficher et masquer des éléments

Semblables aux publicités des sites Web, elles disparaissent lorsque nous cliquons pour les fermer, mais elles réapparaîtront lorsque nous actualiserons la page !
Essence : laisser un élément être masqué ou affiché sur la page.

  1. l'affichage est masqué mais ne conserve pas la position
  2. la visibilité est cachée mais conserve la position d'origine
  3. overflow affiche et masque le débordement mais ne gère que partiellement le débordement.

12.1 attribut d'affichage

L'attribut display est utilisé pour définir la manière dont un élément doit être affiché.

  • affichage : aucun ; masquer les objets
  • display: block ; en plus de convertir en éléments de niveau bloc, cela signifie également afficher des éléments.

Une fois l'affichage masqué, l'élément n'occupe plus sa position d'origine.

12.2 visibilité visibilité

L'attribut de visibilité est utilisé pour spécifier si un élément doit être visible ou masqué.

  • visibilité : visible ; l'élément est visible
  • visibilité:masqué;élément masqué

Une fois que la visibilité masque l'élément, il continue d'occuper sa position d'origine.
Si l'élément masqué ne veut pas sa position d'origine, utilisez visible : caché.
Si l'élément caché ne veut pas sa position d'origine, utilisez display : aucun (plus d'accent sur l'utilité)

12.3 débordement débordement

L'attribut overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément (au-delà de sa hauteur et de sa largeur spécifiées).
Insérer la description de l'image ici

13 astuces CSS avancées

13.1 Lutins

De nombreuses petites images d'arrière-plan sont souvent utilisées comme décorations dans une page Web. Lorsqu'il y a trop d'images dans la page Web, le serveur recevra et enverra fréquemment
des images de demande, provoquant une pression de demande excessive sur le serveur, ce qui réduira considérablement la vitesse de chargement. de la page.

Par conséquent, afin de réduire efficacement le nombre de fois où le serveur reçoit et envoie des requêtes et d'améliorer la vitesse de chargement de la page, la technologie CSS sprite (également connue sous le nom de CSS Sprites, CSS Sprite) a émergé
.

Principe de base : Intégrez quelques petites images d'arrière-plan de la page Web dans une seule grande image, afin que le serveur n'ait besoin que d'une seule requête.

Utilisation du noyau de sprite :

  1. La technologie Sprite est principalement utilisée pour les images d’arrière-plan. Il s'agit d'intégrer plusieurs petites images d'arrière-plan dans une grande image.
  2. Cette grande image est également appelée sprites ou sprites.
  3. Pour déplacer la position de l'image d'arrière-plan, vous pouvez utiliser background-position.
  4. La distance parcourue correspond aux coordonnées x et y de l'image cible. Notez que les coordonnées dans la page Web sont différentes
  5. Comme elle se déplace généralement vers le haut et vers la gauche, la valeur est négative.
  6. Lorsque vous utilisez des sprites, vous devez mesurer avec précision la taille et la position de chaque petite image d'arrière-plan.

13.2 Icônes de police

Scénarios d'utilisation des icônes de police : principalement utilisés pour afficher certaines petites icônes courantes et couramment utilisées dans les pages Web.
Les graphiques Sprite présentent de nombreux avantages, mais leurs inconvénients sont évidents.

  1. Le fichier image est encore relativement volumineux.
  2. L'image elle-même sera déformée lors d'un zoom avant et arrière.
  3. Il est très compliqué de remplacer l’image une fois créée.

À l’heure actuelle, une technologie a émergé pour résoudre très bien les problèmes ci-dessus, à savoir la police d’icônes.
Les icônes de polices peuvent fournir aux ingénieurs front-end un moyen pratique et efficace d'utiliser les icônes. Elles affichent des icônes, qui sont essentiellement des polices.

13.2.1 Avantages des icônes de police :

  • Légère : une police d’icône est plus petite qu’une série d’images. Une fois la police chargée, l'icône est rendue immédiatement, réduisant ainsi les requêtes du serveur.
  • Flexibilité : l'essence est en fait le texte, qui peut changer de couleur, générer des ombres, des effets de transparence, une rotation, etc. à volonté.
  • Compatibilité : prend en charge presque tous les navigateurs, n'hésitez pas à l'utiliser

Remarque : les icônes de police ne peuvent pas remplacer la technologie elfe, mais améliorent et optimisent uniquement certaines technologies d'icônes au travail.

13.2.2 Résumé

  1. Si vous rencontrez de petites icônes avec une structure et un style relativement simples, utilisez des icônes de police.
  2. Si vous rencontrez de petites images avec une structure et un style plus complexes, utilisez des sprites.

13.2.3 Site Web de téléchargement des icônes de police

Site de téléchargement recommandé :

  • police icomoon http://icomoon.io Index des recommandations ★★★★★
    Fondée en 2011, IcoMoon a lancé le premier générateur de polices d'icônes personnalisées, qui permet aux utilisateurs de sélectionner les icônes dont ils ont besoin et d'en faire
    une seule police. La police contient une grande variété de contenus et est très complète, le seul regret est que le serveur étranger ait une vitesse de réseau lente.
  • Bibliothèque de polices Alibaba iconfont http://www.iconfont.cn/ Index des recommandations ★★★★★
    Il s'agit d'une bibliothèque d'icônes de polices iconfont d'Alibaba M2UX, comprenant la bibliothèque d'icônes Taobao et la bibliothèque d'icônes Alimama. Vous pouvez utiliser l'IA
    pour créer des icônes et les télécharger pour la génération. Le fait est que c’est gratuit !

13.2.4 Introduction des icônes de police

  1. Placez le dossier des polices du package de téléchargement dans le répertoire racine de la page
    Insérer la description de l'image ici
  2. Déclarez globalement les polices dans les styles CSS : comprenez simplement comment introduire ces fichiers de polices dans notre page via CSS.
    Assurez-vous de faire attention au chemin du fichier de police.
@font-face {
 font-family: 'icomoon';
 src: url('fonts/icomoon.eot?7kkyc2');
 src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
 url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
 url('fonts/icomoon.woff?7kkyc2') format('woff'),
 url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
  1. Ajoutez de petites icônes dans les balises HTML.
    Insérer la description de l'image ici
  2. Définissez la police de l'étiquette.
span {
 font-family: "icomoon";
}

Remarque : Assurez-vous que cette police est cohérente avec la police dans @font-face ci-dessus.
Insérer la description de l'image ici

13.2.4.1 Format de fichier de police

Les formats de polices pris en charge par les différents navigateurs sont différents. La raison pour laquelle les icônes de polices sont compatibles est qu'elles contiennent des fichiers de polices pris en charge par les navigateurs grand public.

  1. La police .ttf au format TrueType (.ttf) est la police la plus courante pour Windows et Mac. Les navigateurs prenant en charge cette police incluent IE9+, Firefox3.5+,
    Chrome4+, Safari3+, Opera10+, iOS Mobile, Safari4.2+ ;
  2. Police woff au format Web Open Font Format (.woff), les navigateurs prenant en charge cette police incluent IE9+, Firefox3.5+, Chrome6+,
    Safari3.6+, Opera11.1+ ;
  3. La police Embedded Open Type (.eot) au format.eot est une police spéciale pour IE. Les navigateurs qui prennent en charge cette police sont IE4+ ;
  4. Format SVG (.svg). La police SVG est un format basé sur le rendu des polices SVG. Les navigateurs prenant en charge cette police incluent Chrome4+, Safari3.1+,
    Opera10.0+ et iOS Mobile Safari3.2+ ;

13.3 Triangle CSS

Les triangles sont courants dans les pages Web et peuvent être dessinés directement à l'aide de CSS. Il n'est pas nécessaire d'en faire des images ou des icônes de police.
Insérer la description de l'image ici

div {
 width: 0;
 height: 0;
 border-top: 10px solid pink;
 border-right: 10px solid red;
 border-bottom: 10px solid blue;
 border-left: 10px solid green;
}

13.4 Styles d'interface utilisateur CSS

Le soi-disant style d'interface consiste à modifier certains styles de fonctionnement des utilisateurs afin d'améliorer une meilleure expérience utilisateur.

  • Changer le style de souris de l'utilisateur
  • aperçu du formulaire
  • Empêcher le déplacement des champs de formulaire

13.4.1 Curseur de style souris

li {cursor: pointer; }

Définit ou récupère la forme du curseur définie par le système adoptée par le pointeur de la souris se déplaçant sur l'objet.
Insérer la description de l'image ici

13.4.2 Courbe de niveau

Après avoir ajouté le style outline: 0; ou outline: none; au formulaire, vous pouvez supprimer la bordure bleue par défaut.

input {outline: none; }

13.4.3 Empêcher le redimensionnement des champs de texte déplacés

Dans le développement actuel, le coin inférieur droit de notre champ de texte ne peut pas être déplacé.

textarea{ resize: none;}

13.5 Application des attributs d'alignement vertical

Scénarios d'utilisation de l'attribut CSS vertical-align : souvent utilisé pour définir l'alignement vertical des images ou des formulaires (éléments de bloc en ligne) et du texte.
Explication officielle : utilisé pour définir l'alignement vertical d'un élément, mais il n'est efficace que pour les éléments en ligne ou les éléments de bloc en ligne.

vertical-align : baseline | top | middle | bottom

Insérer la description de l'image ici
Insérer la description de l'image ici

13.5.1 Alignement des images, des formulaires et du texte

Les images et les formulaires sont tous des éléments de bloc en ligne, et l'alignement vertical par défaut est l'alignement de base.
À ce stade, vous pouvez définir l'attribut d'alignement vertical des éléments de bloc en ligne tels que les images et les formulaires au milieu pour aligner le texte et les images verticalement et au centre
.

13.5.2 Résoudre le problème de l'espace vide par défaut en bas de l'image

Bug : il y aura un espace blanc au bas de l'image car l'élément de bloc en ligne sera aligné sur la ligne de base du texte.
Il existe deux solutions principales :

  1. Ajoutez vertical-align:middle | top| bottom, etc. à l'image. (Il est recommandé d'utiliser)
  2. Convertissez l'image en un affichage d'éléments au niveau du bloc : block;

13.6 Affichage des ellipses de texte débordantes

13.6.1 Le débordement de texte sur une seule ligne affiche des ellipses

Trois conditions doivent être remplies

/*1. 先强制一行内显示文本*/
 white-space: nowrap; （ 默认 normal 自动换行）
 /*2. 超出的部分隐藏*/
 overflow: hidden;
 /*3. 文字用省略号替代超出的部分*/
 text-overflow: ellipsis;

13.6.2 Le débordement de texte multiligne affiche des ellipses

Le texte multiligne déborde et affiche des ellipses, ce qui présente des problèmes de compatibilité majeurs et convient aux navigateurs webKit ou aux terminaux mobiles (la plupart des terminaux mobiles sont dotés d'un noyau webkit
)

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

Je suppose que tu aimes

Origine blog.csdn.net/a2868221132/article/details/129462602
conseillé
Classement
du quotidien
Plus
2025-04-30(0)
2025-04-29(0)
2025-04-28(0)
2025-04-27(0)
2025-04-26(0)
2025-04-25(0)
2025-04-24(0)
2025-04-23(0)
2025-04-22(0)
2025-04-21(0)

Code World

© 2018 codetd.com