7 "CSS child" dan "Adjacent Sibling Selectors"

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.

Tutorial: 

9 "Child Selector" dalam CSS

"Child Selector" atau penetapan pemilihan kelas elemen merupakan perkara yang baru dalam CSS2. Fungsi yang diperkenalkan ini membolehkan pengguna memilih elemen tertentu untuk diaplikasikan stail dan atributnya tanpa perlu melibatkan keseluruhan stail seperti dalam CSS1. Dalam tutorial ini saya akan terangkan lebih lanjut cara penggunaannya.

Bagaimana ia berfungsi

Penggunaan pemilihan kelas atau "child selector" begitu mudah dan senang hanya dengan penggunaan tatatanda lebih besar ">" dan perlu digunakan di antara 2 elemen kelas. Sebagai contoh:

Tutorial: 

8 "Tangan pendek" dalam CSS

Satu kelebihan penggunaan CSS adalah mengurangkan masa memuat turun dan pemaparan sesuatu laman web. Untuk menvariasikan sesuatu teks, anda akan mengulang elemen <font> setiap kali stail yang sama hendak digunakan. Anda juga mungkin akan memuatkan beberapa elemen lain seperti table, heading dan lain-lain. Sekarang, ke semua elemen variasi ini boleh dimuatkan ke dalam satu dokumen CSS yang mana setiap stail satu elemen hanya perlu dinyatakan sekali dan boleh digunakan berulang kali.

Tutorial: 

6 Aksara

Jenis tulisan

Tentunya anda akan busan jika website anda hanya menggunakan jenis tulisan yang sama

sahaja, oleh itu, property font-family, boleh digunakan untuk menukar jenis tulisan anda. Contohnya seperti berikut:

h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}

Awas, tulisan yang dipilih mestilah merupakan tulisan asas dan terdapat dalam semua komputer. Jika tidak, tulisan anda mungkin akan kelihatan lain dari yang sepatutnya.

Tutorial: 

5 Tulisan

Mewarnakan tulisan

Anda boleh mewarnakan tulisan anda dengan menggunakan property color. Value bagi property itu boleh dalam nilai RBG,HEX ataupun Kod Warna. Contohnya seperti berikut :

h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}

Bagi membuat latar belakang untuk tulisan pula, penggunaan property background-color boleh digunakan. Contohnya penuh seperti berikut:

Tutorial: 

4 Latar belakang

Membuat warna bagi latar belakang

<html>
<head>
<style type="text/css">
  body { background-color: yellow }
  h1 { background-color: #00ff00 }
  h2 { background-color: transparent }
  p { background-color: rgb(250,0,255) }
</style>
</head>
<body>
    <h1>Tajuk 1</h1>
    <h2>Tajuk 2</h2>
    <p>Perenggan 1</p>
</body>
</html>

Contoh

Tutorial: 

2 Sintaks

Sintaks

CSS syntax dibahagikan kepada 3 bahagian iaitu selector, property dan value.

selector {property: value} 

Selector ialah element/tag HTML yang ingin anda ubah, property ialah attribute yang ingin diubah, manakala value ialah nilai bagi attribute tersebut. Property dan value dipisahkan dengan menggunakan titik bertindah dan pada diletakan dalam kurungan.

Contohnya:

Tutorial: 

CSS

HTML pada asalnya dibina dan dicipta untuk memaparkan informasi dalam cara yang paling mudah dan ringkas, dengan estetika menumpukan kepada kandungan itu tersendiri berbanding paparan keseluruhan laman (dan tidak mengira jenis pelantar sistem operasi dan perisian pelayar).

Buat masa sekarang, teknologi semakin maju, laman web sudah semakin popular. Paparan kepada bentuk laman web yang memaparkan kandungan laman telah menjadi satu elemen yang paling kritikal dan penentu kepada kejayaan laman tersebut.

Tutorial: