Maison > Article > interface Web > Comment créer du CSS

Comment créer du CSS

PHPzoriginal: 2023-04-13 10:44:081465parcourir

CSS est l'abréviation de Cascading Style Sheets, un langage de style utilisé pour contrôler l'apparence et la mise en page des pages Web. Dans la conception Web moderne, CSS joue un rôle très important, rendant les pages Web plus belles, plus faciles à lire et améliorant l'expérience utilisateur. Dans cet article, je vais expliquer comment CSS est créé.

1. La syntaxe de base de CSS

CSS est principalement composée de composants de base tels que des sélecteurs, des attributs et des valeurs d'attribut. Les lecteurs peuvent comprendre la syntaxe de base de CSS grâce à l'exemple de code suivant :

selector {
property1: value1;
property2: value2;
}

Parmi eux, sélecteur (sélecteur). ) Utilisé pour spécifier l'élément HTML auquel le style doit être appliqué. Il peut s'agir du nom, du nom de classe, de l'ID, etc. de l'élément ; la propriété (propriété) est le nom du style qui doit être défini, tels que "font-size", "color", etc. ; la valeur de l'attribut (value ) spécifie la valeur après le nom du style, utilisée pour définir la valeur du style.

2. Style en ligne

Le style en ligne est la forme la plus simple de CSS. Il écrit le code CSS directement dans les balises HTML. Bien que ce formulaire soit simple, il n’est pas recommandé car il entraînerait certains problèmes de développement et de maintenance. Par exemple :

<p style="color:red;font-size:20px;">这是一段带有内联样式的文本。</p>

Dans le développement réel, nous choisissons généralement d'écrire le code CSS dans un fichier CSS, puis de l'appliquer à la page Web après l'avoir défini.

3. Feuille de style

Feuille de style interne

Une feuille de style interne est une feuille de style qui place du code CSS dans la balise head d'un document HTML. Bien que ce formulaire ne soit pas aussi simple que les styles en ligne, il convient à certains projets plus petits. Par exemple, seuls les styles nécessaires à des pages Web spécifiques peuvent être directement intégrés dans des fichiers HTML afin d'obtenir une apparence uniforme des pages Web. .

Ce qui suit est un exemple de code pour une feuille de style interne :

<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一个带内部样式表的段落。</p>
</body>

Feuille de style externe

Une feuille de style externe est un style qui stocke le code CSS dans un fichier CSS séparé et y renvoie sur la page via le lien balise de la surface du document HTML. Ce formulaire convient aux projets de taille moyenne et grande, en particulier lorsque plusieurs pages Web doivent utiliser le même style. Il est très pratique de les maintenir et de les modifier de manière uniforme.

Ce qui suit est un exemple de code pour une feuille de style externe :

Partie du fichier HTML :

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>这是一个带外部样式表的段落。</p>
</body>

Partie du fichier CSS :

p {
color: red;
font-size: 20px;
}

4. Explication détaillée des sélecteurs

Sélecteur d'élément

Le sélecteur d'élément sélectionne le nom. de l'élément HTML Un sélecteur qui décrit le style à appliquer à tous les éléments utilisant le nom de cet élément. En d'autres termes, si vous souhaitez définir uniformément toutes les balises p de la page HTML en rouge, vous pouvez y parvenir via le code suivant :

p {
color: red;
}

Sélecteur d'ID

Le sélecteur d'ID est utilisé pour sélectionner des éléments HTML avec un ID spécifique. attributs. Dans les documents HTML, l'attribut id est généralement unique, donc le sélecteur d'ID ne peut sélectionner qu'un seul élément, comme indiqué ci-dessous :

#intro {
font-size: 30px;
font-weight: bold;
}

Class Selector

Le sélecteur de classe est un moyen de sélectionner des éléments HTML avec le même type de nom de classe. du sélecteur. Dans un document HTML, un élément peut contenir plusieurs noms de classe, ou plusieurs éléments peuvent être définis avec le même nom de classe et stylés de manière uniforme. Par exemple :

.text {
font-style: italic;
}

4. Résumé

Cet article présente la méthode de création et la syntaxe de base du CSS, ainsi que les deux formes de feuilles de style et une explication détaillée des sélecteurs. En termes simples, CSS permet aux développeurs de contrôler plus facilement le style des pages Web Grâce à différentes formes de CSS et différentes applications de sélecteurs, des effets de page Web plus riches et plus beaux peuvent être obtenus. J'espère que les lecteurs pourront maîtriser la méthode de création de CSS et améliorer leurs capacités de développement grâce à cet article.

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!

css html Property 选择器样式表

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：Comment Vue sait-il que la barre d'adresse a changé ?Article suivant：Comment Vue sait-il que la barre d'adresse a changé ?

Articles Liés

Voir plus