1. Règles d'abréviation des polices CS
Lorsque vous utilisez CSS pour définir des polices, vous pouvez procéder comme suit :
| taille de police : 1em ; hauteur de ligne : 1,5em ; poids de la police : gras ; style de police : italique ; variante de police : petites majuscules ; famille de polices : verdana,serif ; |
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 spécifier au moins les propriétés font-size et font-family si d'autres propriétés (telles 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 :
| contenu |
En utilisant deux classes en même temps (en les séparant 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 de !important recevra la priorité absolue, par exemple :
| marge-haut : 3,5em !important ; marge-haut : 2em |
La marge supérieure est de 3,5em dans tous les navigateurs sauf IE, et de 2em dans IE. Parfois, cela est utile, notamment lors de l'utilisation de valeurs de marge relatives (comme cet exemple), pour montrer la différence entre IE et les autres navigateurs.
(IE fait référence ici à : IE6 et versions antérieures, à l'exclusion de IE7. En fait, IE7 prend en charge l'attribut !important, et il en va de même pour les sous-sélecteurs CSS)
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 :
C'est certainement vrai, mais il est prouvé que les moteurs de recherche accordent beaucoup plus d'importance au texte réel qu'au 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 :
Achetez des widgets, mais qu'en est-il de vos belles polices ? Les CSS suivants peuvent vous aider :
| h1 { arrière-plan : url(widget-image.gif) sans répétition ; } durée h1 { position : absolue ; gauche : -2000px ; } |
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 est utilisé pour résoudre les problèmes d'affichage du navigateur avant IE6 . Les versions antérieures à IE6.0 incluront la valeur de bordure et la valeur de remplissage d'un élément dans la largeur (au lieu d'être ajoutées à). la valeur de la largeur). Par exemple, vous pouvez utiliser le CSS suivant pour spécifier les dimensions d'un conteneur :
| #boîte { largeur : 100 px ; bordure : 5px ; remplissage : 20 px ; } |
Postulez ensuite en html :
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 :
| css : #boîte { largeur : 150 px ; } #boîte div { bordure : 5px ; remplissage : 20 px ; } HTML : ... |
Cela aura pour conséquence que la largeur totale de la boîte sera de 150 pixels dans n'importe quel navigateur.
7. Éléments du bloc central
En supposant que votre site Web utilise une mise en page à largeur fixe et que tout le contenu est placé au centre de l'écran, vous pouvez utiliser le CSS suivant :
| #contenu { largeur : 700 px ; marge : 0 automatique ; } |
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 :
| corps { alignement du texte : centre ; } #contenu { aligner le texte : gauche ; largeur : 700 px ; marge : 0 automatique ; } |
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, il vous suffit alors d'ajouter une autre hauteur de ligne : 2em au CSS. Centrage vertical réussi !
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 :
| #récipient { position : relative ; } |
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 :
| #navigation { position : absolue ; gauche : 30px ; haut : 5px ; } |
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 :
| #navigation { fond : bleu ; largeur : 150 px ; } |
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.
| corps { arrière-plan : url(blue-image.gif) 0 0 répétition-y ; } |
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.