css peut être divisé en trois catégories : 1. Le style Inline (inline), utilisant l'attribut style pour insérer du code CSS dans la balise HTML, la syntaxe "
...< ;/tag name >"; 2. Feuille de style intégrée, placez le code CSS dans la paire de balises de style dans la partie d'en-tête du document, la syntaxe est ""; 3. Style externe feuille, mettez le code CSS dans Dans le fichier ".css", utilisez la balise link ou la règle "@import" pour l'introduire dans le document html.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Pour obtenir certains effets dans le code HTML, il est souvent nécessaire d'ajouter des modifications CSS. Il existe trois types de CSS en HTML : les styles en ligne, les feuilles de style intégrées et les feuilles de style externes.
1. Style en ligne (inline)
Le style en ligne consiste à définir les informations de style directement dans l'attribut style de la balise HTML. Puisque le style en ligne est défini à l'intérieur de la balise, il n'est valable que pour la balise. où il se trouve.
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
Il est recommandé de ne pas utiliser de CSS en ligne car chaque balise HTML doit être stylisée séparément et la gestion du site Web peut devenir très difficile si vous utilisez uniquement du CSS en ligne. Toutefois, cela peut être utile dans certaines situations. Par exemple, dans les situations où vous n'avez pas accès aux fichiers CSS ou où vous devez uniquement appliquer des styles à un seul élément.
Inconvénients :
La définition de styles en ligne nécessite de définir l'attribut de style dans chaque balise HTML, ce qui est très gênant.
Soyez particulièrement prudent lorsque vous utilisez des guillemets doubles ou simples dans les styles en ligne, car les attributs de Les balises HTML utilisent généralement des guillemets doubles pour envelopper la valeur de l'attribut, comme ;
Les styles définis dans les styles en ligne ne peuvent pas être réutilisés ailleurs
Les styles en ligne sont très gênants ; maintenance ultérieure, car un site Web se compose généralement de plusieurs pages, et lors de la modification du style de page, vous devez modifier les pages une par une
L'ajout de trop de styles en ligne entraînera une augmentation de la taille du document HTML .
2. Feuille de style intégrée
Écrivez le code de style dans la page <style>...</style> tag<style>...</style>标签之中
<style>
bdoy{font-size:14px;}
</style><style>...</style>标签结构可以位于页面标签中的任何位置，也可以多次出现。通常是将整个<style>...</style>结构写在页面的
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>https://www.php.cn/</p>
</body>
</html>因为内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部，所以会导致文档的体积变大，而且当有其它文档也需要使用内嵌样式表中同样的样式时，无法引入到其他文档，必须在其它文档中重新定义，会导致代码冗余，不利于后期维护。
3、外部样式表
在实际的开发种都用于外部样式表。适合样式较多的情况。样式单独的写到CSS文件中，之后把CSS文件引入到HTML中使用。
1）、使用link
链接样式是指在外部定义CSS样式表并形成以.CSS为扩展名文件，然后在页面中通过<link>
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
< ;...</style> peut être située n'importe où dans la balise de la page et peut apparaître plusieurs fois. Habituellement, la structure <style>...</style> est écrite dans la section ... La particularité de cette façon d'introduire le CSS est que le code CSS de chaque page peut être unifié et planifié. Il est facile à réutiliser et à maintenir au sein d'une page, mais la réutilisation du code CSS entre plusieurs pages n'est toujours pas suffisante. <style type="text/css">
@import url("css文件路径");
</style>
Étant donné que la feuille de style intégrée doit définir le style CSS à l'intérieur du document HTML, cela augmentera la taille du document, et lorsque d'autres documents doivent également utiliser le même style dans la feuille de style intégrée, il ne peut pas être introduit dans d'autres documents et doit être Le redéfinir dans d'autres documents entraînera une redondance du code et ne favorisera pas une maintenance ultérieure. 1) Utiliser le style link
.CSS, puis passer <link> > La balise de lien est liée à la page et l'instruction de lien doit être placée dans la zone de balise Syntaxe : h1{
color:red;
}
p{
font-size:14px;
color:green;
}Copier après la connexionCopier après la connexionExplication de chaque attribut : 🎜🎜L'attribut href définit l'adresse du fichier de feuille de style externe, qui peut être une adresse relative ou une adresse absolue. L'attribut 🎜🎜🎜🎜rel définit le document associé, c'est-à-dire ici la feuille de style associée. L'attribut 🎜🎜🎜🎜type définit le type de fichier importé. Comme l'élément style, text/css indique un fichier texte CSS. 🎜🎜🎜🎜Généralement, lors de la définition de la balise <link>, 3 attributs de base doivent être définis, parmi lesquels href est un attribut incontournable. 🎜🎜Vous pouvez également ajouter l'attribut title dans l'élément link pour définir le titre de la feuille de style facultative. Autrement dit, lorsqu'un document Web importe plusieurs feuilles de style, vous pouvez sélectionner le fichier de feuille de style à appliquer via la valeur de l'attribut title. . 🎜🎜Conseils : dans le navigateur Firefox, vous pouvez sélectionner l'option "Affichage --> Style de page" dans le menu, puis la valeur de l'attribut de titre sera affichée dans le sous-menu. Il vous suffit de sélectionner différentes valeurs d'attribut de titre, qui. peuvent être appliqués de manière sélective. Le navigateur IE ne prend pas en charge cette fonctionnalité. 🎜另外，title 属性与 rel 属性存在联系，按 W3C 组织的计划，未来的网页文档会使用多个 <link> 元素导入不同的外部文件，如样式表文件、脚本文件、主题文件，甚至可以包括个人自定义的其他补充文件。导入这么多不同类型、名称各异的文件后，可以使用 title 属性进行选择，这时 rel 属性的作用就显现出来了，它可以指定网页文件初始显示时应用的导入文件类型，目前只能关联 CSS 样式表类型。
外部样式是 CSS 应用的最佳方案，一个样式表文件可以被多个网页文件引用，同时一个网页文件可以导入多个样式表，方法是重复使用 link 元素导入不同的样式表文件。
2）、使用@import
导入式是通过@import在