Bagi pembangunan laman web yang masih menggunakan kod aturcara HTML sebagai sistem menyeluruh, agak sukar untuk anda mengemas kini setiap satu laman yang menggunakan format yang sama. Sebagai contoh, elemen gambar. Anda mahu mengemas kini bentuk paparan untuk 10 halaman, perlu dilakukan satu per satu.

Atau pada laman dinamik, yang menggunakan pemprosesan kod PHP/ASP disokong pangkalan data, bentuk paparan elemen perlu dilakukan satu per satu menerusi fungsi editor. Jadi bagaimana cara yang lebih berkesan untuk kita kawal bentuk paparan tanpa perlu melakukan kerja berulang kali?

Aturcara CSS membantu menjimatkan masa

Apabila kita berbicara mengenai bentuk paparan (layout output) untuk elemen dalam satu-satu laman, semuanya adalah berkaitan dengan CSS. Contohnya, dari CSS kita mampu untuk kawal saiz, kedudukan pada laman, paparan tambahan (garisan, sempadan dan margin) dan dipaparkan/disembunyikan.

Penyediaan awal -- gunakan CSS luaran

Bagi membolehkan kita mengawal ke semua laman dalam satu masa, ianya perlu disambungkan kepada fail CSS luaran (external stylesheet). Jika tidak, sebarang perubahan yang dilakukan tidak akan diaplikasikan kepada laman tersebut.

Di bahagian kod <head> ... </head>, masukkan kod luaran CSS:

<link type="text/css" rel="stylesheet" href="style.css" />

yang mana "style.css" merujuk kepada kedudukan fail CSS tersebut.

Penggunaan CSS dalam kawalan elemen gambar

Mengawal saiz paparan gambar

Terdapat dua cara untuk mengawal saiz gambar iaitu secara "generalize" atau secara "specialize".

"Generalize"

Masukkan kod ini dalam fail style.css dan kawal setiap atributnya dari sini:

img {
  width: 100%; /* saiz gambar dibesarkan sehingga 100% memenuhi ruang yang ditempati */
  border: 1px solid black; /* garis bingkai hitam */
}

Cara ini tidak selamat dan praktikal kerana ke semua elemen gambar dalam laman tersebut akan diaplikasikan melainkan anda menggunakan teknik "child selector". Contohnya, anda mahu semua elemen gambar yang berada daalm bentuk senarai (list) menggunakan stail di atas:

ul img { ... } /* semua gambar dalam senarai */
p img { ... } /* semua gambar dalam perenggan */

"Specilize"

Kita terlebih dahulu perlu menakrifkan stail dalam fail style.css untuk digunakan pada laman. Katakan saya menakrifkan 3 bentuk paparan iaitu:

img.penuh { /* saiz gmbar akan mengikut ruang yang ditempatkan */
  width: 100%;
  margin: 10px; /*memberi ruang antara gambar dan elemen lain sebanyak 10px */
}
img.separuh { /* saiz gambar akan menjadi separuh dari ruang yang ditempatkan */
  width: 50%;
  border: 1px solid gray;
  margin: 5px;
}
img.kecil { /* saiz gambar ditetapkan kepada 100px */
  width: 100px;
  border: 1px solid gray;
  float: left; /* gambar diletakkan disebelah kiri kandungan */
  margin: 5px;
}

Kemudian, apa yang perlu dilakukan seterusnya akan memberikan "class" kepada elemen gambar tertentu yang ingin anda stail tersebut. Sebagai contoh:

<img src="https://www.drupalnote.my/penyu.png" class="penuh" alt="Gambar penyu">

Gambar di atas akan diperbesar memenuhi ruang penulisan. Sekrianya anda mahukan saiz gambar tersebut menjadi separuh dari ruangan, hanya tukarkan "class" tersebut kepada "separuh" seperti ini:

<img src="https://www.drupalnote.my/penyu.png" class="separuh" alt="Gambar penyu">

Kelebihan cara ini, sekiranya ingin dilakukan penambahan/ubahsuai atribut, seperti warna bingkai gambar, ianya dilakukan hanya dalam fail style.css sahaja berdasarkan kepada "class" tertentu. Semua elemen gambar yang menggunakan "class" yang sama akan diaplikasikan stail tersebut secara automatis.

Penilaian: 
3
Your rating: None Average: 3 (2 votes)