CSS引入方式
一、
按照CSS样式书写的位置（或者引入方式），CSS样式表可以分为三大类；
二、分类
1、行内样式表（行内式）
1>定义
行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式;
2>语法
<div style="color: red; font-size: 12px; ">青春</style>
3>注意点
(1)、style其实就是标签的属性；
(2)、在双引号中间，写法要符合CSS规范；
(3)、可以控制当前的标签设置样式；
(4)、由于书写繁琐，并且没有体现出结构与样式分离的思想，所以不推荐大量使用，只有当前元素添加简单样式的时候，可以考虑使用；
(5)、使用行内样式表设定CSS，通常也被称为行内式引入；
2、内部样式表（嵌入式）
1> 定义
内部样式表（内嵌样式表）是写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个
2> 语法格式：
<style>
div {
color: green;
font-size: 12px;
}
</style>
3> 注意点:
(1)、标签
3、外部样式表（链接式/导入式）
<1> 连接式
1> 定义
实际开发都是外部样式表，适合于样式比较多的情况。核心样式是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用;
2> 引入外部样式表分为两步
(1)、新建一个后缀名为 .css 的样式文件，把所以CSS代码都放入此文件中；
(2)、在HTML页面中，使用标签引入这个文件；
eg：<link rel="stylesheet" href="css文件路径">
/* <link>是单标签 */
/*<link>标签要写在<head>标签内 */
(3)、属性
rel——定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被连接的文档是一个样式表文件；
href——定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径；
3> 注意
使用外部样式表设定CSS，通常也被称为外链接或链接式引入，这种方式是开发中常用的方式
<2>、导入式
<style>
@import url(css文件路径);
</style>
三、优缺点
1、外部样式表
<1>、优点
给文档的显示提供一致性，管理简单；容易被其他网页作者拷贝；
<2>、缺点
浏览器需要下载样式表，增加了访问页面的时间；
2、文档样式表
<1>、优点
创建自定义文档，改写外部样式表中的一条或多条规则；便于测试即将加入到外部样式表的新规则；
<2>、缺点
适合给单个文档加规则，不适合管理一个文档集，即适合于当前页面；
3、内联样式表
<1>、优点
优先级较高，可覆盖文档样式表或外部样式表中的样式；
<2>、缺点
难维护、难阅读、且具有局部效果，应尽量少用内联样式；
四、总结
扫一扫
8088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
