Berikut adalah yang utama ' pada peraturan ” dalam CSS:
Mari kita bincangkan secara ringkas setiap satu daripada tiga ' pada peraturan ” untuk memahami cara kerja mereka.
Apakah Peraturan @import dalam CSS?
' @import ” peraturan dalam CSS digunakan untuk mengimport helaian gaya CSS daripada helaian gaya lain. Jika terdapat helaian gaya CSS yang mengandungi sifat atau arahan penggayaan untuk elemen halaman web yang berbeza dan ia diperlukan untuk menambah penggayaan yang sama ke dalam fail halaman web yang lain, menulis hanya ' @import ” dengan nama helaian gaya itu (yang mengandungi sifat CSS) di sebelah kanan sama ada dalam kurungan bulat dengan “ url ” atau dalam koma terbalik boleh mengimport semua sifat daripada helaian gaya itu dan menggunakannya terus pada helaian gaya di mana “ @import ” peraturan telah ditambah.
Sintaks
Perlu ada nama fail helaian gaya berformat CSS yang ditulis selepas “ @import ”. Jadi, sintaks untuk menambah ' @import ” Peraturan dalam helaian gaya adalah seperti berikut:
@import 'stylesheetname.css' ;
Peraturan import juga boleh ditulis seperti berikut untuk tujuan yang sama kerana ia juga akan menjana hasil yang sama:
@import url ( stylesheetname.css ) ;Apakah Peraturan @media dalam CSS?
' @media ” Peraturan digunakan untuk menambah arahan media pada halaman web. Peraturan ini berfungsi mengikut syarat yang digunakan semasa menambahkan peraturan ini. Syarat ditambah sejurus selepas menambah “ @media ” di sebelah kanan dan kemudian di dalam peraturan dalam kurungan kerinting adalah sifat atau arahan yang perlu dilaksanakan apabila syarat itu benar.
Contoh: Menggunakan peraturan @media
Untuk memahami melalui contoh, kami boleh menambah beberapa kandungan pada halaman web:
< div kelas = 'kelas saya' >< h1 > Selamat datang ke Tutorial LinuxHint! < / h1 >
< / div >
Dalam coretan kod di atas, terdapat tajuk yang dibuat untuk memaparkan ini sebagai kandungan halaman web.
Mari kita ambil contoh menambah arahan media apabila dimensi atau lebar halaman bertambah atau berkurang. Pertama, tulis ' @media ” dan kemudian tambah syarat dan kemudian dalam kurungan kerinting tentukan sifat CSS yang harus dilaksanakan jika syarat dengan “ @media ” menjadi benar:
@media ( lebar maksimum : 700px ) {.kelas saya {
warna : hitam ;
latar belakang : hijau ;
}
}
@media ( lebar min : 700px ) dan ( lebar maksimum : 900px ) {
.kelas saya {
warna : hitam ;
latar belakang : kuning ;
}
}
@media ( lebar min : 900px ) {
.kelas saya {
warna : hitam ;
latar belakang : sian ;
}
}
Dalam kod di atas, terdapat telah disebutkan saiz lebar yang berbeza sebagai syarat untuk tiga peraturan media yang berbeza untuk dilaksanakan dengan sewajarnya. Sebagai contoh, mengikut kod di atas, apabila lebar minimum ialah 700px, warna latar belakang teks akan bertukar kepada kuning.
Berikut adalah hasil yang dijana melalui kod di atas. Menukar saiz skrin akan menukar warna latar belakang teks:
Apakah Peraturan @font-face dalam CSS?
Peraturan Fontface ialah kaedah mudah untuk menambah gaya fon terus ke halaman web. Fon dimuat turun terus dan digunakan pada teks melalui peraturan ini.
Contoh: Menggunakan Peraturan @font-face
Mari kita fahami kaedah untuk menambah ' @font-face ” peraturan melalui contoh mudah:
< div kelas = 'kelas saya' >< h1 > Selamat datang ke Tutorial LinuxHint! < / h1 >
< / div >
Coretan kod di atas mempunyai tajuk teks yang sama seperti yang diterangkan dalam bahagian sebelumnya dalam siaran ini.
Mari kita laksanakan ' @font-face 'peraturan untuk' ” menuju untuk menukar fonnya:
@font-face {font-family : 'DejaVu Sans' ;
src : url ( './fonts/DejaVuSans.ttf' ) format ( 'ttf' ) ;
berat fon : 500 ;
}
h1 {
font-family : 'DejaVu Sans' ;
berat fon : 500 ;
}
Dalam coretan kod di atas, terdapat nama keluarga fon yang diperlukan dan kemudian ' url ” pautan dari tempat fon sepatutnya dimuat turun dan kemudian berat fon. Apabila muka fon ditentukan melalui “ @font-face ” peraturan, nama muka fon boleh digunakan dengan mana-mana elemen, seperti dalam kod ini ia telah digunakan untuk “ h1 ” tajuk.
Menjalankan kod ini akan menukar fon mengikut arahan yang dinyatakan dalam “ @font-face ” peraturan. Berikut akan menjadi output coretan kod di atas:
Ini merumuskan tujuan ' @ ” Simbol dalam CSS.
Kesimpulan
' @ ” Simbol dalam CSS digunakan untuk menambah “ pada peraturan ” dalam CSS. Peraturan ini melaksanakan tugas yang sangat berguna semasa menggunakan CSS untuk menggayakan dokumen iaitu mereka mengimport keseluruhan helaian gaya daripada fail css lain melalui “ @import ' peraturan, gunakan sifat CSS pada media yang ditentukan mengikut syarat melalui ' @media peraturan ” dan muat turun terus fon untuk digunakan dalam halaman web melalui “ @font-face ” peraturan.