Penyelesaian masalah dan penyelesaian untuk gaya global menyebabkan kekeliruan warna latar belakang elemen

Artikel ini bertujuan untuk membantu pemaju menyelesaikan masalah ilusi visual di mana unsur -unsur laman web (seperti perenggan) selaras dengan warna latar belakang bar navigasi kerana penetapan gaya global yang tidak wajar, sehingga mewujudkan masalah ilusi visual yang unsur -unsur itu "terletak di dalam" bar navigasi. Kami akan menganalisis punca utama masalah dan menyediakan penyelesaian untuk mengubahsuai gaya CSS untuk memastikan bahawa elemen halaman diberikan seperti yang diharapkan.

Analisis masalah

Dalam pembangunan web, tetapan gaya global CSS mempunyai kesan ke atas semua elemen. Apabila menetapkan gaya dengan pemilih Wildcard*, mudah untuk secara tidak sengaja menimpa gaya lalai elemen, mengakibatkan hasil rendering yang tidak dijangka. Sebagai contoh, kod CSS berikut:

 * {
  saiz kotak: kotak sempadan;
  Margin: 0;
  Padding: 0;
  Latar Belakang: #30302F; / * Masalahnya ialah */
}

Kod ini akan menetapkan warna latar belakang semua elemen pada halaman ke #30302F. Jika warna latar belakang bar navigasi berlaku #30302F, maka unsur -unsur lain pada halaman (seperti perenggan

) akan kelihatan seperti mereka berada di dalam bar navigasi kerana warna latar belakang adalah sama.

Penyelesaian

Untuk menyelesaikan masalah ini, anda perlu mengubah suai gaya CSS untuk mengelakkan menetapkan warna latar di seluruh dunia. Berikut adalah beberapa penyelesaian yang boleh dilaksanakan:

1. Keluarkan Tetapan Warna Latar Belakang Global: Penyelesaian yang paling langsung adalah untuk mengeluarkan * {latar belakang: #30302F; } Barisan kod ini. Kemudian, gaya secara individu untuk unsur -unsur yang perlu menetapkan warna latar belakang.

2. Tepat menentukan warna latar belakang: Jika anda benar -benar perlu menetapkan warna latar belakang unsur -unsur tertentu dalam skop global, anda boleh menggunakan pemilih yang lebih tepat untuk mengelakkan mempengaruhi unsur -unsur yang tidak perlu menetapkan warna latar belakang. Sebagai contoh, tetapkan warna latar hanya untuk elemen badan dan div:

 badan, div {
  Latar Belakang: #30302F;
}

3. Gunakan warna latar belakang: telus;: Untuk unsur-unsur yang tidak memerlukan warna latar belakang, anda boleh secara jelas menetapkan warna latar belakang: telus; untuk mengatasi gaya global. Dalam contoh ini, anda boleh menetapkan latar belakang telus untuk elemen Div yang mengandungi perenggan dan perenggan itu sendiri:

 .P1,
.P1> p {
  latar belakang warna: telus;
}

Contoh kod

Anggapkan bahawa struktur HTML adalah seperti berikut:

 <header>
  
</header>

<div class="p1">
  <p> Selamat datang, rakan -rakan pelancong! Kepada Athra: Umur Raja </p>
</div>

Kod CSS yang sepadan diubahsuai seperti berikut:

 / * Diubah suai css */
html,
badan {
  Font-Family: 'Cinzel Decorative', Cursive;
  Teks-Align: Pusat;
  Latar Belakang: #543DAF;
}

badan {
  Padding-Bottom: 56px;
}

* {
  saiz kotak: kotak sempadan;
  Margin: 0;
  Padding: 0;
  /* Latar Belakang: #30302F; Keluarkan warna latar global*/
}

li,
A,
butang {
  Font-Family: "Cinzel Decorative";
  Font-Weight: 500;
  saiz font: 16px;
  Warna: #f4da65;
  Teks-penyerapan: Tiada;
}

header {
  Paparan: Flex;
  Justify-Content: Space-antara;
  Align-item: pusat;
  Padding: 10px 10%;
  Latar Belakang: #30302F; /* Tetapkan warna latar belakang secara berasingan untuk header*/
}

.P1,
.P1> p {
  latar belakang warna: telus; /* Tetapkan latar belakang telus*/
}

Perkara yang perlu diperhatikan

• Keutamaan CSS: Sangat penting untuk memahami peraturan keutamaan CSS. Gaya Inline> Pemilih ID> Pemilih Kelas> Pemilih Tag> Pemilih Wildcard.
• Kajian Kod: Apabila menulis kod CSS, semakan kod hendaklah dijalankan secara teratur untuk memastikan bahawa tetapan gaya memenuhi jangkaan dan mengelakkan pencemaran gaya global.
• Gunakan alat pemaju: Alat pemaju penyemak imbas boleh membantu anda menyemak gaya elemen dan dengan cepat mencari masalah.

Meringkaskan

Dengan mengelakkan menetapkan gaya yang tidak perlu dalam skop global dan dengan tepat mengawal warna latar belakang elemen, masalah pengecualian unsur yang disebabkan oleh gaya global CSS dapat diselesaikan dengan berkesan. Apabila menulis kod CSS, sentiasa perhatikan keutamaan dan skop gaya untuk memastikan unsur -unsur web dipaparkan seperti yang diharapkan.

Atas ialah kandungan terperinci Penyelesaian masalah dan penyelesaian untuk gaya global menyebabkan kekeliruan warna latar belakang elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!