CSS: pemilih dan sifat

Kuliah 2: Pemilih dan Sifat

Dalam kuliah ini, kita akan menyelami blok binaan CSS: pemilih dan sifat. Ini ialah konsep penting yang membolehkan anda menyasarkan elemen tertentu pada halaman web anda dan menggayakannya dengan berkesan.

---

Apakah Pemilih CSS?

Pemilih CSS ialah corak yang digunakan untuk memilih elemen HTML yang anda mahu gayakan. Jenis pemilih yang berbeza membolehkan anda menggunakan gaya pada pelbagai elemen berdasarkan teg, kelas, ID, atribut dan banyak lagi.

Jenis Pemilih

1. Pemilih Elemen (Jenis):

   • Mensasarkan semua elemen jenis tertentu.
   • Contoh:

    p {
      color: green;
    }
   

   Ini akan menukar warna semua e388a4556c0f65e1904146cc1a846bee unsur kepada hijau.

2. Pemilih Kelas:

   • Mensasarkan elemen dengan atribut kelas tertentu.
   • Contoh:

    .highlight {
      background-color: yellow;
    }
   

   Dalam HTML anda, mana-mana elemen dengan class="highlight" akan mempunyai latar belakang kuning.
   

    <p class="highlight">This is highlighted text.</p>
   

3. Pemilih ID:

   • Mensasarkan satu elemen dengan atribut ID unik.
   • Contoh:

    #header {
      font-size: 24px;
    }
   

   Hanya elemen dengan id="header" akan mempunyai saiz fon 24px.
   

    <div id="header">Welcome to My Website</div>
   

4. Pemilih Kumpulan:

   • Menggunakan gaya yang sama pada berbilang pemilih.
   • Contoh:

    h1, h2, h3 {
      color: blue;
    }
   

   Peraturan ini akan menjadikan semua 4a249f0d628e2318394fd9b75b4636b1, c1a436a314ed609750bd7c7d319db4da dan 684271ed9684bde649abda8831d4d355 unsur biru.

5. Pemilih Keturunan:

   • Mensasarkan elemen yang berada di dalam (keturunan) elemen lain.
   • Contoh:

    div p {
      font-style: italic;
    }
   

   Ini akan menjadikan semua e388a4556c0f65e1904146cc1a846bee elemen di dalam dc6dce4a544fdca2df29d5ac0ea9906b dicondongkan.
   

    <div>
      <p>This text is italicized because it's inside a div.</p>
    </div>
   

Memahami Sifat CSS

Sifat CSS mentakrifkan aspek elemen terpilih yang ingin anda gayakan. Setiap sifat diikuti dengan nilai yang menentukan hasil yang diingini.

Sifat Contoh:

• Warna:

  • Menetapkan warna teks.
  • Contoh:

  h1 {
    color: red;
  }
  

• Warna Latar Belakang:

  • Menetapkan warna latar belakang.
  • Contoh:

  body {
    background-color: #f0f0f0;
  }
  

• Saiz Fon:

  • Menetapkan saiz teks.
  • Contoh:

  p {
    font-size: 16px;
  }
  

• Margin:

  • Menetapkan ruang di luar elemen.
  • Contoh:

  .box {
    margin: 20px;
  }
  

• Padding:

  • Menetapkan ruang di dalam elemen, antara kandungan dan sempadan.
  • Contoh:

  .content {
    padding: 10px;
  }
  

Contoh Praktikal:

Mari gabungkan apa yang telah kita pelajari dengan contoh mudah.

HTML:

8ca2b4eb17525146e680c309e9dfa6a5
  4a249f0d628e2318394fd9b75b4636b1Welcome to CSS Basics473f0a7621bec819994bb5020d29372a
  03c914392195facb4bb03ef129401e65This is an introduction to CSS selectors and properties.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeSelectors help you target elements, and properties allow you to style them.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

CSS:

/* ID Selector */
#container {
  border: 2px solid black;
  padding: 10px;
}

/* Element Selector */
h1 {
  color: purple;
}

/* Class Selector */
.intro {
  background-color: lightblue;
  font-size: 18px;
}

/* Group Selector */
h1, p {
  font-family: Arial, sans-serif;
}

/* Descendant Selector */
#container p {
  margin-bottom: 15px;
}

Dalam contoh ini:

• Div #container digayakan dengan jidar hitam dan pelapik.
• 4a249f0d628e2318394fd9b75b4636b1 tajuk berwarna ungu.
• Perenggan dengan intro kelas mempunyai latar belakang biru muda dan saiz fon yang lebih besar.
• Kedua-dua 4a249f0d628e2318394fd9b75b4636b1 dan e388a4556c0f65e1904146cc1a846bee elemen menggunakan fon Arial.
• Semua perenggan di dalam #bekas mempunyai jidar bawah untuk jarak.

Amalkan Senaman

1. Buat fail HTML ringkas dengan tajuk, perenggan dan pembahagian.
2. Percubaan dengan pemilih dan sifat yang berbeza untuk menggayakan kandungan anda.
3. Cuba gunakan pemilih keturunan untuk menggayakan elemen bersarang.
4. Bermain dengan pemilih kumpulan untuk menggunakan gaya yang sama pada berbilang elemen.

---

Seterusnya: Dalam kuliah seterusnya, kami akan meneroka Model Kotak CSS dan mempelajari cara jidar, sempadan, pelapik dan kandungan digabungkan untuk menentukan reka letak anda elemen web. Jumpa anda di sana!

Ikuti saya di -

LinkedIn- Ridoy Hasan

-

Atas ialah kandungan terperinci CSS: pemilih dan sifat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!