Menguasai CSS: Dari Asas hingga Peringkat Pertengahan

Menguasai CSS: Dari Asas hingga Peringkat Pertengahan

CSS (Cascading Style Sheets) ialah teknologi asas untuk mencipta tapak web yang menarik secara visual. Ia membolehkan pembangun menggayakan elemen HTML, mengawal reka letak dan meningkatkan pengalaman pengguna. Artikel ini membimbing anda melalui asas CSS dan konsep perantaraan, memastikan anda boleh menggayakan halaman web dengan yakin.

---

1. Pengenalan kepada CSS

• Apakah itu CSS?
  
  CSS digunakan untuk menggayakan elemen HTML, mentakrifkan bagaimana ia sepatutnya kelihatan (cth., warna, fon, jarak). Ia memisahkan kandungan (HTML) daripada pembentangan (CSS).
  
  Contoh: Menggayakan

  elemen:
  

   <h1>
  
  </h1>

• Three Types of CSS

  • Inline CSS: Applied directly to an element using the style attribute. Example:

     <p>
  
  
  
  </p>

  • Internal CSS: Written within a

     <style>
       body {
         background-color: #f0f0f0;
       }
     </style>
  

  • CSS Luaran: Dipautkan melalui fail .css untuk ketekalan merentas berbilang halaman. Contoh:

     <link rel="stylesheet" href="styles.css">
  

---

2. Pemilih CSS

• Pemilih digunakan untuk menyasarkan elemen HTML untuk penggayaan.

  • Pemilih Universal (*): Menggayakan semua elemen.
  • Pemilih Jenis (elemen): Menyasarkan teg khusus seperti

    .

  • Pemilih Kelas (.classname): Menyasarkan elemen dengan kelas tertentu. Contoh:

     <style>
       .highlight { color: yellow; }
     </style>
     <p class="highlight">Highlighted text</p>
  

  • Pemilih ID (#id): Menyasarkan ID unik. Contoh:

     <style>
       #unique { color: green; }
     </style>
     <p>
  
  
  
  
  </p>

---

3. CSS Properties and Values

• Text and Font Styling

  • color: Sets text color.
  • font-size: Defines text size.
  • font-family: Specifies the font. Example:

     <style>
       p { color: navy; font-size: 16px; font-family: Arial; }
     </style>
  

• Penggayaan Latar Belakang

  • warna latar belakang: Menetapkan warna latar belakang.
  • imej latar belakang: Menambah imej latar belakang. Contoh:

     <style>
       body { background-color: lightblue; background-image: url('background.jpg'); }
     </style>
  

---

4. Model Kotak CSS

Model kotak menerangkan cara elemen distrukturkan:

• Kandungan: Kandungan sebenar di dalam elemen.
• Padding: Ruang antara kandungan dan sempadan.
• Sempadan: Membungkus pelapik dan kandungan.

• Margin: Ruang antara elemen dan unsur jiran.
  
  Contoh:
  

   <style>
     div {
       width: 200px;
       padding: 10px;
       border: 2px solid black;
       margin: 20px;
     }
   </style>
  

---

5. Kedudukan dan Reka Letak CSS

• Kedudukan

  • statik: Aliran lalai.
  • relatif: Diposisikan relatif kepada kedudukan normalnya.
  • mutlak: Kedudukan relatif kepada nenek moyang kedudukan terdekat.
  • tetap: Kekal di tempat semasa menatal. Contoh:

     <style>
       div { position: absolute; top: 50px; left: 100px; }
     </style>
  

• Flexbox
  
  Flexbox memudahkan mencipta reka letak yang fleksibel dan responsif.
  
  Contoh:
  

   <style>
     .container {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
     }
   </style>
  

• Grid
  
  Grid CSS menyediakan sistem susun atur yang berkuasa.
  
  Contoh:
  

   <h1>
  
  </h1>

• Three Types of CSS

  • Inline CSS: Applied directly to an element using the style attribute. Example:

     <p>
  
  
  
  </p>

  • Internal CSS: Written within a

     <style>
       body {
         background-color: #f0f0f0;
       }
     </style>
  

---

6. Kelas Pseudo CSS dan elemen Pseudo

• Kelas Pseudo: Elemen gaya berdasarkan keadaannya.
  
  Contoh: Kesan tuding
  

     <link rel="stylesheet" href="styles.css">
  

• Unsur Pseudo: Gayakan bahagian tertentu elemen.
  
  Contoh: Menambah kandungan sebelum elemen:
  

     <style>
       .highlight { color: yellow; }
     </style>
     <p class="highlight">Highlighted text</p>
  

---

7. Reka Bentuk Responsif dengan Pertanyaan Media

Pertanyaan media melaraskan gaya berdasarkan saiz skrin.

Contoh:

   <style>
     #unique { color: green; }
   </style>
   <p>









</p><hr>

<h4>
  
  
  3. <strong>CSS Properties and Values</strong>
</h4>

• Text and Font Styling

  • color: Sets text color.
  • font-size: Defines text size.
  • font-family: Specifies the font. Example:

     <style>
       p { color: navy; font-size: 16px; font-family: Arial; }
     </style>
  

  ---

  8. Teknik CSS Perantaraan

  • Peralihan dan Animasi
    
    Contoh:
    

       <style>
         body { background-color: lightblue; background-image: url('background.jpg'); }
       </style>
    

  • Pembolehubah CSS
    
    Contoh:
    

     <style>
       div {
         width: 200px;
         padding: 10px;
         border: 2px solid black;
         margin: 20px;
       }
     </style>
    

  ---

  9. Kesimpulan

  CSS mengubah HTML biasa menjadi halaman web yang cantik dan berfungsi. Dengan memahami asas dan maju ke konsep pertengahan, anda memperoleh kemahiran untuk mencipta reka bentuk responsif dan menarik secara visual. Berlatih menggayakan projek mudah seperti portfolio peribadi untuk menguasai teknik ini.

Atas ialah kandungan terperinci Menguasai CSS: Dari Asas hingga Peringkat Pertengahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!