Tutorial ini berfokus kepada CSS maju. Untuk tutorial asas, sila rujuk kepada pengenalan mengenai CSS bagi mendapatkan tutorial asas.

Bermula dengan proses rekaan laman web, saya melayari beberapa tutorial yang ada dan akhirnya menemui satu penggunaan kod CSS yang boleh dikatakan agak menarik. Kemudian saya mengikuti beberapa perbincangan mengenai pengguna kod maju CSS dan saya interpretasikan dalam bentuk tutorial mudah ini.

CSS children

Child selectors adalah pemilihan elemen menerusi CSS berdasarkan kepada susunan hierraki ibu-anak. Elemen yang berada dalam rangkuman elemen yang pertama adalah anak (child) kepadanya. Untuk penerangan lanjut sila baca "Child selectors" dalam CSS.

<div>
  <p>Menggunakan CSS sangat <em>menyeronokkan</em></p>
</div>
  • elemen <p> adalah child kepada <div>
  • elemen <em> adalah child kepada <p>
  • elemen <em> adalah keturunan (descendent) bukan child kepada <div>

CSS adjacent siblings

Apakah yang dimaksudkan dengan adjacent siblings? Ia adalah elemen yang hadir atau wujud selepas elemen yang lain, dan berpaksikan kepada ibu yang sama.

<div>
  <h1>Tajuk artikel</h1>
    <p>Kelihatan sangat menarik</p>
    <p>Dan juga sangat mencabar</p>
</div>
  • elemen <h1> dan dua paragraf adalah anak kepada elemen <div>
  • elemen <h1> dan kedua-dua <p> adalah adik-beradik, tetapi hanya <h1> dan <p> yang pertama sahaja adalah CSS adik-beradik yang bersebelahan (adjacent)
  • kedua-dua paragraf <p> adalah adik-beradik bersebelahan

Seterusnya kita lihat dengan lebih mendapat bagaimana fungsi pemilihan (selectors) didefinasikan.

CSS descended selectors

Sekiranya kita mahu mentakrifkan stail untuk elemen menerusi CSS dalam bentuk garis keturunan, penulisan kod untuk dua elemen dibuat pada satu baris tetapi diasingkan dengan jarak.

div em { color: red }
<div>
Teks yang <em>condong</em> ini berwarna merah
  <p>Walaupun dalam <em>paragraf</em> atau huruf <strong><em>tebal</strong></em></p>
</div>

[title]-[filefield-fid]

Kod di atas akan memaparkan semua teks condong dalam warna merah selagi mana ianya berada atau terangkum dalam elemen <div>

CSS child selectors

Sekiranya kita mahu mendefinasikan hanya kepada elemen anak, maka tandaan simbol lebih besar (>) digunakan pada kod yang sama.

div > em { color: blue }

[title]-[filefield-fid]

Kod di atas akan menghasilkan teks yang berwarna biru kepada semua elemen <em> yang berpaksikan atau anak kepada elemen <div> sahaja. Tidak termasuk yang terangkum dalam mana-mana elemen selepas <div>.

CSS adjacent selectors

Bagi mentakrifkan pemilihan untuk elemen CSS yang bersebelahan, tandaan simbol tambah (+) digunakan.

h1+p { color: red }

[title]-[filefield-fid]

Kod di atas akan menghasilkan semua paragraf selepas <h1> berwarna biru.

h1+p+p { color: red }

[title]-[filefield-fid]

Manakala kod di atas menyebabkan semua paragraf kedua selepas elemen <h1> menjadi warna merah.

p+p { text-indent: 1em }

[title]-[filefield-fid]

Kod yang ini pula akan menghasilkan jarak selang sebanyak 1em pada paragraf kedua dan seterusnya tetapi tidak kepada paragraf yang pertama.

Bagi mendapatkan kefahaman yang lebih, anda boleh cuba beberapa bentuk dan format kod CSS ini kerana satu masa nanti pasti ianya akan digunakan.

Penilaian: 
1
Average: 1 (1 vote)