Warna dan Latar Belakang dalam CSS

Kuliah 3: Warna dan Latar Belakang dalam CSS

Dalam kuliah ini, kami akan meneroka cara menggunakan warna dan latar belakang untuk menjadikan tapak web anda menarik secara visual. Memahami cara menggunakan warna dan latar belakang dengan berkesan adalah kunci untuk mencipta reka bentuk web yang menarik dan menyenangkan dari segi estetika.

---

Menggunakan Warna dalam CSS

CSS membolehkan anda menentukan warna dalam beberapa cara, termasuk menggunakan nama warna, nilai heksadesimal, RGB, RGBA, HSL dan HSLA.

1. Nama Warna

CSS menyediakan pelbagai nama warna yang dipratentukan.

• Contoh:

  h1 {
    color: red;
  }

Ini akan menetapkan warna teks semua

unsur kepada merah.

2. Warna Heksadesimal

Kod Hex ialah gabungan enam digit nombor dan huruf yang ditakrifkan oleh gabungan nilai merah, hijau dan biru (RGB) mereka.

• Contoh:

  p {
    color: #3498db; /* A shade of blue */
  }

3. RGB dan RGBA

RGB bermaksud Merah, Hijau dan Biru. RGBA menambah saluran Alpha untuk kelegapan.

• Contoh (RGB):

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

• Contoh (RGBA):

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

4. HSL dan HSLA

HSL bermaksud Hue, Saturation dan Lightness. HSLA termasuk saluran Alpha.

• Contoh (HSL):

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

• Contoh (HSLA):

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

Menggunakan Latar Belakang

Latar belakang dalam CSS boleh meningkatkan reka bentuk dengan menambahkan warna, imej, kecerunan dan banyak lagi pada elemen.

1. Warna Latar Belakang

Anda boleh menetapkan warna latar belakang mana-mana elemen HTML menggunakan sifat warna latar belakang.

• Contoh:

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

2. Imej Latar Belakang

CSS membolehkan anda menggunakan imej sebagai latar belakang.

• Contoh:

  .banner {
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
  }

Ini akan menetapkan imej latar belakang pada elemen dengan sepanduk kelas. Imej akan meliputi seluruh kawasan dan berpusat.

3. Ulangan Latar Belakang

Kawal sama ada imej latar belakang berulang secara mendatar, menegak atau tidak sama sekali.

• Contoh:

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

4. Kedudukan Latar Belakang

Anda boleh mengawal kedudukan permulaan imej latar belakang.

• Contoh:

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

5. Kecerunan Latar Belakang

Kecerunan membolehkan anda mencipta peralihan yang lancar antara dua atau lebih warna.

• Contoh (Kecerunan Linear):

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

• Contoh (Kecerunan Jejari):

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

Contoh Praktikal:

Mari kita praktikkan konsep ini dengan contoh yang menggunakan warna, imej latar belakang dan kecerunan.

HTML:

<div class="content">
  <h1>Welcome to My Website</h1>
  <p>This is a simple example of using colors and backgrounds in CSS.</p>
</div>

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

Dalam contoh ini:

• Badan mempunyai warna latar belakang kelabu muda.

• teks berwarna biru tua.

• Div .content mempunyai imej latar belakang dengan tindanan kecerunan gelap, menjadikan teks putih menonjol.

• teks ialah lorek terang untuk melengkapkan latar belakang.

Amalkan Senaman

1. Buat halaman web yang mengandungi tajuk, perenggan dan pembahagian.
2. Percubaan dengan format warna yang berbeza (hex, RGB, HSL) untuk menggayakan teks dan latar belakang.
3. Gunakan imej latar belakang pada bahagian dan mainkan kedudukan, saiz dan sifat ulangannya.
4. Buat bahagian dengan latar belakang kecerunan linear atau jejari.

---

Seterusnya: Dalam kuliah seterusnya, kami akan membincangkan Tipografi dan Penggayaan Fon dalam CSS, di mana anda akan belajar cara memilih dan menyesuaikan fon untuk meningkatkan kebolehbacaan tapak web anda dan rayuan. Jumpa anda di sana!

---

Atas ialah kandungan terperinci Warna dan Latar Belakang dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!