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 :
<p class="côté texte">…</p>
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 <p id="text side">…</p> 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 :
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
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 :
<h1><img src="widget-image.gif" alt="Acheter des widgets" /></h1>
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 :
<h1>Acheter des widgets</h1>
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 :
<div id="box">…</div>
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 :
<div id="box"><div>…</div></div>
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 <div id="content"> pour entourer tous les éléments. C'est simple, mais pas suffisant, et les versions antérieures à IE6 n'afficheront pas cet effet. Modifiez le CSS comme suit :
corps { text-align : centre } #content { texte-align : gauche ; largeur : 700 px marge : 0 auto } ;
Cela centrera le contenu de la page Web, donc text-align: left est ajouté au contenu.
8. Utilisez CSS pour gérer l'alignement vertical
L'alignement vertical peut être facilement réalisé à l'aide de tables. Il suffit de régler l'unité de table en alignement vertical : au milieu. Mais cela ne sert à rien avec CSS. Si vous souhaitez définir une barre de navigation d'une hauteur de 2 em et que le texte de navigation soit centré verticalement, la définition de cet attribut est inutile.
Qu'est-ce que la méthode CSS ? Au fait, définissez la hauteur de ligne de ces mots sur 2em : line-height : 2em, et c'est tout.
9. Positionnement du CSS dans le conteneur
L'un des avantages du CSS est que vous pouvez positionner un élément arbitrairement, même dans un conteneur. Par exemple, pour ce conteneur :
#conteneur { position : relative }
De cette façon, tous les éléments du conteneur seront positionnés relativement, ce qui peut être utilisé comme ceci :
<div id="conteneur"><div id="navigation">…</div></div>
Si vous souhaitez localiser 30 points en partant de la gauche et 5 points en partant du haut, vous pouvez faire ceci :
#navigation { position : absolue ; gauche : 30px ; haut : 5px }
Bien sûr, vous pouvez également faire ceci :
marge : 5px 0 0 30px
Notez que l’ordre des quatre nombres est : haut, droite, bas, gauche. Bien sûr, il est parfois préférable de privilégier le positionnement plutôt que les marges.
Pour plus de mises en page et de techniques CSS, veuillez vous référer au grand nombre de didacticiels sur 52CSS.com.
10. Couleur d’arrière-plan directement en bas de l’écran
Le contrôle dans le sens vertical dépasse les capacités du CSS. Si vous souhaitez que la barre de navigation aille directement en bas de la page comme la barre de contenu, utiliser un tableau est très pratique, mais si vous n'utilisez que du CSS comme ceci :
#navigation { arrière-plan : bleu ; largeur : 150px }
Une barre de navigation plus courte ne va pas jusqu’en bas ; elle se termine à mi-chemin du contenu. Ce qu'il faut faire?
Malheureusement, la seule façon de tricher est d'ajouter une image d'arrière-plan à la colonne la plus courte, de la même largeur que la largeur de la colonne, et de lui donner la même couleur que la couleur d'arrière-plan définie.
corps { arrière-plan : url (blue-image.gif) 0 0 répétition-y }
Vous ne pouvez pas les utiliser comme unité pour le moment, car l'astuce sera alors révélée une fois que le lecteur aura modifié la taille de la police, et vous ne pourrez utiliser que px.