Tetapkan gaya dalam css

CSS (Cascading Style Sheets) ialah teknologi yang digunakan untuk menerangkan rupa dokumen web. CSS boleh menggunakan gaya pada elemen dokumen HTML yang berbeza, seperti fon, warna, jarak, latar belakang dan banyak lagi. Ia membolehkan pembangun menukar rupa dan susun atur halaman tanpa mengubah struktur HTML. Dalam artikel ini, kami akan meneroka cara menggayakan dalam CSS.

1. Pemilih

Dalam CSS, pemilih digunakan untuk memilih elemen untuk gaya yang harus digunakan. Terdapat beberapa jenis pemilih yang berbeza, seperti:

• Pemilih teg (cth. p, h1, div, span)
• Pemilih kelas (cth. .red, .blue)
• Pemilih ID (cth. #header, #footer)
• Pemilih atribut (cth. [type="text"])
• Pseudo-class selector (cth.: hover , :focus)

Untuk menggayakan, kita perlu memilih satu atau lebih elemen. Ini boleh dilakukan dengan satu atau lebih pemilih. Sebagai contoh, untuk memilih elemen dengan kelas "merah" anda boleh menggunakan kod CSS berikut:

.red {
    color: red;
}

Ini akan menetapkan warna teks semua elemen dengan kelas "merah" kepada merah.

2. Sifat Gaya

Setiap pemilih digayakan dengan satu atau lebih sifat gaya. Berikut ialah beberapa atribut gaya biasa:

• warna: Tetapkan warna teks
• saiz fon: Tetapkan saiz fon
• keluarga fon: Tetapkan jenis fon
• warna latar belakang: Tetapkan warna latar belakang
• margin: Tetapkan jidar luar elemen
• lapik: Tetapkan jidar dalam elemen
• sempadan: Tetapkan sempadan elemen
• lebar: Tetapkan lebar elemen
• tinggi: Tetapkan ketinggian elemen
• penjajaran teks: Tetapkan penjajaran teks

Atribut gaya dan nilai Atribut biasanya dipisahkan dengan titik bertindih dan atribut dipisahkan dengan koma bertitik. Contohnya:

p {
    font-size: 16px;
    color: #333;
    font-family: sans-serif;
}

Ini akan menetapkan saiz fon semua perenggan kepada 16 piksel, warna kepada kelabu gelap (#333) dan fon kepada sans serif.

3. Cascading

Cascading dalam CSS merujuk kepada kesan hierarki gaya. Jika berbilang peraturan gaya digunakan pada elemen yang sama, penyemak imbas akan menggunakan peraturan khusus untuk menentukan gaya yang akan digunakan.

Gaya boleh digunakan pada atribut tag, kelas dan ID elemen. Apabila elemen mempunyai berbilang peraturan gaya yang digunakan padanya, CSS akan menggunakan hierarki tertentu untuk menentukan peraturan yang mempunyai keutamaan tertinggi, seperti ini:

• Gaya yang ditentukan oleh gaya ID (#id )
• Gaya ditentukan oleh gaya kelas (.class)
• Gaya ditentukan oleh elemen/teg (div, p, h1, dsb.)
• Gaya universal (*)
• Gaya lalai penyemak imbas

Ini ialah apa yang dipanggil "urutan bertingkat gaya". Gaya pertama digunakan berdasarkan ID, dan kemudian gaya kelas dan elemen digunakan dalam tertib mereka muncul dalam helaian gaya. Gaya universal menentukan gaya yang digunakan untuk semua elemen dan gaya lalai penyemak imbas merujuk kepada gaya yang digunakan oleh penyemak imbas pada elemen secara lalai.

4. Model kotak

Model kotak dalam CSS menerangkan reka letak elemen HTML. Model kotak elemen terdiri daripada empat bahagian: kawasan kandungan, padding, sempadan dan jidar.

• Kawasan kandungan: teks dan imej di dalam elemen.
• Padding: Ruang antara kawasan kandungan elemen dan sempadannya.
• Sempadan: Garisan yang mengelilingi elemen.
• Margin: Ruang antara sempadan elemen dan elemen lain.

Gaya sempadan (seperti pepejal, bertitik dan bertitik) dan warna jidar dalam CSS boleh diubah suai.

Padding dan margin dalam CSS boleh ditentukan menggunakan piksel (px), peratusan (%) dan unit lain.

5. Kesimpulan

Artikel ini menyediakan asas penggayaan dalam CSS. Tetapkan gaya dengan memilih elemen dalam pemilih, menggunakan sifat gaya dan menggunakan Cascading seperti yang diperlukan untuk menentukan susunan gaya. Kami juga mempelajari tentang model kotak CSS, yang merupakan asas untuk reka letak dan penampilan elemen dalam CSS. Apabila anda menguasai asas ini, anda akan dapat menggunakan CSS untuk mencipta reka letak halaman web yang cantik.

Atas ialah kandungan terperinci Tetapkan gaya dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!