CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menerangkan rupa dokumen HTML (Hypertext Markup Language). CSS memainkan peranan penting dalam reka bentuk web. Ia mentakrifkan warna, fon, jarak, reka letak dan ciri-ciri lain halaman web. Jika anda ingin menjadi pembangun web yang baik, anda mesti menguasai konsep asas dan penggunaan CSS.
Berikut ialah beberapa petua dan nasihat tentang cara menulis gaya yang berkesan dalam CSS.
1. Gunakan pemilih yang bermakna
Pemilih ialah cara memilih elemen HTML untuk gaya yang harus digunakan. Semasa menulis gaya CSS, anda harus menggunakan pemilih yang bermakna untuk memastikan gaya anda jelas dan boleh diselenggara. Contohnya, jika anda ingin memilih semua butang dengan kelas "btn", anda boleh menulis pemilih berikut:
.btn {
color: #fff-color: #007bff;
warna sempadan: #007bff;
}
Ini akan menggunakan gaya pada semua butang dengan nama kelas "btn". Oleh kerana pemilih sangat khusus dan bermakna, pembangun atau pereka bentuk lain boleh memahami dan mengubah suai gaya dengan mudah.
2. Gunakan CSS ringkas
CSS hendaklah sentiasa ringkas, menjadikannya mudah difahami dan diselenggara. Gunakan atribut yang disingkatkan (seperti latar belakang) untuk memudahkan penggayaan. Contohnya, dua takrif gaya berikut mencapai kesan yang sama:
.imej latar belakang {
warna latar: #fff;
imej latar belakang: url('contoh.jpg');
kedudukan latar belakang: tengah tengah;
saiz latar belakang: penutup;
ulangan latar belakang: tiada ulangan;
}
.imej latar belakang {
latar belakang: # fff url('example.jpg') center center/cover no-repeat;
}
Atribut yang disingkatkan bukan sahaja menjimatkan masa penulisan, tetapi juga menjadikan kod lebih mudah dibaca dan diselenggara.
3 Gunakan pembolehubah dan pemalar
Apabila menulis CSS kompleks, menggunakan pembolehubah dan pemalar boleh menjadikan kod lebih jelas dan lebih mudah diselenggara. Anda boleh menggunakan prapemproses CSS seperti Sass atau Less untuk mentakrif dan menggunakan pembolehubah dan pemalar, atau anda boleh menggunakan sifat tersuai CSS untuk menentukan pembolehubah. Contohnya, kod berikut mentakrifkan pembolehubah bernama --primary-color dan menggunakannya pada warna latar belakang dan warna teks:
:root {
--primary-color: #007bff;
}
.butang {
warna latar belakang: var(--warna-utama);
warna: var(--warna-utama);
}
Dengan menggunakan pembolehubah dan pemalar, anda boleh menukar warna dan sifat lain dengan mudah di seluruh aplikasi web anda.
4. Gunakan unit EM dan REM dahulu
Apabila menentukan saiz fon dalam CSS, unit EM dan REM hendaklah digunakan bukannya piksel. Ini kerana unit EM dan REM berskala relatif kepada saiz induk atau elemen akar, yang menghasilkan gaya yang lebih fleksibel dan berskala. Contohnya:
badan {
saiz fon: 16px;
}
h1 {
saiz fon: 2em; /
32px / }
p {
saiz fon: 0.875em; /
14px /}
Dalam contoh di atas, tajuk dan perenggan Saiz fon diskalakan berdasarkan saiz induk atau elemen akar, bukan nilai piksel tertentu.
5. Gunakan Flexbox atau susun atur Grid
Flexbox dan Grid pada masa ini merupakan teknologi reka letak CSS yang paling popular, dan ia memudahkan kedudukan dan penjajaran kandungan. Reka letak mendatar dan menegak boleh ditakrifkan dengan mudah menggunakan Flexbox, manakala Grid boleh digunakan untuk susun atur grid yang lebih kompleks.
Sebagai contoh, kod berikut menggunakan Flexbox untuk menjajarkan kandungan atas dan mengedarkannya secara mendatar:
.bekas {
paparan: flex;
justify-content: space-between;
align-item: tengah;
}
.bekas > div {
jidar: 0 10px;
}
.bekas > -anak {
jidar-kiri: 0;
}
.bekas > div:anak terakhir {
jidar-kanan: 0;
}
Dalam kod di atas, Flexbox menentukan cara bekas harus menyusun kandungannya dan menetapkan margin elemen kanak-kanak untuk memastikan jarak yang betul.
Ringkasan:
Melalui teknik di atas dan beberapa ringkasan pengalaman, anda boleh membantu anda menulis gaya CSS dengan lebih berkesan dan menyimpannya untuk kegunaan yang lebih mudah semasa penyelenggaraan berikutnya: Gunakan pemilih yang bermakna, singkatkan gaya kepada jadikannya lebih bersih, gunakan pembolehubah dan pemalar untuk menukar nilai sifat, lebih suka unit EM dan REM berbanding piksel, gunakan susun atur Flexbox atau Grid untuk menyusun kandungan dengan lebih mudah. Kuasai petua ini dan anda boleh menulis gaya CSS dengan lebih pantas dan lebih mudah.
Atas ialah kandungan terperinci Beberapa petua dan nasihat untuk menulis gaya yang berkesan dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
