Lembaran Gaya Lata/Mengguna CSS pada HTML dan XHTML

CSS dapat digunakan pada dokumen HTML atau XHTML dengan menggunakan tiga kaedah: pautan, pembenaman, dan sebaris.

Pautan.

Peraturan CSS distor dalam dokumen berasingan dan tidak dalam dokumen HTML secara langsung.

Pembenaman.

Dengan kaedah pembenaman, CSS distor (di bahagian "header" dokumen) sebagai sebahagian daripada halaman HTML.

Sebaris.

Dengan kaedah ini, CSS distor secara langsung dan atribut style tag HTML seperti berikut: <div style="font-weight:bold">Bold Font</div>.

Kaedah pautan mungkin merupakan kaedah yang paling kemas, akan tetapi kaedah-kaedah yang lain merupakan cara yang cepat dan mudah apabila kita membuat prototaip halaman sesawang. Kaedah pembenaman dan sebaris tidak memerlukan fail berasingan. Kaedah sebaris juga memudahkan kerja kerana anda tidak perlu memikirkan kelas CSS yang diperlukan dalam dokumen anda. Namun, buat tapak yang besar di mana banyak halaman memerlukan keseragaman, kaedah pautan merupakan kaedah pilihan.

Kaedah-kaedah yang diperkatakan di atas dibincangkan dengan lebih terperinci dalam bahagian-bahagian berikut.

Pautan

Dengan CSS yang dipautkan, peraturan CSS distor dalam fail berasingan. Bagi merujuk kepada fail tersebut dari fail HTML, tambah unsur link (dalam dokumen XHTML, anda juga perlu menambah unsur penutupnya) pada unsur head, seperti tertera dalam contoh berikut. Anggap lembaran gaya distor dalam fail CSS bernama "gaya.css".

  <head>
    <title>Halaman Sesawang Contoh</title>
    <link rel="stylesheet" type="text/css" href="gaya.css">
  </head>

Unsur link dalam contoh ini memiliki tiga atribut. Pertama, atribut rel memberitahu pelayar jenis sasaran pautan. Atribut kedua, type, memberitahu pelayar lembaran gaya jenis apa, dan yang ketiga, href, memberitahu pelayar URL lembaran gaya tersebut. Dalam contoh yang diberi, URL adalah URL relatif, akan tetapi fail "gaya.css" juga dapat dipautkan dengan URL mutlak.

TODO	Nota penterjemah: Perhatikan bahawa kod pertama ("rel") dan kedua ("type") tidak boleh ditukar isi mahupun bahasa. Kod ketiga bebas dari segi isi/nama tetapi memerlukan akhiran ".css"

Fail "gaya.css" mempunyai hanya satu peraturan dengan teks berikut:

 p {
   font-weight:bold;
 }

Peraturan ini memberitahu pelayar bahawa teks dalam unsur perenggan (p) harus ditebalkan ("bold").

Contoh penampilan:

Teks ini diformatkan dan mengikut peraturan CSS.

Kod sumber buat dokumen HTML lengkap adalah seperti berikut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Halaman Sesawang Contoh</title>
    <link rel="stylesheet" type="text/css" href="gaya.css">
  </head>
  <body>
    <p>Teks ini diformatkan dan mengikut peraturan CSS.</p>
  </body>
</html>

Pembenaman

Halaman-halaman yang dijana cara dinamik mungkin perlu menggunakan CSS terbenam akan tetapi penggunaan ini harus diguna dengan minimum. CSS serupa yang diguna pakai secara meluas dalam banyak halaman lazimnya harus diletakkan dalam lembaran gaya yang dipautkan.

CSS terbenam ialah CSS yang diletakkan pada pengepala mana-mana dokumen HTML yang perlu digayakan. Misalnya, kita mahukan teks dokumen HTML ini ditebalkan:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="ms">
  <head>
   <title>Halaman Sesawang Contoh</title>
  </head>
  <body>
   <p>
    Teks ini akan diformat.
   </p>
  </body>
 </html>

CSS perlu diletakkan pada bahagian pengepala dokumen:

  <head>
   <title>Halaman Sesawang Contoh</title>
   <style type="text/css">
    p {
     font-weight:bold;
    }
   </style>
  </head>

Peraturan CSS diletakkan dalam unsur style. Atribut type unsur style yang ditentukan sebagai text/css memberitahu pelayar bahawa lembaran gaya yang terkandung ditulis dalam CSS dan harus digunakan bagi pemformatan dokumen. Sekiranya atribut type is tidak hadir ataupun diset kepada nilai yang tidak diterima atau dikenali, peraturan CSS tidak akan dikenakan pada dokumen.

CSS dalam contoh ini akan memberitahu pelayar untuk menampilkan semua teks yang terdapat dalam unsur perenggan (p) sebagai teks tebal. Teks akan kelihatan seperti berikut:

Teks ini tebal.

Berikut dokumen yang dilengkapi CSS:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="ms">
  <head>
   <title>Halaman Sesawang Contoh</title>
   <style type="text/css">
    p {
     font-weight:bold;
    }
   </style>
  </head>
  <body>
   <p>
    Teks ini tebal.
   </p>
  </body>
 </html>

Ingat, anda harus menggunakan lembaran gaya yang dipautkan lebih daripada lembaran gaya terbenam di mana mungkin. Ini akan membolehkan anda mengubah maklumat gaya am tanpa perlu menjejak gaya yang terkandung dalam pelbagai fail dan dokumen.

Sebaris


    
sunting

CSS sebaris ditentukan peraturannya terus pada tag pemula unsur. CSS dimuatkan dalam  atribut style dalam HTML atau XHTML 1.1.
Contoh:

 <div style="font-weight:bold; color:blue;">Fon biru tebal</div>

dipaparkan sebagai:

Fon biru tebal

Seperti yang diterangkan terdahulu, anda harus menggunakan CSS yang dipaut lebih daripada CSS sebaris.

Lihat juga


    
sunting

Bahasa Penanda Hiperteks (HTML)/Lembaran Gaya Lata



Sebelum: Pengenalan

Indeks

Berikut: Mengguna CSS pada XML