Dix conseils pour la conception de feuilles de style CSS

1. Règles d'abréviation des polices CSS

Lorsque vous définissez des polices à l'aide de CSS, vous pouvez procéder comme suit :

En fait, vous pouvez abréger ces propriétés :

police : 1em/1,5em gras italique petites majuscules verdana,serif

C'est bien mieux maintenant, mais il y a une chose à noter : pour utiliser cette méthode raccourcie, vous devez au moins spécifier les attributs font-size et font-family si d'autres attributs (tels que font-weight, font-style, font-). variante) ne sont pas spécifiés, ils le seront. La valeur par défaut est automatiquement utilisée.

2. Utilisez deux cours en même temps

Habituellement, nous ne spécifions qu'une seule classe pour l'attribut, mais cela ne signifie pas que vous ne pouvez en spécifier qu'une seule. En fait, vous pouvez en spécifier autant que vous le souhaitez, par exemple :

<p class="text side">...</p>En utilisant deux classes en même temps (séparées par des espaces au lieu de virgules), ce paragraphe appliquera les règles spécifiées dans les deux classes. Si l’une des règles se chevauche, cette dernière prévaudra.

3. Valeur par défaut de la bordure en CSS

Lorsque vous écrivez une règle de bordure, vous spécifiez généralement la couleur, la largeur et le style (dans n'importe quel ordre). Par exemple : border: 3px solid #000 (bordure noire solide de 3 pixels de large. En fait, la seule valeur qui doit être spécifiée dans cet exemple est le style). Si vous spécifiez le style comme solide, alors les valeurs par défaut seront utilisées pour le reste des valeurs : la largeur par défaut est moyenne (équivalente à 3 à 4 pixels) la couleur par défaut est la couleur du texte dans la bordure ; . Si c'est exactement ce que vous voulez, vous n'êtes pas obligé de le spécifier en CSS.

4. !important sera ignoré par IE

En CSS, la dernière règle spécifiée est généralement prioritaire. Cependant, pour les navigateurs autres que IE, toute instruction marquée avec !important aura la priorité absolue, par exemple : margin-top: 3.5em !important; margin-top: 2em dans tous les navigateurs sauf IE La marge supérieure est toujours de 3,5em, tandis que IE vaut 2em. Parfois, cela est utile, en particulier lors de l'utilisation de valeurs de marge relatives (comme cet exemple), pour montrer les différences subtiles entre IE et les autres navigateurs. (De nombreuses personnes peuvent également remarquer que les sous-sélecteurs CSS sont également ignorés par IE)

5. Compétences en remplacement d’images

Il est souvent plus sage d'utiliser du HTML standard au lieu d'images pour afficher le texte, en plus d'accélérer les téléchargements et d'améliorer la convivialité. Mais si vous êtes déterminé à utiliser une police qui n'est peut-être pas disponible sur la machine de votre visiteur, vous ne pouvez choisir que des images.

Par exemple, vous souhaitez utiliser le titre « Acheter des widgets » en haut de chaque page, mais vous souhaitez également qu'il soit découvert par les moteurs de recherche. Si vous utilisez une police rare pour l'esthétique, alors vous devez utiliser une image pour l'afficher. ça. J'ai :

<h1><img src="/widget-image.gif" alt="Acheter des widgets" /></h1>

C'est certainement vrai, mais il est prouvé que les moteurs de recherche valorisent beaucoup plus le texte réel que le texte alternatif (car trop de sites Web utilisent déjà le texte alternatif comme mots-clés), nous devons donc utiliser une autre méthode : <h1><span >Acheter des widgets< /span></h1>, qu'en est-il de vos belles polices ? Le CSS suivant peut vous aider :

Vous disposez désormais à la fois d'une belle image et d'un bon masquage du texte réel - avec l'aide de CSS, le texte est positionné à -2 000 pixels du côté gauche de l'écran.

6. Une autre option pour le hack du modèle de boîte CSS

Le hack du modèle de boîte CSS a été utilisé pour résoudre les problèmes d'affichage du navigateur avant IE6. Les versions antérieures à IE6.0 incluaient la valeur de bordure et la valeur de remplissage d'un élément dans la largeur (plutôt que de l'ajouter à la valeur de largeur). Par exemple, vous pouvez utiliser le CSS suivant pour spécifier les dimensions d'un conteneur :

Postulez ensuite en html :

<div id="box">...</div>

La largeur totale de la boîte est de 150 pixels dans presque tous les navigateurs (largeur de 100 pixels + deux bordures de 5 pixels + deux remplissages de 20 pixels), sauf dans les navigateurs antérieurs à IE6, elle est toujours de 100 pixels (la valeur de bordure et la valeur de remplissage sont incluses dans le valeur de largeur), le hack du modèle de boîte est conçu pour résoudre ce problème, mais il causera également des problèmes. Une manière plus simple est la suivante :

Cela aura pour conséquence que la largeur totale de la boîte sera de 150 pixels dans n'importe quel navigateur.

7. Centrez l'élément de bloc

En supposant que votre site Web utilise une mise en page à largeur fixe, avec tout le contenu placé au centre de l'écran, vous pouvez utiliser

Le CSS suivant :

Vous pouvez placer n'importe quel élément dans le corps du HTML, et l'élément obtiendra automatiquement des valeurs limites gauche et droite égales pour garantir un affichage centré. Cependant, cela reste un problème dans les navigateurs antérieurs à IE6 et ne sera pas centré, il faut donc le modifier comme suit :

La définition du corps entraînera le centrage du contenu principal, mais même tout le texte sera centré. Ce n'est probablement pas l'effet souhaité. Pour cette raison, le div de #content doit également spécifier une valeur : text-align: left.

8. Utilisez CSS pour obtenir un centrage vertical

Le centrage vertical est un jeu d'enfant pour les tableaux, spécifiez simplement la cellule comme vertical-align: middle, mais cela ne fonctionne pas dans la mise en page CSS. Supposons que vous définissiez la hauteur d'un menu de navigation sur 2em, puis que vous spécifiiez les règles d'alignement vertical en CSS, le texte sera toujours disposé en haut de la boîte, il n'y a aucune différence.

Pour résoudre ce problème, définissez simplement la hauteur de ligne de la boîte pour qu'elle soit la même que la hauteur de la boîte. Dans cet exemple, la hauteur de la boîte est de 2em, puis ajoutez simplement une autre hauteur de ligne : 2em au centrage vertical obtenu. !

9. Positionnement CSS dans le conteneur

L’un des plus grands avantages du CSS est que les objets peuvent être positionnés n’importe où dans le document, et que les objets peuvent également être positionnés dans un conteneur. Ajoutez simplement une règle CSS au conteneur :

Ensuite, tout élément du conteneur est positionné par rapport au conteneur. Supposons que vous utilisiez la structure HTML suivante :

Si vous souhaitez positionner la navigation dans le conteneur à 30 pixels du bord gauche et à 5 pixels du haut, vous pouvez utiliser l'instruction CSS suivante :

10. Couleur d'arrière-plan s'étendant jusqu'au bas de l'écran

L’un des inconvénients du CSS est le manque de contrôle vertical, ce qui entraîne des problèmes que ne rencontre pas une disposition de tableau. Supposons que vous configuriez une colonne sur le côté gauche de la page pour placer la navigation de votre site Web. La page a un fond blanc, mais vous souhaitez que la colonne de navigation ait un fond bleu. Utilisez simplement le CSS suivant :

Le problème est que l'élément de navigation ne s'étend pas jusqu'en bas de la page et, bien entendu, sa couleur d'arrière-plan ne s'étend pas non plus jusqu'en bas. Ainsi, le fond bleu de la colonne de gauche est coupé à mi-chemin de la page, ce qui gâche votre conception. Que devons-nous faire ? Malheureusement, nous ne pouvons utiliser que la tromperie, c'est-à-dire spécifier l'arrière-plan du corps comme une image de la même couleur et de la même largeur que la colonne de gauche.

L'image d'arrière-plan doit être une image bleue de 150 pixels de large. L'inconvénient de cette méthode est que em ne peut pas être utilisé pour spécifier la largeur de la colonne de gauche. Lorsque l'utilisateur modifie la taille du texte et que la largeur du contenu s'agrandit, la largeur de la couleur d'arrière-plan ne changera pas en conséquence.

Au moment d'écrire ces lignes, c'est la seule solution à ce type de problème, vous ne pouvez donc utiliser que les valeurs de pixels pour la colonne de gauche pour obtenir une couleur d'arrière-plan différente qui s'étire automatiquement.