本文深入探讨了CSS的作用，包括修饰页面、控制布局、提高开发效率等方面，并详细介绍了CSS的基本结构、注释、简写、选择器、伪类、伪对象等关键概念。同时，文章还讲解了CSS的选择权规则、优先级判断以及与HTML样式的交互，旨在为开发者提供全面的CSS学习路径。
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布局核心技术》
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
