CSS: pemilih dan sifat

王林
Lepaskan: 2024-08-22 06:30:32
asal
833 orang telah melayarinya

CSS: selectors and properties

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

    Ini akan menukar warna semua

    unsur kepada hijau.

  2. Pemilih Kelas:

    • Mensasarkan elemen dengan atribut kelas tertentu.
    • Contoh:
     .highlight {
       background-color: yellow;
     }
    
    Salin selepas log masuk

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

     <p class="highlight">This is highlighted text.</p>
    
    Salin selepas log masuk
  3. Pemilih ID:

    • Mensasarkan satu elemen dengan atribut ID unik.
    • Contoh:
     #header {
       font-size: 24px;
     }
    
    Salin selepas log masuk

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

     <div id="header">Welcome to My Website</div>
    
    Salin selepas log masuk
  4. Pemilih Kumpulan:

    • Menggunakan gaya yang sama pada berbilang pemilih.
    • Contoh:
     h1, h2, h3 {
       color: blue;
     }
    
    Salin selepas log masuk

    Peraturan ini akan menjadikan semua

    ,

    dan

    unsur biru.

  5. Pemilih Keturunan:

    • Mensasarkan elemen yang berada di dalam (keturunan) elemen lain.
    • Contoh:
     div p {
       font-style: italic;
     }
    
    Salin selepas log masuk

    Ini akan menjadikan semua

    elemen di dalam

    dicondongkan.

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

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;
    }
    
    Salin selepas log masuk
  • Warna Latar Belakang:

    • Menetapkan warna latar belakang.
    • Contoh:
    body {
      background-color: #f0f0f0;
    }
    
    Salin selepas log masuk
  • Saiz Fon:

    • Menetapkan saiz teks.
    • Contoh:
    p {
      font-size: 16px;
    }
    
    Salin selepas log masuk
  • Margin:

    • Menetapkan ruang di luar elemen.
    • Contoh:
    .box {
      margin: 20px;
    }
    
    Salin selepas log masuk
  • Padding:

    • Menetapkan ruang di dalam elemen, antara kandungan dan sempadan.
    • Contoh:
    .content {
      padding: 10px;
    }
    
    Salin selepas log masuk

Contoh Praktikal:

Mari gabungkan apa yang telah kita pelajari dengan contoh mudah.

HTML:

<div id="container">
  <h1>Welcome to CSS Basics</h1>
  <p class="intro">This is an introduction to CSS selectors and properties.</p>
  <p>Selectors help you target elements, and properties allow you to style them.</p>
</div>
Salin selepas log masuk

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

Dalam contoh ini:

  • Div #container digayakan dengan jidar hitam dan pelapik.
  • tajuk berwarna ungu.

  • Perenggan dengan intro kelas mempunyai latar belakang biru muda dan saiz fon yang lebih besar.
  • Kedua-dua

    dan

    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!

sumber:dev.to
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!