Dix techniques CSS classiques_CSS/HTML

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

En général, voici comment définir les attributs de police avec CSS :

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif ;

Mais vous pouvez aussi les écrire tous sur une seule ligne :

police : gras italique petites majuscules 1em/1.5em verdana,sans-serif;

Vraiment bien ! Juste une mise en garde : cette méthode raccourcie ne fonctionne que lorsque les propriétés font-size et font-family sont spécifiées. 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. Utiliser deux classes en même temps

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

...

Donner deux éléments P à en même temps des classes, séparées par des espaces, afin que tous les attributs du texte et des classes latérales 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

3. La 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

Celui-ci montre la bordure sous la forme d'une ligne noire continue de 3 pixels de large. Mais en fait, il vous suffit de préciser ici le style.

Si seul le style est spécifié, les autres attributs utiliseront les valeurs par défaut. 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.

4. CSS pour l'impression de documents

De nombreux sites Web ont une version pour l'impression, mais en fait, cela n'est pas nécessaire car il peut être défini avec le style d'impression CSS Set.

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 première ligne est destinée à l'affichage et la deuxième ligne 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 et désactiver certains boutons de navigation. Pour en savoir plus, consultez l'article « Différences d'impression ».

5. Compétences en remplacement d'images

Il est généralement recommandé d'utiliser du HTML standard pour afficher du texte au lieu d'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, c'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 En effet, 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 de cette façon, il n'y a pas de police spéciale. Pour obtenir le même effet, vous pouvez concevoir du CSS comme ceci :

h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

Assurez-vous de 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 d'ajustement du modèle de boîte CSS

Cet ajustement du modèle de boîte est principalement pour IE avant IE6 Pour les navigateurs , ils comptent la largeur de la bordure et les espaces dans la largeur de l'élément. Par exemple :

#box { width: 100px; border: 5px; padding: 20px }

Appelez-le comme ceci :

...

À l'heure actuelle, la largeur totale de la boîte doit être de 150 points, ce qui est le cas dans tous les navigateurs sauf Navigateurs IE avant IE6 Tous sont corrects sur l'appareil. Mais sur les navigateurs comme IE5, sa largeur totale est toujours de 100 points. Cette différence peut être gérée en utilisant 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 les rendre cohérents.

#box { width: 150px } #box p { border: 5px; padding: 20px }

Appelez comme ceci :

...

De cette façon, quel que soit le navigateur, la largeur est de 150 points.

7. Alignement central des éléments de bloc

Si vous souhaitez créer une page Web à largeur fixe et que vous souhaitez que la page Web soit centrée horizontalement, c'est généralement comme this :

#content { width: 700px; margin: 0 auto }

Vous utiliseriez

C'est simple, mais pas suffisant, et les versions antérieures à IE6 n'afficheront pas cet effet. Modifiez le CSS comme suit :

body { text-align: center } #content { text-align: left; margin: 0 auto }

Le contenu de la page Web sera centré, 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 tableaux. Définissez simplement l'unité de table vertical-align : middle. 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 CSS dans un 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 :

#container { position: relative }

De cette façon, tous les éléments du conteneur seront positionnés relativement. Vous pouvez l'utiliser. comme ceci :

...

Si vous souhaitez localiser 30 points vers la gauche, 5 points vers le haut, comme ceci :

#navigation { position: left: 30px top: 5px >

Bien sûr, vous pouvez Liker ceci :

marge : 5px 0 0 30px

A noter que l'ordre des 4 nombres est : top , droite, bas, gauche. Bien sûr, il est parfois préférable de privilégier le positionnement plutôt que les marges.

10. La couleur de fond qui va directement en bas de l'écran

est contrôlée dans le sens vertical et ne peut pas être contrôlée par CSS. Si vous souhaitez que la barre de navigation aille directement en bas de page comme la barre de contenu, il est très pratique d'utiliser un tableau, mais si vous n'utilisez que du CSS comme ceci :

#navigation { background: blue; width: 150px }

Une barre de navigation plus courte n'ira pas directement vers le bas, elle se terminera lorsque le contenu se terminera à mi-chemin. 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, avec 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.

body { background: url(blue-image.gif) 0 0 répétition-y }

Vous ne pouvez pas les utiliser comme unité pour le moment, car dans ce Dans ce cas, une fois que le lecteur a modifié la taille de la police et que cette astuce sera révélée, seuls les px pourront être utilisés.