Pada artikel kali ini kita akan belajar apa itu rule css
Yuk langsung saja ke tutorialnya
Apa Itu Rule?
Rule adalah sebuah aturan yang diterapkan pada css, selector ataupun properti.Rule ditandai dengan simbol @nama_rule.
Macam-Macam Rule
Berikut rule-rule css yang bisa kita gunakan
@charset
Digunakan untuk mengatur karakter yang digunakan didalam penulisan css
Contoh kodenya,
@charset "UTF-8";
body{color:black;background:white;}@font-face
Digunakan untuk membuat inisialisasi nama dan properti lainnya dari font
Contoh kodenya,
@font-face {
font-family: IniFontKu;
src: url(file_font.woff);
}
body{font-family:'IniFontKu'}@import
Digunakan untuk mengimport file css ataupun font
Contoh kodenya,
@import url("file_css_lain.css");
body{font-family:'IniFontKu'}@import "mobile.css" screen and (max-width: 768px);
/*keterangan: css hanya diimport ketika layar dibawah 769 piksel*/@keyframes
Digunakan untuk membuat inisialisasi animasi dan aturannya,
Contoh kodenya,
.animasi {
animation: mendarat 5s infinite;
}
@keyframes mendarat {
from {top: 0px;}
to {top: 200px;}
}@media
Digunakan untuk membuat aturan ketika dibuka di berbagai media atau perangkat
Contoh kodenya,
body {
max-width:100%;/* default */
}
@media screen and (max-width: 900px) {
body {
max-width:900px;/*Ketika halaman dibuka di layar dengan ukuran maksimal 900 piksel*/
}
}
@media screen and (max-width: 600px) {
body {
max-width:600px;/*Ketika halaman dibuka di layar dengan ukuran maksimal 600 piksel*/
}
}
@media screen and (max-width: 300px) {
body {
max-width:300px;/* ketika halaman dibuka dilayar dengan ukuran maksimal 300 piksel */
}
}Untuk lebih jelasnya nanti kita akan praktikan di tutorial-tutorial selanjut.
Tutorial kali ini hanya pengenalan saja ya sobat.
Jika kalian meresa artikel ini bermanfaat, silahkan klik tombol share.
Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.
Good luck! 👍
0 Komentar untuk " Tutorial belajar css # Apa Itu Rule Css?"
Silahkan berkomentar dengan baik dan bijak!