Rumah > Artikel > hujung hadapan web > CSS Dalam Butiran

CSS Dalam Butiran

WBOYasal: 2024-08-21 06:11:06899semak imbas

CSS In Details

Cara HTML dipaparkan dalam halaman kami

Pelayar Memuatkan HTML
Menukar HTML kepada DOM
Mengumpul Sumber Berpaut
Pelayar menghuraikan CSS (CSSOM)
Gabungkan DOM dengan CSSOM
UI dilukis (FCP) (Cat Berisi Pertama)

Jenis HTML Elemen

terutamanya

Tahap Sekatan
Dalam Talian

Pemilih CSS:-

Pemilih jenis/Atribut
Pemilih kelas
Pemilih Id
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

algoritma yang digunakan oleh penyemak imbas untuk menentukan pengisytiharan css yang harus digunakan.
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:-

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:-

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

Arkitek Pengubahsuai Elemen Blok(BEM)

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

Metodologi Lain

OOCSS
SMACSS
SUITCVSS
ATOM
BEM

Sekat

pengepala
Menu
masukan
kotak pilihan (bermaksud berdiri sendiri)

Elemen (sebahagian daripada blok)

Item menu
Senaraikan Item
Tajuk pengepala

Pengubah suai

Dilumpuhkan
diserlahkan
disemak
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