ILMU KITA, KONGSI BERSAMA: Apa itu CSS?

Biasa sangat kita dengar tentang CSS ni, terutamanya apabila kita berurusan dengan laman Web. Blogger sememang menggunakan CSS ni. Jadi kepada sesiapa yang suka bermain-main dengan template blogger anda harus tau CSS ini.

CSS adalah singkatan kepada Cascading Style Sheets (Bahasa Stail Lembaran). Ianya telah dicipta pada tahun 1997 dan merupakan bahasa sambungan kepada HTML. CSS digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Kalau dalam laman Web, CSS ini merupakan bahasa yang digunakan untuk mengatur tataletak / desain suatu halaman HTML.

CSS sangat berguna kepada pembangun laman Web. Ia benar-benar memberi anda peluang yang konsisten dengan tampilan dan rasa halaman anda, sementara memberikan anda lebih banyak kawalan atas tataletak dan desain dari HTML yang pernah dilakukan.

Terdapat tiga bahagian dalam CSS iaitu Stail, penempatan mereka dan fakta bahawa mereka boleh kaskade.

Stail
Salah satu stail yang lebih umum diterapkan pada HTML adalah warna dan saiz teks. Dalam HTML anda akan mencipta sebuah judul H4 biru seperti ini:

<font color="#0000ff"><h4>headline berwarna
biru</h4></font>

Hasilnya seperti ini:

Headline berwarna biru

Namun, tidak ada cara untuk memastikan bahawa semua berita H4 biru kecuali dengan menaip tag font sebelum dan sesudah masing-masing. Dengan CSS, anda hanya menyatakan bahawa semua H4 utama biru, dan untuk semua laman yang menggunakan style sheet dan semua elemen yang menggunakan gaya itu, mereka akan biru:

H4 { color: #0000ff; }
<h4>Lagi headline biru</h4>

Hasilnya seperti ini:

Lagi headline biru

Aturan stail terbahagi kepada dua iaitu selektor dan deklarasi.
• Selektor - Tag HTML yang dipengruhi oleh Peraturan
• Deklarasi - Stail panggilan khusus yang akan mempengaruhi Selektor.

Sintaks lengkap untuk aturan stail adalah:

selector {property : value;}

Jadi, untuk menetapkan semua teks yang akan dicetak tebal warna merah, anda perlu menulis:

b {color: red;}

Salah satu hal yang membuat CSS begitu mudah untuk digunakan, adalah bahawa anda boleh mengumpul berbagai komponen yang anda mahu supaya memiliki gaya yang sama. Sebagai contoh, jika anda ingin semua H1, H2 dan teks tebal merah, anda boleh menulis:

b {color: red;}
h1 {color: red;}
h2 {color: red;}

Atau dalam baris yang sama:
b, h1, h2 {color: red;}

Anda juga boleh mengelompokkan berbagai Peraturan (dipisahkan oleh semi-colon (;)). Sebagai contoh, untuk membuat semua teks h3 biru dan font Arial, anda akan menulis:

h3 {
font-family: Arial;
color: blue;
}

Mengikut konvensyen, kita perlu meletakkan Peraturan-Peraturan berasingan pada baris yang berasingan, tetapi hal ini tidak perlu dilakukan. CSS mendapat tempat di tiga bahagian dalam satu dokumen, dalam <head>, dalam fail luaran, atau dalam setiap tag. Style panggilan ditempatkan dalam tag individu hanya akan mempengaruhi bahawa tag, sementara gaya lain panggilan mempengaruhi keseluruhan halaman atau halaman yang akan terbuka stail lembaran. Untuk contoh di atas, sementara demonstrasi menunjukkan panggilan stail yang digunakan dalam mencipta sebuah CSS baik di kepala dokumen-dokumen atau pada halaman lain, menggunakan stail yang sebenarnya berada di dalam tag H4 itu sendiri. Contoh:

<h4 style="color: #0000ff;">another blue headline</h4>

Membuat stail sebagai atribut kepada tag adalah cara cepat untuk menghasilkan stail yang anda inginkan tanpa memberi kesan kepada keseluruhan laman. Salah satu cara umum yang digunakan ini ialah menyembunyikan link secara rawak di seluruh laman. Untuk link yang anda ingin sembunyikan, anda akan memberi mereka stail "text-decoration: none". Contoh:

This link has the default decoration

Link ini, sementara masih sebuah link, tiada bergaris bawah dan mempunyai warna hitam.

Untuk membuat sebuah CSS dalam header dokumen HTML anda, anda perlu sertakannya dalam <style> tag. Adalah idea yang baik untuk menentukan jenis mime stail yang anda buat (biasanya text / css), dan kemudian anda meletakkan aturan stail dalam tag "comment" supaya pelayar lama tidak menampilkan mereka sebagai teks pada halaman. Contoh:

Akhirnya, anda boleh membuat dokumen berasingan dengan semua stail maklumat anda dan baik di dalamnya link atau diimport ke dalam dokumen anda. Jika anda memiliki Web yang besar dan ingin menjaga konsistensinya, maka style sheet luaran adalah cara yang paling baik. Mereka memberi anda cara yang mudah untuk mengarahkan bagaimana semua instances dari berbagai tag dipaparkan.

Menyambung Style Sheet

Faedah untuk menyambung CSS ke dalam dokumen adalah bahawa hal itu disokong oleh utama pelayar 4.0. Anda memanggil style sheet disambungkan seperti ini:

Cara ini membolehkan anda untuk menyimpan semua maklumat stail anda di tempat yang sama, dalam elemen <style>, sementara juga memuat turun fail luaran sebagai arahan stail. Contoh: