使用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原则
主要用于调整样式的优先级