Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 TEKNIK BARU CSS3: BAHAGIAN 1 |
| August 24, 2009 Posted by: Fauzie |
Dengan semua orang ternanti-nanti akan browser yang boleh menerima "feature" CSS yang baru, ramai orang terutama pembangun web mungkin merasa "confuse" berhubung dengan CSS mana yang harus digunakan. Ini adalah kerana tidak semua "advanced features" daripada CSS3 ini boleh di lihat dengan browser yang sedia ada--Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Firefox dan safari.
Kriteria untuk menentukan browser mana yang harus digunapakai bergantung kepada:
Adakah "features" yang hendak diketengahkan itu boleh didukung (support) oleh semua browser
Adakah "features" ini berguna
Adakah "features" ini memudahkan kerja kita dalam menyediakan "semantic markup"
Terdapat beberapa "advanced features" selain yang pernah diperkatakan sebelum ini yang anda boleh menggunakannya tanpa memikirkan perkara-perkara di atas.
Nota: Contoh-contoh dalam rencana ini adalah "live demo" dan hanya sesuai dilihat melalui browser Firefox dan Safari sahaja
Attribute Selector
Attribute Selector adalah salah satu komponen "advanced" CSS yang membolehkan anda menggunakan CSS secara selektif ke atas element dengan HTML attribute. Dengan kata lain anda tidak perlu menggunakan extra HTML markup.
Contoh di bawah ini menunjukkan CSS mewarnakan "link element" yang mempunyai "rel attribute" tanpa operator (operator: none) dengan warna biru (navy) dan membuang garisan bawah melalui kod "text-decoration: none;"
Sila baca arahan dan nota dengan teliti sebelum menjawab
Kod CSS dan HTML untuk contoh di atas adalah seperti berikut. Kod berwarna maroon merujuk kepada CSS dan yang berwarna biru ialah kod HTML.
<html>
<head>
<style type="text/css">
a[rel] {
color: navy;
text-decoration: none;
}
</style>
</head>
<body>
<p>Sila baca arahan dan nota dengan<a href="http://www.example.com" rel="external">teliti</a>sebelum menjawab</p>
</body>
</html>
<head>
<style type="text/css">
a[rel] {
color: navy;
text-decoration: none;
}
</style>
</head>
<body>
<p>Sila baca arahan dan nota dengan<a href="http://www.example.com" rel="external">teliti</a>sebelum menjawab</p>
</body>
</html>
Child Selector
Child Selector "match" element apabila element kedua adalah "direct child" element pertama. Dalam contoh ini semua <strong> tag (tag untuk huruf tebal) dalam "list item" (li) akan berwarna merah, bold (tebal) dan huruf italic.
Apakah maksud ayat di atas? Dengan menggunakan teknik apa yang dipanggil "child selector" kita letakkan kod-kod tertentu dalam CSS dan memberitahu atau memberi "arahan" supaya perkataan yang mempunyai tag <strong> akan menjadi tebal (bold), berwarna merah dan menjadi perkataan mereng (italic).
<html>
<head>
<style type="text/css">
strong {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<li>Ini adalah<strong>contoh</strong>ayat menggunakan child selector</li>
</body>
<html>
<head>
<style type="text/css">
strong {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<li>Ini adalah<strong>contoh</strong>ayat menggunakan child selector</li>
</body>
<html>
Dalam contoh di atas, perkataan "contoh" adalah child selector bagi tag "strong" dan terbentuk dengan kod-kod ini.
strong {
color: red;
font-style: italic;
}
