Comment utiliser les CSS

CSS est une partie importante de la conception Web. Il peut être utilisé pour contrôler le style et la mise en page des pages Web. Dans la conception Web, l’utilisation de CSS peut rendre les pages Web plus belles, plus ordonnées et plus faciles à lire. Cet article présentera l'utilisation de base de CSS.

1. Qu'est-ce que CSS ?

Le nom complet de CSS est Cascading Style Sheets (feuilles de style en cascade). C'est un langage de balisage utilisé pour changer le style d'affichage des documents HTML ou XML. La fonction de base des feuilles de style CSS est d'appliquer différents attributs, tels que les polices, les couleurs, les arrière-plans, etc., à différents éléments de page Web pour obtenir différents effets visuels.

2. Syntaxe de base de CSS

La syntaxe de base de CSS se compose de sélecteurs, d'attributs et de valeurs. Le sélecteur est utilisé pour sélectionner l'élément HTML auquel le style est appliqué. L'attribut spécifie l'attribut à définir et la valeur est la valeur spécifique de l'attribut.

Par exemple, si nous voulons définir la couleur d'un paragraphe en rouge dans un document HTML, nous pouvons utiliser le code suivant :

p { color: red; }

p dans le code est le sélecteur, ce qui signifie que tous les éléments du paragraphe doivent être sélectionnés, la couleur est un attribut, indiquant que la couleur doit être définie, et le rouge est une valeur, indiquant que la couleur doit être définie sur rouge.

3. Sélecteur CSS

Le sélecteur CSS est utilisé pour sélectionner les éléments HTML qui doivent être stylisés. Il peut être sélectionné en fonction du nom de balise, de la classe, de l'ID et d'autres attributs de l'élément.

1. Sélecteur de balises

Le sélecteur de balises fait référence à la sélection d'éléments en fonction de leurs noms de balises. Par exemple, pour sélectionner tous les éléments de paragraphe, vous pouvez utiliser le code suivant :

p { couleur : rouge }

2. Sélecteur

Le sélecteur de classe fait référence à la sélection d'éléments en fonction de l'attribut de classe des éléments HTML. Par exemple, pour sélectionner tous les éléments portant le nom de classe « intro », vous pouvez utiliser le code suivant :

.intro { color: red }

3. Sélecteur d'ID

Le sélecteur d'ID fait référence à la sélection d'éléments en fonction de l'attribut ID des éléments HTML. L'attribut ID des éléments HTML est unique et il ne peut pas y avoir deux attributs ID identiques sur une seule page. Par exemple, pour sélectionner l'élément avec l'identifiant "intro", vous pouvez utiliser le code suivant :

intro { color: red; }

4. Attributs et valeurs CSS

Les attributs et valeurs CSS sont utilisés. pour contrôler le style de l'élément. CSS fournit De nombreuses propriétés et valeurs peuvent être utilisées pour définir différents effets de style.

1. Attributs de police

Les attributs de police peuvent être utilisés pour définir la police, la taille, la couleur et d'autres attributs du texte, par exemple :

font-family : Arial, Verdana, sans-serif / Type de police/ ;
font-size : 16px; / Font size/
color: #333; / Font color/

2 Attribut d'arrière-plan

L'attribut d'arrière-plan peut être utilisé pour définir la couleur d'arrière-plan, l'image, la position, etc. . de l'élément, par exemple :

background -color: #f8f8f8; / background color/
background-image: url("bg.jpg"); / background image/
background-repeat: no- répéter ; / l'arrière-plan ne se répète pas/
background -position : centre centre ; / Position de l'arrière-plan/

3. Attributs de bordure

Les attributs de bordure peuvent être utilisés pour définir le style, l'épaisseur, la couleur, etc. de l'élément, par exemple :

border-style: solid; /border style /
border-width: 1px; / Border width/
border-color: #ccc; 4. Attribut de tailleL'attribut de taille peut être utilisé pour définir la largeur, la hauteur et le maximum de l'élément, etc., par exemple :

largeur : 500 px /

largeur de l'élément

/

hauteur ; : 300px; /

hauteur de l'élément/largeur maximale : 100%; /
largeur maximale de l'élément/hauteur maximale : 100%; /
Hauteur maximale de l'élément /
5. Priorité CSS Lorsqu'un L'élément est sélectionné par plusieurs sélecteurs, la priorité CSS détermine quel style lui est appliqué. Les priorités du CSS de haut en bas sont : !important, le style en ligne, le sélecteur d'ID, le sélecteur de classe et le sélecteur de balise. Lorsque les priorités sont les mêmes, les styles ultérieurs remplaceront les styles précédents.

Par exemple, s'il y a une feuille de style comme celle-ci :

p { color: blue; }

.intro { color: red }

intro { color: green;}

Alors s'il y a un élément comme ceci :

< p class="intro" id="intro" style="color:orange"> Ceci est un paragraphe

Ensuite, la couleur de son texte est verte, c'est-à-dire que le sélecteur d'ID a la priorité la plus élevée, couvrant les styles pour les sélecteurs de classe et les sélecteurs de balises.

6. Héritage de CSS

L'héritage fait référence à la fonction selon laquelle un élément peut hériter des attributs de style de son élément parent. Cette fonctionnalité permet de réduire considérablement la feuille de style, réduisant ainsi la taille du fichier et améliorant la lisibilité. Par exemple :

body { font-size: 14px; }

p { color: #333; }

De cette façon, dans un élément p, la taille de la police sera de 14px et la couleur sera #333. la taille de la police de l’élément body.

7. Comment introduire CSS

CSS peut être introduit de trois manières : en ligne, interne et externe. Le style en ligne concerne un seul élément, tandis que les styles externes et internes sont utilisés pour définir la feuille de style de l'ensemble de la page HTML.

1. Style en ligne

Le style en ligne peut utiliser directement l'attribut style pour définir le style dans l'élément HTML, par exemple :

This est un paragraphe

2. Style interne

Le style interne fait référence à la définition de la feuille de style CSS dans la balise head du document HTML, par exemple :

<style>
    p { color: red; }
</style>

3.外部式

外部式是指将CSS样式表定义在一个单独的.css文件中，然后在HTML文档中引入，例如：

<link rel="stylesheet" type="text/css" href="style.css">

以上三种引入方式中，外部式是推荐使用的方式。这种方式可以使CSS样式表单独存放，方便维护和修改，也可以提高页面加载速度。

总结：

CSS是网页设计中的重要组成部分，它可以用来控制网页中的样式和布局。CSS的基本语法由选择器、属性和值组成，选择器用来选择要应用样式的HTML元素，属性指定要设置的属性，值是属性的具体数值。当同一个元素被多个选择器选中时，CSS的优先级决定它应用哪一个样式。CSS有三种引入方式：内联式、内部式和外部式，而外部式是推荐使用的方式。

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!