CSS n'est pas difficile (il vous manque juste ces bases)

Quand j'ai débuté dans le développement Web, je pensais que mon plus grand défi serait JavaScript (je ne dis pas que JS n'est pas encore une poignée), mais il y a eu tellement de mauvaises réputations et d'histoires d'horreur à propos de CSS.

Malgré tout cela, je me suis plongé en profondeur dans le développement Frontend, et bon sang, CSS a-t-il fait un certain nombre sur moi. Rien n'a jamais bien fonctionné, et ne me lance même pas dans le centrage d'un div. C'était un cauchemar.

Mais voici ce que j'ai réalisé : CSS n'était pas le problème, le problème était que je ne comprenais pas les bases, et une fois que je les ai maîtrisées, le style est devenu plus facile et étonnamment amusant.

Dans cet article, je vais vous présenter deux concepts fondamentaux qui prépareront le terrain pour maîtriser CSS :

1. Sélecteurs CSS
2. Modèle de boîte
3. Positionnement et disposition

• Sélecteurs CSS : les sélecteurs CSS sont des outils qui vous permettent de cibler certains éléments HTML nécessitant un style.

Explorons quelques-uns des sélecteurs couramment utilisés :

A. Sélecteurs universels : Ceci est utilisé pour cibler chaque élément d'une page. Il est représenté par le symbole astérisque (*) et est généralement utilisé pour les réinitialisations globales ou pour appliquer des styles de base.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

B. Sélecteurs de classe : Ceci est utilisé pour sélectionner des éléments HTML avec une valeur d'attribut de classe spécifique. Pour sélectionner des éléments avec une classe spécifique, écrivez un point(.) suivi de la valeur de l'attribut class.

<div>





<pre class="brush:php;toolbar:false">.box{
  background-color: teal;
  padding: 30px;
  border-radius: 10px;
  border: 2px solid;
  text-align: center;
}

C. Sélecteurs de type : Ceci est utilisé pour cibler tous les éléments d'un type spécifique. On l'appelle également le sélecteur d'éléments.

p{
text-align: center;
font-size: 1.2rem
}

Cas d'utilisation : ceci applique un style uniforme à toutes les balises

.

D. Sélecteurs d'attributs : Ce sélecteur cible les éléments HTML en fonction de leurs attributs et valeurs.

input[type = "text"] {
background-color: cyan;
color: gray;
}

E. Pseudo-classes :Ces éléments sont sélectionnés pour le style en fonction de leur état.

a:hover{
color: blue;
transition: ease-in 0.5s;
}

Il existe d'autres sélecteurs CSS utiles, mais ceux-ci feraient l'affaire pour l'instant.

• Le modèle de boîte

Le modèle de boîte est essentiellement une boîte qui entoure les éléments HTML. En gros, chaque élément HTML n'est qu'une grande (ou petite) boîte rectangulaire. Le modèle de boîte permet de contrôler l'espace occupé par chaque boîte et la manière dont elle interagit avec d'autres éléments.

Chaque boîte comporte quatre parties principales :

1. Contenu : C'est ce qu'il y a à l'intérieur de la boîte – textes, images et autres éléments.
2. Padding : C'est l'espace entre le contenu et le bord de la boîte.
3. Bordure : C'est le bord de la boîte.
4. Marge : C'est l'espace extérieur à la bordure qui sépare cette case des autres cases.

Voici une illustration expliquant le modèle de boîte

Remarque : la ligne pointillée est la bordure de la boîte.

Le Box Model est essentiel pour tout ce que vous voulez faire en CSS, du positionnement des éléments à la gestion de l'espacement. Par exemple, j'ai dessiné l'illustration du modèle de boîte en utilisant uniquement HTML et CSS pour montrer comment les différentes couches fonctionnent ensemble.

Voici le code qui m'a aidé à donner vie à l'illustration :

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

FINITION(il était temps)
CSS peut sembler beaucoup au début, mais une fois que vous avez acquis les bases, vous êtes prêt à conquérir le monde (du moins votre monde).
Voici les principaux points à retenir de cet article : CSS n'est pas difficile, il vous suffit de vous concentrer davantage sur les fondamentaux.
Continuez à apprendre et, surtout, continuez à vous entraîner, et bientôt, vous styliserez des pages Web comme un pro.

Quelle est la prochaine étape ?
Maintenant que vous avez appris les bases des sélecteurs CSS et du modèle de boîte, vous êtes sur le point de maîtriser CSS, mais il y a encore plus à explorer.
Dans l'article suivant, nous aborderons le positionnement CSS et les techniques de mise en page telles que Flexbox et Grid.

Bon codage !!!!

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!