概述
CSS样式规则
css作用：设置HTML版面的布局和外观的显示样式
一、引入CSS样式表
1、行内式（内联样式）
概念：
称为内样式，行间样式
是通过标签的style属性来设置元素的样式
语法格式：
<标签名 style="属性1：属性值1； 属性2：属性值2；属性3：属性值3；">内容</标签名>
2、内部样式表（内嵌样式表）
概念：
称内嵌式
是将CSS代码集中卸载HTML文档的head头部标签中，并用style标签来定义
语法格式：
<style type="text/css">
选择器{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}
</style>
示例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
h1{
color:green;
font-size: 10px;
}
</style>
</head>
3、外部样式表（外链式）
将所有样式放在一个或多个以.css为扩展名的外部样式表文件中
通过link标签将外部样式文件链接到HTML文档中
语法格式：
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
注意
link是单标签
link标签需要放在head头部标签中，并且指定link标签的三个属性
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为stylesheet，表示被链接的文档是一个样式表文件 |
| type | 定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
4、三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式 | 书写方便，权重高 | 没有实现样式和结构分离 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结果哟和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制整个站点 |
样式书写有两种
一种是紧凑型：
h3 {display:block; width: 50px;}
一种是展开格式：
h3 {
color: deppink;
font-size: 20px;
}
最后
以上就是飞快香水为你收集整理的CSS样式规则的全部内容，希望文章能够帮你解决CSS样式规则所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复