Pengenalan kepada CSS

14 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

Baca dan tulis peraturan CSS: selector, property dan value
Pautkan stylesheet dengan <link> dan sasarkan element melalui tag, class dan id
Ramal peraturan mana yang menang apabila dua peraturan bercanggah (cascade)

Idea utama

CSS ialah senarai peraturan. Setiap peraturan memilih beberapa element dan menetapkan rupanya. Apabila peraturan bertembung, cascade memilih pemenang: peraturan yang lebih spesifik menang, dan jika sama, yang terkemudian menang.

HTML menyatakan apa sesuatu itu. CSS (Cascading Style Sheets) menyatakan bagaimana rupanya: warna, fon, jarak, susun atur. HTML yang sama dengan CSS yang berbeza menghasilkan laman yang rupanya berbeza sama sekali.

Anatomi satu peraturan

style.css

h1 {
  color: darkgreen;
  font-size: 40px;
}

Selector: Element mana yang terlibat dengan peraturan ini. Di sini: setiap <h1>.
Property: Apa yang anda mahu ubah, contohnya color atau font-size.
Value: Nilai yang dikehendaki, contohnya darkgreen atau 40px.
Declaration: Satu pasangan property: value;. Kurungan kerinting { } memegang semua deklarasi untuk selector itu, dan setiap satu berakhir dengan titik koma.

Kesilapan senyap

CSS tidak menunjukkan ralat. Tertinggal ; atau salah ejaan seperti colour (ejaan British!) hanya menyebabkan pelayar mengabaikan deklarasi itu. Jika sesuatu gaya tidak berfungsi, semak ejaan dan tanda baca dahulu. CSS sentiasa guna ejaan Amerika color.

Memautkan stylesheet anda

Anda boleh tulis CSS dalam attribute style="…" atau blok <style>, tetapi cara yang kemas ialah fail berasingan yang dipautkan dari <head>. Satu stylesheet kemudian boleh menggayakan setiap halaman dalam laman anda.

index.html

<head>
  <meta charset="utf-8">
  <title>Warung Mak Teh</title>
  <link rel="stylesheet" href="style.css">
</head>

Baris 6 dalam index.html pelajaran ini sudah memautkan style.css. Editor WANCode bertolak ansur dan akan memuatkan fail itu walaupun tanpa baris tersebut, tetapi pelayar sebenar tidak: jika <link> tiada atau nama fail salah eja, tiada satu pun gaya anda akan muncul.

Tiga jenis selector

CSS

p { }          /* element: every <p> */
.price { }     /* class: every element with class="price" */
#special { }   /* id: the one element with id="special" */

Selector element luas: ia mengena setiap element jenis itu.
Selector class bermula dengan titik. Satu class boleh diguna semula pada banyak element, dan satu element boleh ada beberapa class (class="price promo"). Inilah selector yang paling kerap anda guna.
Selector id bermula dengan #. Id mesti unik dalam halaman, jadi guna untuk perkara yang hanya ada satu.
Ruang di antara selector bermaksud "di dalam": .menu .price memilih harga yang berada di dalam menu.

Cascade: siapa yang menang?

Selalunya dua peraturan cuba menetapkan property yang sama pada element yang sama. Pelayar menyelesaikannya dengan cascade. Secara ringkas, peraturannya ialah:

Lebih spesifik mengalahkan kurang spesifik. id mengalahkan class, class mengalahkan element.
Jika sama spesifik, peraturan yang terkemudian menang. Susunan dalam fail penting.
Nilai yang diwarisi paling lemah. Sesetengah property (seperti color dan font-family) diturunkan daripada parent kepada child, tetapi mana-mana peraturan yang menyasarkan child itu secara terus akan mengalahkannya.

Apakah warna harga itu?

CSS

.sold-out { color: gray; }
.price { color: red; }

Sasarkan secara terus

CSS

.sold-out { color: gray; }
.price { color: red; }
.sold-out .price { color: gray; }

Kiri: harga di dalam item yang habis dijual masih merah. Ia cuma mewarisi kelabu, dan .price menyasarkannya secara terus. Kanan: .sold-out .price guna dua class, jadi ia lebih spesifik dan menang.

Dalam style.css, di bawah komen, tulis dua peraturan menggunakan selector element:

1. Beri setiap h1 color pilihan anda (bukan hitam atau kelabu), contohnya darkgreen.

2. Besarkan sedikit setiap p: font-size: 18px;

Semakan

<h1> ada warna
Perenggan sekurang-kurangnya 18px

Uji kefahaman

Dalam p { color: navy; }, apakah color?

SelectorPropertyValue

Satu element ada class="note" dan id="intro". CSS ada #intro { color: blue; } dan kemudian .note { color: red; }. Apakah warnanya?

Merah, kerana ia terkemudianBiru, kerana id lebih spesifik daripada classUngu, pelayar mencampurkannya

Di mana <link rel="stylesheet" href="style.css"> diletakkan?

Di dalam <head>Di bahagian paling atas style.cssDi dalam setiap element yang anda mahu gayakan

Apa yang anda pelajari

Peraturan CSS ialah selector { property: value; }; stylesheet dipautkan dari <head> dengan <link rel="stylesheet">.
p memilih mengikut element, .price mengikut class (boleh diguna semula), #special mengikut id (unik).
Cascade: lebih spesifik menang; jika sama, yang terkemudian menang; nilai warisan kalah kepada peraturan terus.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.