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 les unités d'une dimension est une erreur courante parmi les débutants en CSS. En HTML vous pouvez simplement écrire width=100, mais en CSS vous devez donner une unité exacte, par exemple : 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 en XHTML, les noms d'éléments définis en 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 les restrictions d'éléments avant la classe et l'identifiant
Lorsque vous écrivez pour définir une classe ou un identifiant pour un élément, vous pouvez omettre la qualification d'élément précédente, car l'ID est unique dans une page et la classe peut être utilisée 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 s'écrire comme
#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. Pas besoin 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, et peuvent être directement héritées dans l'élément enfant sans définition répétée. Mais sachez que le navigateur peut remplacer votre définition par certaines valeurs par défaut.
7. Premier principe récent
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 : ensemble Lorem ipsum dolor
Dans le fichier CSS, vous avez défini l'élément p et une classupdate
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 balise 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, nous pouvons l'appeler ainsi. L'effet d'affichage final est que ce div a à la fois un arrière-plan #666 et une bordure de 10 pixels. 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 sous-sélecteurs 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 :
〈identifiant div=subnav〉
〈ul〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉Article 1〈/a〉〈/li〉
〈li class=subnavitemｓｌｍｃｔｔ〉 〈a href=# class=subnavitemｽｌｍｃｔｔ〉 Article 1〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 Article 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=#〉 Article 1〈/a〉 〈/li〉
〈li class=sel〉 〈a href=#〉 Article 1〈/a〉 〈/li〉
〈li〉 〈a href=#〉 Article 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; |
peut s'écrire comme
| arrière-plan:url(images/***.gif) #333; |
Si vous ajoutez des guillemets, cela provoquera des erreurs de navigateur.
11. Sélecteurs de groupe
Lorsque certains types d'éléments, classes ou identifiants ont des propriétés communes, vous pouvez utiliser des sélecteurs de groupe pour éviter des définitions répétées plusieurs fois. 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 liens 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 vous souvenez sous le nom de LoVe HAte (aime détester). 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 le flotteur
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-calques imbriqués 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
C'est une astuce simple, mais cela vaut la peine de le répéter car je vois tellement de questions de débutants demandant ceci : Comment centrer horizontalement le CSS ? 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 :
indéfini
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. Importer et masquer le CSS
Étant donné que les anciens navigateurs ne prennent pas en charge CSS, une approche courante consiste à utiliser la technique @import pour masquer CSS. Par exemple:
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 :
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 hacks CSS ici, je n'en utilise que deux, que Microsoft soit meilleur dans la prochaine version bêta d'IE7. Avec la prise en charge de CSS, les deux méthodes le sont. le plus sûr.
1. Méthode d'annotation
(a) Pour masquer 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 de la barre oblique inverse :
/* */
*htmlp{
déclarations
}
/* */ |
2. Méthode des commentaires conditionnels
Une autre méthode, qui, à mon avis, est plus éprouvée 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:
indéfini
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 de code CSS, chacun a ses propres habitudes d’écriture concernant 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.
J'ai l'habitude d'ajouter un point-virgule après chaque valeur d'attribut. Bien que les règles autorisent que le point-virgule n'ait pas besoin d'être écrit après la dernière valeur d'attribut, si vous souhaitez ajouter un nouveau style, il est facile d'oublier d'ajouter le point-virgule et provoquer une erreur, donc vous l'ajoutez toujours mieux.
Enfin, l'accolade fermante } est écrite seule sur une ligne, avec des espaces et des nouvelles lignes pour faciliter la lisibilité.
