使用CSS样式表的三种方式
1.内联样式 又称为"行内样式"，"内联样式"；
特点：将CSS内容定义在HTML标记中
语法:
<div style = "background : red；color ： green">
内联样式
</div>
不推荐使用：不利于样式和结构进行分离，由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
2.内部样式 在网页中一个独立的地方表明该网页要用到的所有样式语法
特点：将样式和结构进行了一定程度的分离
语法：
<style>
div {
background : red;
color : green;
}
</style>
一般情况下亦不推荐使用虽然进行了分离，但全部也在页面中显得页面非常臃肿。
3.外部样式表 独立于任何网页位置处，声明一个样式表文件（样式表名.css），在文件中声明样式。当需要样式时在对应的网页中进行引用
语法：
<head>
<link rel="stylesheet" href="xxx.css">
</head>
推荐使用，对样式和结构进行了完全分离，当页面需要进行改版和变化时只需要改变引入对应的css样式表即可，同时一个样式表亦可以被多个网页进行引用，可提高复用率。
注意
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
补充CSS样式表特征
- 继承性
必须是父子（有层级关系）结构
大部分的CSS效果都是可以直接继承给子元素的
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
- 层叠性
可以给一个元素定义多个样式规则，规则中的样式如果不冲突的话可以全部应用在当前的元素上
div {
color ： red;
}
div {
background：yellow;
}
div {
font-size：26px;
}
最终渲染结果为所有div背景为黄色字体颜色为红色字体大小为26px;
- 优先级
在层叠性基础上，如果样式声明冲突（重复）的话，则按照默认的优先级去应用样式由。
1.浏览器默认设置 优先级最低
2.样式表（内部和外部） 优先级权重相同，最终样式采用就近原则 --- 后定义优先
3.内联样式 优先级最高 - ！important原则
主要用于调整样式的优先级
网友评论