html注释:<!----> css注释:/**/
css样式:
- 行内样式(内联样式)
- 内部样式表(嵌入样式)
- 外部样式表
- 导入式
行内样式不建议大量使用。
内部样式:
外部样式:
外部样式:
<link rel="stylesheet" href="" type="text/css"/>
优点:
- Css和HTML分离
- 多个文件可以使用同一个样式文件
- 多文件引用同一个css文件,css只需下载一次
css导入式:
类选择器:
群组选择器:
全局选择器:
后代选择器:
伪类:
Css继承和层叠:
继承:
- 父元素设置样式,子元素可以继承部分属性
- 减少css代码
1.像border这类的属性不可继承。
div{
font-size: 12px;
border: 1px solid red;
}
<div>
<p>CSS<span>继承</span></p>
<div>CSS层叠</div>
</div>
<p>CSS继承和层叠</p>
2.假如用body设置整个的页面字体为12px,h1的默认字体为2em,也就是2倍的body字体。
所以h1的字体为24px.说明了当我们上级定义了样式,与我们元素本身默认的样式冲突的时候,这时回忽略继承得来的样式。
层叠:
css优先级:
优先级结果:id选择器>class选择器>标签选择器。
就近原则 :使用相同类型(class id)定义样式的时候,并且定义有冲突的时候(都定义颜色),后定义的样式会覆盖之前定义的样式。和在定义class值的时候的先后顺序无关。和定义样式的先后顺序有关。
CSS命名规则: