kaedah penulisan gaya css

Gaya CSS (Cascading Style Sheets) ialah teknologi penting untuk pembangunan bahagian hadapan. Ia boleh mengawal susun atur, fon, warna dan gaya lain halaman web untuk mencapai penyatuan gaya halaman web. Artikel ini akan memberi tumpuan kepada cara menulis gaya CSS untuk membantu pembaca memahami dan menggunakan CSS dengan lebih mendalam.

1. Helaian gaya terbenam Helaian gaya terbenam ialah cara untuk menulis gaya CSS secara langsung dalam kod HTML. Gunakan teg dalam Contohnya:

body { background-color: #f2f2f2; color: #262626; } h1 { font-size: 36px; font-weight: bold; } Salin selepas log masuk Dalam contoh di atas, warna latar belakang elemen badan ialah #f2f2f2, warna teks ialah #262626 dan saiz fon bagi elemen h1 ialah 36 piksel, yang dipaparkan dalam huruf tebal .

2. Helaian gaya luaran Helaian gaya luaran ialah cara untuk menulis gaya CSS secara berasingan dalam fail CSS luaran. Gunakan teg dalam pada dokumen HTML untuk memperkenalkan helaian gaya luaran. Contohnya:

Salin selepas log masuk Kandungan dalam fail style.css ialah:

body { background-color: #f2f2f2; color: #262626; } h1 { font-size: 36px; font-weight: bold; } Salin selepas log masuk Dengan cara ini, semua elemen dalam HTML boleh mendapatkan maklumat gaya daripada helaian gaya luaran, mencapai HTML yang lebih jelas dan ringkas kod.

3. Gaya sebaris Gaya sebaris ialah cara untuk menulis gaya CSS secara langsung dalam atribut gaya teg HTML. Contohnya:

Hello, world! Salin selepas log masuk Dalam contoh di atas, warna fon bagi elemen h1 ialah merah dan saiz fon ialah 36 piksel.

4. Pemilih CSS Pemilih CSS ialah mekanisme untuk memilih elemen HTML dan menggunakan gaya. Ia boleh mencari elemen berdasarkan nama, nama kelas, ID dan atribut lain serta mewarisi atau mengatasi gaya CSS yang sepadan. Berikut ialah kegunaan biasa pemilih CSS:

Pemilih teg: Cari elemen mengikut nama tegnya dan gunakan gaya. Contohnya: h1 { color: red; } Salin selepas log masuk Pemilih kelas: Cari elemen dan gunakan gaya melalui atribut kelas elemen. Contohnya: .red { color: red; } Salin selepas log masuk Dalam kod HTML, tetapkan atribut kelas bagi elemen yang perlu digayakan kepada "merah" untuk menjadikan warna fon merah.

Pemilih ID: Cari elemen dan gunakan gaya melalui atribut ID mereka. Dalam kod HTML, tetapkan atribut ID bagi elemen yang gaya perlu digunakan pada "id" untuk mencapai kesan gaya. Contohnya: #header { background-color: #f2f2f2; } Salin selepas log masuk Dalam contoh di atas, ID elemen ialah "header", dan warna latar belakang ialah #f2f2f2.

Pemilih atribut: Letakkan elemen dan gunakan gaya berdasarkan nilai atributnya. Contohnya: input[type="text"] { border: 1px solid #ccc; } Salin selepas log masuk Dalam contoh di atas, sempadan semua elemen input dengan nilai atribut jenis "teks" ialah garis kelabu pepejal setebal 1 piksel.

Pemilih keturunan: Cari elemen dan gunakan gaya melalui hubungan ibu bapa-anak mereka. Contohnya: div p { color: #262626; } Salin selepas log masuk Dalam contoh di atas, warna fon bagi semua elemen p di dalam elemen div ialah #262626.

Di atas adalah cara biasa untuk menulis pemilih CSS. Aplikasi fleksibel mereka boleh merealisasikan pelarasan gaya yang membosankan dan menjadikan reka letak, fon, warna, dll. halaman web lebih cantik.

5. Ringkasan Artikel ini memperkenalkan cara biasa menulis gaya CSS seperti helaian gaya terbenam, helaian gaya luaran, gaya sebaris, pemilih CSS, dll. Ia boleh membantu pembangun mencapai penyatuan gaya halaman web dan cipta Menghasilkan pengalaman pengguna yang lebih cantik dan selesa. Dalam pembangunan sebenar, adalah perlu untuk memilih kaedah penulisan gaya CSS yang sesuai mengikut keperluan khusus untuk meningkatkan kebolehbacaan dan kebolehselenggaraan kod.