简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  CSS en détails

CSS en détails

WBOY
WBOYoriginal
2024-08-21 06:11:06897parcourir

CSS In Details

Comment le HTML s'affiche dans nos pages

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

Types HTML d'élément

principalement

  1. Niveau de bloc
  2. En Ligne

Sélecteurs CSS :-

  1. Sélecteur de type/attribut
  2. Sélecteur de classe
  3. Sélecteur d'identifiant
  4. 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>

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>

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>

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

  1. l'algorithme utilisé par les navigateurs pour déterminer quelle déclaration CSS doit être appliquée.
  2. 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>

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>

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

Combinateurs CSS

1.Sélecteur descendant (ul li a)

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

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>

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

Remarque :-

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

  1. 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
  2. Ils doivent avoir le même parent

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

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

Autres méthodologies

  1. OOCSS
  2. SMACSS
  3. SUITECVSS
  4. ATOMIQUE
  5. BEM

Bloquer

  1. en-tête
  2. Menu
  3. entrée
  4. case à cocher (signification autonome)

Élément (partie du bloc)

  1. Éléments de menu
  2. Liste des éléments
  3. Titre de l'en-tête

Modificateur

  1. Désactivé
  2. mis en surbrillance
  3. vérifié
  4. 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>

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!

css html for checkbox class Attribute Property dom flex input ul li ui
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Jour / Jours de Code : Focus renouveléArticle suivant：Jour / Jours de Code : Focus renouvelé

Articles Liés

Voir plus