1. Règles d'abréviation des attributs de police CSS

Généralement, CSS est utilisé pour définir les attributs de police :
poids de la police : gras ;
style de police : italique ;
variante de police : petites majuscules ;
taille de police : 1em ;
hauteur de ligne : 1,5 em ;
famille de polices:verdana,sans-serif;
Vous pouvez tous les écrire sur une seule ligne :
police : gras italique petites majuscules 1em/1,5em verdana,sans-serif ;
Cela ne semble-t-il pas beaucoup plus simple ? Il n'y a qu'une seule chose à noter : cette méthode raccourcie ne fonctionne que lorsque les propriétés font-size et font-family sont spécifiées en même temps. De plus, si vous ne définissez pas font-weight, font-style et font-variant, ils utiliseront les valeurs par défaut, alors gardez cela à l'esprit.

2. Valeur par défaut de la bordure CSS

Vous pouvez généralement définir la couleur, la largeur et le style de la bordure, tels que :
bordure : 3px solide #000 ;
Cela fait apparaître la bordure de 3 pixels de large, noire et unie. Mais en fait, il vous suffit de préciser ici le style.
Si seul le style est spécifié, les valeurs par défaut seront utilisées pour les autres propriétés. Généralement, la largeur par défaut de Border est moyenne, ce qui est généralement égal à 3 à 4 pixels ; la couleur par défaut est la couleur du texte. Si cette valeur est correcte, il n'est pas nécessaire de définir autant de paramètres.

3. Utilisez deux classes pour les éléments en même temps

Généralement, un élément est défini sur une classe (Class), mais cela ne signifie pas que deux ne peuvent pas être utilisés. En fait, vous pouvez faire ceci :

…

Donnez à l'élément P deux classes en même temps, séparées par des espaces, afin que tous les attributs des classes text et side soient ajoutés à l'élément P. S'il y a un conflit entre les attributs des deux classes, celui défini ultérieurement prendra effet, c'est-à-dire que les attributs de la classe placés ultérieurement dans le fichier CSS prendront effet.
Supplément : Pour une pièce d'identité, vous ne pouvez pas écrire

…

ni l'écrire comme ceci

4. CSS pour l'impression de documents

De nombreux sites Web disposent d'une version spécifique à l'impression, mais celle-ci n'est pas vraiment nécessaire car l'impression peut être stylisée à l'aide de CSS.
En d'autres termes, vous pouvez spécifier deux fichiers CSS pour la page, un pour l'affichage à l'écran et un pour l'impression :


La ligne 1 est destinée à l'affichage, la ligne 2 est destinée à l'impression, faites attention à l'attribut média.
Mais que faut-il écrire dans le CSS d’impression ? Vous pouvez le configurer de la même manière que vous concevriez du CSS normal. Lors de la conception, vous pouvez configurer ce CSS pour qu'il affiche le CSS afin de vérifier son effet. Peut-être utiliserez-vous la commande display: none pour désactiver certaines images décoratives, désactiver certains boutons de navigation, etc.

5. Compétences en remplacement d'images CSS

Il est généralement recommandé d’utiliser le HTML standard pour afficher du texte plutôt que des images, ce qui est non seulement plus rapide mais aussi plus lisible. Mais si vous souhaitez utiliser des polices spéciales, vous ne pouvez utiliser que des images.
Par exemple, si vous souhaitez créer une icône pour vendre des objets, vous utiliserez cette image :

Bien sûr, cela est possible, mais pour les moteurs de recherche, par rapport au texte normal, ils ont peu d'intérêt pour le texte de remplacement dans alt. C'est parce que de nombreux concepteurs placent ici de nombreux mots-clés pour tromper les moteurs de recherche. La méthode devrait donc être la suivante :

Acheter des widgets

Mais il n’y a pas de polices spéciales. Pour obtenir le même effet, vous pouvez concevoir du CSS comme ceci :
h1 { background : url(widget-image.gif) no-repeat ; hauteur : hauteur de l'image, retrait de texte : -2000px }
Faites attention à remplacer la hauteur de l'image par la hauteur de l'image réelle. Ici, l'image sera affichée comme arrière-plan, et comme l'indentation de -2000 pixels est définie, le texte réel apparaîtra à 2000 points sur le côté gauche de l'écran et sera invisible. Mais pour les personnes qui désactivent l’image, elles risquent de ne pas la voir du tout, alors soyez prudent.

6. Une autre technique de modèle de boîte CSS

L'ajustement de ce modèle Box concerne principalement les navigateurs IE antérieurs à IE6, qui comptent la largeur de la bordure et les espaces dans la largeur de l'élément. Par exemple:
#box {largeur : 100 px ; bordure : 5 px ; remplissage : 20 px }
Appelez-le comme ceci :

La largeur totale de la boîte devrait désormais être de 150 points, ce qui est correct sur tous les navigateurs sauf IE avant IE6. Mais sur les navigateurs comme IE5, sa largeur totale est toujours de 100 points. Cette différence peut être gérée à l'aide de la méthode d'ajustement Box inventée par les personnes précédentes.
Mais le même objectif peut être atteint avec CSS pour rendre leur affichage cohérent.
#box { largeur : 150px }
#box div { bordure : 5px ; remplissage : 20px }
Appelé ainsi :

Ainsi, quel que soit le navigateur, la largeur est de 150 points.

7. CSS définit les éléments de bloc pour qu'ils soient alignés horizontalement au centre

Si vous souhaitez créer une page Web de largeur fixe et que la page Web soit centrée horizontalement, elle ressemble généralement à ceci :
#content {largeur : 700 px ; marge : 0 auto }
Vous utiliseriez