Maison > Article > interface Web > Comment utiliser les CSS

Comment utiliser les CSS

WBOYoriginal: 2023-05-21 11:25:38591parcourir

CSS (Cascading Style Sheets) est un langage utilisé pour définir les styles de pages Web. Il est utilisé avec HTML pour créer des pages Web. CSS contrôle l'apparence et la position des éléments HTML pour embellir les pages Web et améliorer l'expérience utilisateur.

Dans cet article, nous présenterons les bases du CSS et comment utiliser CSS pour changer le style des éléments HTML.

Bases de CSS

CSS se compose de sélecteurs et de déclarations. Les sélecteurs sont utilisés pour sélectionner les éléments HTML auxquels les styles doivent être appliqués, tandis que les déclarations spécifient les styles à appliquer aux éléments sélectionnés.

Sélecteurs

Voici quelques sélecteurs courants :

Sélecteur d'élément : sélectionnez un élément en spécifiant le nom de l'élément HTML, par exemple :
```
p {
color: red;
}
```
Cela sélectionnera tous les éléments e388a4556c0f65e1904146cc1a846bee définir leur couleur sur rouge.
Sélecteur de classe : sélectionnez les éléments en spécifiant un nom de classe, par exemple :
```
.my-class {
background-color: yellow;
}
```
Cela sélectionnera tous les éléments avec class="my-class" et définira leur couleur d'arrière-plan sur jaune.
ID Selector : sélectionne un seul élément en spécifiant un identifiant, par exemple :
```
#my-id {
font-size: 20px;
}
```
Cela sélectionnera les éléments avec id="my-id" et définira leur taille de police sur 20 pixels.
Sélecteur d'attributs : sélectionne les éléments en spécifiant leurs attributs, par exemple :
```
a[href="https://www.google.com"] {
color: blue;
}
```
Cela sélectionnera tous les éléments pointant vers des sites Google, en définissant leur couleur sur bleu.
Pseudo-classes et pseudo-éléments : Sélectionnez les éléments en précisant leur statut ou leur position, par exemple :
```
a:hover {
text-decoration: underline;
}
```
Cela sélectionnera tous les éléments, en soulignant leur texte au survol de la souris.

Déclarations

Les déclarations font partie des règles CSS, et chaque déclaration se compose d'attributs et de valeurs. L'attribut spécifie le style à appliquer et la valeur détermine la valeur spécifique de l'attribut. Par exemple :

p {
  color: red;
}

Dans cette règle, "color" est l'attribut et "red" est la valeur. Cela sélectionnera tous les éléments e388a4556c0f65e1904146cc1a846bee du document et définira leur couleur sur rouge.

Comment appliquer CSS

CSS peut être appliqué aux documents HTML de trois manières : feuilles de style internes, feuilles de style externes et styles en ligne. Nous examinerons chacune de ces trois méthodes séparément.

Feuille de style interne

La feuille de style interne fait référence aux règles CSS contenues dans la balise c9ccee2e6ea535a969eb3f532ad9fe89 et intégrées dans la section 93f0f5c25f18dab9d176bd4f6de5d30e Par exemple :

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This text will be red.</p>
</body>
</html>

Dans cet exemple, la règle CSS est incluse dans la balise c9ccee2e6ea535a969eb3f532ad9fe89 et définit la couleur de tous les éléments e388a4556c0f65e1904146cc1a846bee

Feuille de style externe

Une feuille de style externe est un fichier CSS distinct qui est référencé dans le document HTML via un lien vers ce fichier. Par exemple :

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>This text will have the styles defined in style.css.</p>
</body>
</html>

Dans cet exemple, nous établissons un lien vers un fichier CSS appelé "style.css" et définissons tous les styles que nous souhaitons appliquer dans ce fichier. Cela affectera chaque élément HTML, à condition que le document soit associé à un fichier CSS.

Styles en ligne

Les styles en ligne font référence à l'intégration de styles CSS directement dans les éléments HTML. Par exemple :

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
</head>
<body>
  <p style="color: red;">This text will be red.</p>
</body>
</html>

Dans cet exemple, le style CSS est écrit directement dans l'attribut "style" de l'élément e388a4556c0f65e1904146cc1a846bee Cela affectera uniquement les éléments dotés de cet attribut "style".

Propriétés de style CSS

CSS propose de nombreuses propriétés de style. Nous énumérons ici quelques-unes des plus couramment utilisées :

color : couleur de la police.
font-size : taille de la police.
text-align : alignement du texte.
background-color : couleur de fond.
border : Bordure d'élément.
padding : rembourrage d'élément.
margin : marge de l'élément.

Ces propriétés ne sont que quelques-unes des nombreuses propriétés que vous pouvez utiliser avec CSS. Comme JavaScript et d’autres langages de programmation, CSS possède sa propre syntaxe et ses propres règles. Pour plus de détails, consultez la spécification CSS et la documentation.

Conclusion

CSS est un langage flexible et puissant qui permet aux développeurs de contrôler facilement l'apparence et le positionnement des éléments HTML. Cet article explique les bases de CSS et comment l'utiliser pour contrôler le style dans les documents HTML. CSS a un large éventail d'applications, notamment la conception Web réactive, la compatibilité entre navigateurs et la mise en œuvre d'expériences utilisateur spécifiques. Même si vous aurez peut-être besoin de plus d’expérience en CSS pour personnaliser parfaitement votre site Web, maîtriser les bases du CSS est un bon début.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：css dépasse l'affichage de la partieArticle suivant：css dépasse l'affichage de la partie

Articles Liés

Voir plus