Mengenal arti Css , Selector dan Property
Apa see Css ?
Menurut Wikipedia, Cascading Style Sheets (CSS) adalah: “bahasa pemrograman untuk mengatur tampilan suatu website atau blog”
Tampilan yang dimaksud disini adalah
jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna,
serta masih banyak lagi.
Apa see Selector
Selector adalah elemen atau tag HTML yang akan di-definisi-kan.
Contoh selector { property: value}
Apa see Property
Property adalah atribut yang akan diganti dengan “nilai” tertentu.
Property dan nilai dipisahkan dengan tanda titik dua (:) dan keduanya diapit oleh tanda kurung kurawal ({).
contoh 1
p { color:black }
Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (“).
Untuk memberikan lebih dari satu _property bagi suatu _property, pisahkan setiapkombinasi “property:value” dengan tanda titik koma (;).
Untuk membuat definisi gayalebih mudah dibaca, definisi tiap property dapat dilakukan per baris.
Sehinggasintaksnya menjadi:
selector { property1: value; property2: “value_value”; … }
contoh 2
p { text-align:center; font-family:“sans serif” }
Aturan-aturan yang berlaku dalam sintaks CSS:
1. Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2),
2. Nama properti bersifat CASE SENSITIVE dan menggunakan huruf kecil,
3. Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma (;) untuk membatasi properti yang satu dengan yang lain (contoh 2),
4. Jika selector lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma (,).
contoh: h1,h2,h3 {color:green}
Manfaat dari CSS:
1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia XHTML,
5. Digunakan dalam hampir semua web browser.
Selector baru di CSS3
Sebuah pemilih CSS mengacu pada cara di mana elemen-elemen HTML yang stylish
menggunakan stylesheet.
Misalnya, untuk menempatkan border di sekitar semua elemen <div> Anda menggunakan
divselector: div {border: 1px # 000 yang solid;}
Untuk menerapkan warna background untuk semua elemen dengan higlight class Anda menggunakan .
highlight: .highlight { background-color: yellow; }
Untuk mengubah lebar dari suatu elemen dengan nilai atribut ID dari myDiv, Anda menggunakan
#myDiv {width: 250px;}.
Tentu saja, ini penyeleksi dapat dikombinasikan, sehingga untuk memilih semua elemen <div> dengan class highlight, Anda menggunakan div.highlight, atau untuk memilih elemen <div>
dengan myDiv ID Anda menggunakan div # myDiv.
New Effect: Dari Css 3
• background
• background-clip
• background-origin
• background-size
• border-radius
• border-image
• border-color
• box-shadow
• box-sizing
• opacity
• outline-offset
• resize
• text-overflow
• text-shadow
• word-wrap
Layout multicolumn
Dengan layout multicolumn memungkinkan untuk teks yang akan tersebar di sejumlah kolom, seperti yang terdapat pada Majalah atau koran.
Hal ini dapat dilakukan dengan dua cara, baik menggunakancolumn-width, di mana Anda menentukan seberapa lebar setiap kolomnya (yang mana jumlah kolom ditentukan oleh ruang yang tersedia untuk wadah), atau menggunakan column-count, di mana Anda menentukan jumlah kolom yangdigunakan.
Web font
Font web sebenarnya diusulkan untuk CSS2 dan telah tersedia dalam Microsoft Internet Explorer sejak versi 5.
Sekarang anda dapat menggunakan aturan @ font-face untuk menggunakan ttf berlisensi. (TrueType) atau OTF (OpenType). font pada halaman Web Anda.
Sebuah contoh dari aturan @ font-face adalah sebagai berikut:
@ font-face {font-family: Alexa; src: url ('Alexa.otf');}.
Anda sekarang dapat menggunakan font ini dalam aturan sendiri CSS anda, seperti:
article p { font-family: Alexa, Arial, Helvetica, sans-serif;}.
New Color
Ada juga fitur baru CSS3, termasuk dukungan untuk warna baru, terutama HSL (Hue, Saturation, Lightness)
dan nilai-nilai dua warna dengan alpha propertis-RGBA (Merah, Hijau, Biru, Alpha) dan HSLA (Hue, Saturation, Lightness, Alpha).
mungkin hanya ini saja Mudah-mudahan Sobat setia Jadi bertambah Pengetahuan nya Tentang Css
Alhamdulillah Catatan sederhana Tentang Selector baru Css 3 telah selesai Mohon maaf jika ada kesalahan Wasalamu'alaikum warohmatulloh wabarokaatuh
No comments:
Post a Comment