Menggunakan helaian gaya untuk persembahan konsisten

Helaian gaya (stylesheet) ialah fail peraturan berasingan yang mengawal rupa laman, jadi anda mengubah warna atau fon sekali sahaja dan setiap laman yang dipautkan mengikutinya. Kemahiran ini muncul apabila tugasan meminta persembahan konsisten pada satu laman atau laman web kecil, dan ia dibina atas struktur laman yang sudah anda tulis.

Bagaimanakah peraturan CSS berfungsi?

Satu peraturan mempunyai pemilih (selector, apa yang digayakan) dan satu atau lebih perisytiharan (declaration, bagaimana), setiap satu berakhir dengan koma bertitik.

h1 {
  color: navy;
  font-family: Arial, sans-serif;
  font-size: 28px;
}

Di sini h1 ialah pemilih. color, font-family dan font-size ialah sifat, dan setiap satu diikuti nilai. Koma bertitik yang tertinggal ialah sebab paling lazim sesuatu peraturan hanya separuh berfungsi.

Bagaimanakah anda membina dan memautkan helaian gaya?

1. Cipta fail teks biasa baharu bernama style.css dalam folder laman.
2. Tulis satu peraturan bagi setiap pemilih, bermula dengan elemen yang disebut dalam tugasan.
3. Simpan fail dan kekalkan sambungannya sebagai .css.
4. Tambah baris pautan dalam head setiap laman: <link rel="stylesheet" href="style.css">.
5. Muat semula laman dan semak bahawa setiap keperluan kini kelihatan.

Contoh berlangkah

Tugasan rekaan meminta semua tajuk aras 2 berwarna hijau tua dengan saiz 20 piksel, dan semua perenggan dalam Arial 16 piksel.

Langkah 1: cipta style.css.

Langkah 2: tulis dua peraturan.

h2 {
  color: darkgreen;
  font-size: 20px;
}

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

Langkah 3: dalam head index.html, tambah baris pautan. Helaian gaya berada dalam folder yang sama, jadi laluannya hanya style.css.

Langkah 4: jika laman kedua, pages/events.html, juga memerlukan peraturan itu, baris pautannya ialah <link rel="stylesheet" href="../style.css">, kerana helaian gaya berada satu folder ke atas. Kemudian, menukar darkgreen kepada navy sekali sahaja mewarnakan semula setiap h2 pada kedua-dua laman.

Kesilapan yang perlu diawasi

Kesilapan lazim ialah menyalin gaya yang sama ke dalam teg pada setiap elemen.

<h2 style="color: darkgreen;">When we meet</h2>
<h2 style="color: darkgreen;">What we do</h2>

Ini berfungsi buat masa ini tetapi gagal matlamat konsistensi: perubahan kemudian memerlukan suntingan pada setiap tajuk, dan satu akan tertinggal. Pembetulannya ialah satu peraturan h2 dalam helaian gaya dan teg <h2> biasa pada laman. Kesilapan kedua yang lebih senyap ialah laluan salah dalam baris pautan, yang menyebabkan seluruh helaian gaya hilang tanpa amaran.

Semak sendiri

1. Cari kesalahan: p { color: red font-size: 14px; }

2. Sebuah laman dalam folder pages memautkan style.css dalam folder laman utama. Tulis href yang betul.

3. Empat laman berkongsi satu helaian gaya. Pelanggan mahu warna tajuk yang lain. Berapa fail perlu disunting?

Ke mana selepas ini

Seterusnya, hubungkan laman antara satu sama lain dalam Mencipta pautan relatif yang berfungsi. Kembali ke panduan modul, dan semak hasil anda dengan arahan melalui penyemak tugasan praktikal dan bukti.

Pelajar boleh memahami sesuatu peraturan secara berasingan tetapi masih kehilangan markah apabila ia mesti berfungsi merentas struktur folder. Guru kami boleh membantu tepat pada bahagian itu melalui tuisyen ICT dalam talian satu dengan satu.