CSS est un langage informatique utilisé pour exprimer des styles de fichiers tels que HTML (une application du Standard Generalized Markup Language) ou XML (un sous-ensemble du Standard Generalized Markup Language). CSS peut non seulement modifier statiquement les pages Web, mais peut également coopérer avec divers langages de script pour formater dynamiquement divers éléments des pages Web. CSS peut effectuer un contrôle précis au niveau des pixels sur la disposition des positions des éléments dans les pages Web, prend en charge presque tous les styles de taille de police et a la capacité de modifier les objets de page Web et les styles de modèle.
1. Attributs communs
nom : nom, peut être répété, peut être le même
class : nom de la classe, peut être répété ou en avoir plusieurs, utilisé pour CSS tel que
;
id : identifiant unique, non répétable, généralement utilisé en JavaScript ; les règles de dénomination sont les mêmes que celles des autres langages
title : titre, qui peut être ajouté dans ; la balise ; telle que ;
Commentaire CSS : /Le contenu du commentaire est écrit ici pour que le programmeur puisse le voir. Il ne sera pas affiché sur la page.
/;
Règles de grammaire CSS : tous les symboles doivent être saisis en utilisant la méthode de saisie anglaise, en minuscules, et les attributs doivent être écrits entre accolades. Chaque instruction d'attribut doit se terminer par. un point-virgule, et la valeur de l'attribut doit avoir une unité de pixel (px) : Attribut : valeur de l'attribut
4.
Introduction en ligne : Comment introduire des styles dans les balises ;Format : Content;
Remarque : Le code la maintenabilité est extrêmement mauvaise et le code CSS et la structure html ne sont pas séparés ;La portée de l'influence se situe uniquement dans la balise actuelle ;
Introduction en ligne : ajouter Style CSS< dans l'en-tête de la page Web /style>;Remarque : la maintenabilité du code est relativement mauvaise, la séparation du code CSS et de la structure HTML n'est pas implémentée et la portée de l'influence est uniquement sur la page actuelle ;
Introduction externe : Créez un fichier xx.css en dehors de la page Web et utilisez ;Remarque : maintenabilité du code dans l'en-tête de la page Web Élevée, le code CSS est complètement séparé de la structure HTML, et la portée de l'impact est sur tout le Web pages qui introduisent des fichiers CSS dans l'ensemble du site ; >
Format de structure : sélecteur {attribut : valeur d'attribut ; attribut : valeur d'attribut ;...} ; :20px;};
Sélecteur : un outil pour sélectionner les éléments de la page ;
Accolades : écrivez le contenu du style à l'intérieur des accolades ;
6. Sélecteur
Sélecteur de base :
Sélecteur universel : utilisé pour initialiser le style par défaut de la page web, écrit au début de la feuille de style ; format : *{padding:0;margin:0;};
Sélecteur de balise : ajouter du style à la balise spécifiée ; format : p{color:green ;};
Sélecteur de classe : choisissez de spécifier le style du sélecteur de classe : .class name{background:pink;};
Remarque : le nom de la classe est défini dans la balise, par exemple, class="one" ; Si les styles de contenu de plusieurs blocs sont les mêmes, alors donnez-leur simplement le même style ;
sélecteur d'identifiant : identifiant unique, ne peut pas apparaître à plusieurs reprises ; Format : #id name{backgound-image:url(1.jpg);>
Remarque : le nom de l'identifiant est défini dans la balise id=" un" ; l'identifiant ne peut pas être ajouté avec le tableau, et plusieurs blocs ont le même style de contenu. Les noms d'identifiant des blocs doivent être différents ;
;
La différence entre l'identifiant et la classe :
Faites attention au point précédent - l'ID doit être la capacité de déterminer de manière unique les nœuds DOM. Si vous utilisez le sélecteur d'ID tout au long de l'article, même si les deux styles de nœuds DOM sont exactement les mêmes, vous devez écrire le style de nœud deux fois. Si vous souhaitez le conserver plus tard, vous devez conserver le code aux deux endroits ! ! ! Augmente considérablement le coût de maintenance ;
Sélecteur de pseudo-classe : principe séquentiel de LoVe HAte, vous pouvez sauter par-dessus, mais l'ordre ne peut pas être modifié respectivement, l'état du lien (lien ; ), statut visité (visité), statut actif (survol) et statut cliqué (actif
Classe de points de dessin : a:link{color:jaune;} a : visité le style {color:blue;} a:hover{color:red;} a:active{color:pin;} lors de l'obtention du focus a:focus{};
Remarque : les attributs de texte et la couleur d'arrière-plan peuvent être ajoutés au les attributs et les images ; a{} et a:link{} obtiennent le même effet ;
list class : li:link{color:jaune;};li:visited{color:blue;} li:hover { color:red;} li:active{color:pin;};
Remarque : les attributs de la série de texte, les couleurs d'arrière-plan et les images peuvent être ajoutés aux attributs ;
Sélecteur de composés :
Sélecteur de groupe (sélecteur d'union, sélecteur multiple) : utilisé pour ajouter le même style à plusieurs éléments exemple : .one,#one,a,span{color :red;font- size:14px;} signifie que la classe un, #one, une balise, une balise span ont des attributs communs
Sélecteur descendant : ajouter des attributs aux éléments de sous-classe ; decoration:none;} signifie que le contenu modifié par la balise a du descendant de la classe un n'est pas souligné
Sélecteur d'élément enfant (sélecteur spécifié) : Ajouter des attributs au sous spécifié ; -element; exemple : #one>p{color:red;}; signifie ajouter des attributs au contenu reposant sur la balise p du fils du sélecteur d'identifiant un
Élément adjacent ; sélecteurs :
1. Deux sélecteurs frères et sœurs adjacents ajoutent des attributs. Ils n'ajoutent pas d'attributs à eux-mêmes, mais uniquement aux frères derrière eux. p{background:red;}; 2.one~p{background:green} signifie ajouter des attributs à tous les éléments de balise p après le sélecteur, à condition qu'ils aient une classe parent ;
Sélecteur d'attribut :
1. Ajoutez des attributs aux éléments avec des attributs ; id;
Ajouter des attributs aux éléments avec des valeurs d'attribut spécifiées : img[src="b.jpg"]{background:red ;}Ajouter des attributs aux éléments avec b.jpg;
3. Ajoutez des attributs aux éléments commençant par le caractère spécifié : img[src^="b"]{background: red;}Ajoutez des attributs à tous les éléments commençant par b; 4. . Le sélecteur a des éléments se terminant par la valeur d'attribut spécifiée : img[src$="b"]{background:red;}Ajouter des attributs se terminant par b Ajouter des attributs à tous les éléments contenant b; 5. la valeur d'attribut spécifiée : img[src*="b"]{background:red;}Ajouter des attributs à tous les éléments contenant b;
7.
Éléments de bloc : utilisés pour la composition, les structures typiques sont : p, p, li, h1, dt ;
L'élément s'affiche dans sa propre ligne (indépendamment de la largeur);
Vous pouvez définir la largeur et la hauteur;
Lors de l'imbrication d'un élément au niveau du bloc , si la largeur de l'élément enfant n'est pas définie, la largeur de l'élément enfant sera la largeur de l'élément parent
Éléments en ligne : utilisés pour ajouter des styles ; span, a, font, strong;
Remarque : ne donnez pas de marges supérieure et inférieure ni de remplissage aux éléments en ligne, et les valeurs gauche et droite fonctionneront (généralement non utilisées) ;
les éléments sont affichés sur une seule ligne ;
ne peut pas définir directement la largeur et la hauteur
;
Éléments de bloc en ligne : image, entrée
les éléments sont affichés sur une seule ligne ;
peuvent être définis. la largeur et la hauteur ;
Relation de conversion : les éléments de bloc en ligne contiennent des éléments de bloc, et les éléments de bloc peuvent contenir des éléments en ligne ;
Display : Inline convertit l'élément en élément en ligne
Display : Inline-Block transforme l'élément en élément de bloc interne
Affichage : Bloc : Bloquer convertit l'élément pour convertir la conversion d'élément Pour l'élément bloc
8. Propriétés CSS
Propriétés liées à la police :
font-size : taille de la police, combien de pixels, px ;
font- poids : épaisseur de la police, gras (700-900), normal, vous pouvez écrire 100 -900 ;
style de police : police italique, italique, normale ;
Remarque : la concaténation des attributs de police doit inclure font-size et font -family (d'autres attributs peuvent être omis) ; 🎜>Texte :
color : color;
text-indent : indent [l'unité est em ];
text-decoration : Ligne de texte [souligné, surligné, barré, aucune ligne d'annulation]
espacement des mots : distance entre les mots ;
espacement des lettres : distance entre les touches des lettres ;
alignement du texte : alignement horizontal [gauche, centre, droite par défaut ];
line-height : line height, la hauteur de la ligne où se trouve le texte
[Lorsque la hauteur de la ligne est égale à la hauteur de l'élément, le texte est centré verticalement];
Taille : C'est la taille de l'élément de bloc. La largeur et la hauteur ne peuvent pas être définies pour les éléments en ligne. il, vous devez le convertir;
largeur: largeur
hauteur: hauteur;
Liste des attributs ul, li : list-style-type peut être ajouté à ul mais n'a pas besoin d'être ajouté à li ;
list- style-type:aucun;
Supprimez les symboles, le carré, le cercle, le disque, le cercle plein, vous pouvez ajouter des images sans écrire list-style-type: none;
list -style-image:url(1.jpg)
Image
border:1px solid red;Définissez la bordure pour ul dans son ensemble
list-style-position:outside;Positionnement de l'image de style : intérieur, extérieur
Fond :
couleur de fond ;
Image d'arrière-plan background-imageRemarque : assurez-vous de définir la largeur et la hauteur lors de la définition de l'image d'arrière-plan ;
Arrière-plan background-repeat : répéter (valeur par défaut) | pas de répétition (pas de carrelage) | répéter-x (carrelage horizontal) répéter-y (carrelage vertical)
position d'arrière-plan- position : Définissez des valeurs spécifiques : left| right| bottom| cneter ; lors de la définition de valeurs spécifiques, l'ordre n'est pas distingué lors de la définition de nombres spécifiques, la première valeur représente la direction horizontale et la deuxième valeur représente la direction verticale ; direction., définissez le format de paramètre de l'image d'arrière-plan avant sur background-image ;
Définissez si l'arrière-plan est fixe. background-attachment : Défilement (valeur par défaut) défilement fixe (image). fixe);
Écriture conjointe d'attribut : pas de limite de quantité ni limite de commande : background:url("") rouge no-peat 30px 40px;
line-height :
Modèle de boîte : utilisé pour la mise en page de la page Web, la largeur
attribut de bordure de boîte doit être défini :
Composants :
Largeur et hauteur de la bordure : border-width :1px;
Couleur de la bordure : rouge ;
Style de la bordure : solide/pointillé/tiret/aucun Aucun ;
Écriture conjointe d'attribut : bordure : 1px rouge uni ; Remarque : il n'y a aucune restriction d'ordre lors de l'écriture conjointe d'attribut, la couleur et la largeur de la bordure n'ont pas besoin d'être écrites
Écriture séparée :
border border :
padding padding : définir la distance entre le contenu et la boîte. La distance entre les bordures
Si la boîte héritée se trouve dans la largeur de la boîte parent, la valeur de remplissage n'affectera pas la taille de la boîte
Calcul de la taille de la boîte : largeur = largeur du contenu + bordures gauche et droite + remplissage gauche et droit
Les bordures peuvent affecter la taille de la boîte
Le remplissage affecte la taille de la boîte
Mise en page de la zone de page dans le futur Implémentation, si la marge intérieure est défini pour la boîte, la valeur correspondante doit être soustraite de la largeur ou de la hauteur du contenu
marge : définir la marge entre les boîtes Distance
Centrage de la boîte :
Attribut écriture conjointe :
Le la boîte sous flux standard est centrée : margin:0px auto;
La boîte positionnée est centrée : prenez d'abord la moitié de la boîte parent, puis revenez à sa propre largeur La moitié de
Marge : 10px 10px haut et bas 20px gauche et droite
Marge : 10px 20px 30px 10px en haut 20px à gauche 30px en bas
Marge : 10px 20px 30px 40px en haut à droite en bas à gauche
Lorsque deux cases sont affichées verticalement, les marges sont soumises à la valeur maximale définie (premier cas de fusion des marges ). Lorsque les cases sont affichées horizontalement, les marges se chevauchent
et les marges s'effondrent (un problème difficile. Étapes de la solution :
rembourrage intérieur). margins : Définissez la distance entre le contenu et la bordure de la boîte
Définissez la bordure de la boîte parent
Définissez débordement pour la boîte parent : caché ;
Après avoir défini le positionnement absolu de la boîte, la boîte n'occupe pas la position (hors étiquette)
Après avoir défini le positionnement absolu pour l'élément en ligne, l'élément est converti en élément Block en ligne
Remarque : Une fois l'élément défini sur un positionnement absolu, la position de l'élément peut être définie à volonté via le nom d'orientation spécifique
Positionnement relatif : par rapport à la position d'origine de l'élément, il occupera la position précédente :
L'élément occupera la position d'origine après avoir défini le positionnement relatif
Définissez le positionnement relatif en utilisant votre propre position comme référence pour définir la position
Le positionnement relatif ne peut pas effectuer la conversion de mode des éléments
L'enfant a un positionnement absolu (l'élément enfant est défini sur un positionnement absolu et l'élément parent est défini sur un positionnement relatif)
Positionnement fixe : par rapport à l'ensemble de la position stable ; Le positionnement fixe n'occupe pas la position (convertit les éléments en ligne en éléments de bloc en ligne position : fixe
Problème de niveau :
Il y aura des problèmes hiérarchiques uniquement si le positionnement est défini
Il existe des positionnements relatifs, absolus et autres dans les éléments frères dont la structure du document HTML est à l'arrière et qui est à la couche la plus externe (hiérarchie) Élevé)
Z- index : Définissez le niveau, la valeur est un nombre, tant qu'il y a un positionnement, le paramètre de positionnement sera utilisé
14. CSS Wizard Rabbit : Sélectionnez le document transparent
Le système de coordonnées dans le navigateur
La bonne direction du point est la direction positive, et la direction positive est vers la droite en dessous le point. Positif
Le sprite CSS est un moyen de traiter les images d'arrière-plan des pages Web ; la carte des sprites est également une sorte d'image d'arrière-plan
Utiliser. de la carte des sprites
Assurez-vous d'ouvrir le sprite avec la méthode open lorsque vous utilisez fw
Lors de l'utilisation du sprite comme image d'arrière-plan, souvent avec Utilisez background-position avec
pour mesurer les coordonnées des éléments dans la carte des sprites. Utilisez le sélecteur de rectangle
ou utilisez la lettre de raccourci : k
15. Visibilité CSS
débordement : caché Masquer la partie excédentaire
affichage : aucun affichage :
affichage : aucun masquer l'élément et occuper sa position d'origine
visibilité ; : caché ; Masquer l'élément et occuper sa position d'origine
16. Centrer les images et le texte
Chaque élément du bloc intégré a un vertical-align:baseline
vertical-align:middle vertical alignement ; vertical-align et inline-block correspondent mieux
; 17. Évitez les flux hors standard
Dans le processus de mise en page des pages Web, utilisez le flux standard si vous pouvez l'utiliser
Le flux standard ne peut pas résoudre le flottement
Le flottement ne peut pas résoudre le positionnement
Utilisez margin-left/margin-right avec la valeur auto pour pousser automatiquement la boîte aux deux côtés extérieurs
18. Spécifications d'inclusion des balises
p peut contenir des balises sous n'importe quel flux standard
La balise p ne peut pas contenir de balises p et de titre ni de listes Balises
Les notes de titre peuvent contenir d'autres balises
Éléments en ligne ne doit pas contenir d'autres balises
19.Résumé du réglage de la largeur et de la hauteur
Après avoir flotté, l'élément peut définir la largeur et la hauteur. hauteur
Après un positionnement absolu, l'élément peut La largeur et la hauteur peuvent être définies
Après un positionnement fixe, l'élément peut définir la largeur et hauteur
20. Mise à niveau vers CSS3
CSS3 et CSS2 : CSS est puissant et le code est concis
Sélecteur de pseudo-classe :
Le premier élément enfant : premier-enfant
Le meilleur élément : dernier enfant
nième élément enfant : nth -child(n);n donne la valeur
les nombres impairs sont des éléments enfants : nième-enfant(impair); ou (ntième-enfant(2n+1))
Élément pair : nième-enfant(pair) ou (ntième-enfant(2n); ))
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!
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn