Bagaimana untuk menetapkan gaya css

Gaya CSS ialah bahasa yang digunakan untuk memformat kandungan web. Gaya CSS digunakan untuk menetapkan teks, warna, warna latar belakang, penjajaran, jarak, sempadan dan gaya berkaitan reka bentuk web yang lain. Dalam kebanyakan kes, penggayaan CSS boleh menjadikan tapak web lebih moden, cantik dan lebih mudah digunakan. Berikut ialah beberapa maklumat asas tentang cara menggayakan CSS.

1. Gaya sebaris

Gaya sebaris ialah cara untuk menulis gaya CSS secara langsung pada elemen HTML. Pendekatan ini berguna untuk elemen individu dan boleh dicapai dengan menggunakan atribut "gaya" dalam teg. Contohnya, kod berikut menetapkan warna teks dan saiz fon perenggan menggunakan gaya CSS sebaris:

Ini ialah perenggan .

Dalam kod ini, atribut "style" menetapkan gaya berikut:

“color: red;”设置颜色为红色
“font-size: 18px;”设置字体大小为 18 像素。

2 Gaya terbenam

Gaya terbenam adalah untuk menukar CSS A cara menulis gaya dalam teg "kepala" fail HTML. Kaedah ini membolehkan gaya yang sama digunakan di seluruh dokumen, yang berguna untuk tapak web yang lebih besar. Berikut ialah contoh gaya CSS terbenam:

Ini ialah perenggan.

Dalam kod ini, pilihan "p" Alat ini menggunakan gaya pada semua elemen "p", termasuk perenggan di atas. Kedua-dua gaya CSS ini menetapkan warna teks kepada biru dan saiz fon kepada 16 piksel.

3. Helaian gaya luaran

Helaian gaya luaran ialah cara untuk menyimpan gaya CSS dalam fail CSS yang berasingan. Pendekatan ini berguna apabila berbilang halaman web menggunakan gaya yang sama, dan menjadikan fail HTML lebih mudah dibaca dan diselenggara. Berikut ialah contoh helaian gaya CSS luaran:

Dalam fail "style.css" yang berasingan, anda boleh menetapkan berbilang gaya seperti ini:

p {
warna : hijau;
saiz fon: 14px;
}

h1 {
warna: biru;
saiz fon: 32px;
}

Dalam fail HTML anda akan memautkan helaian gaya ini:

Kini, semua elemen "p" akan mendapat gaya yang ditentukan (warna teks hijau, saiz fon 14 piksel) dan semua elemen "h1" akan mendapat gaya Satu lagi (warna teks biru, saiz fon 32 piksel) .

4. Pemilih

Pemilih gaya CSS menentukan elemen HTML yang menggunakan gaya. Pemilih boleh memilih elemen berdasarkan jenis elemen, kelas, ID, atribut, dsb. Berikut ialah beberapa format pemilih biasa:

元素类型选择器：直接选择元素的名称。例如，“p”选择器将选择所有段落。
类选择器：“.”加上一个类名称。例如，“.my-class”选择器将选择具有名称“my-class”的所有元素。
ID 选择器：“#”加上一个 ID 名称。例如，“#my-id”选择器将选择具有 ID 名称“my-id”的所有元素。
属性选择器：“[]”加上一个属性名称和一个可选的属性值。例如，“[href]”选择器将选择具有任何 href 属性的元素，而“[href='https://example.com']”选择器将选择具有 href 设置为“https://example.com” 的元素。

Pemilih digunakan dengan gaya CSS dan diletakkan dalam pendakap kerinting. Berikut ialah contoh di mana pemilih menggunakan gaya pada semua elemen "p":

p {
warna: merah;
saiz fon: 16px;
}

Di atas adalah pengetahuan asas untuk menetapkan gaya CSS. Setelah anda memahami konsep ini, anda akan dapat mula meneroka aplikasi CSS yang lebih maju seperti reka bentuk responsif, animasi dan banyak lagi. Tidak kira jenis tapak web yang anda buat, mengetahui cara menggayakan CSS adalah berguna.

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