HTML引入CSS样式的方式详解
1.1内联属性（Inline style attribute）
直接修改HTML元素的style属性，将CSS代码直接写在style属性里。
例：
<h1 style="font-size: 12px;">我的字号被修改了</h1>
1.2直接写在style标签里
通过选择器选择HTML元素，将CSS样式放在<style>标签中，<style>标签一般要求写放在<head>标签里。如果不写在<head>标签里有些浏览器会报错。
例：
<style>
h1{
font-size:12px;
}
</style>
1.3外部链接调用
1.3.1链接方式——<link>标签
定义：
<link>标签定义文档与外部资源的关系。
语法：
<link rel="stylesheet" href="styles.css" />
注意：<link>标签一般写在<head>标签里。
常用属性：
rel属性，规定当前文档与被链接文档之间的关系。如："stylesheet"表示文档的外部样式表。
href属性，设置引用CSS文件的路径。
tyle属性，规定链接文档文件类型。
media属性，规定应用的设备。如："screen"是默认值，说明应用在计算机屏幕上。
1.3.2导入方式——CSS@规则（@import）
定义：
@import是CSS@规则，用于加载外部层叠样式表。
语法：
<style [type="text/css"]>
@import url(../CSS/style.css);
</style>
注意：<style>标签一般写在<head>标签里。
1.3.3链接方式和导入方式的比较
相同点：
两者的目的相同，都是将一个独立的CSS文件引入到HTML文件中。
不同点：
语法不同，链接式使用HTML的标记引入外部CSS文件，而导入式则是使用CSS的规则引入。
CSS文件加载顺序不同，当HTML文件被加载时，链接式引用的文件会同时被加载，而导入式引用的文件则会等页面全部下载完毕再被加载。
兼容性不同，由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而<link>标签无兼容性问题。
功能多样性不同，<link>除了调用CSS外还可以有其他作用，譬如声明页面链接属性，声明目录等，而@import就只能调用CSS。
<link>标签支持使用JS控制DOM去改变样式；而@import不支持。
引入多个CSS文件的方式不同。链接式引入多个CSS文件，使用多个<link>标签，而导入式除了使用多个@import，还可以在css文件中嵌套CSS文件。
1.4总结
没有特殊要求下，应尽量使用<link>标签导入外部CSS文件，避免或者少用使用其他方式。
1.5实例详解——引入多个CSS文件
例1-1：
<!DOCTYPE html>
<html>
<head>
<title> 链接式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../CSS/PublicStyles.css"/>
<link rel="stylesheet" href="../CSS/styles.css"/>
</head>
<body></body>
</html>
PublicStyles.css文件代码
div {
background:black;
}
style.css文件代码
#box {
color:red;
}
例1-2：
<!DOCTYPE html>
<html>
<head>
<title> 导入式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@import url(../CSS/ PublicStyles.css);
@import url(../CSS/style.css);
</style>
</head>
<body></body>
</html>
PublicStyles.css文件代码
div {
background:black;
}
style.css文件代码
#box {
color:red;
}
例1-3：
<!DOCTYPE html>
<html>
<head>
<title> 导入式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
@import url(../CSS/style.css);
</style>
</head>
<body></body>
</html>
PublicStyles.css文件代码
div {
background:black;
}
style.css文件代码
@import url(../CSS/ PublicStyles.css);
#box {
color:red;
}
注意：此方法有一个缺点，会对网站服务器产生过多的HTTP请求。以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。
1.6三种方式的CSS样式执行优先级
内联式>内嵌式>外部引用式。
分享到：
发表评论
-
html框架之iframe和frame及frameset
2019-01-22 14:55 4218html框架之iframe和frame及f ... -
Select下拉选择框的美化
2017-11-02 17:19 3350Select下拉选择框的美化 1.1 CSS修改select下 ... -
Input元素去除获取焦点时的边框
2017-11-02 10:27 7020Input元素去除获取焦点 ... -
Input[type="radio"]和Input[type="checkbox"]的选中
2017-11-01 17:03 1664Input[type="radio"]和I ... -
Input只读属性详解
2017-11-01 16:27 1699Input只读属性详解 1.1概述 Reado ... -
input[type="file"]标签的美化
2017-11-01 15:34 1183input[type="file"]标签的 ... -
html布局之table表格布局
2017-09-25 08:52 3484html布局之table表格布局 1.1 table布局 1、 ... -
HTML实现页面自动跳的方法
2017-09-14 11:42 945HTML实现页面自动跳的方法 1.1方法一 直 ... -
html marquee标签讲解
2017-09-01 09:02 1688html marquee标签讲解 1.1概述 ... -
html路径小结
2017-08-25 09:38 621html路径小结 1.1概述 ... -
html meta标签用法详解(一)
2017-08-24 10:18 1191html meta标签用法详解(一) 1.1概述 ... -
Hack技术总结
2017-08-23 11:22 967Hack技术总结 1.1概述 ... -
HTML行内元素和块级元素的转换
2016-10-07 16:24 6292HTML行内元素和块级元素的转换 1.1 CSS displa ... -
div元素按比例缩放的实现方法
2016-09-08 17:54 16162div元素按比例缩放的实现方法 某些场景下，窗 ... -
HTML img布局问题详解
2016-09-08 16:52 1172HTML img布局问题详解 1.1 ... -
HTML中空格的实现方法详解
2016-09-08 15:15 2417HTML中空格的实现方法详解 浏览器总是会截短 ... -
RGB颜色与HEX十六进制颜色的换算
2016-09-07 20:57 1102RGB颜色与HEX十六进制颜色的换算 1.1换算表格 ... -
Web语义化详解
2016-07-21 14:51 660Web语义化详解 1.1概述 Web语义化主 ... -
DIV+CSS布局和TABLE布局详解
2016-07-21 10:53 808DIV+CSS布局和TABLE布局详 ... -
设置input输入框为只读方法详解
2016-07-18 11:02 4942设置input输入框为只读方法详解 1.1禁用状态与启用状态 ...
相关推荐
CSS（Cascading Style Sheets）则负责网页的样式和布局，使得网页内容能够以美观的方式呈现。JavaScript是一种解释型的、跨平台的脚本语言，主要用于增加网页的交互性和动态功能，比如表单验证、动画效果、响应式...
《网页样式设计:CSS使用详解》是一本深入探讨CSS（层叠样式表）技术的书籍，旨在帮助读者理解和掌握网页设计中的样式控制。CSS作为网页设计的核心组成部分，它赋予了HTML元素丰富的样式和布局能力，使得网页设计更具...
1. `style.css`: 这是外部样式表文件，包含CSS样式规则。 2. `6-1课堂演示.html`: HTML文件，通过`<link>`元素引入`style.css`。 在`6-1课堂演示.html`中，我们这样使用`<link>`元素引入`style.css`： ```html <!...
在IT领域，CSS（Cascading Style Sheets）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。本案例详解将深入探讨CSS布局的各个方面，帮助你掌握创建高效、响应式和美观网页布局的关键...
CSS可以通过内联样式（直接写在HTML元素的`style`属性中）、内部样式表（写在`<style>`标签内，位于`<head>`中）或外部样式表（写在单独的.css文件中并链接到HTML文件）三种方式引入。 了解HTML和CSS是创建响应式、...
1. **内联样式**：直接在HTML元素中使用`style`属性添加CSS样式，但不推荐，因为不利于代码复用和维护。 2. **内部样式表**：将CSS写入`<style>`标签内，置于`<head>`中，适用于整个页面的样式统一。 3. **外部...
在JSP中，我们可以使用JSTL（JavaServer Pages Standard Tag Library）或EL（Expression Language）来引入CSS资源，例如通过`<link>`标签来链接外部CSS文件，或者直接在JSP页面中使用`<style>`标签内联定义样式。...
3. **外部样式表**：将CSS代码存储在单独的`.css`文件中，然后通过`<link>`标签在HTML文档中引用。这种方式是最推荐的，因为可以实现样式与内容的完全分离，方便管理和复用，同时便于团队协作和网站的全局更新。 **...
CSS3（Cascading Style Sheets Level 3）是Web样式表语言的一个版本，它引入了许多新的特性和功能，其中包括强大的动画能力。在本分享中，我们将深入探讨CSS3动画的核心概念，理解其背后的机制，并通过实例来展示...
CSS样式的定义主要涉及样式规则的创建，包括属性和值的配对，用于控制元素的样式，如颜色、字体大小、布局等。样式规则可以被定义在不同的地方，包括内部样式表（位于HTML文档的`<head>`部分）、外部样式表（单独的....
### CSS样式复习题知识点解析 #### 一、基础知识概述 - **CSS**：全称**Cascading Style Sheets**（层叠样式表），是一种用来表现HTML或XML等文件样式的计算机语言。它允许用户对页面进行更加精细的控制，使得网页...
**CSS中文样式表详解** CSS，全称Cascading Style Sheets，中文译为层叠样式表，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它能让你将样式规则从内容中分离出来，使网页设计...
**CSS详解教程（基础）** CSS，全称为Cascading Style Sheets，中文译为层叠样式表，是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要作用是将内容与表现分离，使得网页...
**CSS样式说明书** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它负责定义HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现方式。本说明书将深入探讨CSS的核心概念、语法以及各种标签...
2. **内联样式、内部样式表与外部样式表**: 内联样式直接应用于HTML元素，内部样式表位于`<head>`中的`<style>`标签内，外部样式表以`.css`文件形式引用。 3. **优先级**: CSS的优先级由选择器的特殊性决定，内联...
**CSS2.0详解** CSS（层叠样式表）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言。CSS2.0是CSS的一个重要版本，于1998年5月由W3C发布，是继CSS1.0之后的第二个官方标准，为网页设计...
**北大青鸟CSS样式表详解** CSS（Cascading Style Sheets）样式表是网页设计中的核心技术，用于控制网页元素的布局、颜色、字体等视觉表现。它赋予了HTML内容丰富的表现形式，使得网页设计更加灵活和多样化。在...
1. **CSS基础**：解释了CSS的基本语法、选择器的使用、属性设置，以及如何在HTML中引入CSS（内联、内部和外部样式表）。 2. **盒模型**：详细介绍了CSS盒模型，包括内容区域、内边距、边框和外边距，以及如何计算...