Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 16 : Cara Menggunakan Pseudo Element di CSS. Selanjutnya, kita akan mempelajari cara menggunakan properti @ rules di CSS.
Tutorial ini akan membahas aturan @ penting berikut :
- Aturan @import: style css lain ke dalam style css saat ini.
- Aturan @charset menunjukkan set karakter yang digunakan css.
- Aturan @ font-face digunakan untuk mendeskripsikan bentuk font secara lengkap untuk digunakan dalam dokumen.
- Aturan !important menunjukkan bahwa aturan yang ditentukan pengguna harus didahulukan daripada aturan CSS lainnya.
CATATAN – Ada aturan @ lain yang akan kita bahas di bab-bab selanjutnya.
Aturan @import
Aturan @import memungkinkan Anda mengimpor style css dari file css lain. Kode ini harus diletakkan tepat di awal style sheet sebelum aturan apa pun, dan nilainya adalah sebuah URL.
Aturan ini dapat ditulis dengan salah satu dari 2 cara berikut :
<style type = "text/css">
<!--
@import "styleku.css";
atau
@import url("styleku.css");
.......aturan CSS lainnya.....
-->
</style>
Harap perhatikan, bahwa aturan @ important ini sangat kuat sekali dan akan menimpa aturan apapun yang Anda tuliskan dalam dokumen HTML Anda.
Aturan @charset
Jika Anda menulis dokumen Anda menggunakan kumpulan karakter selain ASCII atau ISO-8859-1, Anda mungkin ingin mengatur @charset di bagian atas style sheet Anda untuk menunjukkan kumpulan karakter apa yang digunakan dalam css Anda.
Aturan @charset harus ditulis tepat di awal style sheet bahkan tanpa spasi sebelumnya. Nilai disimpan dalam tanda kutip dan harus menjadi salah satu dari kumpulan karakter standar.
Sebagai contoh :
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......aturan CSS lainnya.....
-->
</style>
Aturan @ font-face
Aturan @ font-face digunakan untuk mendeskripsikan bentuk font secara lengkap untuk digunakan dalam dokumen.
@ font-face juga dapat digunakan untuk menentukan lokasi font untuk diunduh, meskipun ini mungkin mengalami batasan khusus penerapan.
Secara umum, @ font-face sangat rumit, dan penggunaannya tidak disarankan untuk siapa pun kecuali mereka yang ahli dalam metrik font.
Berikut ini contohnya:
Berikut ini contohnya:
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>
Aturan ! Important
Cascading Style Sheets cascade. Ini berarti bahwa style diterapkan dalam urutan yang sama seperti yang dibaca oleh browser.
Style pertama diterapkan dan kemudian dilanjutkan dengan style kedua dan seterusnya.
Aturan! Penting memberitahukan cara untuk membuat cascade CSS Anda.
Ini juga termasuk aturan yang harus selalu diterapkan.
Aturan yang property !Important akan selalu diterapkan lebih dulu, di mana pun aturan tersebut muncul di dokumen CSS.
Misalnya, di lembar style berikut, teks paragraf akan berwarna hitam, meskipun properti style pertama yang diterapkan berwarna merah:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>
Jadi, jika Anda ingin memastikan bahwa properti itu selalu diterapkan, Anda bisa menambahkan properti! Important ke tag.
Jadi, untuk membuat teks paragraf selalu berwarna merah, sebaiknya Anda menuliskannya sebagai berikut :
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>mbahwp.com</p>
</body>
</html>
Di sini Anda telah membuat p {color: # ff0000! Important; } wajib, sekarang aturan ini akan selalu berlaku meskipun Anda telah menetapkan aturan lain p {color: # 000000; }.
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda untuk mempelajari cara menggunakan properti @ rules di CSS.
