CSS im Detail-js-Tutorial-php.cn

CSS im Detail

WBOY

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

Original

915 Leute haben es durchsucht

CSS In Details

Wie HTML auf unseren Seiten gerendert wird

Browser lädt HTML
Konvertiert HTML in DOM
Verlinkte Ressourcen abrufen
Browser analysiert CSS (CSSOM)
DOM mit CSSOM kombinieren
UI ist bemalt (FCP) (First Contentful Paint)

HTML-Elementtypen

hauptsächlich

Blockebene
InLine

CSS-Selektoren:-

Typ-/Attributauswahl
Klassenauswahl
ID-Auswahl
Universal-Selektor (*)

CSS-Vererbung

Es tritt auf, wenn eine vererbte CSS-Eigenschaft (z. B. Farbe) nicht direkt für ein Element festgelegt ist. Die übergeordnete Kette wird durchlaufen, bis ein Wert für diese Eigenschaft gefunden wird.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Was ist CSS-Spezifität?

Der von Browsern verwendete Algorithmus, um zu bestimmen, welche CSS-Deklaration angewendet werden soll.
Jeder Selektor hat ein berechnetes Gewicht. Das spezifischste Gewicht gewinnt. id--class-type ID-Auswahl: 1 - 0 - 0 Klassenselektor: 0- 1 -0 Typauswahl: 0-0-1

HINWEIS: – Inline-CSS ist spezifischer und !import hat noch mehr Spezifität

CSS-Spezifitätsrechner

Em & Rem

EM:- relativ zur übergeordneten Schriftartseite

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

Nach dem Login kopieren

REM:- relativ zur Root-Schriftseite

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

Nach dem Login kopieren

%:- %-Berechnung

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

Nach dem Login kopieren

CSS-Kombinatoren

1.Absteigender Selektor (ul li a)

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

Nach dem Login kopieren

2.Untergeordnete Kombinatoren (direkter Nachkomme) (div.text > p)

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

Nach dem Login kopieren

3.Kombinator für benachbarte Geschwister (h1 + p)

Hinweis:-

Sowohl h1 als auch p sollten im selben übergeordneten Element liegen und p sollte unmittelbar nach dem h1-Tag stehen

4.Allgemeiner Geschwisterkombinator (p ~ Code)

Hinweis:-

Sie sollten kein unmittelbares Geschwisterkind wie ein Nachbargeschwister haben. Aber sie müssen Geschwister haben
Sie müssen denselben Elternteil haben

Block Element Modifier Architecture (BEM)

Entwurfsmethodik, die bei der Erstellung wiederverwendbarer Komponenten und beim Code-Sharing hilft

Andere Methoden

OOCSS
SMACSS
SUITCVSS
ATOMIC
BEM

Blockieren

Kopfzeile
Menü
Eingabe
Kontrollkästchen (eigenständige Bedeutung)

Element (Teil eines Blocks)

Menüpunkte
Elemente auflisten
Kopfzeilentitel

Modifikator

Deaktiviert
hervorgehoben
geprüft
Gelb

.block__element--modifier Syntax

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

Nach dem Login kopieren

Box-Modell:- (W.I.P)

Wir müssen weitere Informationen aus den Detailinformationen

hinzufügen

HINWEIS:-

Es wird einen separaten Artikel zum Rasterlayout vs. Flex-Layout geben.

Das obige ist der detaillierte Inhalt vonCSS im Detail. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!