Langkau ke kandungan
WANCODE
EN

Warna, Fon & Jarak

15 minitPemulaHTML · CSS · JS

Dalam pelajaran ini

  • Tulis warna sebagai nama, kod hex, rgb() dan hsl()
  • Tetapkan font stack dengan fallback generik, serta saiz dan line height yang selesa
  • Guna padding untuk ruang di dalam element dan margin untuk ruang di luarnya

Idea utama

Kebanyakan perkara yang menjadikan halaman nampak "direka" ialah tiga perkara yang dibuat dengan baik: beberapa warna dengan kontras yang baik, fon yang mudah dibaca, dan jarak yang lapang.

Empat cara menulis warna

CSS
h1 { color: tomato; }                 /* named colour */
h1 { color: #ff6347; }                /* hex: red, green, blue as 00–ff */
h1 { color: rgb(255, 99, 71); }       /* rgb: each channel 0–255 */
h1 { color: hsl(9, 100%, 64%); }      /* hsl: hue, saturation, lightness */

Keempat-empat baris menghasilkan warna yang sama.

Named
Kira-kira 140 nama terbina seperti white, navy, tomato. Bagus untuk ujian pantas; pilihan terhad.
Hex
#RRGGBB: dua digit heksadesimal setiap satu untuk merah, hijau dan biru. #000000 hitam, #ffffff putih. Bentuk ringkas: #f63 bermaksud #ff6633. Inilah yang biasanya diberi oleh alat reka bentuk.
rgb()
Idea merah, hijau, biru yang sama dalam perpuluhan (0–255). Tambah nilai keempat untuk ketelusan: rgb(0, 0, 0, 0.5) ialah hitam separa lutsinar.
hsl()
Hue (0–360 mengelilingi roda warna: 0 merah, 120 hijau, 240 biru), saturation (0% kelabu hingga 100% terang), lightness (0% hitam hingga 100% putih). Paling mudah untuk menghasilkan versi lebih cerah atau gelap bagi satu warna.

color menetapkan warna teks. background-color menetapkan warna isian di belakang element. Anda selalu akan tetapkan kedua-duanya, dan ia mesti berkontras dengan baik.

Kontras bukan pilihan

Teks kelabu cerah di atas putih nampak bergaya tetapi menyakitkan mata untuk dibaca, terutamanya di telefon bawah cahaya matahari. Garis panduan kebolehcapaian WCAG mengesyorkan nisbah kontras sekurang-kurangnya 4.5:1 untuk teks biasa. DevTools pelayar menunjukkan nisbah ini apabila anda inspect sesuatu warna.

Fon

CSS
body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;      /* usually 16px */
  line-height: 1.6;     /* 1.6 × the font size */
}

h1 {
  font-size: 2.5rem;    /* 2.5 × the root size, usually 40px */
  font-weight: bold;
}
  • font-family ialah stack: pelayar menggunakan fon pertama yang dipasang. Sentiasa akhiri dengan keluarga generik (serif, sans-serif, monospace atau system-ui) sebagai jaring keselamatan.
  • Nama fon yang ada ruang perlukan tanda petik: "Times New Roman". Nama generik tidak pernah ada tanda petik.
  • rem adalah relatif kepada saiz fon akar halaman (16px melainkan pengguna menukarnya). Menggunakan rem menghormati pengguna yang menetapkan saiz teks lalai lebih besar dalam pelayar mereka.
  • line-height tanpa unit (seperti 1.6) berskala mengikut saiz teks. Sekitar 1.5–1.7 selesa untuk perenggan; tajuk boleh lebih rapat.

Jarak: padding berbanding margin

Padding ialah ruang di dalam element, antara kandungan dan sempadannya (border). Warna latar mengisinya. Margin ialah ruang di luar border, yang menolak element lain menjauh. Ia sentiasa lutsinar.

CSS
.card {
  padding: 24px;          /* all four sides */
  margin: 40px auto;      /* 40px top & bottom, auto left & right = centred */
}

.tag {
  padding: 4px 12px;      /* 4px top & bottom, 12px left & right */
}

Singkatan dibaca ikut arah jam dari atas: satu nilai = semua sisi; dua nilai = atas/bawah kemudian kiri/kanan; empat nilai = atas, kanan, bawah, kiri. Anda akan lihat dengan tepat bagaimana padding, border dan margin bertindan dalam pelajaran seterusnya, box model.

Dalam style.css:

1. Beri body background-color yang lembut (bukan putih), contohnya hsl(150, 40%, 88%).

2. Beri .card latar white supaya teks kekal mudah dibaca.

3. Beri h1 color teks, contohnya #1f6f43.

Guna sekurang-kurangnya dua format warna yang berbeza dalam peraturan anda (contohnya hsl untuk body, nama untuk card, hex untuk tajuk).

Semakan

  • Halaman ada warna latar
  • Kad ada latar cerah sendiri
  • Tajuk ada warna
  • Sekurang-kurangnya dua format warna digunakan

Uji kefahaman

Q1

Antara berikut, yang mana BUKAN warna yang sama dengan yang lain?

Q2

Kenapa akhiri font stack dengan keluarga generik seperti sans-serif?

Q3

Anda mahu lebih ruang antara teks butang dan tepinya, di dalam latarnya. Property mana?

Apa yang anda pelajari

  • Warna boleh ditulis dengan nama, hex (#1f6f43), rgb() atau hsl(); color untuk teks, background-color untuk isian. Pastikan kontras tinggi.
  • Font stack menyenaraikan fon mengikut keutamaan dan diakhiri dengan keluarga generik.
  • Guna rem untuk saiz dan line-height tanpa unit sekitar 1.5–1.7 untuk teks body.
  • Padding ialah ruang di dalam border; margin ialah ruang di luarnya.
Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 3