Résumé de l'apprentissage sur l'utilisation du CSS_Échange d'expériences

Utilisez le moins possible les classes, car vous pouvez cascader la reconnaissance, comme : .News h3 sans ajouter de classes à h3

3. S'il n'y a aucun élément existant à distinguer, utilisez div

• Accueil


• À propos de nous

peut être remplacé par

• Accueil


• À propos de nous

4. Sélecteur
p a h1 type selector
Li a {text-decoration:none} Sélecteur descendant
*{ padding:0; } Sélecteur universel, tous les éléments de la page.
5. Positionnement
Le positionnement relatif est relatif à la position où il doit apparaître
Le positionnement absolu est relatif à l'élément ancêtre positionné le plus proche (des expériences ont montré que les éléments ancêtres doivent être définis sur un positionnement relatif)
Flottant La boîte peut se déplacer vers la gauche et la droite jusqu'à ce que son bord touche la boîte contenante ou le bord d'une autre boîte contenante. Etant donné que la boîte flottante n'est pas dans le flux normal du document, une boîte dans le flux normal du document se comporte comme si la boîte flottante ne se trouvait pas dans le flux normal du document. la boîte flottante n'existe pas.
Résumé : Si un div flotte, le div suivant sera traité comme si le premier n'existait pas. Sachez quand vous rencontrez une boîte flottante ou contenante.
Effacer : droit Le côté droit de la boîte flottante est disponible
Effacer : gauche Le côté gauche de la boîte flottante est disponible
Effacer : les deux Les deux côtés de la boîte flottante sont indisponibles
Application du débordement L'attribut avec une valeur masqué ou auto nettoiera automatiquement tous les éléments flottants contenus.
6. Fond dégradé
Créez une image dégradée haute mais étroite, carrelée horizontalement
Corps
{
Arrière-plan : #ccc url (gradient.gif) répéter-x ; 🎜>Mais il est difficile de prédire la hauteur de la page d'image, vous pouvez donc la combiner avec la couleur d'arrière-plan. Lorsque l'image se termine, la couleur apparaîtra si la différence de couleur entre les deux est très proche, la conversion. ne sera pas visible.
Exemple : Ajoutez une icône à chaque titre
H1
{
Padding-left:30px;
Arrière-plan : url(/images/bullet.gif) no-repeat left center
}
7. Mettez en avant différents types de liens
tels que : liens vers des sites externes, des e-mails, des téléchargements, etc.
.external
{
Fond : url (/images/externalLink. gif) no-repeat right top;
Padding-right:10px;
}
8. Éléments spécifiques au tableau
1) Résumé et légende
Les attributs de résumé peuvent être appliqués aux étiquettes du tableau, Décrivez le contenu du tableau
Légende Le titre du tableau
2) thead tbody tfoot
I.e Vous pouvez mettre tous les en-têtes de colonnes dans l'élément thead Si vous choisissez d'utiliser l'élément thead ou tfoot, vous devez utiliser. au moins un élément tbody. Un tableau ne peut utiliser qu'un seul head et tfoot, mais peut utiliser plusieurs tbodies
Modèle de bordure du tableau
1) Modèle individuel : Chaque cellule est entourée d'une bordure
. 2) Modèle de superposition : bordure partagée de la grille cellulaire
10. Disposition du formulaire
Fieldset ferme la bordure. Les versions inférieures ne la prennent pas en charge, mais vous pouvez utiliser
Filedset
{
Bordure : solide 0. transparent;
}
11 . Libellé du formulaire
Mode implicite :
email
Mode d'affichage :
email

Que ce soit dans la forme L'utilisation de paragraphes est controversée. 12. Concevons le drame
Méthode 1 :

#wrapper {
Largeur : 720px;
Margin:0 auto;
}
Mais cette méthode n'est pas normale dans IE6 et versions antérieures
Méthode 2 (doit être combinée en fonction de deux éléments) : Utiliser le blanc automatique
Corps
{
Text-align:center;
Min-width : 760 ;
}
#wrapper
{
Largeur : 720 px ;
Marge : 0 auto ;
Text-align : left ;
}
Méthode 3 : Utiliser le positionnement et les espaces négatifs pour modifier
#wrapper
{
Width:720px
Position : relative
Gauche : 50% ;
Marge-gauche : -360 ;
}
13 : Mise en page fluide : Toutes les tailles sont définies en pourcentages au lieu de pixels
Avantages : La largeur change avec la taille du navigateur .
Inconvénients : à mesure qu'il devient plus petit, les rangées deviennent plus étroites.
Solution : Définir la largeur minimale en pixels et ems
14 : Mise en page flexible : lorsque la taille de la police change, la ligne change (l'unité est em)
La mise en page flexible définit la largeur de l'élément par rapport à la police taille.
1em=10px;
La taille de police par défaut de la plupart des navigateurs est de 16px, 10 équivaut à 62,5% de 16 pixels
Corps
{
Font-size:62,5% }
#wrapper
{
Largeur : 72em ;
Marge : 0 auto 
Alignement du texte :
}
#mainNav
{
Largeur : 18em ;
Float:right
}
15. Disposition fluide élastique : définissez la largeur en em et la largeur maximale en pourcentage.
#wrapper
{
Largeur : 72em ;
Largeur maximale : 100 % ;
Marge : 0 auto ;
Alignement du texte : gauche ;
}
16 : Images fluides et élastiques
Problème de déformation de l'image : Essayez de la mettre en arrière-plan
17. Astuce HTML Asterisk
* html a:hover
{
Style du corps : solide
}
Utile uniquement pour IE6 ou version antérieure
18 : !astuces d'importation et de soulignement
# nav
{
Position : fixe !important;
Position : statique;
ou
#nav
{
Position : fixe
_Position : statique;
}
19, plusieurs colonnes

Nav obligatoire Pour distinguer couleurs et hauteur d'affichage 100%, vous pouvez créer une image avec une largeur égale à Nav, définir une image d'arrière-plan sur l'image principale et la carreler dans le sens vertical.