1. Faire bon usage des abréviations CSS peut réduire la taille du fichier de page, augmenter la vitesse de téléchargement et rendre le code concis et lisible.
comme:
div{
border-top:1px solide #cccccc ;
bordure gauche : 1px solide #cccccc ;
border-right:1px soli #cccccc;
bordure inférieure : 1px solide #cccccc ;
}
peut s'écrire comme
p{border:1px solid #cccccc}
Autre exemple :
div{
marge supérieure : 10 px ;
marge droite : 20 px ;
marge inférieure : 30 px ;
marge gauche : 40 px ;
}
peut être réécrit comme suit :
/*Faites attention à l'ordre d'écriture en haut, à droite, en bas et à gauche*/
div{marge :10px 20px 30px 40px}
/*Notez que les valeurs et les unités ne peuvent pas avoir d'espaces et que chaque valeur est séparée par un espace*/
(Pour plus de détails, veuillez vous référer au manuel de référence CSS2, résumé des abréviations CSS courantes)
2. Vous pouvez définir plusieurs attributs de classe pour un élément HTML en même temps des règles (définitions de classes multiples).
Habituellement, nous l'écrivons ainsi :
En fait, nous pouvons spécifier plusieurs règles pour l'élément p, telles que :
CSS :
.un{…}
.b{….}
HTML :
cet élément inclut les styles définis dans a et b
Remarque : Séparez plusieurs règles par des espaces.
3. Définissez clairement l'unité sauf si la valeur est 0
Oublier de définir les dimensions est un problème courant parmi les débutants en CSS. En html on peut écrire width="100", mais une unité précise doit être donnée en css. Par exemple : width:100px;height:50px;font-size:9pt, à l'exception de la valeur 0, car cela n'a d'importance pour aucune unité. Les valeurs 0 sont toutes de taille égale.
Remarque : N'ajoutez pas d'espaces entre la valeur et l'unité.
4. Sensibilité à la casse En xhtml, les noms d'éléments définis par css sont sensibles à la casse. Les valeurs de class et id sont également sensibles à la casse en html et xhtml. Par conséquent, afin d'éviter les erreurs, il est recommandé de toujours utiliser des minuscules.
Par exemple, #aaa est différent de #AAA. En xhtml, p et P sont également différents. Ils ne seront pas écrasés.
Si #aaa est défini en CSS, utiliser AAA pour l'appliquer dans l'élément html n'obtiendra pas le style défini dans #aaa.
Exemple de code :
CSS :
#aaa{border:1px solide #ccc}
HTML :
Impossible d'afficher un bord de 1 pixel
. 5. Principe de priorité le plus récent de CSS Si plusieurs styles sont définis pour un élément, le niveau le plus récent aura priorité et le style le plus récent remplacera les autres définitions de style.
comme:
CSS :
p{couleur:rouge}
.bleu{couleur:bleu}
.jaune{couleur:jaune}
HTML :
affiché ici en rouge
Montré ici en bleu
Montré ici en vert
Montré ici en jaune
Avis:
(1) Faites attention à plusieurs priorités de styles (les priorités décroissent de haut en bas) :
--Paramètres de style d'élément
--Paramètres dans la zone de tête
--Fichiers CSS référencés en externe (2) La priorité n'est pas définie par l'ordre d'accès, mais par l'ordre de déclaration en CSS.
Comme dans l'exemple ci-dessus, il est affiché en jaune ici
car .jaune est après .blue dans la définition CSS.
6. Utilisez des sous-sélecteurs pour réduire la définition de l'identifiant et de la classe. Par exemple :
#contenir{..}
#contain_ul{...}
.contail_li{...}
peut être modifié en :
#contenir{..}
#containul{...}
.contain ul li{...}
7. N'ajoutez pas de guillemets au chemin de l'image d'arrière-plan et remplacez background:url("xxx.gif") par background:url(xxx.gif)
Parce que l'ajout de guillemets entraînera des erreurs pour certains navigateurs.
8. Le chemin de l'image d'arrière-plan est relatif au chemin de la page CSS actuelle.
Par exemple:
Il existe la structure de répertoires suivante : images
--xxx.gif
--css
--xx.css
--index.html
Contenu du code
index.html fait référence au fichier xx.css.
xx.css doit faire référence à l'image xxx.gif et sa méthode d'écriture est : background:url(../images/xxx.gif)
9. Utilisez le sélecteur de groupe pour appliquer le même style à différents éléments tels que h1, h2, h3 , div{font-size:16px;font-weight:bold}
Ensuite, les styles des éléments h1, h2, h3 et div sont tous de 16 pixels en police et en gras
10. Écrivez le style de lien correct Lorsque vous utilisez CSS pour définir différents états de liens, vous devez faire attention à l'ordre d'écriture. est : :link : visité :hover :active.
Si vous n'écrivez pas dans cet ordre, vous ne pourrez peut-être pas obtenir l'effet souhaité. Afin de mémoriser l'ordre, nous extrayons la première lettre de chaque mot : LVHA. Vous pouvez mémoriser l'ordre en mémorisant les deux mots LoVe et Hate.
11. Interdire le retour à la ligne du contenu et forcer le retour à la ligne. Dans une table ou une couche, nous pouvons souhaiter que le contenu ne soit pas renvoyé à la ligne ou forcer le contenu à s'enrouler. Nous pouvons répondre à ces exigences grâce à certains attributs CSS.
Désactiver les sauts de ligne : espace blanc : nowrap
Saut de ligne forcé : retour à la ligne : saut de mot ; saut de mot : normal
12. La différence entre relatif et absolu ;
Absolu, la méthode d'écriture en CSS est : position:absolute; Cela signifie un positionnement absolu. Il fait référence au coin supérieur gauche du navigateur et coopère avec TOP, RIGHT, BOTTOM et LEFT (ci-après dénommé TRBL) pour le positionnement. TRBL n'est pas défini, par défaut, le point d'origine est le point d'origine du parent. Si TRBL est défini et que le parent ne définit pas l'attribut de position, alors l'absolu actuel sera positionné avec le coin supérieur gauche du navigateur comme point d'origine et la position sera déterminée par TRBL.
Relatif, la méthode d'écriture en CSS est : position:relative; Cela signifie un positionnement relatif absolu. Il fait référence au point d'origine du parent comme point d'origine. S'il n'y a pas de parent, le point d'origine de BODY est utilisé comme point d'origine. , et est positionné avec TRBL Lorsqu'il y a des attributs CSS tels que le remplissage dans le parent, le point d'origine du niveau actuel est positionné par référence au point d'origine de la zone de contenu parent.
13. Distinguer entre div et span
div est un élément de niveau bloc qui peut contenir des paragraphes, des tableaux, etc., et est utilisé pour placer différents contenus. Généralement, nous utilisons des div pour mettre en page et positionner chaque bloc dans la page Web.
span est un élément en ligne sans signification pratique. Il existe uniquement pour appliquer des styles. L'ajout d'un balisage à un élément de contenu peut définir le style de son contenu en définissant un style sur l'étendue.
14. Distinguer affichage et visibilité
display:none et visible:hidden peuvent masquer un élément, mais visible:hidden masque uniquement le contenu de l'élément, mais l'espace de position utilisé est toujours conservé.
Display:none équivaut à supprimer l'élément de la page, et sa position occupée sera également supprimée.