Penciptaan CSS
Penciptaan CSS
Apabila helaian gaya dibaca, penyemak imbas akan memformat dokumen HTML mengikutnya.
Cara memasukkan helaian gaya
Terdapat tiga cara untuk memasukkan helaian gaya:
Helaian gaya luaran
Lembaran gaya dalaman
Gaya sebaris
Lembaran gaya luaran
Helaian gaya luaran adalah sesuai apabila gaya perlu digunakan pada banyak halaman. Dengan helaian gaya luaran, anda boleh menukar rupa keseluruhan tapak anda dengan menukar satu fail. Setiap halaman menggunakan teg untuk memaut ke helaian gaya. Teg berada di kepala (dokumen):
<head>
<link rel="stylesheet" type="text/css" href ="mystyle .css">
</head>
Pelayar akan membaca pengisytiharan gaya daripada fail mystyle.css dan memformatkannya mengikut dokumen itu.
Helaian gaya luaran boleh diedit dalam mana-mana penyunting teks. Fail tidak boleh mengandungi sebarang tag html. Helaian gaya hendaklah disimpan dengan sambungan .css. Berikut ialah contoh fail lembaran gaya:
jam {color:sienna;}
p {margin-left:20px;}
body {background-image:url ("../style/images/back40.gif");}
Jangan tinggalkan ruang antara nilai atribut dan unit. Jika anda menggunakan "margin-left: 20 px" dan bukannya "margin-left: 20px" ia hanya akan berfungsi dalam IE 6, tetapi tidak dalam Mozilla/Firefox atau Netscape.
Helaian gaya dalaman
Apabila satu dokumen memerlukan penggayaan khas, helaian gaya dalaman hendaklah digunakan. Anda boleh menggunakan teg <style> untuk menentukan helaian gaya dalaman di bahagian atas dokumen, seperti ini: jam {color:sienna;}
p {margin-left:20px;}
</ gaya>body {background-image:url("../style/images/back40.gif");}
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
</head>
Gaya sebarisKerana keperluan mencampurkan prestasi dan kandungan Bersama-sama, gaya sebaris kehilangan banyak kelebihan helaian gaya. Gunakan pendekatan ini dengan berhati-hati, contohnya apabila gaya hanya perlu digunakan sekali pada elemen.
Untuk menggunakan gaya sebaris, anda perlu menggunakan atribut gaya dalam teg yang berkaitan. Sifat Style boleh mengandungi sebarang sifat CSS. Contoh ini menunjukkan cara menukar warna dan jidar kiri perenggan:
<p style="color:sienna;margin-left:20px">Ini ialah perenggan</p>
Keutamaan
Jika dalam helaian gaya luaran, Helaian gaya dalaman (terletak di dalam teg),
Gaya sebaris (di dalam elemen HTML), jika gaya elemen HTML yang sama ditetapkan, gaya gaya sebaris (di dalam elemen HTML) akan berkuat kuasa Jadi keutamaan mereka ialah
