Bentuk Dasar CSS

CSS 语法

Atur gaya CSS terdiri daripada dua bahagian utama: pemilih, serta satu atau lebih pengisytiharan.

pemilih {pengisytiharan1; pengisytiharan2; ... pengisytiharanN }

Pemilih biasanya adalah elemen HTML yang andainginkan untuk mengubah gaya.

Setiap pengisytiharan terdiri daripada satu sifat dan satu nilai.

Sifat (sifat) adalah sifat gaya (style attribute) yang anda inginkan untuk diset. Tiada sifat mempunyai nilai. Sifat dan nilai dipisahkan dengan tanda titik bertindih.

pemilih {sifat: nilai}

Perintah ini akan menentukan warna teks elemen h1 menjadi merah, serta mengatur saiz huruf menjadi 14 piksel.

Dalam contoh ini, h1 adalah pemilih, warna dan saiz adalah sifat, red dan 14px adalah nilai.

h1 {warna:red; saiz:14px;}

Gambaran di bawah ini menunjukkan struktur kode di atas:

CSS 语法

Petikan:Gunakan kurung kurawal untuk melingkungi pengisytiharan.

Penggunaan berbeza untuk nilai dan unit

Selain kata asing red, boleh menggunakan nilai warna heksadesimal #ff0000:

p { warna: #ff0000; }

Untuk menghemat byte, boleh menggunakan bentuk singkatan CSS:

p { warna: #f00; }

Kami boleh menggunakan dua cara untuk menggunakan nilai RGB:

p { warna: rgb(255,0,0); }
p { warna: rgb(100%,0%,0%); }

Perhatikan, ketika menggunakan persen RGB, walaupun nilai adalah 0, tetapi tetap menulis simbol persen. Tetapi di situasi lain, tidak perlu melakukan hal ini. Contohnya, ketika ukuran adalah 0 piksel, tak perlu menggunakan unit px setelah 0, kerana 0 adalah 0, tidak peduli unitnya adalah apa.

Ingat untuk menulis petikan

Petikan:Jika nilai adalah beberapa kata, perlu menambahkan petikan:

p {font-family: "sans serif";}

Pengisytiharan berlebihan:

Petikan:Jika hendak menentukan lebih daripada satu pengisytiharan, perlu menggunakan tanda semicolon bagi setiap pengisytiharan. Contoh di bawah ini menunjukkan bagaimana untuk menentukan paragraf teks merah yang diatur tengah. Atau kurang lebih seperti ini:

p {teks-janji: tengah; color:red;}

Anda seharusnya menggambarkan satu properti di setiap baris, demikian sahaja dapat meningkatkan keterbacaan definisi gaya, seperti ini:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Ruang kosong dan besarnya huruf

Sebagai atur cara, kebanyakan papan atur mempunyai lebih daripada satu peraturan, dan kebanyakan peraturan mempunyai lebih daripada satu deklarasi. Pemakaian deklarasi berbanyak dan ruang kosong membuat papan atur lebih mudah untuk diedit:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Apakah ada ruang kosong yang tidak mempengaruhi kesan kerja CSS di pelayar, sama seperti, berbeza daripada XHTML, CSS tak berhati-hati tentang besarnya huruf. Walau bagaimanapun, ada pengecualian: jika bekerja bersama-sama dengan dokumen HTML, nama class dan id adalah berhati-hati tentang besarnya huruf.