Partagez 9 conseils pratiques pour créer des pages Web CSS

Cet article partage 9 techniques pratiques pour créer des pages Web CSS afin de jeter les bases de la reconstruction de sites Web. J'espère que vous pourrez apprendre quelque chose d'utile.

1. Utilisez l'abréviation 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 à "Syntaxe de base CSS".

2. Définissez clairement l'unité sauf si la valeur est 0. J'ai oublié de définir l'unité de taille, c'est un débutant en CSS

Cet article résume quelques techniques CSS courantes pour jeter les bases de la reconstruction de sites Web. J'espère que vous pourrez apprendre quelque chose d'utile.
1. Utilisez des abréviations CSS
L'utilisation d'abréviations peut aider à réduire la taille de votre fichier CSS et à le rendre plus facile à lire. Pour les principales règles de l'abréviation CSS, veuillez vous référer à "Syntaxe de base CSS".
2. Définissez clairement l'unité, sauf si la valeur est 0
Oublier de définir l'unité d'une taille est une erreur courante parmi les débutants en CSS. En HTML, vous pouvez simplement écrire ;100, mais en CSS, vous devez donner une unité exacte, comme : " width:100em. Il n'y a que deux exceptions où vous pouvez laisser l'unité non définie : la hauteur de ligne et la valeur 0. Sinon, tous les autres les valeurs doivent suivre l'unité. Attention à ne pas ajouter d'espace entre la valeur et l'unité
3. Sensible à la casse
Lors de l'utilisation de CSS en XHTML, le nom de l'élément défini en CSS. . est sensible à la casse. Pour éviter cette erreur, je recommande que tous les noms de définition soient en minuscules. Les valeurs de
class et id sont également sensibles à la casse en HTML et XHTML, veuillez faire attention. confirmez que votre définition en CSS est cohérente avec les balises en XHTML
4. Annulez les restrictions d'élément avant la classe et l'identifiant
Lorsque vous écrivez pour définir la classe ou l'identifiant d'un élément, vous pouvez omettre la qualification d'élément précédente, car l'ID est unique dans une page et il peut être utilisé plusieurs fois dans la page. Cela n'a aucun sens pour vous de limiter un certain élément. Par exemple :
p#content { /* déclarations. */ }
fieldset.details { /* déclarations */ }
peut être écrit sous la forme
#content { /* déclarations */ }
.details { /* déclarations */ }
Cela permet d'économiser 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 :
* {
margin:0
padding : 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éfinis dans l'élément parent. Il peut être directement hérité dans les éléments enfants 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 le plus proche
S'il existe plusieurs définitions du même élément, la définition la plus proche (niveau minimum) aura priorité. 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 également défini une classupdate
p {
margin:1em 0; >couleur:#333;
}
.update {
font-weight:gras
couleur:#600;
Parmi ces deux définitions, class="update sera utilisé car class est plus proche que p. Vous pouvez consulter "Calculer 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{;background:#666;}.two{border:10px solid #F00;}
Dans le code de la page, on peut appeler comme ça
＜p class="un" deux＞＜/p＞
L'effet d'affichage final est que le p a à la fois un arrière-plan #666 et une bordure de 10 px. Oui, c’est possible, 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. Regardons le code suivant : ＜p id="subnav＞" ＜ul＞
＜li class="subnavitem＞" ＜a href=# class="subnavitem＞"Item 1＜ / a＞＜/li＞＞
＜li class="subnavitemselected＞" ＜a href=# class="subnavitemselected＞" Élément 1＜/a＞ ＜/li＞
＜li class="subnavitem＞ " ＜a href=# class="subnavitem＞" Article 1＜/a＞ ＜/li＞
＜/ul＞
＜/p＞
La définition CSS de ce code est :
p#subnav ul { /* Un peu de style */ }
p#subnav ul li.subnavitem { /* Un peu de style */ }
p#subnav ul li.subnavitem a.subnavitem { /* Un peu de style */ }
p#subnav ul li.subnavitemselected { /* Un peu de style */ }
p#subnav ul li.subnavitemselected a.subnavitemselected { /* Certains style */ >
Vous pouvez utiliser la méthode suivante pour remplacer le code ci-dessus
＜ul id="subnav＞"
＜li＞ ＜a href=#＞ Item 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 :
#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.                                                                                                                                        

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!