cari

Rumah >hujung hadapan web >tutorial css >Menguasai CSS: Dari Asas hingga Peringkat Pertengahan

Menguasai CSS: Dari Asas hingga Peringkat Pertengahan

Linda Hamilton
Linda Hamiltonasal
2024-12-13 03:03:16157semak imbas

Mastering CSS: From Basics to Intermediate Level

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>

</li>
<li>
<p><strong>Three Types of CSS</strong>  </p>

<ul>
<li>
<strong>Inline CSS</strong>: Applied directly to an element using the style attribute.
Example:
</li>
</ul>

<pre class="brush:php;toolbar:false">   <p>



<ul>
<li>
<strong>Internal CSS</strong>: Written within a <style> tag in the <head> section of the HTML file.
Example:


   <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>

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>

</li>
<li>
<p><strong>Three Types of CSS</strong>  </p>

<ul>
<li>
<strong>Inline CSS</strong>: Applied directly to an element using the style attribute.
Example:
</li>
</ul>

<pre class="brush:php;toolbar:false">   <p>



<ul>
<li>
<strong>Internal CSS</strong>: Written within a <style> tag in the <head> section of the HTML file.
Example:

   <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>














  
  
  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>

    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!

css html Static for class default this position margin padding border background
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimanakah Saya Boleh Membuat Textarea Secara Automatik Saiz semula kepada Kandungannya dan Menyembunyikan Bar Skrol?Artikel seterusnya：Bagaimanakah Saya Boleh Membuat Textarea Secara Automatik Saiz semula kepada Kandungannya dan Menyembunyikan Bar Skrol?

Artikel berkaitan

Lihat lagi