Wondershare EdrawMind
Mindmap-Galerie Sélecteurs pour HTML et CSS
- 9
Sélecteurs pour HTML et CSS
En HTML et CSS, les sélecteurs de base, les sélecteurs composés, les pseudo-sélecteurs, etc. sont tous des contenus importants. Cette carte divise ces contenus en détail pour vous faciliter la compréhension.
Bearbeitet um 2021-07-26 11:47:06
- Für Sie empfohlen
- Gliederung
Résumé des points de connaissances en matière de développement CSS, JS et HTML front-end
- 5
- 1
Sélecteur CSS
Introduire la feuille de style
1. Feuilles de style en ligne
2. Feuille de style interne
3. Feuilles de style externes
Sélecteur
sélecteur de base
1. Sélecteur universel *
2. Sélecteur d'élément h2
3. Sélecteur de classe .class
4.id sélecteur #id
sélecteur composé
1.Sélecteur d'intersection e#id ||
2. Union des sélecteurs e1,e2,e3
3. Sélecteur descendant e1 e2 e3
4. Sélecteur descendant e1>e2>e3
5. Sélecteur de frères et sœurs adjacents e1 e2
6. Sélecteur universel de frères et sœurs e1 ~ e2
Pseudo-sélecteur
Sélecteur de pseudo-éléments
1 : première ligne
2 : première lettre
3 ::avant;::après
4::sélection
Sélecteur de pseudo-classe
1. Sélecteur de pseudo-classe dynamique
1:lien ; (lien) lorsqu'il n'est pas consulté
2 : visité (lien) après avoir été visité ;
3 : survol ;
4 : activer lorsqu'il est activé (lorsque la souris est enfoncée)
5 : concentration Lorsque vous vous concentrez
2.Sélecteur de pseudo-classe UI
1 : activé ; désactivé
2 : vérifié
3 :obligatoire ;
4 : par défaut
5 : valide ; invalide
6 : à portée ; : hors de portée
7 :lecture seule; :lecture-écriture;
3. Sélecteur de pseudo-classe structurelle
1:sélecteur d'élément racine racine
2 : élément vide vide
3
:premier-enfant; :dernier-enfant; :enfant-seulement
:premier-de-type; :dernier-de-type; :uniquement-de-type;
4
:ntième-enfant(); :ntième-dernier-enfant()
:ntième-de-type(); :ntième-dernier-de-type()
4. Autres sélecteurs de pseudo-classes
1 : cible ; point d’ancrage de la page
2 : langue ;
3:not(selector) Sélecteur négatif
sélecteur d'attribut
1 [attr]
2 [attr="val"]
3 [attr^="val"]
4 [attr$="val"]
5 [attr*="val"]
6 [attr~="val"]
7 [attr|="val"]
CSS
expression des couleurs
RVB (RVBA)
HEXAMEN
HSL (HSLA)
arrière-plan
arrière-plan
couleur d'arrière-plan couleur d'arrière-plan
image d'arrière-plan image d'arrière-plan
Répétition du fond
pas de répétition
répéter-x
répéter
espace (ajuster l'espacement des images)
rond (redimensionner l'image)
position d'arrière-plan
(haut, gauche, droite, bas, centre) combinaison par paire
(x% y%)
(x et)
origine de l'arrière-plan
boîte de rembourrage
bordure-boîte
boîte de contenu
clip d'arrière-plan
boîte de rembourrage
bordure-boîte
boîte de contenu
taille de l'arrière-plan
automatique (taille originale)
x,y (largeur, hauteur)
x%,y% (pourcentage de l'élément parent)
couvercle (ajusté pour couvrir tout le récipient)
contenir (ajusté pour être entièrement affiché)
pièce jointe d'arrière-plan
local (parchemins avec contenu)
scroll (ne défile pas avec le contenu, mais défile avec la page)
fixe (taille fixe et incontrôlée)
modèle de boîte
marges
Le pourcentage est un pourcentage de la largeur du conteneur parent
rembourrage
marge
frontière
frontière frontière
largeur de la bordure
couleur de la bordure
style de bordure
frontière-raius
image de bordure image de bordure
bordure-image-source
bordure-image-tranche
bordure-image-largeur
bordure-image-début
répétition de l'image de bordure
boîte ombre
contour
couleur du contour, style, largeur
outline-offset (le décalage extérieur du contour par rapport à la bordure)
taille
largeur
hauteur
largeur minimale (hauteur)
largeur maximale (hauteur)
Scénario d'application ?
dimensionnement de la boîte
boîte de marge
bordure-boîte
boîte de rembourrage
boîte de contenu
débordement
débordement
auto
caché
faire défiler
visible (par défaut)
hériter
débordement-x, débordement-y
afficher
problème d'effondrement des marges
Effondrement vertical (effondrement des frontières)
Effondrement imbriqué
Emplacement
flotter
Plusieurs méthodes pour effacer les flotteurs :
Le principe du flottement
1. Une fois l'élément flottant, il se détachera du flux de documents et augmentera le niveau.
2. La position de l'élément après qu'il ait flotté est affectée par l'élément flottant précédent. Si l'élément précédent est flotté et que la position derrière lui est suffisante, il sera affiché sur la même ligne si la position derrière lui est insuffisante. L'élément sera compressé sur la ligne suivante pour être affiché.
3. Une fois l'élément flottant, si l'élément précédent n'est pas flottant, l'élément actuel flottera dans sa propre ligne.
4. Si un élément est poussé vers la ligne suivante après avoir été flottant, la position de l'élément actuel est affectée par l'élément précédent avec la même direction flottante.
Avis
1. Flotter entraînera l'effondrement de la hauteur de l'élément parent
2. Les éléments ont des "propriétés d'emballage" après avoir été flottants (similaires aux blocs en ligne.)
position
Les attributs
statique (par défaut, disposition normale)
relatif (positionnement relatif)
absolu (positionnement absolu)
fixe (positionnement fixe)
collant (positionnement collant)
Avis
1. Plus l'élément est positionné tard, plus le niveau (z-index) est élevé
2. Une fois l'élément positionné, il possède des "propriétés d'emballage" (similaires aux blocs en ligne.)
Effacer le flotteur : effacer
BFC (contexte de formatage au niveau du bloc)
1. Si les conditions suivantes sont remplies, un nouveau BFC sera automatiquement créé
l'attribut float n'est pas nul
L'attribut position n'est ni statique ni relatif
La valeur de l'attribut de débordement n'est pas visible
L'attribut d'affichage est flex, inline-flex, inline-block, table-cell ou table-caption
2.Réglementation BFC : effondrement vertical de la marge, effondrement imbriqué
Solution : placez le div dans un autre BFC
3. Méthodes pour accueillir des éléments flottants
1. Réglez également le flotteur pour le conteneur
2. Utilisez clear pour effacer les flotteurs
3. Créez un nouveau BFC pour l'élément extérieur
4. Utilisez BFC pour empêcher le retour à la ligne du texte
disposition multi-colonnes
column-count : spécifiez le nombre de colonnes
column-width : spécifiez la largeur de la colonne
Colonnes
espacement de colonnes : espacement des colonnes
longueur
normale
column-fill : comment le contenu est distribué entre les colonnes
équilibre (le contenu est réparti uniformément)
auto (le contenu est rempli dans l'ordre)
column-span : spécifie le nombre de colonnes que l'élément s'étend horizontalement
nombre
tous
column-rule-width : spécifiez la largeur entre les colonnes
coloum-rule-style : Spécifiez le style entre les colonnes
column-rule-color : spécifie la couleur entre les colonnes
règle de colonne
Cas : disposition d'un écoulement en cascade
Question d'entretien : plusieurs méthodes pour mettre en œuvre une mise en page multi-colonnes
flotter
position
colonne
Mise en page de la page Web Trinity
Disposition centrée
éléments en ligne
Centrage horizontal : élément parent text-align : center ;
Centré verticalement : hauteur de ligne : (hauteur) ;
éléments au niveau du bloc
Centrer horizontalement : marge : 0 auto ;
Centrer verticalement :
ÉTAPE 1 : position : absolue ;
ÉTAPE 2 : haut, bas (gauche, droite) : 0 ;
ÉTAPE 3 : marge : auto ;
disposition en une seule colonne
disposition sur deux colonnes
Disposition centrée sur deux colonnes à largeur fixe
La barre latérale a une largeur fixe et le contenu principal est adaptatif
Utiliser l'implémentation float
Utiliser le positionnement pour atteindre
disposition en trois colonnes
méthode flottante
méthode de positionnement absolu
Méthode de marge négative
disposition classique
Disposition à double aile volante
mise en page du Saint Graal
disposition du flux de cascade
Utilisation de marges négatives
Marges négatives pour les éléments statiques
Haut et gauche : déplacez l'élément lui-même vers le coin supérieur gauche
En bas et à droite : laissez les éléments suivants envahir par le bas ou la droite pour se couvrir
Marges négatives pour les éléments flottants
Identique à la direction flottante : l'élément se déplace de la distance correspondante dans la direction correspondante
À l'opposé de la direction flottante : l'élément lui-même ne bouge pas, et les éléments avant ou après l'élément se déplaceront d'une distance correspondante dans la direction de l'élément.
Application de marges négatives
Disposition à trois colonnes pour les listes
Disposition de la boîte flexible
affichage (défini sur boîte flexible)
flex ; (boîte flexible au niveau du bloc)
inline-flex (boîte flexible en ligne)
flex-wrap (spécifier l'enveloppement de l'élément)
wrap (spécifiez l'élément flexible à envelopper automatiquement)
nowrap (valeur par défaut, pas de retour à la ligne automatique)
wrap-reverse (les éléments flexibles s'enroulent automatiquement à l'envers)
flex-direction (spécifie la direction de disposition des éléments)
rangée (valeur par défaut, les éléments flexibles sont disposés horizontalement)
colonne (disposition verticale)
row-reverse (disposition horizontale inversée)
colonne inversée (disposition verticale inversée)
Peut être combiné en flex-flow
Alignement de la disposition de la flexbox
Deux notions importantes
Axe principal : précise l'ordre dans lequel les éléments élastiques sont disposés.
Axe vertical : détermine la direction dans laquelle les éléments de la deuxième ligne sont ajoutés après un saut de ligne.
Alignement
justifier-contenu (alignement sur l'axe principal)
flex-start (valeur par défaut, l'élément élastique démarre à proximité de l'axe principal)
flex-end (l'élément élastique est proche du bord d'extrémité de l'axe principal)
centre (l'élément flexible est centré sur l'axe principal)
espace entre (disposez chaque élément de manière égale, avec le premier élément proche du bord de départ de l'axe principal et le dernier élément proche du bord final de l'axe principal.)
espace autour (Tous les éléments flexibles sont disposés uniformément et l'espacement entre les éléments ne s'effondre pas.) (Disposez chaque élément uniformément, allouez le même espace autour de chaque élément)
espacement uniforme (Tous les éléments flexibles sont disposés uniformément et l'espacement entre les éléments est réduit.) (Chaque élément est disposé uniformément, avec un espacement égal entre chaque élément)
Alignement sur l'axe vertical
align-items (alignement de tous les éléments sur l'axe vertical)
flex-start (les éléments flexibles démarrent près de l'axe vertical)
flex-end (l'élément élastique est proche du bord d'extrémité de l'axe vertical)
centre (l'élément flexible est centré sur l'axe vertical)
ligne de base (les éléments flexibles sont alignés sur la ligne de base)
stretch (valeur par défaut, l'élément élastique s'étire pour occuper toute la taille de l'axe vertical)
align-self (alignement sur l'axe vertical d'un élément)
align-content (alignement d'éléments flexibles multilignes)
démarrage flexible
extrémité flexible
centre
l'espace entre
envergure
uniformément dans l'espace
ordre (ordre d'affichage)
élasticité
flex-grow (Définit la manière dont l'élément flex est agrandi.)
flex-shrink (définit la façon dont les éléments flexibles sont compressés)
base flexible (base flexible)
flex-basis définit la taille initiale (et non la largeur) occupée par l'élément flexible sur l'axe principal.
Si flex-basis, width et height sont définis en même temps, ces dernières seront automatiquement écrasées.
flex(0 1 automatique)
Caractéristiques des éléments flexibles
1. Les marges des deux éléments élastiques ne s'effondreront pas ou ne s'effondreront pas.
2. Il n'est pas possible de définir des éléments flottants sur des éléments flexibles (mais le positionnement peut être défini)
Disposition en grille (disposition en grille)
Terminologie de base
Ligne de la grille
Piste de grille
Cellule de grille
Zone de grille
affichage (défini comme conteneur de grille)
grille
grille en ligne
Définitions de lignes et de colonnes
colonnes-modèle-de-grille
fr (ex : 1fr 1fr 1fr ; 100px 50% 1fr)
lignes de modèle de grille
fr : Le fr ici est proportionnel à la hauteur du conteneur en grille. (S'il n'y a pas de hauteur, elle sera calculée en fonction de la hauteur du contenu.)
Définir des modèles basés sur les régions
grille-modèle-zone : doit être utilisée avec la zone de grille.
Avis
1. Chaque ligne doit être entourée d'une ficelle
2. Doit être rectangulaire.
Compétence
...signifie le laisser vide