Résumé des points de connaissances sur le front-end CSS

Ce qui suit vous apporte un résumé des points de connaissances CSS front-end. Le contenu est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence.

1. Le concept de CSS : (CascadingStyleSheet)

Avantages : 1. Séparation du contenu et des performances. (Le contenu de la page Web peut être séparé de la présentation en utilisant 5. Utilisez du CSS indépendant de la page Web

2. Sélecteur

1. Sélecteur de balise

Nom de la balise｛ Attribut : valeur d'attribut ;｝2. Sélecteur de classe .Nom de classe｛Attribut : valeur d'attribut ;｝

10efaafd60ae373fa1d64fbc344e535d

3. >#ID name｛Attribut : valeur de l'attribut ;｝

4. Sélecteur d'union

Nom de la balise,.Nom de la classe,#ID name｛ Attribut : Valeur de l'attribut ;｝

5. Sélecteur descendant

Le sélecteur descendant est écrit en écrivant l'étiquette extérieure devant et l'étiquette intérieure. à l'arrière. Séparé par des espaces. Lorsque les balises sont imbriquées, la balise interne devient un descendant de la balise externe. P span{attribut : valeur de l'attribut ;>

balise e388a4556c0f65e1904146cc1a846bee imbriquée dans la balise 45a2772a6b6107b401db3c9b82c049c2

La balise f9589ee7c5879ab04bd36ba7422ca08fe388a4556c0f65e1904146cc1a846bee, séparée par des espaces 6. Sélecteur d'intersection (remarque : intersection Il n'y a pas d'espace entre les sélecteurs) Il peut être déterminé qu'il s'agit d'une certaine balise

nom de la balise ｛｝

7. Sélection globale

.

*｛ style; ｝Les commentaires en CSS ne peuvent être que sous la forme de /* commentaires*/

3. style

1. Inline,

2. Embedded,

écrivez le style dans la tête

3. Style d'importation et de lien, (style CSS externe)

style de lien :

<h1 style=”font-size:18px”></h1>

Formule d'importation :

La différence entre les deux est : le lien charge d'abord le style puis la page, et l'inverse est vrai pour l'import

<style type=”text/css”>
H1{font-size:18px；}
</style>

4. Priorité des styles

Entre les sélecteurs de base : sélecteur d'ID > Sélecteur de classe > Sélecteur de balise

Entre les feuilles de style : styles en ligne > styles externes

<link href=”style.css” rel=”stylelensheet” type=”text/css”/>

Entre les styles CSS : sélecteur, s'il y a deux instructions identiques, cette dernière instruction écrasera l'instruction précédente,

<style type=”text/css”> @import”style.css”;</style>

5. Modèle de boîte

boîte Taille totale du modèle = border-width-padding. +marge+taille du contenu (largeur ou hauteur)

6. Attribut Float

Float : valeur (gauche, droite, aucun, héritage (non pris en charge par IE et non recommandé))

Un autre attribut clear utilisé en combinaison avec l'attribut float est utilisé pour déterminer quel côté de l'élément n'autorise pas d'autres éléments flottants. L'attribut clear a 5 valeurs, comme suit :

La gauche n'autorise pas les éléments flottants sur le côté gauche

Droite : n'autorise pas les éléments flottants sur le côté droit

Les deux : n'autorise pas les éléments flottants sur les côtés gauche et droit

Aucune valeur par défaut, permettant aux éléments flottants d'apparaître des deux côtés

Hériter : Spécifie que la valeur de l'attribut clear doit être héritée de l'élément parent ne le prend pas en charge et ne l'est pas. recommandé. Généralement utilisée pour effacer les flottants, la valeur des deux attributs est souvent utilisée, c'est-à-dire :

Effacer :

7. Attribut de positionnement :

1. Positionnement absolu

position : absolue ; z-index :2 ; (ordre d'empilement)

couleur de fond : couleur d'arrière-plan. Transparent représente une couleur d'arrière-plan transparente

background-attachment : Déterminez si l'image d'arrière-plan défile avec le contenu de la classe, définie sur fixe pour fixe, défilement pour le défilement

2. relatif ;

8. Mode d'affichage des éléments de contrôle

1. Affichage du mode d'affichage : valeur

2. dans la case Débordement : débordement : valeur

3. Définir la forme du curseur : curseur:pointeur (petite main)

4. Style de lien hypertexte :

a:link{color:#ff0000;} //Lien non visitéa : visité{color:#00CC00}//Lien visité

a : hover{color:#000FF}//Déplacer le pointeur de la souris sur le lien

a:active{color:#FF00FF}//Le lien sélectionné

La définition du style est obligatoire Oui : linkàvisitedàhoveràactive

Expérience : les balises en ligne peuvent être incluses dans des balises au niveau du bloc et devenir ses éléments enfants, mais l'inverse n'est pas vrai.

display:block; converti en éléments de niveau bloc ;

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez payer. attention au site PHP chinois !

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!