CSS作用
- 修饰页面,避免不必要的HTML元素
- 更有效地控制页面结构、布局
- 提高开发和维护效率
CSS基本结构
selector {property:value;}
CSS中的注释
/*版本版权*/ body { color:#FF0000; ... } /*将<body></body>的样式定义为...*/
CSS中的简写
颜色:#FFFFFF,#FFF,RGB(255,255,255),RGB(100%,100%,100%),black
单位:数值为0时单位可省略
内外补丁:value1,所有边都一样;value1,value2,上下1,左右2;value1,value2,value3,上1左右2下3;value1,value2,value3,value4,上右下左
边框:width,style,color (boder:1px solid,#FFFF00)
CSS中的选择器
* 通配符
.class 类选择符
a b 包含选择符(派生选择符,后代选择符),包含在a选择符中的b选择符
a > b 子选择符,a儿子节点中的b选择符
a + b 相邻选择符,同父元素下,与a之后的b选择符
E[attr],E[attr="value"],E[attr~="value"],E[attr|="value"],属性选择符,分别指:具有attr属性,attr属性指为value,attr属性值为被空格隔开且存在value,attr属性值以value开始后面用横字符隔开
ID选择符
CSS中的伪类
:link,:visited,:hover,:avtive,
CSS中的伪对象
:before,:after,
CSS中的覆盖、继承、优先级别
优先级别由高至低:
- 标有!important关键字声明的属性
- HTML中的样式属性
- 作者编辑的样式文件
- 用户设置的样式
- 浏览器的默认样式
优先积分:
- 标签选择符、伪类:1分
- 类选择符、属性选择符:10分
- Id:100分
- Style:1000分
- 其他,如通配符:0分
- !important 其他的均被覆盖
注:本读书笔记应用《CSS那些事——掌握网页样式与CSS布局核心技术》