Premiers pas avec CSS : styliser vos pages Web

CSS (Cascading Style Sheets) est la pierre angulaire de la conception Web. Il vous permet de contrôler l'apparence de votre site Web, des polices de couleurs aux mises en page et animations.

1. Qu'est-ce que CSS ?

CSS est un langage utilisé pour décrire la présentation d'un document écrit en HTML. Il définit comment les éléments HTML doivent apparaître à l'écran, sur papier ou sur d'autres supports.

2. Syntaxe de base

Une règle CSS est constituée d'un sélecteur et d'un bloc de déclaration :

selector {
  property: value;
}

par exemple :

body {
  background-color: lightblue;
}

Cela change la couleur d'arrière-plan de la page en bleu clair.

3. Sélecteurs

Les sélecteurs vous permettent de cibler des éléments HTML spécifiques pour appliquer des styles. Vous pouvez sélectionner des éléments par :

• Tapez : p {} cible tous les paragraphes.
• Classe : .my-class {} cible les éléments avec la classe "my-class".
• ID : #my-id {} cible les éléments avec l'ID "my-id".

4. Modèle de boîte

Chaque élément HTML peut être considéré comme une boîte, composée de :

• Contenu : le texte ou le média réel à l'intérieur.
• Padding : L'espace entre le contenu et la bordure.
• Bordure : Le contour autour de l'élément.
• Marge : L'espace à l'extérieur de la frontière, séparant les éléments.

5. Propriétés communes

Couleur : couleur : rouge ; change la couleur du texte.

• Police : taille de police : 16px ; définit la taille du texte.
• Fond : couleur de fond : gris clair ; change la couleur de fond.
• Largeur/Hauteur : largeur : 100 % ; et hauteur : 200px ; définir les dimensions des éléments.

6. Conception réactive

Utilisez des requêtes multimédias pour que vos pages Web s'affichent correctement sur tous les appareils. Par exemple :

@media screen and (max-width: 600px) {
  body {
    background-color: lightyellow;
  }
}

Cela change la couleur d'arrière-plan en jaune clair lorsque la largeur de l'écran est de 600 px ou moins.

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!