Ringkasan pengalaman perancangan dan pengurusan helaian gaya CSS_Pertukaran pengalaman

Sudah lebih setahun sejak saya meninggalkan susun atur jadual sepenuhnya dan menggunakan xhtml+CSS untuk membina tapak web. Selepas lebih daripada setahun berlatih, saya telah mengumpul sejumlah pengalaman. Kini saya menulis artikel ini untuk meringkaskannya. Terdapat isu utama dalam proses menggunakan xhtml+CSS untuk membina tapak web: perancangan dan pengurusan helaian gaya CSS tapak web.

Sejarah evolusi pengurusan CSS saya

Apabila saya mula-mula menggunakan CSS untuk mengawal gaya tapak web, saya tidak tahu banyak tentang perancangan pengurusan CSS CSS yang saya tulis pada asasnya seperti yang diperlukan ia pada bila-bila masa, dan saya tidak fikir ada apa-apa yang salah dengan ia pada mulanya, tetapi kemudian semakin banyak yang ditambah, dan perubahan menjadi lebih dan lebih kucar-kacir Walaupun terdapat beberapa komen, pada akhirnya ia masih memberi saya pening kepala tengok. Pada masa itu, semua CSS tapak web berada dalam satu fail, tanpa perancangan, dan pesanan tidak begitu teratur Jadi saya hanya dapat mencari nama kelas dalam halaman HTML, dan kemudian mencari apa yang saya mahukan di kalangan beribu-ribu daripada baris kod CSS itu.

Selepas beberapa ketika, selepas berfikir dan merumuskan, saya membuat rancangan awal untuk helaian gaya CSS tapak. Tiga kawasan pada mulanya dibahagikan kepada helaian gaya:

Contoh Kod Sumber [www.52css.com]
helaian gaya asas
helaian gaya reka letak
helaian gaya kelas
　di mana " " helaian gaya asas" digunakan untuk menerangkan beberapa perkara biasa, seperti badan global, gaya, dsb.; "lembaran gaya reka letak" digunakan untuk menerangkan reka letak id unik, yang tergolong dalam reka letak bingkai seluruh halaman; "kelas helaian gaya" " digunakan untuk menerangkan gaya kelas yang tinggal Gaya ini dibahagikan kepada gaya dan gaya boleh guna semula yang biasanya hanya muncul sekali atau beberapa kali pada halaman khas.

Susun atur mengikut kaedah ini memang meningkatkan kecekapan, tetapi kaedah ini hanya sesuai untuk laman web bersaiz kecil dan sederhana Aplikasi pada laman web besar masih agak nipis, sekurang-kurangnya apabila berbilang orang bekerjasama, ia tidak boleh mencapai hasil terbaik Kecekapan terbaik. Jadi terdapat model perancangan pengurusan CSS yang agak lengkap yang diringkaskan di bawah.

Mod pengurusan helaian gaya CSS yang lebih lengkap

Langkah1: Individu atau pasukan perlu melukis reka letak halaman utama secara hierarki menggunakan gambar rajah DIV ini adalah asas untuk prototaip reka bentuk On halaman, tandakan nama ID dan nama kelas yang digunakan oleh modul utama dalam halaman untuk memudahkan penciptaan dokumen penyelenggaraan untuk pengubahsuaian dan peningkatan masa hadapan.

Langkah2: Bahagikan struktur CSS dan wujudkan css global dan setiap css modul. Rujuk css global dalam halaman html, dan rujuk css setiap modul dalam css global.

Contoh Kod Sumber [www.52css.com]
Buat global.css sebagai css global dan tentukan gaya global seperti "* { … } body { … }" dalam css global.
Perkenalkan modul css dalam gaya global melalui "@import url("xxx.css");".
Mengenai pembahagian CSS modul, saya lebih suka kaedah pembahagian CSS yang serupa dengan wordpress Secara amnya, ia dibahagikan dengan struktur yang serupa dengan yang berikut:

Contoh Kod Sumber [www.52css.com. ]
reka letak. css /* Keseluruhan reka letak tapak */
public.css /* Gaya gabungan awam */
header.css /* Gaya kawasan pengepala halaman */
sidebar.css /* Sidebar gaya kawasan * /
main.css /* Gaya kawasan utama */
footer.css /* Gaya kawasan bawah */
index.css /* Gaya khusus kawasan halaman utama */
borang .css /* Gaya Kelas Borang */
Jelaskan bahawa susun atur.css bertanggungjawab untuk reka letak keseluruhan tapak web, seperti kedudukan asas dan reka bentuk gaya #header, #footer dan susun atur public.css yang lain bertanggungjawab untuk beberapa takrif gaya biasa, kerana kelas boleh digunakan dalam kelas =”navbar font12px” Kaedah ini menggunakan kaedah pemisahan ruang untuk menggunakan berbilang gaya kelas, jadi anda boleh menentukan beberapa kelas biasa yang biasa digunakan atau perlu diubah suai di bawah khas keadaan untuk memudahkan penalaan halus setempat; header.css, sidebar.css, Modul seperti footer.css ialah helaian gaya css yang sepadan dengan modul pengepala, bar sisi dan bawah boleh ditambah atau dipadam mengikut keperluan khusus laman web; index.css ialah css untuk beberapa elemen unik halaman utama, kami Apabila mereka bentuk CSS, layanan istimewa biasanya diberikan kepada halaman utama. Adalah perlu untuk mengklasifikasikan dan meletakkan elemen CSS unik halaman utama Anda juga boleh memperkenalkan index.css tanpa @import untuk rujukan pada halaman utama.css ialah helaian gaya elemen borang tidak sukar, ia masih menyusahkan untuk mengawalnya. Letakkannya secara berasingan dalam fail css untuk kawalan yang mudah, anda juga boleh menggunakan elemen lain yang serupa.

Langkah3: Tulis gaya dalam setiap fail helaian gaya. ,