CSS（一）-- 三种样式表

时间：2025-03-11 07:04:16

目录

1.  行内样式表

2.  内部样式表

3.  外部样式表（即引入 .css文件）（重点掌握）

1.  行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式。

<div style="color: red; font-size: 12px;">还君明珠双泪垂，恨不相逢未嫁时。</div>
  • style 其实就是标签的属性，可以控制当前的标签设置样式。
  • 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。
  • 使用行内样式表设定 CSS，通常也被称为行内式引入。

2.  内部样式表

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。

<style>
div {
color: red;
font-size: 12px;
}
</style>
  • <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。
  • 通过此种方式，可以方便控制当前整个页面中的元素样式设置 代码结构清晰，但是并没有实现结构与样式完全分离 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。

3.  外部样式表（即引入 .css文件）（重点掌握）

实际开发都是外部样式表. 适合于样式比较多的情况.

核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.

引入外部样式表分为两步：

  1. 新建一个后缀名为 .css 的样式文件，把所有 css 代码都放入此文件中。
  2. 在 HTML 页面中，使用<link> 标签引入这个文件。
<link rel="stylesheet" href="css文件路径">

<link>的常用属性：

属性 说明
rel 指定链接的类型，比如样式表（stylesheet）、图标（icon）、指示浏览器预解析 DNS，加速域名解析（dns-prefetch）、指示浏览器预连接到相关资源，减少请求延迟（preconnect）、指示浏览器预请求资源，提高用户体验（prefetch）、指示某个链接为下一篇/上一篇文章，用于增强网站的导航性能（next/prev）等。
href 指定链接资源的路径和文件名（可以是相对路径，也可以是绝对路径）。
type 指定链接资源的 MIME 类型，比如 text/css、image/png 等，对于 CSS 文件可以省略该属性。
integrity 指定链接资源的完整性校验码，用于验证资源是否被篡改。
crossorigin 指定链接资源的跨域属性，可选值为 anonymous、use-credentials。
media 指定样式表的媒体类型，比如 screen、print、all 等。

实例演示：

下面是一个使用 link 标签链接样式表的例子：

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
	<h1>《蜀相》</h1>
    <p>唐⋅ 杜甫</p>
	<p>三顾频烦天下计，两朝开济老臣心。</p>
</body>
</html>

在这个例子中，我们使用 link 标签链接了一个名为 的样式表文件。rel 属性指定了链接的类型，type 属性指定了链接资源的 MIME 类型，href 属性指定了链接资源的路径和文件名。在这个例子中，type 属性可以省略，因为浏览器可以自动识别 CSS 文件。

link 标签还可以用于链接网站图标（通常是一个 .ico 文件）,如下：

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
	<link rel="icon" type="image/png" href="">
</head>
<body>
	<h1>怎样都好，只要能让他们发笑就好。</h1>
	<p>-人间失格</p>
</body>
</html>

在这个例子中，我们使用 link 标签链接了一个名为 的图标文件。rel 属性指定了链接类型为 icon，type 属性指定了图标文件的 MIME 类型，href 属性指定了链接资源的路径和文件名。在这个例子中，我们使用了 type 属性，因为不同浏览器对于网站图标的 MIME 类型的支持有所不同。

除了样式表和图标，link 标签还可以用于链接其他资源，比如字体、脚本等。需要注意的是，使用 link 标签链接外部资源需要保证链接路径的正确性和服务器端的资源访问权限。

继续学习之路：

CSS（一）-- 三种样式表

CSS（二）-- 选择器的运用（针对基本选择器和复合选择器的详细解析）

CSS（三）-- 伪类选择器与伪元素选择器

CSS（四）-- 针对字体、文本的常用基本属性

如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！

相关文章