2.3 高级选择器(接读书笔记01)
1、层叠
层叠给每个规则分配一个重要度,重要次序如下:
- 标有!important的用户样式
- 标有!important的作者样式
- 作者样式
- 用户样式
- 浏览器/用户代理应用的样式
2、特殊性
规则的特殊性由选择器的数字值之和计算。总结如下:
- 用style属性编写的规则总是>>>>其他规则
- 具有ID选择器的规则>>>>无ID选择器的规则
- 具有类选择器的规则>>>>只有类选择器的规则
- 若两个规则特殊性相同,后定义的规则>>>>前定义的规则
tips:
- 若遇到没有起作用的CSS规则,可尝试在选择器中添加一个父元素的ID,提高其特殊性。
- 尽量保持一般性样式非常一般,特殊性样式尽可能特殊。
- 可在主体标签上使用类标识页面类型,ID标识特定页面。
3、继承
应用样式元素的后代会继承样式的某些属性,比如颜色和字号。
直接应用于元素的任何样式会覆盖继承的样式,继承而来的样式的特殊性为空。
2.4规划、组织和维护样式表
1、对文档应用样式
对外部样式表附加到网页上有两种方法:1、链接它们 。 2、导入它们:
/* 两种方法都放在html的<head>中 */
/* 1.链接 */
<link href="/css/basic.css" rel="stylesheet" type="text/css"/>
/* 2.导入 */
<style type="text/css">
<!--
@import url("/css/advanced.css"); /*通过@import引用css的样式内容 */
-->
</style>
从另一个样式表导入样式表:从HTML页面链接基本样式表,然后将复杂的样式表导入这个样式表。
@import url(/css/layout.css);
注意:
- 导入样式表比链接样式表慢
- 使用结构良好的单一CSS文件可以显著提高下载速度
- 当CSS文件非常长时,可以在每个样式的注释头添加特定的标志,便于搜索样式
设计代码结构
为了便于维护,最好将样式表分为几大块,使用风格统一的大注释块分隔每个部分。文档结构次序如下:
/* @group general styles */
- 一般性样式
- 主体样式
- reset样式
- 链接
- 标题
- 其他元素
/* @group helper styles */
- 辅助样式
- 表单
- 通知和错误
- 一致的条目
/* @group page structure */
- 页面结构
- 标题、页脚和导航
- 布局
- 其他页面结构元素
/* @group page components */
- 页面组件
- 各个页面
/* @group overrides */
- 覆盖
tips: 代码分隔越细致、越合理、越容易理解与搜索。
自我提示
复杂的大型项目中,在CSS文件中添加临时注释,例如颜色表。
关键字可用来区分重要的注释:
- @todo:某些东西需要在以后修改、复查
- @bugfix:代码或特定浏览器遇到的问题
- @workaound:不完善的权宜之计
删除注释和优化样式表
注释会使CSS文件显著加大。减小文件大小可通过:
- “搜索并替换”删除注释
- CSS优化器
- 启用服务器压缩(最好方式)
第三章 可视化格式模型
3.1 盒模型概述
盒模型由元素的内容(width,height),内边距(padding),边框(border),外边距(margin)组成。
外边距叠加
当两个或多个垂直外边距相遇时,它们将形成一个外边距,高度为较大者。
tips:只有普通文档流中快框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。
3.2 定位概述
1、可视化格式模型
行内框
行内框在一行中水平排列。
水平各边距可以调整水平间距,垂直边距不起作用。
修改行内框尺寸的唯一方法是修改行高或水平边框、内边距或外边距。
块级框
从上到下一个个垂直排列,框之间的垂直距离由框的垂直外边距计算。
display属性
- display:inline-block: 让元素像行内元素一样水平依次排列,框的内容仍符合块级框。
- display:none:这个框及其所有内容不再显示。
2、相对定位
相反移动,占据空间
通过设置垂直或水平位置,让这个元素“相对于”它的起点移动。它原本的空间仍保留,移动元素会覆盖其他框。
例如:将top设置为20像素,框出现在原位置顶部下面20像素的地方。
3、绝对定位
位置相对于已定位的祖先或初始包含快,不占空间
绝对定位的元素与文档流无关,不影响普通流中的框。若扩大绝对定位的框,周围的框不会重新定位,会发生重叠。
固定定位
固定元素的包含块是视口(viewport),能够创建总是出现在窗口中相同位置的浮动元素。使元素在页面滚动时一直出现在屏幕上的固定位置。
4、浮动
不占空间
- 浮动框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘。
- 浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
- 若包含块太窄,无法容纳水平排列的浮动元素,则其他浮动块会下移,直到有够的空间的地方。
- 若浮动元素高度不同,则下移时可能会被卡住,如下图:
行框
浮动元素后面有一个文档流中的元素时,元素框的文本内容受到浮动框的影响,形成:行框围绕浮动框,实际中可创建浮动框使文本可以围绕图像。
清理
clear
若要阻止行框围绕在浮动框外边,需要对包含这些行框的元素应用clear属性。
clear属性的值可以是left,right,both或none,表示框的哪些边不应该挨着浮动框。
可用于容器包围浮动元素:添加一个进行清理的空元素。clear:both。常常有现成的元素可以应用clear。
overflow
定义在包含的内容对于指定的尺寸太大的情况下元素应怎样,默认会溢出进入相邻空间。
应用值:hidden或auto
作用:自动清理包含的任何浮动元素。