Menguasai CSS: Dari Asas hingga Peringkat Pertengahan-tutorial css-php.cn

Menguasai CSS: Dari Asas hingga Peringkat Pertengahan

Linda Hamilton

Lepaskan： 2024-12-13 03:03:16

asal

157 orang telah melayarinya

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:

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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>
```
Salin selepas log masuk
Salin selepas log masuk
- Pemilih ID (#id): Menyasarkan ID unik. Contoh:
```
   <style>
     #unique { color: green; }
   </style>
   <p>
```
Salin selepas log masuk

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>
```
Salin selepas log masuk
Salin selepas log masuk
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>
```
Salin selepas log masuk
Salin selepas log masuk

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>

Salin selepas log masuk

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>
```
Salin selepas log masuk

Flexbox

Flexbox memudahkan mencipta reka letak yang fleksibel dan responsif.

Contoh:

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

Salin selepas log masuk

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:

Salin selepas log masuk

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

Salin selepas log masuk

6. Kelas Pseudo CSS dan elemen Pseudo

Kelas Pseudo: Elemen gaya berdasarkan keadaannya.

Contoh: Kesan tuding
```
   <link rel="stylesheet" href="styles.css">
```
Salin selepas log masuk
Salin selepas log masuk
Unsur Pseudo: Gayakan bahagian tertentu elemen.

Contoh: Menambah kandungan sebelum elemen:
```
   <style>
     .highlight { color: yellow; }
   </style>
   <p class="highlight">Highlighted text</p>
```
Salin selepas log masuk
Salin selepas log masuk

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

Salin selepas log masuk

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>
```
Salin selepas log masuk
Salin selepas log masuk
8. Teknik CSS Perantaraan
- Peralihan dan Animasi
  
  Contoh:
```
   <style>
     body { background-color: lightblue; background-image: url('background.jpg'); }
   </style>
```
  Salin selepas log masuk
  Salin selepas log masuk
- Pembolehubah CSS
  
  Contoh:
```
 <style>
   div {
     width: 200px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }
 </style>
```
  Salin selepas log masuk
  Salin selepas log masuk
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!