Bases du CSS
Premièrement, la définition du CSS
CSS: (feuilles de style en cascade) (feuilles de style en cascade) définissent le style des pages Web - la base des performances de la page, la mise en page de contrôle, le rendu des éléments de contrôle.
Deuxièmement, comment introduire une feuille de style CSS dans HTML
1. Feuille de style externe (pratique à réutiliser et à maintenir) Le
code css est un fichier séparé, référencé par un lien
2. Feuille de style interne (pas pratique pour une maintenance ultérieure)
Ajouter à l'intérieur3. Feuille de style en ligne
écrivez le code css directement dans la balise de début d'une balise avec l'attribut style
Troisièmement, la terminologie CSS
1. Règles
CSS Le code CSS est composé de plusieurs règles, chaque règle spécifie quels éléments utiliser quel style
Format d'écriture: sélecteur {bloc de déclaration} bloc de déclaration = déclaration + déclaration (composé de plusieurs déclarations) Par
exemple:
définir le style de h1 : La police est de 16 pixels et la couleur est rouge.
2. Sélecteurs CSS communs Les
sélecteurs déterminent les éléments auxquels s'appliquent les règles de style.
(1) Nom de la balise du sélecteur d'élément {bloc de déclaration} p {couleur: rouge;}
(2) Sélecteur de classe. Nom de classe {bloc de déclaration} .hh {color: blue;}
(3) id selector #id value { Bloc de déclaration} #bb {color: yellow;}
Dans le même document HTML, la valeur d'attribut id de l'élément est unique
(4) child selector parent element> child element div> p {color: red;}
(5) Élément enfant de l'élément parent du sélecteur descendant (un espace au milieu) div p {color: red;}
3. Attributs CSS courants
couleur couleur
alignement du texte alignement du contenu de l'élément
taille de la police taille de la
police poids de la police épaisseur du texte
couleur d'
arrière- plan couleur d' arrière-plan background-img image d'arrière-plan
4. Conflits de déclaration Si
plusieurs sélecteurs sélectionnent la même étiquette et ont le même nom d'attribut mais des valeurs d'attribut différentes, des conflits de déclaration se produiront. (Lorsqu'un conflit de déclaration se produit, le navigateur déclenche automatiquement le mécanisme en cascade)
5. Mécanisme en
cascade Processus en cascade:
(1) Priorité de comparaison: la priorité la plus basse est éliminée, la priorité la plus élevée l'emporte.
La priorité est liée à la source et à l'importance
(2) Plus de spécificité: celui avec une faible spécificité sera éliminé, celui avec une haute spécificité l'emportera.
La particularité de la déclaration dépend de la taille du champ d'application de la règle, plus la portée est grande, plus la particularité est petite et vice versa.
Sélecteur en ligne> Sélecteur d'id> Sélecteur de classe> Sélecteur d'élément> Sélecteur de caractères génériques Sélecteur
pseudo-en ligne> Sélecteur de classe Sélecteur d'élément Pseudo> Sélecteur d'élément
Règles spécifiques:
Lors de la comparaison de la particularité, 4 nombres (ABCD) seront générés pour chaque conflit afin de comparer la particularité.
Plus A est grand, plus la particularité est élevée. Si A est égal, comparez B. Plus B est grand, plus la particularité est élevée, et ainsi de suite
A: L'instruction est un sélecteur en ligne, alors elle vaut 1, sinon elle vaut 0.
B: Le nombre de sélecteurs d'identifiant
C: Le nombre de sélecteurs de classe, de pseudo-sélecteurs de classe et de sélecteurs d'attribut
D: Sélecteur d'élément, sélection de pseudo-élément Nombre d'appareils
Les sélecteurs combinés sont calculés séparément.
(3) Comparaison de l'ordre source: l'ordre source antérieur est éliminé, l'ordre source inférieur l'emporte.
Qui écrit plus tard, qui gagne
6. Les
éléments enfants d' héritage (héritent) ont automatiquement certaines propriétés css (la plupart des styles de texte) du parent,
background-color n'hérite pas et l'
héritage est transitif.
Scénarios applicables:
(1) Cette propriété peut être héritée (2) Cette propriété n'est pas Déclaration (définition)
Héritage obligatoire:
également appelé héritage explicite, qui fait référence à la définition de la valeur de la propriété CSS à hériter (background-color: inherit)
(afin d'hériter de propriétés qui ne peuvent pas être héritées et d'hériter de propriétés qui ont été déclarées)
FIN Le partage d'aujourd'hui est là, merci à tous