5.1 Atribut gaya tag
Dan beberapa lagi perkara berguna tentang HTML. Apabila web mula mendapat populariti, terdapat permintaan yang semakin meningkat untuk halaman web untuk direka dengan cantik atau sangat cantik. Masalah ini diselesaikan dengan menggunakan . style
Bentuk umum atribut ini mempunyai format berikut:
<tag style="name=value;name2=value2;nameN=valueN">
Nilai atribut, dipisahkan style
dengan koma bertitik, menyenaraikan semua "gaya" yang perlu digunakan pada teg.
Katakan anda mahu memaparkan imej sebagai segi empat sama 100*100
dan juga menjadikannya separuh lutsinar. Untuk melakukan ini, anda perlu menambah gaya khas padanya:
- lebar=100px;
- ketinggian=100px;
- kelegapan=0.5;
Kemudian kod HTML dengan imej ini akan kelihatan seperti ini:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Terdapat beratus-ratus, jika tidak beribu-ribu, gaya. Dan pembangun penyemak imbas sentiasa menghasilkan yang baharu. Ada baiknya anda belajar untuk menjadi pembangun Java, bukan pereka web :)
5.2 Gaya CSS Popular
Tidak mungkin anda akan menulis banyak kod HTML atau mengedit gayanya dalam hidup anda, tetapi apa-apa boleh berlaku. Sebagai contoh, anda sedang menulis beberapa halaman HTML kecil untuk menguji API
. Oleh itu, mengetahui gaya asas HTML
boleh membantu.
Di bawah ialah 10 yang paling biasa untuk pembangun bahagian belakang:
# | Nama | Contoh | Penerangan |
---|---|---|---|
1 | lebar | lebar: 100px | lebar elemen dalam piksel |
2 | ketinggian | ketinggian: 50% | ketinggian elemen sebagai peratusan (daripada lebar induk) |
3 | paparan | paparan: tiada | elemen paparan (jangan paparkan elemen) |
4 | keterlihatan | penglihatan: tersembunyi | keterlihatan elemen (elemen disembunyikan, tetapi ruang dikhaskan untuknya) |
5 | warna | warna: merah; | warna teks |
6 | warna latar belakang | warna latar belakang: asap | warna latar belakang |
7 | sempadan | sempadan: 1px hitam pejal; | sempadan (lebar 1px, warna hitam, garis padat) |
8 | fon | font: verdana 10pt | font: verdana, saiz 10pt |
9 | penjajaran teks | text-align: tengah; | penjajaran teks secara mendatar |
10 | margin | jidar:2px | padding di luar elemen |
Anda tidak perlu mengingati tag ini, semuanya ada di Internet. Selain itu, setiap "gaya" mempunyai set nilai sahnya sendiri dan formatnya sendiri untuk menerangkan nilai. Lihat sekurang-kurangnya pada border
atau font
.