✅ Commandes CSS - Commande de base, intermédiaire et avancée

Introduction aux commandes CSS

Introduction aux commandes CSS

CSS signifie feuilles de style en cascade. Il est utilisé pour décrire la présentation du document qui est écrit dans un langage de balisage comme HTML. Il fait le travail de séparation de la présentation et du contenu qui comprend différentes mises en page, couleurs et polices. La séparation offre une flexibilité et contrôle également les différentes caractéristiques qui permettent à plusieurs pages Web de partager le formatage en spécifiant le CSS pertinent. Les spécifications CSS sont maintenues par World Web Consortium. En plus de cela, il fournit également des règles spécifiques qui facilitent le formatage alternatif si le contenu est accessible à partir d'un appareil mobile.

Commandes CSS de base

1. Syntaxe CSS: Il existe un ensemble de règles qui doivent être suivies dans la commande CSS. L'ensemble de règles CSS se compose d'un sélecteur et d'un bloc de déclaration. Le sélecteur est utilisé pour pointer vers l'élément HTML que l'utilisateur souhaite styliser. Le bloc de déclaration peut contenir une ou plusieurs déclarations qui peuvent être séparées par des points-virgules. Chaque déclaration doit inclure un nom de propriété avec sa valeur et ceux-ci séparés par des deux-points.

2. Sélecteur d'ID : Le sélecteur d'ID peut utiliser l'ID d'un attribut d'élément HTML et aider à sélectionner un élément particulier. Il est utilisé pour sélectionner un élément unique et cet élément doit être unique pour cette page. Afin de sélectionner un élément avec un identifiant particulier, '#' est utilisé et il est suivi par l'identifiant de cet élément.

3. Sélecteur de classe: pour sélectionner un attribut de classe particulier, le sélecteur de classe est utilisé pour sélectionner les éléments de cette classe. Pour utiliser des éléments dans une classe spécifique, un caractère point (.) Est utilisé. Il est suivi du nom de la classe. Avec cela, si l'utilisateur souhaite que seuls des éléments spécifiques soient utilisés, seuls ceux-ci peuvent être spécifiés par une classe.

4. Grouper les sélecteurs: Il y a des moments où les éléments ont les mêmes définitions de style. Les regrouper et minimiser le code est une meilleure option. Pour le groupe, l'utilisateur du sélecteur peut utiliser une virgule et séparer chaque sélecteur

5. Commentaires: Ces commandes CSS sont recommandées pour être utilisées lors de l'écriture de code. Ils clarifient ce que fait le code et vous aident, vous ou quelqu'un d'autre qui est nouveau dans le code, à travailler en conséquence. Les commentaires sont ignorés par les navigateurs. Un commentaire CSS commence et se termine par / * * /.

6. Affichage: Bloquer - De nombreux éléments HTML sont définis sur ce mode d'affichage. Par défaut, les éléments de niveau bloc prennent autant d'espace et ils ne peuvent pas être placés sur la même ligne avec aucun autre mode d'affichage. Il est possible d'acquérir la possibilité de modifier la hauteur et la largeur de l'élément selon votre souhait.

7. Couleurs en CSS: Dans ces commandes CSS, les couleurs peuvent être spécifiées dans la formule RVB. Chaque paramètre définit l'intensité de ces couleurs et définit une nouvelle couleur. Par exemple, pour afficher le noir, tous les paramètres de couleur doivent être définis sur RVB (0, 0, 0).

8. Couleur d' arrière-plan : La propriété background-color définit la couleur qui doit être définie pour l'arrière-plan d'un élément. La couleur peut être facilement définie en donnant un nom de couleur, en ajoutant une valeur hexadécimale ou en définissant une valeur RVB

9. Image d'arrière-plan: L'image d'arrière-plan peut être définie sur n'importe quelle image particulière de votre choix. Une fois que l'image est définie, elle est répétée et couvre tout l'élément.

10. Marges CSS: La commande CSS a différentes propriétés de marge qui peuvent aider à créer de l'espace autour de différents éléments et définit également ces bordures extérieures. CSS peut avoir des propriétés telles que margin-top, margin-right, margin-bottom et margin-left.

Commandes CSS intermédiaires

1. Sélecteurs de classe et d'ID: En plus de la balise HTML, un utilisateur peut définir ses propres sélecteurs qui peuvent être sous forme de classe ou d'ID. L'utilisation principale de ceux-ci étant que vous pouvez avoir le même élément HTML et le présenter différemment en fonction de l'ID ou de la classe qui est nécessaire.

2. Pseudo-classe: ces classes sont utilisées pour spécifier un état particulier ou une relation avec un sélecteur donné. Ces classes peuvent également prendre la forme d'un sélecteur: pseudo_class (property: value; ). Cette classe est définie en donnant simplement deux points entre le sélecteur et la pseudo-classe.

3. Formatage du texte: les textes ajoutés peuvent être personnalisés et formatés en utilisant les propriétés de formatage. La couleur peut être modifiée en utilisant le mot-clé 'couleur'. Il en va de même pour l'alignement du texte. En utilisant des décorations de texte, des décorations peuvent être définies et supprimées. Des transformations peuvent être effectuées par rapport aux cas.

4. Polices CSS: les polices CSS ont différentes familles comme la famille générique et la famille de polices. La famille de polices est une famille de textes. Le générique ayant un groupe de familles ayant un look similaire et une police ayant une police spécifique.

5. Icônes: en utilisant la bibliothèque d'icônes et en ajoutant le nom des icônes de classes d'icônes spécifiées, vous pouvez facilement utiliser CSS.

6. Tableaux: CSS peut également afficher des tableaux et aider à la personnalisation des bordures, de leur largeur et de leur hauteur. En utilisant des mots clés comme «bordure», «largeur» et hauteur, l'utilisateur peut facilement avoir des tableaux sur une page Web.

7. Positionnement: cette propriété spécifie le type de méthode de positionnement qui peut être utilisé pour n'importe quel élément. Cette position peut être statique, relative, fixe, absolue ou collante.

8. Débordement: cette propriété permet de contrôler le contenu trop volumineux pour tenir dans une zone.

9. Float: La propriété float permet à l'élément de savoir comment il doit flotter. Il spécifie quels éléments peuvent flotter à côté des éléments effacés.

10. Opacité: cette propriété définit l'opacité ou la transparence de tout élément.

Commandes CSS avancées

1. CSS coins arrondis: En utilisant la propriété «border-radius», un élément peut recevoir des coins arrondis. Vous pouvez également spécifier un coin particulier sur les quatre coins et apporter les modifications selon votre choix.

2. Images de bordure : vous pouvez définir une image comme bordure autour de n'importe quel élément. Ceci est possible en utilisant une propriété border-image. Il prend l'image et la découpe en neuf sections, puis place les coins aux coins et les sections centrales sont répétées ou étirées.

Trucs et astuces pour utiliser les commandes CSS:

Utilisez reset.css et réinitialisez tous les styles fondamentaux.
Utilisez Shorthand CSS pour avoir un moyen plus court d'écrire des codes CSS de commande.
Utilisez les outils de débogage CSS afin d'ajuster, de comprendre et de déboguer les styles de commandes CSS.

Conclusion

La commande CSS vous aide à séparer le contenu informatif d'un document et à l'afficher. Il permet d'éviter la duplication, de maintenir facilement le code et d'utiliser le même contenu avec des styles différents.

Commandes CSS - Commande de base, intermédiaire et avancée