LES BASES DU CSS VANILLA QUE VOUS DEVEZ CONNAÎTRE

BASES DU CSS (feuilles de style en cascade)

Ici, en CSS, nous obtenons une cible et récupérons l'élément spécifique sur lequel nous voulons travailler, à partir de la page Web.

Comment fonctionne CSS.

CSS comporte principalement 2 parties, c'est-à-dire ;

• Sélecteurs
• Déclaration : Elle est également divisée en : propriété puis valeur.

TROIS NIVEAUX DE CSS ;

CSS en ligne

   * Here, CSS is used within the target element.
   * For example:`<p color="white"> This is inline CSS </p>`

CSS interne

  * Here, CSS is written within the html file above the body tag and within the head tag.
  * This is done with the help of `<style>` tags.

CSS externe

• Dans ce cas, le fichier CSS est lié au fichier index.html.

• Lors de la compilation du code CSS, CSS se base également sur la priorité. Dans ce cas, le CSS en ligne a toujours la priorité la plus élevée, suivi du CSS interne puis du CSS externe.

SÉLECTEURS CSS

• Ces sélecteurs nous permettent de savoir comment sélectionner les éléments du fichier html. Pour les sélecteurs CSS, il nous suffit de connaître le type de sélecteur que nous souhaitons utiliser, et aussi ce qu'il fait à l'élément cible.

Voici quelques-uns des sélecteurs CSS courants utilisés.

Sélecteur universel : Lorsqu'un tel sélecteur est utilisé, tout ce qui se trouve dans le fichier html (toutes les balises html) est ciblé ou sélectionné.

Par exemple :
*{
couleur de fond : gris
>
Cela signifie que toute la page Web aura une couleur de fond grise

Sélecteur individuel

• Cela cible des éléments individuels, par exemple

  cible tous les paragraphes du index.html en conséquence.

• Si vous souhaitez que chaque paragraphe ait sa propre couleur ou son propre aspect, nous pouvons alors opter pour les sélecteurs *Class ou Id.

Sélecteurs de classe et d'identifiant

• Pour les sélecteurs de classe, nous utilisons un point lors de son application. Ensuite, pour un sélecteur d'identifiant, nous utilisons un hachage (#) lors de son application.

Par exemple ;
.avertissement{
aligner les éléments : centre ;
>

• Un nom d'identifiant ne doit pas être appliqué ou utilisé plusieurs fois, même si, même lorsque vous le faites, aucune erreur ne sera générée dans notre fichier lors de la compilation. Mais ce serait une mauvaise pratique de codage.

• Pourtant, pour un nom de classe, vous pouvez utiliser le même nom plusieurs fois.

Sélecteur d'enfants

• Dans ce sélecteur, nous ciblons l'enfant de l'élément parent.
• Par exemple : nav ul{ affichage: flexible }
• Cela signifie que nous ciblons l'élément ul qui est un enfant du parent, nav.

Nous avons également d'autres sélecteurs

• Comme le nième sélecteur d'enfant.

Les sélecteurs les plus couramment utilisés sont les sélecteurs de classe et d'identifiant

NOTE:

• Lors de l'utilisation de couleurs pour CSS, il est toujours préférable d'utiliser des codes de couleur standard (comme #4d4d4d) contrairement aux couleurs de mots comme le rouge ou le vert.

• En effet, différents navigateurs affichent les couleurs de différentes manières, mais si des codes de couleur sont utilisés, cela agit comme une couleur globale standard qui est considérée comme la même couleur même dans différents navigateurs.

MARGE ET REMBOURRAGE.

• La marge est la quantité d'espace depuis l'extérieur et le remplissage est la quantité d'espace depuis l'intérieur où se trouve le texte.*

Remarque : Nous appliquons uniquement FOCUS aux balises d'entrée.

POSITIONS SUR CSS

Absolu ;

• Cela donne la position de la cible en fonction de la page Web parent, c'est-à-dire la bordure de toute la page Web.

Relatif ;

• Cela donne la position à l'élément cible en fonction du corps ou des cases dans lesquels se trouve la cible actuelle, c'est-à-dire en fonction de la position d'origine de la cible.

Collant ;

• Cela donne la position à la cible, et après cela, elle ne bougera plus vers une autre position.

Corrigé ;

• Après avoir appliqué cela, la cible ne sera ni changée ni modifiée. Il serait dans cette position fixe tel qu'il avait été attribué.

BOÎTES FLEXIBLES

Lorsque flex est appliqué, cela signifie que les éléments cibles ne peuvent être placés que dans une seule dimension horizontale.

• Par conséquent, le flex est unidirectionnel. Lorsque nous utilisons flex, nous fléchissons le parent. Et en fonction du parent, l'enfant se comportera.

Si nous souhaitons un affichage dynamique, c'est ici que nous pouvons utiliser la grille.

• La grille est donc bidirectionnelle.

CONCLUSION

Nous utilisons CSS pour modifier nos pages Web car cela nous aide à styliser facilement notre texte.

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!