Il existe de nombreux conseils pour le développement de mises en page Web CSS, et les amis novices ne les connaissent souvent pas. Sur un ou deux petits problèmes, cela peut prendre beaucoup de temps pour comprendre. Bien que cet aspect ait été mentionné à plusieurs reprises dans les documents de 52CSS.com, de nombreux amis font encore des erreurs sur ces questions. Jetons un coup d'œil à ces techniques CSS aujourd'hui. Lisez-les attentivement. Peut-être que vous ne les comprenez pas complètement. Vous pouvez effectuer une recherche sur 52CSS.com pour élargir les connaissances que vous souhaitez.
1. La balise ul a une valeur de remplissage par défaut dans Mozilla, mais dans IE, seule la marge a une valeur.
2. Le même sélecteur de classe peut apparaître à plusieurs reprises dans un document, mais le sélecteur d'identifiant ne peut apparaître qu'une seule fois. Utilisez à la fois class et id pour définir une étiquette en CSS. Si les définitions sont répétées, la définition faite par le sélecteur id est valide car le poids de id est supérieur à celui de class.
3. Une façon stupide d'ajuster la compatibilité (IE et Mozilla) :
Les débutants peuvent rencontrer une telle situation : l'attribut du même label s'affiche normalement lorsqu'il est défini sur A dans IE, mais doit être défini sur B dans Mozilla pour s'afficher normalement, sinon les deux sont inversés.
Solution temporaire : le sélecteur {nom de la propriété : B !important ; nom de la propriété : A} peut parfois ne pas fonctionner. Vous pouvez rechercher plus de solutions BUG sur 52CSS.com.
4. Si un certain espacement est requis entre un groupe de balises imbriquées, laissez-le à l'attribut margin de la balise située à l'intérieur au lieu de définir le remplissage de la balise située à l'extérieur.
5. Il est recommandé d'utiliser background-image au lieu de list-style-image pour l'icône devant la balise li.
6. IE ne peut pas faire la différence entre la relation d'héritage et la relation père-fils. Ce sont toutes des relations d'héritage.
7. Lorsque vous ajoutez follement des sélecteurs à vos balises, n'oubliez pas d'ajouter des commentaires aux sélecteurs en CSS. Vous saurez pourquoi vous faites cela lorsque vous modifierez votre CSS plus tard. Un mot d’avertissement également : ne devenez pas trop fou.
8. Si vous définissez une image d'arrière-plan sombre et un effet de texte clair pour une étiquette. Il est recommandé de définir une couleur d'arrière-plan plus foncée pour votre étiquette à ce stade. Parce que les images sont perdues, le texte reste lisible.
9. Lors de la définition des quatre états d'un lien, faites attention à l'ordre : Lien visité Survol actif
10. Veuillez utiliser un arrière-plan pour les images qui n'ont rien à voir avec le contenu. N'oubliez jamais de séparer la présentation du contenu.
11. La couleur définie peut être abrégée #8899FF=#89F
12. Les tableaux sont toujours utiles à certains égards. Lorsque vous rencontrez un tableau de données, ne le détestez pas.
13. <script> n'a pas l'attribut langage et doit être écrit comme ceci : <script type="text/javascript">
14. Tableau de contour parfait à un seul pixel (peut réussir le test dans IE5, IE6, IE7 et FF1.0.4 ou supérieur)
table{ border-collapse:collapse } td{ frontière :#000 solide 1px ; |
15. Les valeurs de marge négatives peuvent jouer un rôle dans le positionnement relatif lorsque l'étiquette utilise un positionnement absolu. Lorsque la page est affichée au centre, l'attribut left:XXpx ne convient pas aux calques utilisant un positionnement absolu. C'est une bonne idée de placer ce calque à côté d'une étiquette qui doit être positionnée de manière relative, puis d'utiliser des valeurs négatives pour la marge.
16. Lors de l'utilisation du positionnement absolu, la valeur de la marge peut être utilisée pour se positionner par rapport à sa propre position, ce qui est différent du positionnement des attributs tels que haut et gauche par rapport au bord de la fenêtre. L’avantage du positionnement absolu est qu’il permet aux autres éléments d’ignorer son existence.
17. Si le texte est trop long, changez la partie longue en points de suspension et affichez-la : invalide dans IE5 et FF, mais peut être masquée, valide dans IE6
| <DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”> <NOBR>Par exemple, il existe une ligne de texte si longue qu'elle ne peut pas être affichée sur une seule ligne du tableau.</NOBR> |
18. Lorsqu'il peut y avoir des problèmes de duplication de texte causés par des commentaires dans IE, vous pouvez modifier les commentaires comme suit :
<!–[if !IE]>Mettez votre commentaire ici…<![endif]–> |
19. Comment appeler des polices externes en utilisant CSS
grammaire:
| @font-face{font-family:name;src:url(url);sRules} |
Valeur:
nom : nom de la police. toute valeur possible de l'attribut font-family url(url) : spécifiez le fichier de police OpenType en utilisant une adresse URL absolue ou relative sRules : définition de la feuille de style |
20. Comment centrer verticalement le texte dans une zone de texte dans un formulaire ?
Si l'utilisation de la hauteur de ligne et des groupes de hauteur n'a aucun effet dans FF, la méthode consiste à définir le remplissage supérieur et inférieur pour obtenir l'effet souhaité.
21. Petits soucis à prendre en compte lors de la définition de la balise A :
Lorsque nous définissons a{color:red;}, il représente les styles des quatre états de A. Si nous voulons définir un état où la souris est placée, définissez simplement a:hover. Les trois autres états sont dans A. Le style défini. Lorsqu’un seul a:link est défini, n’oubliez pas de définir les trois autres états !
22. Tous les styles n’ont pas besoin d’être abrégés :
Lorsque p{padding:1px 2px 3px 4px} est défini avant la feuille de style, un autre style est ajouté dans le projet suivant avec un remplissage supérieur de 5px et un remplissage inférieur de 6px. Nous ne devons pas nécessairement écrire p.style1{padding:5px 6px 3px 4px}. Il peut être écrit comme p.style1{padding-top:5px;padding-right:6px;} Vous pensez peut-être que l'écrire de cette façon n'est pas aussi bon que l'original, mais y avez-vous déjà pensé ? La méthode définit le style à plusieurs reprises. De plus, vous n'avez pas besoin de savoir quelles sont les valeurs de remplissage inférieures et gauches d'origine ! Si le style P précédent change à l'avenir, le style de p.style1 que vous avez défini changera également.
23. Plus le site Web est grand, plus il y aura de styles CSS. Avant de commencer, veuillez effectuer des préparatifs et des plans complets, y compris les règles de dénomination. Division des blocs de pages, classification des styles internes, etc.
24. Troncature de caractères chinois à largeur fixe : overflow : caché ; text-overflow : ellipsis ; white-space : nowrap ; (Cependant, il ne peut gérer la troncature du texte que sur une seule ligne, pas sur plusieurs lignes.) (IE5 et supérieur) FF ne peut pas, il se cache seulement.
S'il y a beaucoup de choses que vous ne comprenez pas, cela n'a pas d'importance. Enregistrez ces compétences et venez souvent sur 52CSS.com pour les vérifier. Vous gagnerez certainement quelque chose. Vous pouvez également saisir le contenu qui vous intéresse dans le champ de recherche à gauche pour effectuer une recherche. Vous êtes invités à laisser des commentaires et à ajouter des astuces CSS.