1 CSS基本语法
1.1 基本特性
由选取器、属性、属性值三部分形成 selector {property: value}
1.2 引用办法
行内样式
<div style="color: red;"...
内部样式表
<head>
<style type="text/css">
</style>
...
</head>
外边样式表(页面加载的同期亦加载css样式表,倘若多个页面引用同一个css样式,则没需重复加载)
<link href="./css/1.css" rel="stylesheet" type="text/css"/>
导入式(1.页面加载慢的时候可能会有问题 2.存在浏览器兼容性问题)
<style type="text/css">
@import url("./css/1.css");
</style>
1.3 引用优先级
行内样式 > 内部样式(内部定义 > @import引入) > 外边样式
注:链入外边样式和内部样式的优先级取决于离渲染的标签的位置,越近优先级越高(就近原则)
2 CSS选取器
2.1 选取器(标签选取器和类选取器)
标签选取器:标签名为选取器,引用该样式的页面的对应标签都会运用该样式
类选取器:
1.标签中的class属性值为选取器,以点开头,并且在html页面中能够被多次调用
2.一个标签能够加载多个类选取器,用空格隔开。不一样式进行叠加,冲突样式属性已最下面的样式的属性为准(就近原则)
2.2 选取器(ID选取器)
同一个id值不可赋给多个标签,但同一个ID选取器在CSS样式设置时,能够被多次运用。
<style type="text/css">
#diTest{
font-size: 60px;
}
#diTest{
color: blueviolet;
}
</style>
2.3 群组选取器和全局选取器
群组选取器(能够将任意多个选取器分组在一块,例如元素选取器、类选取器、ID选取器等)
p.classChoose,#diTest{text-decoration: underline}
全局选取器
*{text-decoration: underline}
2.4 后代选取器
1.写法(用空格隔开):
h5.class em{color: blueviolet}
#id em{color: blueviolet}
2.优先级高于类选取器
2.5 伪类选取器
1.语法:选取器:伪类标识{}
2.应用场景:区别状态下表示不一样式
3.链接伪类的书写次序::link > :visited > :hover > :active
a:hover必要置于a:link和a:visited之后,才有效,a:active必要在a:hover之后,才有效。而link、visited两个伪类之间次序没所说,谁在前都能够。
3 CSS继承、层叠和优先级
3.1 继承和层叠
1.继承:子元素能够从父元素处继承部分样式
字体体积、颜色能够继承,border没法继承
兼容性问题:IE6以下版本预览器无继承特性
默认样式与继承样式冲突时,默认运用默认样式。针对有默认样式的元素,例如h1标签的默认字体体积为2倍于预览器的默认字体(16px),倘若设置body标签选取器的字体大小为12px,则h1的体积就为24px
2.层叠
可定义多个样式
不冲突时,多个样式层叠为一个
冲突时,按照样式的优先级来应用样式
3.2 选取器优先级
id选取器 > class选取器(class属性有多个样式时,按样式的定义就近原则,与引用的次序无关系) > 标签选取器
3.3 权值
权值相同
|