Définir les styles en CSS

CSS (Cascading Style Sheets) est une technologie utilisée pour décrire l'apparence des documents Web. CSS peut appliquer des styles à différents éléments d'un document HTML, tels que les polices, les couleurs, l'espacement, les arrière-plans, etc. Il permet aux développeurs de modifier l'apparence et la mise en page de la page sans modifier la structure HTML. Dans cet article, nous explorerons comment styliser en CSS.

1. Selector

En CSS, les sélecteurs sont utilisés pour sélectionner les éléments auxquels les styles doivent être appliqués. Il existe plusieurs types de sélecteurs différents, tels que :

• Sélecteur de balise (par exemple p, h1, div, span)
• Sélecteur de classe (par exemple . red, . bleu)
• Sélecteur d'ID (par exemple #header, #footer)
• Sélecteur d'attribut (par exemple [type="text"])
# 🎜🎜#Pseudo- sélecteur de classe (par exemple :hover, :focus)

.red {
    color: red;
}

Attributs de style

color : définissez la couleur du texte
font-size : définissez la taille de la police
font - family : Définissez le type de police
background-color : Définissez la couleur d'arrière-plan
margin : Définissez la marge extérieure de l'élément
padding : Définir la marge intérieure de l'élément Distance
border : Définir la bordure de l'élément
width : Définir la largeur de l'élément
hauteur : Définir la hauteur de l'élément
• #🎜🎜 #text-align : définir l'alignement du texte
Les deux points sont généralement utilisés pour séparer les attributs de style et les valeurs d'attribut, et les points-virgules sont utilisés pour séparer les attributs des attributs. Par exemple :

p {
    font-size: 16px;
    color: #333;
    font-family: sans-serif;
}

Cela définira la taille de la police de tous les paragraphes sur 16 pixels, la couleur sur gris foncé (#333) et la police sur sans empattement.

3. Cascading en CSS fait référence à l'effet hiérarchique des styles. Si plusieurs règles de style sont appliquées au même élément, le navigateur utilisera des règles spécifiques pour déterminer quel style sera appliqué.

Les styles peuvent être appliqués aux attributs tag, class et ID des éléments. Lorsqu'un élément est soumis à plusieurs règles de style, CSS utilise une hiérarchie spécifique pour décider quelle règle a la priorité la plus élevée, comme indiqué ci-dessous :

• Style spécifié par le style de classe (.class)
• Style spécifié par l'élément/la balise (div, p, h1, etc.)
#🎜🎜 #Universel style (*)
• Style par défaut du navigateur
• Il s'agit de ce qu'on appelle "l'ordre en cascade des styles", appliquez d'abord le style en fonction de l'ID, puis selon le style Les styles des classes et des éléments sont appliqués dans l'ordre dans lequel ils apparaissent dans le tableau. Les styles universels spécifient les styles qui s'appliquent à tous les éléments, et les styles par défaut du navigateur font référence aux styles que le navigateur applique par défaut à un élément.

Modèle de boîte

4. Le modèle de boîte en CSS décrit la disposition d'un élément HTML. Le modèle de boîte d'un élément se compose de quatre parties : la zone de contenu, le remplissage, les bordures et les marges.

Zone de contenu : texte et images à l'intérieur de l'élément.

Padding : L'espace entre la zone de contenu et la bordure d'un élément.
• Border : La ligne entourant l'élément.
• Marge : L'espace entre la bordure de l'élément et les autres éléments.
• Le style de bordure (comme la ligne continue, la ligne pointillée et la ligne pointillée) et la couleur de la bordure peuvent être modifiés en CSS.

Conclusion

5. Cet article fournit les bases du style en CSS. Définissez les styles en sélectionnant des éléments dans un sélecteur, en utilisant les propriétés de style et en utilisant la mise en cascade si nécessaire pour déterminer l'ordre des styles. Nous avons également découvert le modèle de boîte CSS, qui constitue la base de la disposition et de l'apparence des éléments en CSS. Lorsque vous maîtriserez ces bases, vous serez en mesure d’utiliser CSS pour créer de superbes mises en page de pages Web.

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!