Maison > Article > interface Web > CSS en HTML est divisé en plusieurs catégories

CSS en HTML est divisé en plusieurs catégories

青灯夜游original: 2022-09-21 16:28:452963parcourir

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>

CSS en HTML est divisé en plusieurs catégories

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>结构写在页面的

...部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性，一个页面内部便于复用和维护，但多个页面之间的CSS代码复用仍然不够。

<!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 en HTML est divisé en plusieurs catégories

因为内嵌样式表需要将 CSS 样式定义在 HTML 文档的内部，所以会导致文档的体积变大，而且当有其它文档也需要使用内嵌样式表中同样的样式时，无法引入到其他文档，必须在其它文档中重新定义，会导致代码冗余，不利于后期维护。

3、外部样式表

在实际的开发种都用于外部样式表。适合样式较多的情况。样式单独的写到CSS文件中，之后把CSS文件引入到HTML中使用。

1）、使用link

链接样式是指在外部定义CSS样式表并形成以.CSS为扩展名文件，然后在页面中通过<link>

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

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>

CSS en HTML est divisé en plusieurs catégories

É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.

3. Les feuilles de style externes
sont utilisées dans le développement réel. Convient aux situations avec de nombreux styles. Les styles sont écrits séparément dans des fichiers CSS, puis les fichiers CSS sont introduits dans HTML pour être utilisés.
1) Utiliser le style link

Link signifie définir une feuille de style CSS en externe et former un fichier avec l'extension .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;
}
Explication 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在
语法：
<style type="text/css">
  @import url("css文件路径");
</style>
在 @import 关键字后面，利用 url() 函数包含具体的外部样式表文件的地址。
简单实例：
css外部样式表 style.css
h1{
	color:red;
}
p{
	font-size:14px;
	color:green;
}
HTML文档
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link type="text/css" rel="styleSheet"  href="style.css" />
		<!-- <style>
			@import url("style.cs");
		</style> -->
	</head>
	<body>
		<h1>link标签或@import的应用</h1>
		<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
	</body>
</html>
实现效果：


两种导入样式表的方法比较：
1、从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2、加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3、权重区别
link 方式的样式的权重高于 @import 权重。
4、兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
5、DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
说明：
一般推荐使用 link 导入样式表的方法，@import 可以作为补充方法使用。
（学习视频分享：web前端）

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!

html5 firefox css css3 html JS dom href 样式表 input

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：Le HTML et le CSS sont-ils considérés comme des langages de programmation ?Article suivant：Le HTML et le CSS sont-ils considérés comme des langages de programmation ?

Articles Liés

Voir plus