Berbeza dengan HTML yang banyak menggunakan penanda (tag) TABLE dan FRAMESET bagi menghasilkan rekaletak (layout) web, CSS biasanya akan menggunakan tag DIV (division) bagi menghasilkan rekaletak web. Sebagai contoh, bagi menghasilkan rekaletak seperti di bawah, kod aturcara HTML akan digabungkan dengan CSS melalui penggunaan tag DIV:
Kod
HTML:
<html>
<head>
<title>Laman
Web Syarikat Pingu</title>
<link
type="text/css" rel="stylesheet"
href="style.css" />
</head>
<body>
<div
id="kotak-utama">
<div
id="header">
banner di sini
</div>
<div
id="menu">
menu
di sini
</div>
<div
id="content">
isi
web di sini
</div>
<div
id="footer">
hakcipta
di sini
</div>
</div>
</body>
</html>
|
Kod CSS
#kotak-utama{
width:900px;
margin:0
auto;
}
#header{
width:100%;
height:150px;
}
#menu{
width:100%;
height:40px;
}
#content{
width:100%;
min-height:250px;
}
#footer{
width:100%;
height:100px;
}
|
Bagaimana CSS boleh digunakan?
CSS boleh digunakan bersama-sama HTML melalui 3 kaedah berikut:
- Pengaturcaraan inline
- Pengaturcaraan internal
- Pengaturcaraan external
<body style="background:#ff0000;color:#fff;">
Kandungan
laman web ini akan disetkan dengan
warna
latar merah dan teks berwarna putih melalui
teknik
aturcara css secara inline pada tag BODY.
Melalui
kaedah ini, CSS akan dipanggil menggunakan
pembolehubah
bernama style.
</body>
|
Contoh aturcara secara internal:
<style>
body{
background:#ff0000;
color:#fff;
}
</style>
<body>
Kandungan laman web ini akan
disetkan dengan
warna latar merah dan teks
berwarna putih melalui
teknik aturcara css secara
INTERNAL.
Melalui kaedah ini, CSS akan
dipanggil menggunakan
penanda (tag) STYLE.
</body>
|
Contoh aturcara secara external:
|
external.html
<link type="text/css" rel="stylesheet"
href="style2.css" />
<body>
Kandungan laman
web ini akan disetkan dengan
warna latar merah
dan teks berwarna putih melalui
teknik aturcara
css secara EXTERNAL.
Melalui kaedah
ini, fail CSS yang berasingan (style2.css)
akan dipanggil
menggunakan penanda (tag) LINK.
</body>
style2.css
body{
background:#ff0000;
color:#fff;
}
|
No comments:
Post a Comment