CSS Dalam Butiran-tutorial js-php.cn

CSS Dalam Butiran

WBOY

Lepaskan： 2024-08-21 06:11:06

asal

915 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

Penggabung CSS

1.Pemilih Keturunan (ul li a)

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!