=========================
Cascade CSSFeuille de style
= =======================
Règles de dénomination : utilisez des lettres, des chiffres ou des traits de soulignement et des signes moins Composition, ne commencez pas par un chiffre
1. Syntaxe CSS
----------------- - -----------
Format : Sélecteur {Attribut:valeur;Attribut:valeur;Attribut:valeur;....}
Le sélecteur est aussi appelé sélecteur
L'annotation en CSS : /* ... */
2. Comment utiliser le style CSS en HTML (la façon d'intégrer le CSS en HTML
-------------------); -- ----------------------------------
1. Mode en ligne (style en ligne)
Utilisez simplement l'attribut style dans la balise HTML pour définir le style CSS
Format : <balise html style="attribute:value;attribute:value;. ... "> ;Contenu modifié
font-family:official script"> en HTML Comment utiliser le style CSS dans
Fonctionnalités : S'applique uniquement à cette balise.
2. La méthode interne (style intégré)
consiste à utiliser pour définir le style CSS
Format :
Fonctionnalités : S'applique à toute la page actuelle
3. La méthode d'importation externe (lien externe dans)
3.1 (recommandée) consiste à utiliser la balise page pour implémenter le paramètre de style CSS
Format :
3.2 peut également être utilisé import importe le fichier css dans la balise de style.
Par exemple :
Caractéristiques : Agit sur l'ensemble du site
Leur priorité : Lorsque les styles s'opposent, le principe de proximité est adopté, qui est la valeur Attribut css Celui le plus proche du contenu modifié est prioritaire.
S'il n'y a pas de conflit de style, l'effet de superposition sera utilisé.
3. **sélecteur css2 :
----------------- -- ------------------------------------------------
1. sélecteur html ( sélecteur de balise )
consiste à utiliser la balise html comme sélecteur
tel que p{....} Tous p dans la page Web Les balises utilisent ce style
h2{....} Toutes les balises h2 de la page Web utilisent ce style
2. class sélecteur de classe (Utilisez le point. Sélecteur pour définir un nom personnalisé (nom de classe))
Définition : .Nom de classe {style....} Classe anonyme
Autres Sélectionnez le nom du symbole.Nom de la classe{style....}
Utilisez : ...
.mc{color:blue;} /* Tous ceux avec la valeur d'attribut de classe mc adoptent ce style*/
p.ps{color:green;} / *Seule la valeur de l'attribut de classe dans la balise p est ps. Ce style est utilisé*/
Remarque : Le sélecteur de classe peut être réutilisé dans la page Web
<.>
3. Sélecteur d'identifiant Définition : #id nom {style....} Utilisation : ... < ;/balise html> Remarque : Le sélecteur d'identifiant n'est utilisé qu'une seule fois dans la page web Priorité du sélecteur : de. le plus grand Allez dans le petit [sélecteur d'ID]->[sélecteur de classe]->[sélecteur html]->[attribut html]
4. Sélecteurs associés (y compris les sélecteurs) Format : Sélecteur 1 Sélecteur 2 Sélecteur 3...{Style....} Par exemple : tableau a{. ...} /*Seule la balise a de la balise table adopte ce style*/ h1 p{color:red} /*Seule la balise p de la balise h1 adopte ce style*/5. Combinaison de sélecteur (groupe de sélecteurs) Format : Sélecteur 1, Sélecteur 2, Sélecteur 3...{Style....} h3 ,h4,h5,#one,.one{color:green;} /*h3, h4 et h5 utilisent tous ce style*/ 6.
Pseudo-classe Sélecteur de sélection (pseudo-élément) :
Format : Nom de la balise : Nom de la pseudo-classe {style....}a:link {color: #FF0000; text-decoration: none} /* Lien non visité*/
a:visited {color : #00FF00 ; text-decoration : aucun} /* Lien visité*/
a:hover {color: #FF00FF ; text-decoration : souligné} /* Passer la souris lien*/
a:active {color: #0000FF; text-decoration: underline} /* Activer le lien*/
7. Sélecteur d'attribut :
...
8. Autre pseudo-sélecteur de classe
. ..
4. Sélecteurs en CSS3 (compréhension)
---------------- ------ ------------------------
1. Sélecteur de relation :
div>p sélectionne tous les éléments enfants p
div p sélectionne l'élément p immédiatement après l'élément div
div~p sélectionne tous les éléments frères p
2. Sélecteur d'attribut :[attribute] Sélectionne les éléments avec l'attribut attribut. [attribute=value] Sélectionnez les éléments avec l'attribut attribut et la valeur d'attribut égale à la valeur. [attribute~=value] Sélectionnez un élément qui a un attribut d'attribut et la valeur de l'attribut est une liste de mots séparés par des espaces, dont l'un est égal à valeur. [attribute|=value] sélectionne l'élément E qui a l'attribut att et la valeur de l'attribut est une
chaîne commençant par val et séparée par le connecteur "-".
[attibute^=value] Correspond aux éléments E qui ont des attributs d'attribut et dont les valeurs commencent par value [attribute$=value] correspond aux éléments E qui ont des attributs d'attribut et dont les valeurs terminer par la valeur [attribut*=valeur] correspond à l'élément E avec l'attribut attribut et la valeur contenant la valeur 3. Sélecteur de pseudo-classe structurelle ::
:first-letter définit le style du premier caractère dans l'objet .
::first-line définit le style de la première ligne de l'objet.
:after Définit ce qui se passe après l'objet (selon la structure logique de l'arborescence des objets).
:lang(langue) correspond aux éléments E en utilisant un langage spécial.
:element1~element2::first-of-type Correspond au premier élément frère du même type
:last- of-typecorrespond au dernier élément frère du même type
:only-of-type correspond au seul élément frère du même type :only-child correspond au seul enfant élément de l'élément parent :nth-child(n) correspond au nième élément enfant de l'élément parent :nth-last-child(n) correspond à l'avant-dernier nième élément frère de l'élément parent même type :last-child() correspond au dernier élément enfant de l'élément parent :root correspond à l'élément racine du document. En HTML, l'élément racine est toujours HTML :empty correspond aux élémentsStatut sélecteur de pseudo-classe
:link définit le style duhyperliena avant qu'il ne soit visité.
:visited définit le style du lien hypertexte a lorsque son adresse de lien a été visitée :active définit l'événementqui se produit entre le clic de la souris et le relâchement lorsque l'élément est activé par. l'utilisateur. ) style
*:hover définit le style de l'élément lorsqu'il est survolé *:focus définit le style de l'élément lorsqu'il est survolé. obtient le focus
:target Correspond à l'élément E pointé par l'URL pertinente :enabled Correspond à l'élément dans l'état disponible sur l'interface utilisateur :disabled Correspond à l'élément à l'état désactivé sur l'interface utilisateur :checked Correspond aux éléments sélectionnés sur l'interface utilisateur :not(selector) Correspond aux éléments qui ne contiennent pas de sélecteurs :: selection Définit quand l'objet est sélectionné StyleCorrespond à tous les éléments E
qui ne correspondent pas au sélecteur simple s >====================== ======================== =========================== =================
5. Attributs couramment utilisés en CSS :
----. -------------------------- -------------- -------------------------- ---------
*c. Couleur RVB : changements dans les trois canaux de couleur rouge (R), vert (G) et bleu (B)
couleur de fond : rgba(200,100,0); d. Couleur RGBA : rouge (R), vert (G), bleu (B), transparence (A) background-color : rgba(0,0,0,0.5);
*e.
Image
Paramètre de transparence img{ opacity:0.25;} 2. Attributs de police : font *font-size
: Taille de la police : 20 px, 60 % en fonction du pourcentage de l'objet parent*font-family : Police : Song Dynasty, Arial
font-style : italique normal normal ; police italique oblique
*police -weight
: police bold : gras : small-caps Petite police majuscule
font- stretch : [Comprendre] L'étirement du texte est relatif à la largeur normale de la police affichée par le navigateur (non pris en charge par la plupart des navigateurs).
text-indent
: Retrait de première ligne : text-indent:30px ; 🎜>text-overflow
: Indique s'il faut utiliser la marque d'omission (...) pour le débordement de texte.
clip|points de suspension (affichage de la marque d'omission) *
text-align: Position du texte : gauchecentre droite
text-transform : La casse du texte dans l'objet : capitalize (première lettre)|majuscule majuscule|minuscule minuscule * text-decoration : dessin des lignes de police : aucun, souligné, traversé
text-decoration-line : [Comprendre] la position des lignes de décoration de texte (le navigateur n'est pas compatible) *
text-shadow: Si le texte a un effet d'ombre et de flou
vertical-align
: L'alignement vertical du texte
direction : Direction du flux du texte. ltr | rtl
white-space:nowrap; /*Forcer l'affichage de tout le texte sur la même ligne*/
*
letter-spacing : L'espacement des mots ou des lettres
word-spacing
: L'espacement des mots
* line-height : hauteur de ligne
*4. Bordure : bordure : style de largeur color;
border-color
;
border-style
;
border-width:
border-left-color; border-left-width: Style CSS3 border-radius : traitement des coins arrondis box-shadow : définir ou récupérer l'ombre de l'objet 5.Attributs d'arrière-plan
: background *background-color : couleur d'arrière-plan *background-image
: image d'arrière-plan*background-repeat
: s'il faut répéter, comment répéter (carrelé)*background-position : positionnement
background-attachment : s'il faut fixer l'arrière-plan,
scroll : valeur par défaut. L'image d'arrière-plan défile avec le contenu de l'objet
fixe : L'image d'arrière-plan est fixe 🎜> *
background -size: taille d'arrière-plan, telle que background-size :100px 140px;
Arrière-plan multicouche :
background:url(test1.jpg) défilement sans répétition 10px 20px,url( test2.jpg) défilement sans répétition 50px 60px,url (test3.jpg) défilement sans répétition 90px 100px; box;
background-clip
:
padding-box,padding-box, padding-box; background-size:50px 60px,50px 60px,50px 60px;
6. *Rembourrage intérieur (patch intérieur) padding : récupère ou définit les marges internes sur les quatre côtés de l'objet, telles que padding:10px; padding :5px 10px;
padding-top
: récupère ou définit la marge intérieure de le bord supérieur de l'objet
padding-right
: Récupère ou définit la marge intérieure du bord supérieur de l'objet Remplissage interne à droite
padding -bottom : Récupère ou définit le remplissage interne sous l'objet
padding-left : Récupère ou définit le remplissage interne en bas de l'objet Marge interne à gauche
7. *Remplissage extérieur (patch extérieur)
marge : Récupérez ou définissez la marge extérieure sur les quatre côtés de l'objet, telle que la marge :10px; margin:5px auto;
margin-top
: Récupère ou définit la marge étendue du bord supérieur de l'objet
margin-right : Récupère ou définit la marge étendue sur le côté droit de l'objet
margin-bottom : Récupère ou définit la marge étendue sur le bas de l'objet
margin-left : Récupérer ou définir la marge étendue sur le côté gauche de l'objet
*position : Méthode de positionnement : absolu(Positionnement absolu) , fixe (référence de positionnement relatif, peut être utilisé pour le positionnement absolu relatif de l'intérieur)
*
z-index: Ordre d'empilement, plus la valeur est grande, plus elle est élevée.
*top : Récupère ou définit la position de l'objet par rapport au haut de son parent le plus récemment positionné. right : Récupère ou définit la position de l'objet par rapport à la droite de son parent le plus récemment positionné. parent récemment positionné
bottom : Récupère ou définit la position de l'objet par rapport au bas de son parent le plus récemment positionné *left : Récupère ou définit la position de l'objet par rapport à la gauche de son parent le plus récemment positionné
9. Disposition
*
affichage: Indique si et comment afficher : aucun masqué, bloc d'affichage de bloc.. .
*
float: indique si et comment l'objet est
float: valeur aucun gauche | droite *
clear: flotteur clair : aucun | gauche | droite | des deux côtés
visibilité: définissez ou récupérez l'affichage ou non de l'objet. visible|caché|effondrement. Contrairement à l'attribut display, cet attribut réserve l'espace physique occupé par l'objet caché. clip : Récupère ou définit la
zone visiblede l'objet. Les parties extérieures à la zone sont transparentes. rect(top-right-bottom-left) Par exemple : clip:rect(auto 50px 20px auto); le haut et la gauche ne sont pas tronqués, droite 50, bas 20.
*overflow : au-delà du caché : caché, visible : ne pas couper le contenu
overflow-x : Comment gérer le contenu lorsqu'il dépasse la largeur spécifiée : visible caché auto
overflow-y
: Comment gérer le contenu lorsque le contenu dépasse sa hauteur spécifiée
10. Boîte flexible Boîte flexible (voir le manuel pour plus de détails)
box-orient : Définissez ou récupérez la disposition des éléments enfants de l'objet modèle de boîte flexible. horizontal(horizontal)|vertical(vertical)
box-pack définit ou récupère l'alignement des éléments enfants de l'objet modèle de boîte flexible.
box-align définit ou récupère l'alignement des éléments enfants de l'objet modèle flexbox.
box-flex définit ou récupère comment les éléments enfants de l'objet modèle de boîte flexible allouent leur espace restant.
box-flex-group définit ou récupère le groupe auquel appartiennent les éléments enfants de l'objet modèle de boîte flexible.
box-ordinal-group définit ou récupère l'ordre d'affichage des éléments enfants de l'objet modèle flexbox.
box-direction définit ou récupère si l'ordre des éléments enfants de l'objet modèle de boîte flexible est inversé.
box-lines définit ou récupère si les éléments enfants de l'objet modèle de boîte flexible peuvent être affichés dans de nouvelles lignes.
11. Interface utilisateur Interface utilisateur
*curseur Quelle forme de curseur prédéfinie par le système adopte le pointeur de la souris. Pointeur petite main, personnalisation de l'url
zoom Définit ou récupère le taux de zoom de l'objet : normal|5 fois|200% pourcentage
box-sizing Définit ou récupère le mode de composition du modèle de boîte de l'objet objet. content-box | border-box
content-box : le remplissage et la bordure ne sont pas inclus dans la largeur et la hauteur définies.
border-box : le rembourrage et la bordure sont inclus dans la largeur et la hauteur définies.
resize définit ou récupère si la zone de l'objet permet à l'utilisateur de zoomer et d'ajuster la taille de l'élément.
none : Ne permet pas à l'utilisateur de redimensionner l'élément.
les deux : les utilisateurs peuvent ajuster la largeur et la hauteur de l'élément.
horizontal : L'utilisateur peut ajuster la largeur de l'élément.
vertical : L'utilisateur peut ajuster la hauteur de l'élément.
outline Propriété composite : Définir ou récupérer le contour de la ligne à l'extérieur de l'objet
outline-width Définir ou récupérer le outline outside the object La largeur du contour de la ligne
outline-style Définit ou récupère le style du contour de la ligne à l'extérieur de l'objet
outline-color Définit ou récupère le contour de la ligne à l'extérieur de l'objet La couleur du contour de la ligne
outline-offset Définit ou récupère la valeur de la position de décalage du contour de la ligne à l'extérieur de l'objet
nav-index Définit ou récupère l'ordre de Navigation de l'objet.
nav-up Définit ou récupère la direction de navigation de l'objet.
nav-right Définit ou récupère la direction de navigation de l'objet.
12. Multi-colonnes
colonnes Définir ou récupérer le nombre de colonnes de l'objet et la largeur de chaque colonne
column-width Set ou récupérer La largeur de chaque colonne de l'objet
column-count Définir ou récupérer le nombre de colonnes de l'objet
column-gap Définir ou récupérer l'écart entre les colonnes de l'objet
column-rule Définir ou récupérer la bordure entre les colonnes de l'objet
column-rule-width Définir ou récupérer l'épaisseur de la bordure entre les colonnes de l'objet
column -rule-style Définir ou récupérer le style de bordure entre les colonnes de l'objet
column-rule-color La couleur de la bordure entre les colonnes de l'objet
column-span Si l'élément d'image est Dans toutes les colonnes
column-fill Si la hauteur de toutes les colonnes de l'objet est uniforme
column-break-before Si l'objet a un saut de ligne avant
column-break -after Si la ligne est interrompue après l'objet
column-break-inside Si la ligne est interrompue à l'intérieur de l'objet
13. Attributs associés au Table :
table-layout Définit ou récupère l'algorithme de disposition du tableau
border- réduire Définit ou récupère si les lignes et les bords des cellules du tableau sont fusionnés ensemble ou selon le style HTMLséparé séparé
border-spacing Définit ou récupère l'espacement horizontal et vertical des bordures de lignes et de cellules lorsque les bordures du tableau sont indépendantes
caption-side Définit ou récupère le côté du tableau où se trouve l'objet légende. top | right | bottom | left
cellule vide Définit ou récupère le côté du tableau, s'il faut afficher la bordure de la cellule afficher
14. Transition Transition :
transition Récupérer ou définir l'objet Effet de transition pendant la transformation
transition-property récupère ou définit les propriétés impliquées dans la transition dans l'objet
transition-duration récupère ou définit la durée de la transition de l'objet
transition-timing-function récupère ou définit la transition dans l'objet Le type de
transition-delay récupère ou définit l'heure de la transition retardée de l'objet
15. Animation Animation
animation Récupérer ou définir les effets d'animation appliqués à l'objet
animation-name Récupérer ou définir le nom de l'animation appliqué à l'objet
animation-duration Récupérer ou définir la durée de l'animation de l'objet
animation- timing-function récupère ou définit le type de transition de l'animation de l'objet
animation-delay récupère ou définit le temps de retard de l'animation de l'objet
animation-iteration -count récupère ou définit la boucle de l'animation de l'objetNombres
animation-direction Récupère ou définit si l'animation de l'objet se déplace en sens inverse dans la boucle
animation-play- state Récupérer ou définir l'état de l'objet animation
animation- fill-mode Récupérer ou définir l'état de l'objet en dehors du temps d'animation
16. Transformation 2D Transformation 2D :
transform Récupère ou définit l'état de l'objet Transform
transform-origin Récupère ou définit l'origine référencée par la transformation dans l'objet
17. Propriétés des requêtes multimédiasRequêtes multimédias
la largeur définit la largeur de la zone visible de la page dans le périphérique de sortie
la hauteur définit la hauteur de la zone visible de la page dans le périphérique de sortie
device-width définit la largeur visible de l'écran du périphérique de sortie
device-height définit la hauteur visible de l'écran de l'orientation
du périphérique de sortie définit si la « hauteur » est supérieure ou égale à la « largeur ». La valeur portrait représente oui, paysage représente non
aspect-ratio définit le rapport entre 'largeur' et 'hauteur'
device-aspect-ratio définit 'device -width' 'Le rapport 'hauteur de l'appareil'. Tels que les ratios de moniteur courants : 4/3, 16/9, 16/10
le rapport d'aspect de l'appareil définit le rapport entre la « largeur de l'appareil » et la « hauteur de l'appareil ». Par exemple, les ratios de moniteur courants : 4/3, 16/9, 16/10
couleur définissent le nombre d'originaux couleur pour chaque ensemble de périphériques de sortie. S'il ne s'agit pas d'un périphérique couleur, la valeur est égale à 0
color-index définit le nombre d'entrées dans la table de recherche de couleurs du périphérique de sortie. Si aucune table de recherche de couleurs n'est utilisée, la valeur est égale à 0
monochrome définit le nombre d'originaux monochromes par pixel contenus dans un tampon frame monochrome. S'il ne s'agit pas d'un appareil monochrome, la valeur est égale à 0
résolution Définit la résolution de l'appareil. Par exemple : 96 dpi, 300dpi, 118dpcm
scan définit le processus de numérisation de l'équipement TV
la grille est utilisée pour demander si le périphérique de sortie utilise une trame ou une matrice de points. Seuls 1 et 0 sont des valeurs valides, 1 représente oui, 0 représente non
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
