cari

Rumah >hujung hadapan web >tutorial js >CSS Dalam Butiran

CSS Dalam Butiran

WBOY
WBOYasal
2024-08-21 06:11:06928semak imbas

CSS In Details

Cara HTML dipaparkan dalam halaman kami

  1. Pelayar Memuatkan HTML
  2. Menukar HTML kepada DOM
  3. Mengumpul Sumber Berpaut
  4. Pelayar menghuraikan CSS (CSSOM)
  5. Gabungkan DOM dengan CSSOM
  6. UI dilukis (FCP) (Cat Berisi Pertama)

Jenis HTML Elemen

terutamanya

  1. Tahap Sekatan
  2. Dalam Talian

Pemilih CSS:-

  1. Pemilih jenis/Atribut
  2. Pemilih kelas
  3. Pemilih Id
  4. Pemilih Universal (*)

Warisan CSS

Ia berlaku apabila sifat CSS warisan (iaitu warna) tidak ditetapkan terus pada elemen, rantai induk dilalui sehingga nilai untuk sifat itu ditemui.

<div class="body">
    <p>This is a Paragraph, but it will have the blue color due to inheritance</p>
</div>
<style>
.body{
    color: blue;
}
</style>

kes 2

<div class="body">
    <p>This is a Paragraph, but it will have the red color due to direct Specification</p>
</div>
<style>
p {
color: red;
}
.body{
    color: blue;
}
</style>

kes 3

<div class="body">
    <p>This is a Paragraph, but it will have the blue color due to strong Specification</p>
</div>
<style>
p {
color: red;
}
.body p{
    color: blue;
}
</style>

Apakah itu Kekhususan CSS

  1. algoritma yang digunakan oleh penyemak imbas untuk menentukan pengisytiharan css yang harus digunakan.
  2. Setiap pemilih mempunyai berat yang dikira. Berat paling spesifik menang. id--class -type Pemilih Id: 1 - 0 - 0 pemilih kelas: 0- 1 -0 pemilih taip: 0-0-1

NOTA:- Inline Css adalah lebih kekhususan dan !import mempunyai lebih kekhususan

Kalkulator Kekhususan CSS

Em & Rem

EM:- relatif kepada bahagian fon induknya

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 2em; //16px * 2 = 32px;
}

p {
font-size: 2em; // 32px * 2 = 64px
}
</style>

REM:- relatif kepada bahagian fon Root

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 2rem; //16px * 2 = 32px;
}

p {
font-size: 2rem; // 16px * 2 = 32px
}
</style>

%:- % pengiraan

<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 120%; //1.2*16 = 19.2px;
}

p {
font-size: 120%; // 1.2 * 19.2 = 23.04px
}
</style>

Penggabung CSS

1.Pemilih Keturunan (ul li a)

<ul>
<li><a href='#'></a></li>
</ul>

2.Penggabung Anak (Keturunan langsung) (div.text > p)

<div>
<div class="text">
   <P>Here the CSS will apply<P>
</div>
<div>
  <p>No CSS will apply</p>
</div>
</div>

3.Penggabung Adik Beradik Bersebelahan (h1 + p)

Nota:-

  1. Kedua-dua h1 dan p hendaklah berada dalam induk yang sama dan p hendaklah sejurus selepas tag h1

4.Penggabung Adik Beradik Am (p ~ kod)

Nota:-

  1. mereka tidak sepatutnya mempunyai adik beradik terdekat seperti adik beradik yang bersebelahan. Tapi mesti ada adik beradik
  2. Mereka mesti mempunyai ibu bapa yang sama

Arkitek Pengubahsuai Elemen Blok(BEM)

  1. Metodologi Reka Bentuk yang membantu mencipta komponen boleh guna semula dan perkongsian kod

Metodologi Lain

  1. OOCSS
  2. SMACSS
  3. SUITCVSS
  4. ATOM
  5. BEM

Sekat

  1. pengepala
  2. Menu
  3. masukan
  4. kotak pilihan (bermaksud berdiri sendiri)

Elemen (sebahagian daripada blok)

  1. Item menu
  2. Senaraikan Item
  3. Tajuk pengepala

Pengubah suai

  1. Dilumpuhkan
  2. diserlahkan
  3. disemak
  4. Kuning

.block__element--modifier Sintaks

<form class=form>
   <input class='form__input'/>
   <input class="form__input form__input--disabled"/>
   <button class="form__button form__button--large"/>
</form>

Model Kotak:- (W.I.P)

Kami perlu menambah lebih banyak maklumat daripada maklumat Terperinci

NOTA:-

Akan ada artikel berasingan mengenai reka letak grid lwn susun atur Flex.

Atas ialah kandungan terperinci CSS Dalam Butiran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html for checkbox class Attribute Property dom flex input ul li ui
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：Hari / Hari Kod: Fokus DiperbaharuiArtikel seterusnya：Hari / Hari Kod: Fokus Diperbaharui

Artikel berkaitan

Lihat lagi