Styling dengan CSS
Diperkenalkan| English | Makna |
|---|---|
| padding/ˈpædɪŋ/ | padding |
| border/ˈbɔːdə/ | border |
| CSS/ˌsiː es ˈes/ | CSS |
| selector/sɪˈlektə/ | pemilih |
| declaration/ˌdekləˈreɪʃn/ | deklarasi |
| the box model/ðə bɒks ˈmɒdl/ | model kotak |
| margin/ˈmɑːdʒɪn/ | margin |
| responsive design/rɪˈspɒnsɪv dɪˈzaɪn/ | desain responsif |
| media query/ˈmiːdiːə ˈkwɪərɪ/ | query media |
Kad 320-pixel masih melimpah keluar dari skrin 320-pixel
- Lebar kad yang dinyatakan tidak semestinya lebar keseluruhannya. Padding dan sempadan boleh menambah ruang di luar lebar kandungan.
- CSS menerapkan peraturan penyajian. Pemilih memilih elemen; pengisytiharan memberikan sifat dan nilai, seperti
color: navy.
Berikan satu alasan praktis untuk mempertahankan aturan presentasi yang dapat digunakan kembali dalam style sheet.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Contoh: “Style sheet bersama memungkinkan kami memperbarui kartu yang cocok secara konsisten tanpa mengedit setiap elemen HTML.”
Pertimbangkan setiap bahagian kotak
- Model kotak mempunyai kandungan, padding, sempadan dan margin. Padding dan sempadan berada di dalam kotak yang dilukis; margin memisahkannya daripada jiran.
- Dengan
content-box, lebar 320 px, padding 16 px di kedua-dua belah dan sempadan 2 px di kedua-dua belah memberikan 356 px sebelum margin. Denganborder-box, yang dinyatakan 320 px termasuk padding dan sempadan tersebut.
Susun area box-model dari konten ke luar.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Padding dan border mengelilingi konten; margin memisahkan kotak dari tetangganya.
Dengan content-box, lebar konten adalah 320 px, padding kiri/kanan masing-masing 16 px dan border kiri/kanan masing-masing 2 px. Berapa lebar sebelum margin, dalam piksel?
Difficulty 2/5 · 140 coins + a small bonus on first completion today
320 + 16 + 16 + 2 + 2 = 356 px.
Buat lebar lentur
- Reka bentuk responsif menyesuaikan kandungan dan susun atur mengikut ruang yang tersedia. Kad ini mengisi bekasnya sehingga 400 px, dengan padding dan sempadan disertakan.
- Gunakan peraturan pada elemen dengan
class="card". Kandungan panjang tanpa putus, margin induk, dan peraturan lain masih perlu diperiksa; satu pengisytiharan tidak dapat menjamin keseluruhan halaman muat.
.card {
box-sizing: border-box;
width: 100%;
max-width: 400px;
padding: 16px;
border: 2px solid currentColor;
overflow-wrap: anywhere;
}
Di dalam bekas 280 px, kad ini selebar 280 px termasuk padding dan sempadannya. Di dalam bekas 700 px, ia berhenti pada 400 px. Margin luarnya masih merupakan ruang tambahan.
Kartu dengan padding harus mengisi kontainer hingga 400 px termasuk border-nya. Aturan mana yang paling sesuai?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
border-box mencakup padding dan border dalam lebar yang ditentukan. Tata letak induk dan konten masih perlu diuji.
Ubah tata letak hanya jika perlu
- Media query menerapkan aturan di bawah suatu kondisi. Misalnya, ubah dua kolom menjadi satu ketika kolom terlalu sempit untuk dibaca.
- Pilih titik pemotongan (breakpoint) berdasarkan konten, lalu uji beberapa lebar dan ukuran teks yang lebih besar. Jangan berasumsi bahwa semua ponsel atau laptop memiliki lebar yang dapat digunakan sama.
Periksa aturan yang sebenarnya menang
- Kaskade mempertimbangkan faktor termasuk asal, tingkat kepentingan, dan lapisan sebelum spesifikitas penanda (selector). Untuk aturan yang setara, ID lebih spesifik daripada kelas; sebuah kelas lebih spesifik daripada penanda elemen.
- Ketika aturan yang setara memiliki spesifikitas yang sama, urutan sumber berikutnya dapat menjadi penentu. Gunakan alat pengembang browser untuk memeriksa aturan yang cocok, gaya yang dimuat, dan nilai-nilai yang dihitung.
!important berpartisipasi dalam kaskade; ia tidak merusak CSS. Hindari menggunakannya sebagai perbaikan yang tidak jelas. Periksakan penyebabnya terlebih dahulu: gaya yang hilang, deklarasi yang tidak valid, atau aturan yang menimpa semuanya dapat menjelaskan hasil yang tidak terduga.
Dua aturan normal dalam asal dan lapisan yang sama menggunakan selector yang identik .card dan menetapkan warna yang bertentangan. Tidak ada faktor penentu lain yang berbeda. Warna mana yang menang?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Spesifikitas yang sama tidak membuat urutan menjadi tidak relevan. Untuk aturan yang setara, urutan sumber yang kemudian akan menentukan.
!important adalah bagian dari aturan kaskade CSS, tetapi tidak boleh digunakan sebagai perbaikan tanpa penjelasan.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Pentingnya mempengaruhi prioritas. Periksa konflik dan gunakan secara sengaja daripada mengklaim bahwa hal itu merusak CSS.
Cocokkan observasi dengan pemeriksaan yang berguna selanjutnya.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Periksa penyebab sebenarnya alih-alih berasumsi bahwa semua kegagalan berasal dari spesifikitas.
Uji kotak dan pengalaman membaca
- Coba wadah sempit dan lebar, fokus keyboard, serta teks yang diperbesar. Pastikan teks mudah dibaca di kedua tema warna dan bahwa konten dapat berlipat.
- Jelaskan satu perbaikan overflow menggunakan perhitungan kotak dan satu konflik gaya menggunakan aturan yang benar-benar cocok.
Hitung seluruh kotak, preferensikan ukuran fleksibel, lalu periksa kaskade. Spesifikitas itu penting, tetapi bukan satu-satunya faktor penentu.
Sumber: W3C Kaskade CSS.
Sebuah kartu muat pada ukuran teks normal tetapi meluber saat teks diperbesar. Apa yang harus Anda lakukan?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Perilaku responsif mencakup perubahan batasan teks dan konten, bukan hanya satu tangkapan layar viewport.