CSS en détails-js tutoriel-php.cn

CSS en détails

WBOY

Libérer： 2024-08-21 06:11:06

original

915 Les gens l'ont consulté

CSS In Details

Comment le HTML s'affiche dans nos pages

Le navigateur charge le HTML
Convertit le HTML en DOM
Récupérer des ressources liées
Le navigateur analyse CSS (CSSOM)
Combinez DOM avec CSSOM
L'interface utilisateur est peinte (FCP) (First Contentful Paint)

Types HTML d'élément

principalement

Niveau de bloc
En Ligne

Sélecteurs CSS :-

Sélecteur de type/attribut
Sélecteur de classe
Sélecteur d'identifiant
Sélecteur universel (*)

Héritage CSS

Cela se produit lorsqu'une propriété CSS d'héritage (c'est-à-dire la couleur) n'est pas définie directement sur un élément, la chaîne parent est parcourue jusqu'à ce qu'une valeur pour cette propriété soit trouvée.

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Qu'est-ce que la spécificité CSS

l'algorithme utilisé par les navigateurs pour déterminer quelle déclaration CSS doit être appliquée.
Chaque sélecteur a un poids calculé. Le poids le plus spécifique gagne. identifiant--classe-type Sélecteur d'identification : 1 - 0 - 0 sélecteur de classe : 0- 1 -0 sélecteur de type : 0-0-1

REMARQUE : - Les CSS en ligne sont plus spécifiques et !import a encore plus de spécificité

Calculateur de spécificité CSS

Em & Rem

EM : - par rapport à son côté police parent

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

Copier après la connexion

REM : - par rapport à la police racine

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

Copier après la connexion

%:- % calcul

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

Copier après la connexion

Combinateurs CSS

1.Sélecteur descendant (ul li a)

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

Copier après la connexion

2.Combinateurs enfants (descendants directs) (div.text > p)

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

Copier après la connexion

3.Combinateur frère/sœur adjacent (h1 + p)

Remarque :-

h1 et p doivent être dans le même parent et p devrait être immédiatement après la balise h1

4.Combinateur général de frères et sœurs (p ~ code)

Remarque :-

ils ne devraient pas avoir de frère ou de sœur immédiat comme un frère ou une sœur adjacente. Mais ils doivent avoir des frères et sœurs
Ils doivent avoir le même parent

Architecture de modificateur d'élément de bloc (BEM)

Méthodologie de conception qui permet de créer des composants réutilisables et le partage de code

Autres méthodologies

OOCSS
SMACSS
SUITECVSS
ATOMIQUE
BEM

Bloquer

en-tête
Menu
entrée
case à cocher (signification autonome)

Élément (partie du bloc)

Éléments de menu
Liste des éléments
Titre de l'en-tête

Modificateur

Désactivé
mis en surbrillance
vérifié
Jaune

.block__element--modifier Syntaxe

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

Copier après la connexion

Modèle de boîte :- (W.I.P)

Nous devons ajouter plus d'informations à partir des informations détaillées

REMARQUE :-

Il y aura un article séparé sur la disposition en grille par rapport à la disposition Flex.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!