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:

8e6018ddc3e8048409e6af4149427d03Ini ialah perenggan .94b3e26ee717c64999d7867364b1b4a3

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:

93f0f5c25f18dab9d176bd4f6de5d30e
c9ccee2e6ea535a969eb3f532ad9fe89

p {
  color: blue;
  font-size: 16px;
}

531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846beeIni ialah perenggan.94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

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:

93f0f5c25f18dab9d176bd4f6de5d30e
245994c824046fd9be2f18f350887c05
9c3bca370b5104690d9ef395f2c5f8d1

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!