Gunakan lebih sedikit warisan dan lebih banyak kombinasi dalam pertukaran CSS_Experience

WBOY

Lepaskan： 2016-05-16 12:04:08

asal

1659 orang telah melayarinya

Berikut ialah kod biasa:
css:

Salin kod Kod tersebut adalah seperti berikut:

 
 .kotak{ 
sempadan:1px pepejal #ccc; 
saiz fon:12px; 
latar belakang:#f1f1f1; 
 html: 

Salin kod

Kod adalah seperti berikut: ini adalah kotak kelabu

Tetapi pada masa ini permintaan telah meningkat bukan sahaja pada halaman, tetapi juga kotak biru , dan mungkin yang hijau. Biasanya kita Jika anda ingin menggunakan penyepaduan, mari buat perubahan berikut pada css: 

Salin kod

Kodnya adalah seperti berikut: .kotak-kelabu, .kotak-hijau{ sempadan:1px pepejal #ccc;

saiz fon:12px

padding:10px; 
} 
.box-gray{background:#f1f1f1} 
.box-green{background:#66ff66} 


Html: 
 

Salin kod

Kod adalah seperti berikut:

ini ialah kotak hijau

Sekali lagi. Akar dan aplikasi adalah berbeza Beberapa kotak perlu menggunakan No. 12 Sesetengah aksara memerlukan saiz 10, dan beberapa memerlukan 20px ingin menggunakan kod css yang diwarisi, ia akan menjadi sangat rumit, jadi mari kita lihat jika gabungan itu boleh menyelesaikannya. css:

Salin kod

Kodnya adalah seperti berikut:

.fs-12 {font-saiz:12px} .fs-14{font-size:14px} .pd-10{padding:10px} .pd-20{padding:20px} .kotak {

sempadan:1px pepejal #ccc;

} 
.kotak.kelabu{latar belakang:#f1f1f1} 
.kotak.hijau{latar belakang:#66ff66} 

 Html 

Salin kod

Kod adalah seperti berikut:

ini kotak fon kelabu bersaiz12px padding20px

ini kotak fon bersaiz14px/10px< div> …. Mari lihat beberapa daripadanya Walaupun beberapa dirujuk pada kelas, kod dan logiknya sangat jelas dan sangat mudah untuk digabungkan diperluas sesuka hati. Seperti yang anda boleh lihat daripada di atas, kaedah "gabungan" adalah jelas, tetapi ia tidak sempurna Kita tidak boleh keterlaluan apabila memisahkan gabungan, jika tidak, kesannya mungkin tidak produktif Hanya dengan menggunakan kombinasi + warisan yang sewajarnya boleh kami Kod ini lebih elegan dan artistik.

Label berkaitan：

css 组合继承

sumber：php.cn

Artikel sebelumnya：Fahami prinsip carian dan pemadanan CSS untuk menjadikan CSS lebih ringkas dan cekap_Pertukaran pengalaman Artikel seterusnya：kod kesan jadual simulasi div+css_Pertukaran pengalaman

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang