Cara menggunakan css

CSS, nama penuh Helaian Gaya Cascading, ialah bahasa yang digunakan untuk mereka bentuk gaya halaman web. CSS boleh memisahkan kandungan dan gaya persembahan dalam dokumen HTML, menjadikan halaman lebih cantik dan lebih selaras dengan keperluan pereka bentuk. Artikel ini akan memperkenalkan konsep asas, sintaks dan aplikasi praktikal CSS untuk membantu pemula bermula.

1. Konsep asas CSS

CSS terdiri daripada pemilih dan pengisytiharan. Pemilih digunakan untuk menentukan elemen HTML untuk gaya yang akan digunakan, manakala pengisytiharan menentukan gaya yang akan digunakan. Berikut ialah beberapa konsep asas yang penting:

1 Pemilih

Pemilih ialah kod yang menunjukkan elemen HTML yang akan digayakan. Pemilih boleh menjadi pemilih teg, pemilih kelas, pemilih ID, dsb., yang diperkenalkan di bawah.

(1) Pemilih teg

Pemilih teg ialah pemilih yang paling biasa digunakan, yang sepadan dengan nama teg bagi elemen dalam dokumen HTML. Contohnya, kod berikut akan menetapkan warna teks semua

untuk dipadankan. Sebagai contoh, kod berikut akan memusatkan teks elemen dengan kelas "pusat teks":

h1 {
    color: red;
}

(3) Pemilih ID

Pemilih ID menggunakan # ditambah dengan nama ID untuk dipadankan. Setiap elemen dalam dokumen HTML hanya boleh mempunyai satu ID, jadi hanya boleh ada satu elemen yang dipadankan oleh pemilih ID. Contohnya, kod berikut akan menetapkan warna latar belakang elemen dengan id "utama" kepada putih:

.text-center {
    text-align: center;
}

2 Pengisytiharan

merujuk kepada perihalan gaya yang digunakan elemen HTML yang sepadan. Perisytiharan terdiri daripada atribut dan nilai. Contohnya, kod berikut akan menetapkan warna teks semua

kepada merah:

#main {
    background-color: white;
}

Di sini, warna ialah nama atribut dan merah ialah nilai atributnya. Setiap pernyataan perlu ditulis dalam kurungan kerinting dan diakhiri dengan koma bernoktah.

2. Sintaks CSS

h1 {
    color: red;
}

Sintaks CSS sangat mudah, sama seperti pasangan nilai kunci. Setiap peraturan CSS terdiri daripada pemilih dan blok pengisytiharan yang dibalut dengan pendakap kerinting, seperti yang ditunjukkan di bawah:

Dalam peraturan ini, pemilih merujuk kepada elemen HTML yang digunakan gaya CSS, dan Sifat dan nilai adalah perihalan gaya CSS itu sendiri. Untuk membaca lebih mudah, peraturan berbilang baris sering menggunakan lekukan dan pemisah baris untuk menyusun kod.

Berikut ialah beberapa kod CSS untuk menggunakan latar belakang kecerunan:

选择器 { 属性: 值; 属性: 值; }

Peraturan ini mengatakan untuk menggunakan latar belakang kecerunan pada elemen badan dokumen. Gaya akan muncul dalam kecerunan dari kiri ke kanan, daripada #00bfff (biru muda) hingga #007fff (biru tua).

3. Aplikasi CSS

body {
    background: linear-gradient(to right, #00bfff, #007fff);
}

Dalam dokumen HTML, anda boleh menggunakan gaya CSS secara terus menggunakan gaya sebaris atau menggunakan helaian gaya luaran.

1. Gaya sebaris

Atribut gaya sebaris dibenamkan terus ke dalam teg HTML dalam bentuk gaya sebaris. Contohnya, kod berikut akan menetapkan warna teks elemen kepada merah:

Walau bagaimanapun, gaya sebaris hanya digunakan pada elemen HTML yang ditentukan dan tidak boleh diwarisi oleh elemen lain. Oleh itu, ia tidak dapat tidak menjadikan kod HTML lebih kompleks.

2. Helaian gaya luaran

<span style="color: red;">Hello, CSS!</span>

Untuk mengelakkan penggunaan gaya sebaris untuk menyebabkan kekeliruan dalam kod HTML, kami boleh menggunakan helaian gaya luaran. Helaian gaya luaran disimpan secara berasingan daripada dokumen HTML dalam bentuk fail .css, menjadikan penyelenggaraan halaman lebih mudah. Berikut ialah contoh ringkas helaian gaya luaran:

Dalam contoh ini, tiga peraturan ditakrifkan dalam fail CSS, sepadan dengan

dan elemen dengan id "utama". Untuk menggunakan fail CSS ini, kami perlu menambah teg berikut pada fail HTML:

Dengan cara ini, dokumen HTML akan menggunakan gaya yang ditakrifkan dalam peraturan secara automatik.

/* 在style.css文件中定义以下规则 */

h1 {
    color: red;
}

.text-center {
    text-align: center;
}

#main {
    background-color: white;
}

4. Ringkasan

<!-- 在HTML中引用style.css文件 -->
<link rel="stylesheet" type="text/css" href="style.css">

CSS ialah bahasa reka bentuk yang sangat penting, yang menjadikan halaman web lebih cantik, mudah dibaca dan mudah diselenggara. Memahami konsep asas, sintaks dan aplikasi praktikal CSS adalah asas penting untuk reka bentuk web. Saya harap artikel ini dapat membantu anda menguasai penggunaan CSS dengan lebih baik.

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