Quelques très bonnes compétences CSS, mais elles sont souvent ignorées par les échanges people_Experience

1. Sensible à la casse
Lors de l'utilisation de CSS en XHTML, les noms d'éléments définis en CSS sont sensibles à la casse. Pour éviter cette erreur, je recommande d'utiliser des minuscules pour tous les noms de définition.

2. Pas besoin d'ajouter des guillemets au chemin de l'image de fond
Afin d'économiser des octets, je recommande de ne pas ajouter de guillemets au chemin de l'image de fond, car les guillemets ne sont pas nécessaires. Par exemple :

background:url("images/***.gif") #333;

peut s'écrire

background:url(images/***.gif) #333;

Si vous ajoutez des guillemets , Au contraire, cela provoquera des erreurs de navigateur


3. Spécifiez les styles de lien dans le bon ordre
Lorsque vous utilisez CSS pour définir plusieurs styles d'état de liens, faites attention à leur nature. écrit. L'ordre correct est : :link :visited :hover :active. La première lettre extraite est "LVHA", dont vous pouvez vous souvenir comme "LoVe HAte" (aime détester Four). Le problème CSS est que lors du positionnement des flotteurs, le calque sous-jacent est recouvert par le calque flottant, ou le sous-calque imbriqué dans le calque dépasse la portée du calque externe

Habituellement, la solution consiste à ajouter un élément supplémentaire. derrière la couche flottante, comme un div ou un br, et définissez son style de manière claire : les deux. Cette méthode est un peu tirée par les cheveux. Heureusement, il existe un bon moyen de le résoudre. Voir cet article "Comment. Effacer les flotteurs sans balisage structurel" (Remarque : ce site traduira cet article dès que possible)

Les deux méthodes ci-dessus peuvent très bien résoudre le problème du débordement flottant, mais si vous avez vraiment besoin de corriger le calque. Ou que faire lorsque les objets d'un calque sont effacés ? Une méthode simple consiste à utiliser l'attribut de débordement. Cette méthode a été initialement publiée dans "Simple Clearing of Floats" et a été largement utilisée dans "Clearance" et "Super simple clearing floats". .

Laquelle des méthodes claires ci-dessus vous convient le mieux dépend de la situation spécifique, et je n'en discuterai pas ici. De plus, quelques excellents articles l'ont déjà dit très clairement. : "Floatutorial", "Containing Floats" et "Float Layouts"


5. Centrage horizontal (centrage)
C'est une technique simple, mais cela vaut la peine de le répéter car je l'ai vu. de nombreuses questions de débutants demandent toutes ceci : Comment centrer CSS horizontalement ? Vous devez définir la largeur de l'élément et définir la marge horizontale si votre mise en page est contenue dans un calque (conteneur), comme ceci :
body { text-align:center;
}
#wrap {
width:760px /* Modifiez la largeur de votre calque;*/
margin:0 auto;
text-align:left;
}


6. Compétences en débogage : quelle est la taille du calque ?
Lors du débogage d'une erreur CSS, vous devez analyser le code CSS ligne par ligne. Je définis généralement une couleur de fond sur le calque problématique, afin qu'il puisse être. facilement résolu. Vous pouvez clairement voir combien d'espace occupe le calque. Certaines personnes suggèrent d'utiliser border, ce qui est généralement possible, mais le problème est que parfois border augmentera la taille de l'élément, et border-top et boeder-bottom le détruiront. la valeur de la marge verticale, utilisez donc l'arrière-plan. Soyez plus sûr
.