Collection de conseils courants pour les feuilles de style CSS_Échange d'expériences

· La balise ul a une valeur de remplissage par défaut dans Mozilla, mais dans IE, seule la marge a une valeur.

· 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 la classe et l'identifiant pour définir une étiquette en CSS. S'il y a des définitions en double, l'identifiant sera sélectionné. La définition faite par le symbole est valable.

· Les débutants peuvent rencontrer une telle situation. L'attribut de la même étiquette s'affiche normalement lorsqu'il est défini sur A dans IE, mais il doit être défini sur B dans Mozilla pour s'afficher normalement, sinon les deux sont inversés. .
Solution temporaire : Sélecteur {Nom de l'attribut : B !important ; Nom de l'attribut : A;} //Invalide sous IE7

· Si un certain espacement est nécessaire entre un groupe de balises imbriquées, laissez-le au soin. attribut margin de l'étiquette située à l'intérieur, au lieu de définir le remplissage de l'étiquette située à l'extérieur

· Il est recommandé d'utiliser background-image au lieu de list-style-image pour l'icône devant l'étiquette li

· 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.

· Lorsque vous ajoutez des sélecteurs à vos balises, n'oubliez pas d'annoter les sélecteurs en CSS. Vous saurez pourquoi vous faites cela lorsque vous modifierez votre CSS à l’avenir.

· 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.

· Lors de la définition des quatre états d'un lien, faites attention à l'ordre : Lien visité Survol actif

· Veuillez utiliser l'arrière-plan pour les images qui n'ont rien à voir avec le contenu

· La couleur définie peut être abrégée #8899FF = #89F

· Le tableau fonctionne bien mieux que les autres balises à certains égards. Veuillez l'utiliser là où l'alignement des colonnes est requis.

· <script> n'a pas l'attribut langue. Il doit être écrit comme ceci : <script type="text/javascript"> <br><br>· Le titre est le titre, et le texte du titre est le texte de le titre. Parfois, le titre n'a pas nécessairement besoin d'afficher du texte, donc : <h1>Contenu du titre est remplacé par <h1><span>Contenu du titre <br><br>·Contour parfait d'un seul pixel Tableau (peut réussir le test dans IE5.0, IE6.0 et FF, d'autres n'ont pas été testés) tableau {border-collapse:collapse;} td {border:#000 solid 1px;} <br><br>·margin est négatif La valeur peut jouer un rôle dans le positionnement relatif lorsque l'étiquette utilise un positionnement absolu. Lorsque la page est centrée, 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 que vous souhaitez positionner de manière relative, puis d'utiliser une valeur négative pour la marge. <br><br>· Lors de l'utilisation du positionnement absolu, l'utilisation du positionnement par valeur de marge peut obtenir un positionnement par rapport à sa propre position, 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. <br><br>Plusieurs styles CSS couramment utilisés<br><br>· 1. Alignez les caractères chinois aux deux extrémités : text-align:justify; text-justify:inter-ideograph; Troncature de caractères chinois à largeur fixe : overflow:hidden;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) <br><br> · 3. Saut de ligne de caractère chinois (mot) à largeur fixe : table-layout:fixed; word-break:break-all (IE5 et supérieur) <br><br>· 4. Placez le <br>texte <br> avec la souris Voir l'effet sur le texte précédent. Cet effet est visible sur de nombreux sites étrangers, mais très peu sur les sites nationaux. <acronym style="cursor: help" title="输入要提示的文字">· 5. Définissez l'image sur semi-transparente : .halfalpha { background-color: #000000; filter: Alpha(Opacity=50)} a réussi le test dans IE6 et IE5, mais a échoué dans FF.<br><br>· 6. FLASH transparency: Pilih swf, buka tetingkap kod asal, masukkan sebelum <param name="wmode" value="transparent"> Apabila kita membuat laman web, kita sering menggunakan kesan meletakkan tetikus pada gambar untuk membuat gambar lebih cerah. Anda boleh menggunakan teknik menggantikan gambar, atau anda boleh menggunakan penapis berikut: <br><br>.pictures img { filter: alpha(opacity=45); .pictures a:hover img { filter: alpha(opacity=90); } <BR><br>· Jika teks terlalu panjang, bahagian yang panjang akan dipaparkan sebagai elipsis: IE5 dan FF adalah tidak sah, tetapi boleh tersembunyi, IE6 adalah sah <br><BR> <div style="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"><BR>Sebagai contoh, terdapat baris teks yang sangat panjang dan tidak boleh dipaparkan dalam satu baris dalam jadual. Ulasan ditukar kepada: <NOBR> Letakkan ulasan anda di sini... <br><br> <!--[if !IE]><BR>· Cara menggunakan CSS untuk memanggil fon luaran Sintaks: @font-face { font-family : name; ); sRules } Nilai: <BR>nama: nama fon. Sebarang nilai yang mungkin bagi atribut font-family <![endif]-->url ( url ) : Tentukan fail fon OpenType menggunakan alamat url mutlak atau relatif <br>sPeraturan : Definisi helaian gaya <br></script>