1. Utilisez des abréviations CSS
L'utilisation d'abréviations peut aider à réduire la taille de vos fichiers CSS et à les rendre plus faciles à lire. Pour les principales règles de l'abréviation CSS, veuillez vous référer au "Résumé de la syntaxe commune des abréviations CSS", qui ne sera pas décrit ici.
2. Définissez clairement l'unité, sauf si la valeur est 0.
Oublier de définir l'unité de taille est une erreur courante parmi les novices CSS. En HTML vous pouvez simplement écrire width="100", mais en CSS vous devez donner une unité exacte, telle que : width:100px width:100em. Il n'y a que deux exceptions pour ne pas définir d'unités : la hauteur de ligne et la valeur 0. De plus, les autres valeurs doivent suivre l'unité. Attention à ne pas ajouter d'espaces entre la valeur et l'unité.
3. Sensibilité à la casse
Lors de l'utilisation de CSS dans XHTML, les noms d'éléments définis dans CSS sont sensibles à la casse. Pour éviter cette erreur, je recommande d'utiliser des minuscules pour tous les noms de définition.
Les valeurs de class et id sont également sensibles à la casse en HTML et XHTML. Si vous devez écrire une casse mixte, veuillez confirmer soigneusement que votre définition en CSS est cohérente avec les balises en XHTML.
4. Annulez la qualification d'élément avant class et id
. Lorsque vous écrivez pour définir class ou id pour un élément, vous pouvez omettre la qualification d'élément précédente, car ID est unique dans une page et class s peut être utilisé plusieurs fois dans la page. . Cela n’a aucun sens pour vous de qualifier un élément. Par exemple:
div#content { /* déclarations */ }
fieldset.details { /* déclarations */ }
Peut être écrit sous la forme #content { /* déclarations */ }
.details { /* déclarations */ }
Cela économise quelques octets.
5. Valeur par défaut
Habituellement, la valeur par défaut de padding est 0 et la valeur par défaut de background-color est transparente. Mais la valeur par défaut peut être différente selon les navigateurs. Si vous avez peur des conflits, vous pouvez définir les valeurs de marge et de remplissage de tous les éléments à 0 au début de la feuille de style, comme ceci :
* {
marge : 0 ;
remplissage : 0 ;
}
6. Il n'est pas nécessaire de définir à plusieurs reprises des valeurs héritables.
En CSS, les éléments enfants héritent automatiquement des valeurs d'attribut de l'élément parent, telles que la couleur, la police, etc., qui ont été définies dans l'élément parent, peut être directement hérité dans l’élément enfant et n’a pas besoin d’être répété. Mais sachez que le navigateur peut remplacer votre définition par certaines valeurs par défaut.
7. Le principe du plus proche premier.
S'il existe plusieurs définitions du même élément, la définition la plus proche (niveau minimum) sera prioritaire. Par exemple, il y a ce morceau de code Mise à jour : Lorem ipsum dolor set.
Dans le fichier CSS, vous avez défini l'élément p et une classe "update"
p{
marge : 1em 0 ;
taille de police : 1em ;
couleur : #333 ;
}
.mise à jour {
poids de la police : gras ;
couleur : #600 ;
}
Parmi ces deux définitions, class="update" sera utilisée car class est plus proche que p. Vous pouvez consulter « Calcul de la spécificité d'un sélecteur » du W3C pour en savoir plus.
8. Définitions de classes multiples
Une étiquette peut définir plusieurs classes en même temps. Par exemple : nous définissons d'abord deux styles, le premier style a un arrière-plan de #666 ; le deuxième style a une bordure de 10 px.
.one{largeur :200px;arrière-plan :#666;}
.two{border:10px solide #F00;}
Dans le code de la page, on peut appeler <div class="one two"></div> comme ceci
L'effet d'affichage final est que ce div a à la fois un arrière-plan #666 et une bordure de 10 px. Oui, c'est possible de faire cela, vous pouvez l'essayer.
9. Utilisez des sélecteurs descendants.
Les débutants en CSS ne savent pas que l'utilisation de sélecteurs descendants est l'une des raisons qui affectent leur efficacité. Les sous-sélecteurs peuvent vous aider à enregistrer de nombreuses définitions de classe. Jetons un coup d'œil au code suivant :
<div id="subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">Élément 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Élément 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> Élément 1</a> </li>
</ul>
</div>
La définition CSS de ce code est :
div#subnav ul { /* Un peu de style */ }
div#subnav ul li.subnavitem { /* Un peu de style */ }
div#subnav ul li.subnavitem a.subnavitem { /* Un peu de style */ }
div#subnav ul li.subnavitemselected { /* Un peu de style */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Un peu de style */ }
Vous pouvez remplacer le code ci-dessus par la méthode suivante<ul id="subnav">
<li> <a href="#"> Élément 1</a> </li>
<li class="sel"> <a href="#"> Élément 1</a> </li>
<li> <a href="#"> Élément 1</a> </li>
</ul>
La définition du style est la suivante :
#subnav { /* Un peu de style */ }
#subnav li { /* Un peu de style */ }
#subnav a { /* Un peu de style */ }
#subnav .sel { /* Un peu de style */ }
#subnav .sel a { /* Un peu de style */ }
Utilisez des sous-sélecteurs pour rendre votre code et votre CSS plus concis et plus faciles à lire.
10. Il n'est pas nécessaire d'ajouter des guillemets au chemin de l'image d'arrière-plan
. Afin d'économiser des octets, je recommande de ne pas ajouter de guillemets au chemin de l'image d'arrière-plan, car les guillemets ne sont pas nécessaires. Par exemple:
arrière-plan:url("images/***.gif") #333;
Il peut être écrit sous la forme background:url(images/***.gif) #333;
Si vous ajoutez des guillemets, cela provoquera des erreurs de navigateur.
11. Sélecteurs de groupe (Sélecteurs de groupe)
Lorsque certains types d'éléments, classes ou identifiants ont des attributs en commun, vous pouvez utiliser des sélecteurs de groupe pour éviter plusieurs définitions répétées. Cela peut économiser pas mal d'octets.
Par exemple : pour définir la police, la couleur et la marge de tous les titres, vous pouvez écrire :
h1,h2,h3,h4,h5,h6 {
famille de polices : "Lucida Grande", Lucida, Arial, Helvetica, sans-serif ;
couleur : #333 ;
marge : 1em 0 ;
}
Si certains éléments individuels doivent définir des styles indépendants lors de leur utilisation, vous pouvez ajouter de nouvelles définitions ou écraser les anciennes, par exemple :
h1 { taille de police : 2em ;
h2 { taille de police : 1,6 em ;
12. Spécifiez les styles de lien dans le bon ordre.
Lorsque vous utilisez CSS pour définir plusieurs styles d'état d'un lien, faites attention à l'ordre dans lequel ils sont écrits. L'ordre correct est : :link :visited :hover :active. La première lettre extraite est « LVHA », dont vous pouvez vous souvenir sous le nom de « LoVe HAte » (aimez-la ou détestez-la). Pourquoi est-il ainsi défini ? Vous pouvez vous référer à la « Link Specificity » d'Eric Meyer ?
Si vos utilisateurs ont besoin d'utiliser le contrôle clavier et de connaître le focus du lien actuel, vous pouvez également définir l'attribut :focus. L'effet de l'attribut :focus dépend également de la position où vous écrivez. Si vous souhaitez que l'élément focus affiche l'effet :hover, vous écrivez :focus avant :hover si vous souhaitez que l'effet focus remplace l'effet :hover, vous mettez :focus Après :hover.
13. Effacer les flottants.
Un problème CSS très courant est que lorsque le flottant est utilisé pour le positionnement, le calque sous-jacent est recouvert par le calque flottant, ou les sous-couches imbriquées dans le calque dépassent la portée de la couche externe.
La solution habituelle consiste à ajouter un élément supplémentaire derrière le calque flottant, comme un div ou un br, et à définir son style de manière claire : les deux. Cette méthode est un peu tirée par les cheveux, mais heureusement il existe un bon moyen de la résoudre. Veuillez vous référer à cet article « Comment effacer les flotteurs sans balisage structurel » (Remarque : ce site traduira cet article dès que possible).
Les deux méthodes ci-dessus peuvent très bien résoudre le problème du débordement flottant, mais que se passe-t-il si vous avez vraiment besoin d'effacer le calque ou les objets qu'il contient ? Une méthode simple consiste à utiliser l'attribut overflow. Cette méthode a été initialement publiée dans "Simple Clearing of Floats" et a été largement discutée dans "Clearance" et "Super simple clearing floats".
La méthode claire ci-dessus qui vous convient le mieux dépend de la situation spécifique et ne sera pas abordée ici. De plus, d'excellents articles ont été très clairs sur l'application de float. Il est recommandé de lire : "Floatutorial", "Containing Floats" et "Float Layouts".
14. Centrage horizontal (centrage)
C'est une technique simple, mais cela vaut la peine de le répéter, car je vois trop de questions de novices demandant ceci : Comment centrer CSS horizontalement ? Vous devez définir la largeur de l'élément, et définir la marge horizontale, si votre mise en page est contenue dans un calque (conteneur), comme ceci :
Vous pouvez le définir pour qu'il soit centré horizontalement comme ceci :
#envelopper {
width:760px; /* Modifie la largeur de votre calque*/
marge : 0 automatique ;
}
Mais IE5/Win ne peut pas afficher correctement cette définition. Nous utilisons une astuce très utile pour la résoudre : utilisez l'attribut text-align. Comme ça:
corps {
texte-align:centre;
}
#envelopper {
width:760px; /* Modifie la largeur de votre calque*/
marge : 0 automatique ;
texte-align:gauche;
}
La règle text-align:center; du premier corps définit que tous les éléments du corps dans IE5/Win sont centrés (les autres navigateurs centrent simplement le texte), et la deuxième règle text-align:left consiste à centrer le texte dans #warp; la gauche.
15. Importez et masquez le CSS
Étant donné que les anciens navigateurs ne prennent pas en charge le CSS, une approche courante consiste à utiliser la technique @import pour masquer le CSS. Par exemple:
@import url("main.css");
Cependant, cette méthode n'a pas fonctionné pour IE4, ce qui m'a donné mal à la tête pendant un moment. Plus tard, je l'ai écrit comme ceci :
@import "main.css";
De cette façon, CSS peut être masqué dans IE4 Haha, cela économise également 5 octets. Si vous souhaitez connaître l'explication détaillée de la syntaxe @import, vous pouvez voir ici "le tableau des filtres CSS de centricle"
16. Optimisation pour IE
Parfois, vous devez définir des règles spéciales pour les bogues du navigateur IE. Il y a trop de techniques CSS (hacks) ici, je n'en utilise que deux, peu importe ce que Microsoft est sur le point de publier. Que CSS soit mieux pris en charge. dans la version bêta d'IE7, les deux méthodes sont les plus sûres.
1. La méthode d'annotation (a) masque une définition CSS dans IE. Vous pouvez utiliser un sélecteur enfant :
html>corps p {
/* Contenu de la définition */
}
(b) La méthode d'écriture suivante ne peut être comprise que par le navigateur IE (cachée des autres navigateurs)
*htmlp{
/* déclarations */
}
(c) Parfois, vous souhaitez que IE/Win soit actif mais IE/Mac masqué, vous pouvez utiliser l'astuce "backslash":
/* */
*htmlp{
déclarations
}
/* */
2. Méthode des commentaires conditionnels Une autre méthode, qui, à mon avis, est plus testable que CSS Hacks, consiste à utiliser les commentaires conditionnels d'attribut privé de Microsoft (commentaires conditionnels). En utilisant cette méthode, vous pouvez définir certains styles séparément pour IE sans affecter la définition de la feuille de style principale. Comme ça:
<!--[si IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
17. Compétences en débogage : quelle est la taille de la couche ?
Lors du débogage des erreurs CSS, vous devez être comme une machine à écrire et analyser le code CSS ligne par ligne. Je définis généralement une couleur d'arrière-plan sur le calque en question afin que l'espace occupé par le calque soit évident. Certaines personnes suggèrent d'utiliser border, ce qui est généralement possible, mais le problème est que parfois border augmentera la taille des éléments, et border-top et boeder-bottom détruiront la valeur de la marge verticale, il est donc plus sûr d'utiliser l'arrière-plan.
Une autre propriété qui pose souvent problème est le contour. Le contour ressemble à Boeder, mais n'affecte pas la taille ou la position de l'élément. Seuls quelques navigateurs prennent en charge l'attribut outline, les seuls que je connaisse sont Safari, OmniWeb et Opera.
18. Style d'écriture du code CSS Lors de l'écriture du code CSS, chacun a ses propres habitudes d'écriture pour l'indentation, les sauts de ligne et les espaces. Après une pratique constante, j'ai décidé d'adopter le style d'écriture suivant :
sélecteur1,
sélecteur2 {
propriété:valeur;
}
Lorsque j'utilise des définitions d'union, j'écris généralement chaque sélecteur sur sa propre ligne afin qu'ils soient plus faciles à trouver dans le fichier CSS. Ajoutez un espace entre le dernier sélecteur et les accolades {. Écrivez également chaque définition sur sa propre ligne. Le point-virgule doit être placé directement après la valeur de l'attribut.