<p>CSS (Cascading Style Sheets) est un langage utilisé pour contrôler la mise en page et le style des pages Web. Comment écrire du CSS est une compétence que tout développeur front-end doit maîtriser. Cet article explique comment bien écrire du CSS.
<p>1. Comprendre la syntaxe de base
<p>Avant de commencer à apprendre le CSS, nous devons comprendre une syntaxe de base. CSS peut être divisé en feuilles de style internes, feuilles de style externes et feuilles de style en ligne. Parmi elles, les feuilles de style internes sont écrites directement dans des fichiers HTML, les feuilles de style externes sont écrites dans des fichiers CSS indépendants et les feuilles de style en ligne sont écrites directement dans des balises HTML.
<p>Par exemple :
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
<style type="text/css">
p {
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p style="color: blue;">这是一段文字</p>
</body>
</html>Copier après la connexion
<p>Dans cet exemple, nous utilisons à la fois des feuilles de style internes et des feuilles de style externes, et utilisons également des feuilles de style en ligne.
<p>La syntaxe CSS se compose principalement de sélecteurs et d'attributs. Les sélecteurs sont utilisés pour sélectionner des éléments HTML et les attributs sont utilisés pour contrôler le style des éléments. Les propriétés courantes incluent l'arrière-plan, la couleur, la taille de la police, les bordures, les marges, etc.
<p>2. Utilisation des sélecteurs
<p>Les sélecteurs sont l'un des concepts les plus fondamentaux du CSS. Différents sélecteurs peuvent sélectionner différents éléments HTML. Voici plusieurs sélecteurs courants :
- Sélecteur de balises
<p>Le sélecteur de balises est l'un des sélecteurs les plus couramment utilisés. Par exemple :
p {
color: red;
}Copier après la connexion
<p>Ce sélecteur sélectionnera tous les éléments
<p>.
<p>元素。
- 类选择器
<p>类选择器使用
.号标识，应用于有相同类名的元素。例如：
.red {
color: red;
}Copier après la connexion
<p>这个选择器将选中所有带有
class="red"的HTML元素。
- ID选择器
<p>ID选择器使用
#号标识，应用于唯一的HTML元素。例如：
#header {
background-color: gray;
}Copier après la connexion
<p>这个选择器将选中
id="header"的HTML元素。
- 后代选择器
<p>后代选择器使用空格表示，选择父元素中的子元素。例如：
div p {
color: red;
}Copier après la connexion
<p>这个选择器选中了所有在
<div>元素内的
<p>元素。
- 伪类选择器
<p>伪类选择器用于选中处于特殊状态或位置的HTML元素。例如：
a:hover {
text-decoration: underline;
}Copier après la connexion
<p>这个选择器选中了当鼠标悬停在
<a>元素上时的状态。
<p>三、掌握常用属性
<p>CSS中有很多属性，但是有些比较常用，我们需要熟练掌握。以下是一些常见的属性：
- 背景属性
<p>背景属性用于控制元素的背景，包括颜色、图片、重复性等。例如：
body {
background-color: #f1f1f1;
background-image: url('background.jpg');
background-repeat: no-repeat;
}Copier après la connexion
<p>这个样式在页面右下角放置了一个名为
background.jpg的背景图片。
- 字体属性
<p>字体属性用于控制文本的字体、字号、颜色等。例如：
h1 {
font-family: Arial;
font-size: 24px;
color: #333333;
}Copier après la connexion
<p>这个样式设置了所有
<h1>标题元素的字体为Arial、字号为24px、颜色为#333333。
- 边框属性
<p>边框属性用于控制元素的边框。例如：
div {
border: 1px solid #e5e5e5;
border-radius: 10px;
}Copier après la connexion
<p>这个样式设置了
<div>元素的边框为1px宽、颜色为#e5e5e5、边框圆角为10px。
- 尺寸属性
<p>尺寸属性用于控制HTML元素的尺寸，包括宽度、高度、外间距、内间距等。例如：
img {
width: 100%;
height: auto;
margin-bottom: 10px;
padding: 5px;
}Copier après la connexion
<p>这个样式设置了所有图片的宽度为100%、高度自动调整、外下边距为10px、内边距为5px。
<p>四、使用样式继承
<p>CSS中的样式继承可以减少代码的重复，提高代码的可维护性。例如：
body {
color: #333333;
font-size: 16px;
}
h1 {
font-size: 24px;
font-weight: bold;
}Copier après la connexion
<p>这个样式定义了所有文本的颜色为#333333、字号为16px。
<h1>
Sélecteur de classe<p>
<p>Le sélecteur de classe est identifié par le numéro . et est appliqué aux éléments portant le même nom de classe. Par exemple :
border: 1px solid #e5e5e5;
Copier après la connexion
class="red".
<p>Sélecteur d'ID
<p>Le sélecteur d'ID est identifié par le numéro # et s'applique aux éléments HTML uniques. Par exemple : <p>rrreeeCe sélecteur sélectionnera l'élément HTML avec id="header". <p>
Sélecteur descendant🎜🎜🎜Le sélecteur descendant utilise des espaces pour sélectionner les éléments enfants dans l'élément parent. Par exemple : 🎜rrreee🎜Ce sélecteur sélectionne tous les éléments <p> dans l'élément <div>. 🎜🎜Sélecteur de pseudo-classe🎜🎜🎜Le sélecteur de pseudo-classe est utilisé pour sélectionner des éléments HTML dans un état ou une position spéciale. Par exemple : 🎜rrreee🎜Ce sélecteur sélectionne l'état lorsque la souris survole l'élément <a>. 🎜🎜3. Maîtriser les attributs communs 🎜🎜Il existe de nombreux attributs en CSS, mais certains sont plus couramment utilisés et nous devons les maîtriser. Voici quelques attributs courants : 🎜🎜🎜Attributs d'arrière-plan🎜🎜🎜Les attributs d'arrière-plan sont utilisés pour contrôler l'arrière-plan d'un élément, y compris la couleur, l'image, la répétabilité, etc. Par exemple : 🎜rrreee🎜Ce style place une image d'arrière-plan nommée background.jpg dans le coin inférieur droit de la page. 🎜🎜Attributs de police🎜🎜🎜Les attributs de police sont utilisés pour contrôler la police, la taille de la police, la couleur, etc. du texte. Par exemple : 🎜rrreee🎜Ce style définit la police de tous les éléments de titre <h1> sur Arial, la taille de police sur 24 px et la couleur sur #333333. 🎜🎜Attribut Border🎜🎜🎜L'attribut border est utilisé pour contrôler la bordure d'un élément. Par exemple : 🎜rrreee🎜Ce style définit la bordure de l'élément <div> sur 1 px de large, la couleur sur #e5e5e5 et les coins arrondis de la bordure sur 10 px. 🎜🎜Attributs Size🎜🎜🎜Les attributs Size sont utilisés pour contrôler la taille des éléments HTML, y compris la largeur, la hauteur, l'espacement extérieur, l'espacement intérieur, etc. Par exemple : 🎜rrreee🎜Ce style définit la largeur de toutes les images à 100 %, la hauteur à ajuster automatiquement, la marge extérieure inférieure à 10 px et la marge intérieure à 5 px. 🎜🎜4. Utiliser l'héritage de style 🎜🎜L'héritage de style en CSS peut réduire la duplication de code et améliorer la maintenabilité du code. Par exemple : 🎜rrreee🎜Ce style définit la couleur de tout le texte comme étant #333333 et la taille de la police comme étant de 16 px. <h1>L'élément de titre hérite de la même couleur, mais d'une taille et d'un poids de police différents. 🎜🎜5. Utiliser des styles composés🎜🎜En CSS, plusieurs valeurs d'attribut peuvent être combinées dans un style composé. Cela peut réduire la quantité de code et rendre le code plus concis. Par exemple : 🎜rrreee🎜Ce style définit un style composite composé de 3 valeurs d'attribut : la largeur de la bordure est de 1 px, le style de la bordure est une ligne continue et la couleur de la bordure est #e5e5e5. 🎜🎜6. Utiliser le préprocesseur CSS🎜🎜Le préprocesseur CSS est un outil qui compile le code CSS dans un langage CSS plus avancé. Ils étendent les fonctions du CSS, y compris les variables, les fonctions, l'imbrication, etc., rendant l'écriture du CSS plus pratique et plus rapide. Actuellement, les préprocesseurs CSS les plus populaires incluent Sass, Less, Stylus, etc. 🎜🎜7. Résumé🎜🎜Voici quelques points de base sur la façon de bien écrire du CSS. La maîtrise de la syntaxe de base, des sélecteurs, des attributs communs, de l'héritage de style et des styles composites peut nous permettre d'écrire du code CSS concis, flexible et facile à maintenir. 🎜
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
