Koleksi petua biasa untuk helaian gaya CSS_Pertukaran pengalaman

· Teg ul mempunyai nilai padding secara lalai dalam Mozilla, tetapi dalam IE hanya margin yang mempunyai nilai.

· Pemilih kelas yang sama boleh muncul berulang kali dalam dokumen, tetapi pemilih id hanya boleh muncul sekali; Definisi yang dibuat oleh simbol adalah sah.

· Pemula mungkin menghadapi situasi sedemikian Atribut label yang sama dipaparkan secara normal apabila ia ditetapkan kepada A dalam IE, tetapi ia mesti ditetapkan kepada B dalam Mozilla untuk dipaparkan secara normal, atau kedua-duanya diterbalikkan. .
Penyelesaian sementara: Pemilih {Attribute name: B !important ; Attribute name: A;} //Tidak sah di bawah IE7

· Jika beberapa jarak diperlukan antara sekumpulan teg bersarang, Kemudian biarkan ia pada atribut margin bagi label yang terletak di dalam, bukannya mentakrifkan padding label yang terletak di luar

· Adalah disyorkan untuk menggunakan imej latar belakang dan bukannya imej gaya senarai untuk ikon di hadapan label li

· IE tidak dapat membezakan antara hubungan warisan dan hubungan bapa-anak, semuanya adalah hubungan warisan.

· Apabila menambahkan pemilih pada teg anda, jangan lupa untuk menganotasi pemilih dalam CSS. Anda akan tahu mengapa anda melakukan ini apabila anda mengubah suai CSS anda pada masa hadapan.

· Jika anda menetapkan imej latar belakang gelap dan kesan teks terang untuk label. Adalah disyorkan untuk menetapkan warna latar belakang yang lebih gelap untuk label anda pada masa ini.

· Apabila mentakrifkan empat keadaan pautan, beri perhatian kepada susunan: Pautan Dilawati Tuding Aktif

· Sila gunakan latar belakang untuk gambar yang tiada kaitan dengan kandungan

· Warna yang ditakrifkan boleh disingkatkan #8899FF = #89F

· jadual berprestasi jauh lebih baik daripada teg lain dalam beberapa aspek. Sila gunakannya apabila penjajaran lajur diperlukan.

· <script> tidak mempunyai atribut bahasa Ia sepatutnya ditulis seperti ini: <script type="text/javascript"> <br><br>· Tajuk ialah tajuk, dan teks tajuk ialah teks daripada. tajuk. Kadangkala tajuk tidak semestinya perlu memaparkan teks, jadi: <h1>Kandungan tajuk ditukar kepada <h1><span>Kandungan tajuk <br><br>·Garis piksel tunggal yang sempurna Jadual (boleh lulus ujian dalam IE5.0, IE6.0 dan FF, yang lain belum diuji) jadual {border-collapse:collapse;} td {border:#000 solid 1px;} <br><br>·margin adalah negatif Nilai boleh memainkan peranan dalam kedudukan relatif apabila label menggunakan kedudukan mutlak Apabila halaman ditengah, atribut kiri:XXpx tidak sesuai untuk lapisan menggunakan kedudukan mutlak. Adalah idea yang baik untuk meletakkan lapisan ini di sebelah label yang anda mahu letakkan secara relatif, dan kemudian gunakan nilai negatif untuk margin. <br><br>· Apabila menggunakan kedudukan mutlak, menggunakan kedudukan nilai margin boleh mencapai kedudukan berbanding dengan kedudukannya sendiri, yang berbeza daripada kedudukan atribut seperti atas dan kiri berbanding dengan tepi tetingkap. Kelebihan kedudukan mutlak ialah ia membenarkan elemen lain mengabaikan kewujudannya. <br><br>Beberapa gaya CSS yang biasa digunakan<br><br>· 1. Jajarkan aksara Cina di kedua-dua hujung: text-align:justify; text-justify:inter-ideograph; Pemangkasan aksara Cina lebar tetap: overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(Walau bagaimanapun, ia hanya boleh mengendalikan pemotongan teks pada satu baris, bukan berbilang baris.) (IE5 dan ke atas) <br><br> · 3. Pecah baris aksara Cina lebar tetap: susun atur jadual:tetap; (IE5 dan ke atas) <br><br>· 4. Letakkan teks <br> <br> dengan tetikus Lihat kesan pada teks sebelumnya. Kesan ini boleh dilihat pada banyak laman web asing, tetapi sangat sedikit laman web domestik. <acronym style="cursor: help" title="输入要提示的文字">· 5. Tetapkan imej kepada separa lutsinar: .halfalpha { background-color: #000000; Alpha(Opacity=50)} lulus ujian dalam IE6 dan IE5, tetapi gagal dalam FF.<br><br>· 6. Transparence FLASH : sélectionnez swf, ouvrez la fenêtre du code d'origine, saisissez avant <param name="wmode" value="transparent"> Lorsque nous créons des pages Web, nous utilisons souvent l'effet de placer la souris sur l'image pour créer l'image est plus lumineuse. Vous pouvez utiliser la technique de remplacement d'images, ou vous pouvez utiliser les filtres suivants : <br><br>.pictures img { filter: alpha(opacity=45 } <🎜); .pictures a:hover img { filter: alpha(opacity=90); } <BR><br>· Si le texte est trop long, la partie longue sera affichée sous forme de points de suspension : IE5 et FF ne sont pas valides, mais peuvent être masqué, IE6 est valide <br><BR> <div style="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"><BR>Par exemple, il y a une ligne de texte qui est très longue et ne peut pas être affichée sur une seule ligne dans le tableau. Le commentaire est remplacé par : <NOBR> Mettez votre commentaire ici... <br><br> <!--[if !IE]><BR>· Comment utiliser CSS pour appeler des polices externes Syntaxe : @font-face { font-family : name: url ( url; ); sRules } Valeur : <BR>name : nom de la police. Toute valeur possible de l'attribut font-family <![endif]-->url ( url ) : Spécifiez un fichier de police OpenType en utilisant une adresse url absolue ou relative <br>sRules : Définition de la feuille de style <br></script>