网站首页 > 技术文章正文

「测试开发全栈-HTML」(20)css的引入方式-外部样式表和总结

hmc789 2024-11-25 12:50:58 技术文章 2 ℃

上午学习了HTML语言CSS样式的内部样式表，现在我们来学习下外部样式表。这是CSS样式表的一个重点。

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

引入外部样式表，分为两步:

1.新建一个后缀名为.css的样式文件，把所有CSS代码都放到这个样式文件中。

2.在HTML页面中，使用<link>标签引入.css这个文件

看下语法规范:

对于css文件路径，如果在同一个文件夹下，可以直接引用。如果不在同一个文件夹下，可以再引用下文件路径。

来看下最终的样式效果:

最开始没有效果的展示：

对应代码为:

<!DOCTYPE html>

<head>

<title>CSS之外部样式表</title>

</head>

<body>

<div>天生我材必有用，千金散尽还复来。</div>

</body>

</html>

修改后的显示效果为:

对应的代码为:

<!DOCTYPE html>

<head>

<title>CSS之外部样式表</title>

</head>

<body>

<div>天生我材必有用，千金散尽还复来。</div>

</body>

</html>

这里加入了<link>标签，<link rel="stylesheet" href="style.css"> 也引入了CSS的样式文件。具体文件内容为:

对应文件内的代码为:

/* 这个css文件里没有标签，只有样式 */

div {

color: pink;

}

先在外部新建一个 .css文件，然后通过link将css文件引入

接下来对CSS引入样式进行一个总结:

行内样式表: 优点是书写方便，权重高，缺点是结构样式混写，使用情况较少，控制范围是控制一个标签。

内部样式表: 优点是部分结构和样式相分离，缺点是没有彻底分离，使用情况较多，控制范围是控制一个页面。

外部样式表: 优点是完全实现样式和结构相分离，缺点是需要引入，使用情况最多，吐血推荐，控制范围是能够控制多个页面。

今天就先到这里了，明天进行综合案例分析。谢谢大家~