Melangkah Lebih Jauh dengan Penggayaan

Hai, selamat datang kembali ke Belajar Semasa Kod Anda: HTML & CSS! Hari ini, kami menyelam lebih dalam ke dalam dunia penggayaan. Sehingga kini, kami telah menggayakan elemen secara langsung. Tetapi bagaimana jika anda mempunyai dua

elemen dan mahu setiap satu kelihatan berbeza? Masukkan pemilih CSS!

Pemilih Elemen

Anda sudah biasa dengan ini, tetapi mari kita imbas semula:

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

Set peraturan ini menyasarkan semua

elemen, menetapkan saiz fon, keluarga dan beratnya. Pemilih elemen bagus untuk pukulan luas, seperti menetapkan panduan gaya untuk keseluruhan halaman anda. Tetapi mari kita hadapi, bukan semua

tag sepatutnya kelihatan sama. Untuk penggayaan yang lebih khusus, kami perlu meningkatkan permainan kami!

Pemilih Kelas

Kelas untuk menyelamatkan! Mahu dua

tag untuk kelihatan berbeza? Tambah kelas:

<p class="big red">This text is BIG and red.</p>
<p class="small blue">This text is small and blue.</p>

Setiap

tag mempunyai dua kelas. Dalam CSS anda, sasarkan kelas ini dengan .:

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

Boom! Gaya digunakan. Anda mungkin bertanya, "Mengapa tidak menggabungkan gaya menjadi lebih sedikit kelas?" Soalan yang bagus! Saya suka memastikan kelas fleksibel. Anda tidak tahu bila anda mungkin mahu menggunakan semula yang kecil tanpa warna biru.

Pemilih Id

Untuk elemen unik, gunakan ID. Lihat ini:

<p id="name">My Name is Nolan!</p>

Gunakan ID dengan berhati-hati, sekali sahaja setiap halaman. Sasarkan mereka dalam CSS dengan #:

#name {
  text-decoration: underline;
}

Mudah, kan?

Gaya Bercanggah

Sekarang, bagaimana jika elemen mempunyai kedua-dua kelas dan ID? Seperti ini:

<p id="red" class="blue">Will I be red or blue?</p>

Ia akan menjadi merah! kenapa? Kerana ID lebih khusus daripada kelas. Berikut ialah contoh ringkas:

<p id="red" class="underline">I’m styled by three rulesets!</p>

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

Teks menjadi merah dan digariskan, dengan saiz fon 12px. ID mengatasi kelas, yang seterusnya mengatasi pemilih elemen. Lata gaya ini menjadikan halaman anda kelihatan digilap tanpa kod berulang.

Cabaran

Masa untuk meningkatkan halaman Perihal Saya anda! Inilah misi anda:

• Tetapkan gaya lalai untuk

  ,

  dan

  menggunakan pemilih elemen.

• Tambahkan slogan di bawah nama anda dengan

  tag dan gayakannya menggunakan ID.

• Jazz up teks lain menggunakan pemilih kelas.

Bermain-main dengan gaya yang bercanggah dan lihat peraturan mana yang menang. Bolehkah anda mengetahui sebabnya?

Terima kasih kerana membaca! Beritahu saya jika ada topik lain yang anda ingin saya terokai dalam siri ini dalam ulasan, atau beritahu saya bagaimana anda menikmati siri ini!

Atas ialah kandungan terperinci Melangkah Lebih Jauh dengan Penggayaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!