10 bonnes compétences CSS que vous ne connaissez peut-être pas_Experience Exchange

Cette traduction n'est pas autorisée par l'auteur ou le site Internet. Tous les droits appartiennent à l'auteur original et au site Web original.
Si vous êtes autorisé par l'auteur original ou le site Web d'édition original, vous pouvez utiliser cette traduction librement.

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 : italique;
variante de police: petites majuscules;
taille de police:1em;
hauteur de ligne:1,5em
famille de police: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

Super ! 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. Utilisez 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ées. En fait, vous pouvez faire ceci :


...

Donner à l'élément P deux classes en même temps, séparées par des espaces, pour que tout le texte et les côtés Les attributs de classes seront 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 un identifiant, vous ne pouvez pas écrire comme ça
...
, vous ne pouvez pas non plus écrire comme ça

3 La valeur par défaut de la bordure CSS
.
est généralement OK. Définissez la couleur, la largeur et le style de la bordure, tels que :
bordure : 3px solide #000
Cela affichera la bordure avec une largeur de 3 pixels, noire et unie. 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 CSS peut être utilisé pour définir le style d'impression.

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 :



N° 1. La première ligne est destinée à l'affichage et la deuxième ligne est destinée à l'impression. Faites attention à l'attribut media.

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. C'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 vendre l'icône entière, vous pouvez utiliser cette image :

Bien sûr c'est possible, mais pour les moteurs de recherche, c'est normal Par rapport au texte, ils s'intéressent peu au texte de remplacement dans alt. C'est parce que de nombreux concepteurs mettent 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 }

Payer l'attention portée à la hauteur de l'image est remplacée 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 pour le modèle de boîte CSS

Cet ajustement du modèle de boîte est principalement destiné aux navigateurs IE avant IE6. Ils comptent la largeur de la bordure et les espaces comme largeur d'élément supérieure. Par exemple :

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

Appelez-le comme ceci :

...

Die volle Breite des Felds sollte jetzt 150 Punkte betragen, was in allen Browsern außer IE vor IE6 korrekt ist. Aber in Browsern wie IE5 beträgt die volle Breite immer noch 100 Punkte. Dieser Unterschied kann mit der von früheren Leuten erfundenen Box-Anpassungsmethode behoben werden.

Aber derselbe Zweck kann mit CSS erreicht werden, um eine konsistente Anzeige zu gewährleisten.

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

Aufruf wie folgt:

...

Auf diese Weise beträgt die Breite unabhängig vom Browser 150 Punkte.

7. Blockelemente in der Mitte ausrichten

Wenn Sie eine Webseite mit fester Breite erstellen möchten und die Webseite horizontal zentriert sein soll, geht das normalerweise so:

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

Sie würden

verwenden, um alle Elemente zu umgeben. Das ist einfach, aber nicht gut genug, und Versionen vor IE6 zeigen diesen Effekt nicht. Ändern Sie das CSS wie folgt:

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

Dadurch wird der Inhalt zentriert Also wurde
text-align: left zum Inhalt hinzugefügt.

8. Verwenden Sie CSS, um die vertikale Ausrichtung zu verwalten.

Die vertikale Ausrichtung kann einfach mithilfe von Tabellen erreicht werden. Stellen Sie einfach die Tabelleneinheit „vertikal-align: middle“ ein. Aber das ist mit CSS nutzlos. Wenn Sie eine Navigationsleiste auf eine Höhe von 2 cm festlegen möchten und möchten, dass der Navigationstext vertikal zentriert ist, ist das Setzen dieses Attributs nutzlos.

Was ist die CSS-Methode? Stellen Sie übrigens die Zeilenhöhe dieser Wörter auf 2em ein: line-height: 2em, und das war's.

9. CSS-Positionierung innerhalb eines Containers

Ein Vorteil von CSS besteht darin, dass Sie ein Element auch innerhalb eines Containers beliebig positionieren können. Zum Beispiel für diesen Container:

#container { position: relative }

Auf diese Weise werden alle Elemente im Container relativ positioniert. Sie können es wie folgt verwenden:

...

Wenn Sie 30 Punkte von links und 5 Punkte von oben positionieren möchten, können Sie dies tun:

#navigation { position : absolut; links: 30px; oben: 5px }

Natürlich können Sie dies auch tun:
Rand: 5px 0 0 30px
Beachten Sie, dass die Reihenfolge der vier Zahlen ist: oben, rechts, unten, links. Natürlich ist manchmal die Positionierung statt der Ränder besser.

10. Die Hintergrundfarbe, die direkt bis zum unteren Bildschirmrand reicht

Es ist unmöglich, sie mit CSS in vertikaler Richtung zu steuern. Wenn Sie möchten, dass die Navigationsleiste wie die Inhaltsleiste direkt an den unteren Rand der Seite gelangt, ist es sehr praktisch, eine Tabelle zu verwenden. Wenn Sie jedoch nur CSS wie folgt verwenden:

#navigation { Hintergrund: blau ; Breite: 150px }

Eine kürzere Navigationsleiste reicht nicht direkt nach unten, sondern endet, wenn der Inhalt auf halbem Weg endet. Was zu tun?

Leider besteht die einzige Möglichkeit zu betrügen darin, der kürzeren Spalte ein Hintergrundbild hinzuzufügen, dessen Breite der Spaltenbreite entspricht und dessen Farbe der eingestellten Hintergrundfarbe entspricht.

body { background: url(blue-image.gif) 0 0 repeat-y }

Sie können em derzeit nicht als Einheit verwenden, da sich in diesem Fall der Leser ändert Die Schriftgröße, dieser Trick wird enthüllt, Sie können nur px verwenden.

Der Autor dieses Artikels ist: Trenton Moss.
Die Veröffentlichungswebsite lautet: http://www.webcredible.co.uk/.

Diese Übersetzung ist nicht vom Autor oder der Website autorisiert. Alle Rechte liegen beim ursprünglichen Autor und der ursprünglichen Website.
Wenn Sie vom ursprünglichen Autor oder der ursprünglichen Veröffentlichungswebsite autorisiert sind, können Sie diese Übersetzung frei verwenden.​