CSS In Details-JS Tutorial-php.cn

CSS In Details

WBOY

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

Original

875 people have browsed it

CSS In Details

How HTML renders in our pages

Browser Loads HTML
Converts HTML into DOM
Feching Linked Resources
Browser parses CSS (CSSOM)
Combine DOM with CSSOM
UI is painted (FCP) (First Contentful Paint)

HTML types of Element

primarily

Block Level
InLine

CSS Selectors:-

type/Attribute Selector
Class selector
Id Selector
Universal Selector (*)

CSS Inheritance

It occurs when an inheritance CSS property (i.e color) is not set directly on an element, the parent chain is traversed until a value for that property is found.

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

Copy after login

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

Copy after login

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

Copy after login

What is CSS Specificity

the algorithm used by browsers to determine which css declaration should be applied.
Each selector has a calculated weight. The Most specific weight wins. id--class -type Id Selector: 1 - 0 - 0 class selector: 0- 1 -0 type selector: 0-0-1

NOTE:- Inline Css are more specificity and !import has even more specificity

Css Specificity Calculator

Em & Rem

EM:- relative to its parent font-side

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

Copy after login

REM:- relative to Root font-side

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

Copy after login

%:- % calculation

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

Copy after login

CSS Combinators

1.Descendent Selector (ul li a)

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

Copy after login

2.Child Combinators (direct Descendant) (div.text > p)

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

Copy after login

3.Adjacent Sibling Combinator (h1 + p)

Note:-

Both h1 and p should be in the same parent and p should be immediately after the h1 tag

4.General Sibling Combinator (p ~ code)

Note:-

they should not have an immediate sibling like an adjacent sibling. But they must have siblings
They must have the same parent

Block Element Modifier Architechure(BEM)

Design Methodology that helps create reusable components and code-sharing

Other Methodologies

OOCSS
SMACSS
SUITCVSS
ATOMIC
BEM

Block

header
Menu
input
checkbox (stand alone meaning)

Element (part of block)

Menu items
List Items
Header title

Modifier

Disabled
highlighted
checked
Yellow

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

Copy after login

Box Model:- (W.I.P)

We need to add more information from the Detail information

NOTE:-

There will be a separate article on the grid layout vs Flex layout.

The above is the detailed content of CSS In Details. For more information, please follow other related articles on the PHP Chinese website!