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 toutes les tailles et styles de police et a la capacité de modifier les objets de page Web et les styles de modèle. Pour une étude approfondie, veuillez rechercher « Tutoriel vidéo CSS du site Web chinois php » sur Baidu et apprenez en ligne gratuitement.
1. Attributs communs
name : nom, peut être répété, peut être le même ; class : nom de classe, peut être répété ou peut en avoir plusieurs, utilisé pour CSS tel que <p class="one two"></p> ; identifiant, impossible La répétition est généralement utilisée en JavaScript ; les règles de dénomination sont les mêmes que les règles de dénomination des étiquettes dans d'autres langages ;
title : titre, qui peut être ajouté dans la balise, tel que <img src="1.jpg" /title="Ceci est une image">;/
2. Relation avec les balises
Lien de descendance : lien parent-enfant (y compris lien de parenté) ;
Relation fraternelle : relation de même père ;
3. Feuilles de style CSS en cascade
Commentaires CSS : /Le contenu du commentaire est écrit ici pour que le programmeur puisse le voir et 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 (format px) ; : attribut : valeur de l'attribut ;
4. Comment introduire CSS
Introduction en ligne : méthode d'introduction pour l'ajout de styles dans les balises ; Format : <tag style="background:red; font-size:20px;">Content</tag> Remarque : la maintenabilité du code est extrêmement mauvaise, code CSS. et html La structure n'est pas séparée, la portée de l'influence est uniquement dans la balise d'introduction actuelle : ajoutez le <style type="text/css">Style CSS</style> dans l'en-tête de la page Web ; la maintenabilité du code est relativement mauvaise, non Réaliser la séparation du code CSS et de la structure HTML, et le champ d'influence se limite à la page actuelle ;
Introduction du lien externe : créez un fichier xx.css en dehors de la page Web et utilisez <link rel="stylesheet" type="text/css" href="xx.css"> dans l'en-tête de la page Web ; le code est hautement maintenable. Le code CSS est complètement séparé de la structure HTML, affectant toutes les pages Web qui introduisent des fichiers CSS sur l'ensemble du site Web ;
5.Syntaxe de base CSS :
Format structurel : sélecteur {attribut : valeur d'attribut ; attribut : valeur d'attribut ;...} ; Exemple : p{background:red;color:gray;size:20px;};Selector : un outil de sélection d'éléments de page ;
Accolades : le contenu du style est écrit à 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 d'étiquette : ajouter un style au format spécifié : p {color:green } ; Sélecteur de classe : Choisissez de spécifier le style du sélecteur de classe ; Format : .class name {background: pink;} ; Remarque : Le nom de la classe est défini dans la balise, par exemple class="one" ; 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 être répété ; format : #id name{backgound-image:url(1.jpg);} Remarque : le nom de l'identifiant est défini dans la balise id="one" ; l'identifiant ne peut pas être ajouté avec le tableau ; , combien de fois Lorsque le style de contenu de chaque bloc est le même, les noms d'ID de plusieurs blocs doivent être différents ;;
La différence entre id et class : faites attention au point précédent - l'ID doit être capable de déterminer de manière unique le nœud 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 les coûts de maintenance ;
Sélecteur de pseudo-classe : principe séquentiel LoVe HAte, vous pouvez sauter par-dessus, mais l'ordre ne peut pas être modifié ; il s'agit du statut du lien (lien), du statut visité (visité), du statut actif (survol) et du statut du clic (actif) ;
Classe de dessin de points : a:link{color:white;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} style lors de l'obtention du focus a:focus{}; Remarque : des attributs de texte, des couleurs d'arrière-plan et des images peuvent être ajoutés aux attributs ; a{} et a:link{} obtiennent le même effet ; classe de liste : 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, la couleur d'arrière-plan et les images peuvent être ajoutés aux attributs ;
Sélecteur composé :
Sélecteur de groupe (sélecteur d'union, sélecteur multiple) : utilisé pour ajouter le même style à plusieurs éléments ; par exemple : .one, #one, a, span{color:red;font-size:14px;} signifie Classe un, #one. , une balise et une balise span ont des attributs communs ; sélecteur de descendant : ajoutez des attributs aux éléments de sous-classe ; exemple : .one a{text-decoration:none;} signifie le contenu modifié par la balise a du descendant de la classe 1. Pas de soulignement ; sélecteur d'élément enfant (sélecteur spécifié) : ajouter des attributs à l'élément enfant spécifié ; par exemple : #one>p{color:red;} ; signifie ajouter le contenu reposant sur la balise p du fils du sélecteur id ;
Sélecteur d'éléments adjacents :
1. Deux sélecteurs de frères et sœurs adjacents ajoutent des attributs à eux-mêmes, mais ajoutent uniquement des attributs au frère suivant ; .one+p{background:red;}; pour 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 ; img[id]{background:red;} Ajoutez des attributs aux éléments avec un identifiant ;
Ajoutez des attributs aux éléments avec des valeurs d'attribut spécifiées : img[src="b.jpg"]{background:red;}Ajoutez 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 la valeur d'attribut spécifiée Elements à la fin. : img[src$="b"]{background:red;}Ajoute des attributs à tous les éléments se terminant par b; 5. Le sélecteur contient des éléments contenant la valeur d'attribut spécifiée : img[src*="b" ]{background:red ;}Ajouter des attributs à tous les éléments contenant b;
7. Inclusion d'éléments (classification des méthodes d'affichage)
Éléments de bloc : utilisés pour la composition. Les structures typiques incluent : p, p, li, h1, dt ;
L'élément s'affiche sur sa propre ligne (indépendamment de la largeur) ; la largeur et la hauteur peuvent être définies ;
Lorsqu'un élément de niveau bloc est imbriqué, 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 de gauche et de droite fonctionneront (généralement non utilisées). );
Les éléments sont affichés sur une seule ligne ;
La largeur et la hauteur ne peuvent pas être définies directement ;
Éléments de bloc en ligne : image, entrée ;
Les éléments sont affichés sur une seule ligne ;
La largeur et la hauteur peuvent être définies ;
Relation de conversion : inline contient des éléments de bloc en ligne ;
Display : inline convertit les éléments en éléments inline Display : inline-block convertit les éléments en éléments de bloc inline
Affichage : block Convertir l'élément en élément block
8. Propriétés CSS
Propriétés liées à la police :
font-size : taille de la police, combien de pixels, px ; font-weight : épaisseur de la police, gras (700-900), normal, vous pouvez écrire 100-900 ; : police , Microsoft YaHei, HeiTi;
Concaténation d'attributs : font: font-style font-weight font-size/line-height font-family Remarque : la concaténation d'attributs de police doit inclure font-size et font-family (d'autres attributs peuvent être omis) ; -L'ordre de la famille ne peut être modifié ;
texte:
couleur : couleur ; retrait du texte : retrait [l'unité est em] ; décoration du texte : ligne de texte [souligné, surligné, barré, aucune ligne d'annulation] ; distance ; 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. Si vous souhaitez la définir, vous devez la convertir ;
largeur : largeur ;
hauteur : hauteur ;
Attributs de list ul et li : list-style-type peut être ajouté à ul mais n'a pas besoin d'être ajouté à li ;
list-style-type:none; Supprime les symboles, les carrés, les cercles et les cercles pleins de disque. Vous n'avez pas besoin de les écrire après avoir ajouté des images list-style-type:none;list-style-image:url(1.jpg) Bordure de l'image : 1 px rouge uni ; définir une bordure pour l'ensemble de l'ul ;
list-style-position : extérieur ; positionnement de l'image de style : à l'intérieur, à l'extérieur
arrière-plan:
Couleur d'arrière-plan background-color ; image d'arrière-plan background-image Remarque : lors de la définition de l'image d'arrière-plan, veillez à définir la largeur et la hauteur de la tuile d'arrière-plan background-repeat : répéter (valeur par défaut) | x | (carrelage horizontal) répéter-y (carrelage vertical) position d'arrière-plan : définir la valeur spécifique : gauche| bas| nombre, la première valeur représente la direction horizontale, la deuxième valeur représente la direction verticale, 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 corrigée);
Attribut écriture conjointe : aucune limite de quantité ou de commande : background:url("") red no-peat 30px 40px ;
line-height : modèle de boîte : utilisé pour la mise en page des pages Web, la largeur doit être définie
Propriétés de la bordure de la boîte : composants :
Largeur et hauteur de la bordure : largeur de la bordure : 1 px ; Couleur de la bordure : couleur de la bordure : rouge ; Style de bordure : ligne continue continue/ligne pointillée pointillée/ligne pointillée en pointillés/aucun attribut d'écriture : bordure : rouge uni ; ; Remarque : il n'y a aucune restriction d'ordre lors de l'écriture des attributs ensemble. La couleur de la bordure n'a pas besoin d'être écrite et la largeur de la bordure n'a pas besoin d'être écrite. Méthodes d'écriture séparées : bordure de bordure : remplissage de la marge intérieure : définir la distance entre les attributs. contenu et bordure de la boîte
Marge : définissez la distance entre les cases
p{width:300px;height:200px;border-top:1px rouge uni;border-left:1px rouge uni;border-right:1px rouge uni;border-bottom:1px rouge uni;}
Pour définir les propriétés individuellement :
border-top-color: rouge; border-top-style: solid; border-top-width: 1px;
Taille de la boîte :
Où la taille de la boîte affecte : la boîte héritée se trouve dans la plage de largeur de la boîte parent et la valeur de remplissage n'affectera pas le calcul de la taille de la boîte : largeur = largeur du contenu + bordures gauche et droite + remplissage gauche et droit.
La bordure peut affecter la taille de la boîte et le remplissage peut affecter la taille de la boîte.
À l'avenir, lors de l'implémentation de la disposition de la zone de page, si des marges intérieures sont définies pour la zone, la valeur correspondante devra être soustraite de la largeur ou de la hauteur du contenu.
Marge : définissez la distance entre les cases
Centrer la case : Attribut écriture conjointe :
La boîte sous le 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 reculez de la moitié de sa propre largeur. Marge : 10px, haut, droite, bas, gauche, 10pxMargin : 10px, 20px, haut, bas, 10px, gauche et droite, 20pxMargin : 10px 20px 30px 10px haut, 20px gauche et droite, 30px bas
Marge : 10px 20px 30px 40px en haut à droite en bas à gauche
Avis:
Attribution de l'écriture conjointe :
Remplissage : 10px ; la distance entre le haut, la droite, le bas et la gauche est de 10pxPadding : 10px 20px ; haut et bas 10px gauche et droit 20pxPadding : 10px 20px 30px supérieur gauche et droit 20px inférieur 30px ;
Remplissage : 10 px, 20 px, 30 px, 40 px 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 deux cases sont affichées horizontalement, les marges se chevauchent et les marges s'effondrent (un problème difficile) pour résoudre l'étape :
padding : définit la distance entre le contenu et la bordure de la boîte
Définir une bordure pour la boîte parent
Définir overflow:hidden pour la boîte parent ;
Marges claires :
Méthode 1 : *{padding : 0 ; marge : 0 ;}
Méthode 2 : Corps,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
9.Trois caractéristiques majeures du CSS
Héritage:
Héritable : couleur, alignement du texte, retrait du texte, taille de la police, poids de la police, famille de polices Non héritable : décoration du texte, bordure, affichage, marge, flotteur, remplissage La prémisse pour que l'héritage se produise se situe entre les balises Appartenance dans le cas d'une relation imbriquée, la couleur du texte peut être héritée ; la taille du texte peut être héritée ; les attributs liés au texte peuvent être hérités ;
Particularités :
La couleur du texte dans l'élément parent ne peut pas être héritée (en cascade)
<h1></h1> Les balises de titre ne peuvent pas hériter de la taille du texte de l'élément parent
Chevauchement : le chevauchement fait référence à la couverture des styles.
La nature en cascade des styles n'a rien à voir avec l'ordre dans lequel les styles sont appelés, mais est liée à l'ordre dans lequel les styles sont définis.
La prémisse pour que la cascade se produise : le conflit de style
Priorité:
Poids : introduction en ligne (1000) > id (100) > classe (10) > étiquette (1) > général (0) Ajoutez les poids. Plus la valeur est grande, plus la priorité est élevée.
Les poids sont les mêmes et les styles suivants fonctionneront
10. Notes de connaissances supplémentaires
Écriture d'optimisation de formulaire : <lable for="one">Nom d'utilisateur :</lable><input type="text" id="one">Icône de liste de format : list-style : aucunFusion de formulaire : border-collapse:collapse (Set fusion des bordures de tableaux, applicable aux tableaux) Débordement Bfc "Contexte de formatage" :
visible : valeur par défaut. Le contenu ne sera pas coupé et sera présenté en dehors de la zone d'élément masqué : le contenu sera coupé et le contenu restant sera invisible. Lorsque l'image change de position, l'élément parent changera également de position. l'élément parent peut faire changer sa position à l'élément parent. La position de l'élément reste inchangée. scroll : Le contenu sera tronqué, mais le navigateur affichera des barres de défilement pour afficher le contenu restant.
auto : si le contenu est coupé, le navigateur affiche des barres de défilement pour afficher le reste du contenu
11. Flux standard : les éléments au niveau du bloc sont affichés sur une seule ligne. Mode d'affichage du flux standard : le mode d'affichage par défaut des éléments.
12. Flottant : le flottement est utilisé pour résoudre le problème de l'habillage du texte et des images utilisé pour créer des barres de navigation et des mises en page de pages Web ;
Utilisation : Flottant : gauche | droite Caractéristiques : Flottez comme vous le souhaitez
Les éléments définis pour être flottants n'occupent pas leur position d'origine (hors script), ce qui permet aux éléments de niveau bloc d'être affichés sous forme de flottants sur une seule ligne. Les éléments en ligne peuvent être convertis en éléments de bloc en ligne.
Pendant le processus de conversion de mode, utilisez l'affichage si vous le pouvez.
Effacer le flotteur :
Définition : Effacer float ne signifie pas supprimer float ; effacer float fait référence à l'impact de l'effacement de float : faites attention au moment de l'utilisation : lorsque l'élément enfant est défini sur float et que l'élément parent n'a pas de hauteur, la mise en page sera confuse. ; dans ce cas, effacez le flotteur.
Méthode Clear Floating : [x] Remarque : Ajoutez un élément de bloc vide (<p></p>, tag) après l'élément à effacer, et ajoutez clear:both |right à l'élément vide ajouté.
13. Positionnement : Orientation : gauche, droite, haut, bas (veuillez consulter le canal du didacticiel CSS du site Web php chinois pour plus de détails)
Positionnement statique : le positionnement statique est la méthode d'affichage du flux standard d'éléments. position : statique est le positionnement par défaut.
Positionnement absolu : positionnement par rapport à l'élément parent ou à l'élément ancêtre de l'élément positionné. Si l'élément parent et l'élément ancêtre n'existent pas, le calque contenant d'origine sera trouvé, il n'occupe pas la position précédente : absolu ;
Lors de la définition du positionnement absolu pour un seul élément, le positionnement est défini en fonction du coin supérieur gauche du navigateur (corps). Lorsque des boîtes sont imbriquées, si la boîte parent ne définit pas le positionnement, la boîte enfant définit le positionnement en fonction du coin supérieur gauche du navigateur. Lorsque des boîtes sont imbriquées, si la boîte parent est positionnée, la boîte enfant est positionnée en fonction du coin supérieur gauche de la boîte parent. Le positionnement absolu est défini pour la boîte et la boîte n'occupe aucune position (hors script). Une fois le positionnement absolu défini pour l'élément en ligne, l'élément est converti en élément de bloc en ligne.
Remarque : Une fois l'élément défini sur un positionnement absolu, la position de l'élément peut être définie arbitrairement 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 : relative ;
Une fois que l'élément est défini sur un positionnement relatif, il occupe la position d'origine. Définir le positionnement relatif avec sa propre position comme référence. Le positionnement relatif ne peut pas effectuer la conversion de mode de l'élément.
L'enfant doit être dans la même position que le parent (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èmes de hiérarchie :
Il n'y aura des problèmes hiérarchiques que lorsque le positionnement est défini. Il existe un positionnement relatif, absolu et autre parmi les éléments frères dont la structure du document HTML est à l'arrière et qui se trouve à la couche la plus externe (niveau supérieur).
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 Elf Rabbit : Sélectionnez des documents transparents
Le point du système de coordonnées dans le navigateur a la bonne direction comme direction positive, et la direction sous le point est positive. Le sprite CSS est un moyen de traiter l'image d'arrière-plan de la page Web ;
Utilisation de sprites
Lorsque vous utilisez fw, vous devez ouvrir la carte de sprite en mode ouvert. Lorsque vous utilisez la carte de sprite comme image d'arrière-plan, elle est souvent utilisée en conjonction avec background-position pour mesurer les coordonnées des éléments dans la carte de sprite. sélecteur.
Ou utilisez la lettre de raccourci : k
15. Visibilité CSS
overflow : caché Masquer l'affichage de la partie excédentaire : aucun Masquer l'élément directement display : block Afficher l'élément (mieux adapté à js) visibilité : caché Masquer l'affichage de l'élément : aucun Masquer l'élément et n'occuper pas la position ;
visibilité : caché ; masquer l'élément et occuper sa position d'origine
16. Centrer les images et le texte
Chaque élément inlne-block a un vertical-align:baseline par défaut
vertical-align : l'alignement vertical du milieu ; l'alignement vertical et le bloc en ligne correspondent mieux ;
17. Évitez les flux hors normes
Dans le processus de mise en page d'une page Web, utilisez le flux standard si vous le pouvez. Le flux standard ne peut pas résoudre le flottement.
Utilisez margin-left/margin-right et définissez la valeur sur auto pour pousser automatiquement la boîte vers les deux côtés extérieurs.
18. Spécifications d'inclusion de l'étiquette
p peut contenir n'importe quelle balise sous le flux standard la balise p ne peut pas contenir p et la balise de titre et la balise de liste la note de titre peut contenir d'autres balises
Les éléments en ligne ne doivent 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. Après un positionnement absolu, l'élément peut définir la largeur et la hauteur.
Après un positionnement fixe, l'élément peut définir la largeur et la 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 : first-child Le meilleur élément : last-child Le nième élément enfant : nth-child (n); n est un nombre impair pour l'élément enfant : nth-child (odd ou (nth-child(); 2n+1))
Élément de numéro pair : nth-child(even); ou (nth-child(2n))
text-shadow : text-shadow : horizontal, vertical, ombre box-shadow : box-shaadow : horizontal, vertical, ombre
arrière-plan : arrière-plan