0
点赞
收藏
分享

微信扫一扫

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

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

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

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

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

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

看下语法规范:

   <link rel="stylesheet" href="css文件路径">

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


来看下最终的样式效果:

最开始没有效果的展示:

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

对应代码为:

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

 <!-- <link rel="stylesheet" href="style.css"> -->

</head>

<body>

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

</body>

</html>


修改后的显示效果为:


对应的代码为:

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

 <link rel="stylesheet" href="style.css">

</head>

<body>

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

</body>

</html>


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

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

对应文件内的代码为:


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

div {

 colorpink;

   

}


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


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

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

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

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


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


举报

相关推荐

0 条评论