Lapan belas kemahiran CSS yang telah saya kumpulkan untuk masa yang lama_Pertukaran pengalaman

Baru-baru ini, rakan-rakan sering bertanya kepada saya tentang beberapa masalah CSS yang saya hadapi di tempat kerja. Mereka sentiasa tidak dapat mengawal CSS dengan baik, yang menjejaskan kecekapan CSS. Biar saya menganalisis dan meringkaskan ralat untuk membantu semua orang menggunakan CSS dengan lebih mudah.

Artikel ini meringkaskan semua teknik dan penyelesaian keserasian yang saya pelajari sejak saya mula menggunakan kaedah reka letak CSS. Saya bersedia untuk berkongsi dengan anda telah membuat sendiri). , jika anda sudah menjadi master CSS, anda mungkin sudah mengetahui pengalaman dan kemahiran ini Jika anda mempunyai lebih, saya harap anda boleh membantu saya menambahnya.
1. Gunakan singkatan CSS

Menggunakan singkatan boleh membantu mengurangkan saiz fail CSS anda dan menjadikannya lebih mudah dibaca. Untuk peraturan utama singkatan CSS, sila rujuk "Ringkasan Sintaks Singkatan CSS Biasa", yang tidak akan diterangkan di sini.
2. Tentukan unit dengan jelas, melainkan nilainya ialah 0

Terlupa untuk menentukan unit saiz adalah kesilapan biasa di kalangan pemula CSS. Dalam HTML anda hanya boleh menulis width="100", tetapi dalam CSS anda perlu memberikan unit yang tepat, seperti: width:100px width:100em. Terdapat hanya dua pengecualian untuk tidak menentukan unit: ketinggian baris dan nilai 0. Di samping itu, nilai lain mesti diikuti oleh unit Berhati-hati untuk tidak menambah ruang antara nilai dan unit.
3. Peka huruf besar kecil

Apabila menggunakan CSS dalam XHTML, nama elemen yang ditakrifkan dalam CSS adalah sensitif huruf besar. Untuk mengelakkan ralat ini, saya mengesyorkan menggunakan huruf kecil untuk semua nama definisi.

Nilai kelas dan id juga peka huruf besar-kecil dalam HTML dan XHTML Jika anda mesti menggunakan huruf besar bercampur, sila sahkan dengan teliti bahawa definisi anda dalam CSS adalah konsisten dengan teg dalam XHTML.
4. Batalkan kelayakan elemen sebelum kelas dan id

Apabila anda menulis untuk mentakrifkan kelas atau id untuk elemen, anda boleh meninggalkan kelayakan elemen sebelumnya, kerana ID berada dalam halaman adalah unik, manakala kelas s boleh digunakan beberapa kali pada halaman. Tidak masuk akal untuk anda melayakkan sesuatu elemen. Contohnya:
div#content { /* pengisytiharan */ }
fieldset.details { /* pengisytiharan */ }

boleh ditulis sebagai
#content { /* pengisytiharan */ }
.details { /* pengisytiharan */ }

Ini boleh menjimatkan beberapa bait.
5. Nilai lalai

Biasanya nilai lalai padding ialah 0, dan nilai lalai warna latar belakang adalah lutsinar. Tetapi nilai lalai mungkin berbeza dalam pelayar yang berbeza. Jika anda takut akan konflik, anda boleh mentakrifkan nilai margin dan padding semua elemen sebagai 0 pada permulaan helaian gaya, seperti ini:
* {
margin:0; 0;
}

6. Tidak perlu mentakrifkan nilai boleh diwarisi berulang kali
Dalam CSS, elemen anak secara automatik mewarisi nilai atribut unsur induk , seperti warna, fon, dsb., yang sudah ada dalam elemen induk Setelah ditakrifkan, ia boleh diwarisi terus dalam elemen anak tanpa definisi berulang. Tetapi sedar bahawa penyemak imbas mungkin mengatasi definisi anda dengan beberapa nilai lalai.

7. Prinsip pertama yang paling dekat
Jika terdapat berbilang takrifan elemen yang sama, takrifan yang paling hampir (tahap minimum) akan diutamakan, contohnya, terdapat sekeping kod ini

Kemas kini: Lorem ipsum dolor set

Dalam fail CSS, anda telah menentukan elemen p dan kelas "kemas kini"
p {
margin:1em 0 ; >saiz fon:1em;
warna:#333;
}
.kemas kini {
warna:#600; 🎜>Dalam dua definisi ini, class="update" akan digunakan kerana kelas lebih dekat daripada p. Anda boleh menyemak "Mengira kekhususan pemilih" W3C untuk mengetahui lebih lanjut.

8. Takrifan berbilang kelas


Teg boleh mentakrifkan berbilang kelas pada masa yang sama. Sebagai contoh: Kami mula-mula menentukan dua gaya, gaya pertama mempunyai latar belakang #666; gaya kedua mempunyai sempadan 10 px.
.satu{width:200px;background:#666;}
.two{border:10px solid #F00;} Dalam kod halaman, kita boleh panggil



Kesan paparan terakhir ialah div ini mempunyai latar belakang #666 dan sempadan 10px. Ya, adalah mungkin untuk melakukan ini, anda boleh mencubanya.

9. Gunakan pemilih keturunan

Pemula CSS tidak tahu bahawa menggunakan pemilih keturunan adalah salah satu sebab yang menjejaskan kecekapan mereka. Subpemilih boleh membantu anda menyimpan banyak definisi kelas. Mari kita lihat kod berikut:




Item 1

>

Item 1

Item 1


• 
  
  Takrif CSS kod ini ialah:
  div#subnav ul { /* Beberapa penggayaan */ }
  div#subnav ul li.subnavitem { /* Beberapa penggayaan */ }
  div#subnav ul li.subnavitem a.subnavitem { /* Beberapa penggayaan */ }
  div#subnav ul li.subnavitemselected { /* Sesetengah gaya */ }
  div#subnav ul li.subnavitemselected a.subnavitemselected { /* Beberapa penggayaan */ }
  
  Anda boleh menggunakan kaedah berikut untuk menggantikan kod di atas
  
  
  
  • Item 1
  
  
  • Item 1
  
  
  • Item 1
  
  
  
  
  Takrif gaya ialah:
  # subnav { /* Beberapa penggayaan */ }
  #subnav li { /* Beberapa penggayaan */ }
  #subnav a { /* Beberapa penggayaan */ }
  #subnav .sel { /* Beberapa penggayaan * / }
  #subnav .sel a { /* Beberapa penggayaan */ }
  
  Menggunakan subpemilih boleh menjadikan kod dan CSS anda lebih ringkas dan lebih mudah dibaca.
  10. Tidak perlu menambah petikan pada laluan imej latar belakang
  
  Untuk menyimpan bait, saya mengesyorkan agar tidak menambah petikan pada laluan imej latar belakang, kerana petikan itu bukan perlu. Contohnya:
  background:url("images/***.gif") #333;
  
  boleh ditulis sebagai
  background:url(images/***.gif) #333;
  
  Jika anda menambah tanda petikan, ia akan menyebabkan Beberapa ralat penyemak imbas menyimpan banyak bait font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
  warna:#333; margin:1em 0; yang perlu mentakrifkan gaya bebas apabila menggunakannya, anda boleh menambah takrifan baharu atau menulis ganti takrifan lama, contohnya: h1 { font-size:2em }
  h2 { font-size:1.6em; 🎜>
  12 ialah: :link :visited :hover :active Huruf pertama yang diekstrak ialah "LVHA". Anda boleh mengingatinya sebagai "LoVe HAte" (suka), anda boleh merujuk kepadanya >
  Jika pengguna anda perlu menggunakan kawalan papan kekunci dan perlu mengetahui fokus pautan semasa, anda juga boleh menentukan atribut :focus Kesan atribut :focus juga bergantung pada apa yang anda tulis mahu elemen fokus memaparkan kesan :hover, anda meletakkan :focus sebelum :hover; jika anda mahu kesan fokus menggantikan kesan :hover, anda meletakkan :focus selepas :hover 13. Clear floats
  
  
  Masalah CSS yang sangat biasa ialah apabila terapung digunakan untuk penentududukan, lapisan bawah dilindungi oleh lapisan terapung, atau sublapisan bersarang dalam lapisan melebihi lapisan luar
  
  Skop penyelesaian biasa ialah menambah elemen tambahan selepas lapisan terapung, seperti div atau br, dan mentakrifkan gayanya sebagai jelas: kedua-duanya Kaedah ini agak tidak masuk akal, tetapi nasib baik ada penyelesaian yang baik dalam artikel ini "Cara Mengosongkan Terapung Tanpa Penanda Struktur" (Nota: Tapak ini akan menterjemah artikel ini secepat mungkin).
  
  Dua kaedah di atas boleh menyelesaikan masalah limpahan terapung dengan baik, tetapi bagaimana jika anda benar-benar perlu mengosongkan lapisan atau objek dalam lapisan? Kaedah mudah ialah menggunakan atribut limpahan Kaedah ini pada asalnya diterbitkan dalam "Pembersihan Mudah Terapung" dan telah dibincangkan secara meluas dalam "Pembersihan" dan "Pembuangan terapung super mudah".
  
  Kaedah jelas yang manakah di atas yang lebih sesuai untuk anda Ia bergantung pada situasi tertentu dan tidak akan dibincangkan di sini. Di samping itu, beberapa artikel yang sangat baik telah menjelaskan tentang aplikasi apungan Anda disyorkan untuk membaca: "Floatutorial", "Mengandungi Terapung" dan "Reka Letak Terapung"
  
  14.
  Ini adalah helah yang mudah, tetapi patut dikatakan sekali lagi kerana saya melihat terlalu banyak soalan pemula yang bertanyakan perkara ini: Bagaimana untuk mendatar memusatkan CSS? Anda perlu menentukan lebar elemen dan menentukan jidar mendatar Jika reka letak anda terkandung dalam lapisan (bekas), seperti ini:
  
  Anda boleh menentukannya seperti ini untuk memusatkannya secara mendatar:
  #wrap {
  width:760px; /* Ubah suai kepada lebar lapisan anda*/ margin:0 auto;
  }
  Tetapi IE5/Win tidak boleh memaparkan definisi ini dengan betul, kami menggunakan helah yang sangat berguna untuk diselesaikan: gunakan atribut penjajaran teks.就象这样：
  body {
  text-align:center;
  }
  #wrap {
  width:760px; /* 修改为你的层的宽度 */
  margin:0 auto;
  text-align:left;
  }
  
  第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
  十五.导入(Import)和隐藏CSS
  
  因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：
  @import url("main.css");
  
  然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：
  @import "main.css";
  
  这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle's css filter chart》
  十六.针对IE的优化
  
  有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
  
     * 1.注释的方法
           o (a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
             html>body p {
             /* 定义内容 */
             }
           o (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
             * html p {
             /* declarations */
             }
           o (c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用"反斜线"技巧：
             /* */
             * html p {
             declarations
             }
             /* */
     * 2.条件注释(conditional comments)的方法
  
       另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：
       
  
  十七.调试技巧：层有多大？
  
  当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
  
  另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
  十八.CSS代码书写样式
  
  在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：
  selector1,
  selector2 {
  property:value;
  }
  
  当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
  
  我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。
  
  最后，关闭的大括号}单独写一行。