Gaya visual dan susun atur laman web yang ditentukan oleh CSS atau Cascading Style Sheets. Ini adalah dokumen yang membentuk markup HTML laman web, memberikan pelayar web dengan arahan tentang cara memaparkan halaman yang dihasilkan dari markup itu. CSS mengendalikan susun atur halaman, serta warna, imej latar belakang, tipografi dan banyak lagi.
Jika anda melihat fail CSS, anda akan melihat bahawa seperti mana-mana bahasa markup atau pengekodan, fail-fail ini mempunyai sintaks khusus kepada mereka. Setiap helaian gaya terdiri daripada beberapa peraturan CSS. Peraturan-peraturan ini, apabila diambil secara penuh, adalah apa gaya laman web ini.
Bahagian-bahagian Peraturan CSS
Peraturan CSS terdiri daripada dua bahagian berbeza - pemilih dan perisytiharan. Pemilih menentukan apa yang digayakan di halaman dan perisytiharan adalah bagaimana ia perlu digayakan. Sebagai contoh:
p {
warna: # 000;
}
Ini adalah peraturan CSS. Bahagian pemilih adalah "p", yang merupakan pemilih unsur untuk "perenggan". Oleh itu, pilih SEMUA perenggan di laman web dan berikan mereka dengan gaya ini (melainkan jika terdapat perenggan yang disasarkan oleh gaya yang lebih spesifik di tempat lain dalam dokumen CSS anda).
Bahagian peraturan yang mengatakan "warna: # 000;" adalah apa yang dikenali sebagai perisytiharan. Perisytiharan itu terdiri daripada dua keping - harta dan nilai.
Properti ini adalah "warna" sekeping perisytiharan ini. Ia menentukan aspek pemilih yang akan diubah secara visual.
Nilai adalah apa yang telah diubah kepada harta CSS yang dipilih. Dalam contoh kami, kami menggunakan nilai hex # 000, yang merupakan kod pendek CSS untuk "hitam".
Oleh itu, menggunakan peraturan CSS ini, halaman kami akan mempunyai perenggan yang dipaparkan dalam warna font hitam.
Asas Harta CSS
Apabila anda menulis sifat CSS, anda tidak boleh membuatnya seperti yang anda lihat patut. Sebagai contoh, "warna" adalah sifat CSS sebenar, jadi anda boleh menggunakannya. Harta ini adalah apa yang menentukan warna teks sesuatu unsur. Jika anda cuba menggunakan "warna teks" atau "warna font" sebagai sifat CSS, ini akan gagal kerana ia bukan bahagian sebenar dalam bahasa CSS.
Contoh lain ialah "latar belakang imej" harta. Harta ini menetapkan imej yang boleh digunakan untuk latar belakang, seperti ini:
.logo {
background-image: url (/images/company-logo.png);
}
Jika anda cuba menggunakan "latar belakang gambar" atau "latar belakang grafik" sebagai harta, mereka akan gagal kerana, sekali lagi, ini bukan sifat CSS sebenar.
Sesetengah Hartanah CSS
Terdapat beberapa sifat CSS yang boleh anda gunakan untuk gaya laman web. Beberapa contoh adalah:
- Sempadan (termasuk gaya sempadan, warna sempadan, dan lebar sempadan)
- Padding (termasuk padding-atas, padding-kanan, padding-bottom, dan padding-left)
- Margin (termasuk margin-margin, margin-right, margin-bottom, dan margin-left)
- Keluarga Font
- Saiz huruf
- Warna latar belakang
- Lebar
- Ketinggian
Ciri-ciri CSS ini adalah yang terbaik untuk digunakan sebagai contoh, kerana mereka semua sangat mudah dan, walaupun anda tidak tahu CSS, anda mungkin boleh meneka apa yang mereka lakukan berdasarkan nama mereka.
Terdapat sifat CSS lain yang akan anda hadapi juga yang mungkin tidak begitu jelas bagaimana ia berfungsi berdasarkan nama mereka:
- Terapung
- Jelas
- Limpahan
- Transformasi teks
- Z-index
Apabila anda semakin dalam reka bentuk web, anda akan menemui (dan menggunakan) semua sifat-sifat ini dan banyak lagi!
Hartanah Perlu Nilai
Setiap kali anda menggunakan harta, anda mesti memberikannya nilai - dan sifat tertentu hanya boleh menerima nilai tertentu.
Dalam contoh pertama kami "warna" harta, kita perlu menggunakan nilai warna. Ini boleh menjadi nilai hex , nilai RGBA, atau kata kunci warna . Walau bagaimanapun, mana-mana nilai akan berfungsi, jika anda menggunakan perkataan "suram" dengan harta ini, ia tidak akan melakukan apa-apa kerana, sebagai deskriptif seperti perkataan itu, ia bukan nilai yang diiktiraf dalam CSS.
Contoh kedua kami "imej latar belakang" memerlukan laluan imej yang digunakan untuk mengambil imej sebenar dari fail laman web anda. Inilah nilai / sintaks yang diperlukan.
Semua sifat CSS mempunyai nilai yang mereka harapkan. Sebagai contoh:
- Warna sempadan mengharapkan nilai warna
- Ukuran sempadan mengharapkan nilai ukuran, seperti piksel atau peratusan
- Gaya sempadan menjangka salah satu gaya simpanan yang digunakan untuk harta ini, seperti "pepejal"
Jika anda melewati senarai sifat-sifat CSS, anda akan mendapati bahawa setiap daripada mereka mempunyai nilai khusus yang akan mereka gunakan untuk mencipta gaya yang mereka inginkan.
Diedit oleh Jeremy Girard