CSS自学笔记.docx

CSS自学笔记
CSS样式表自学笔记
CSS的中文意思就是层叠样式表(cascading style sheet)。Web标准将页面的结构（数据HTML/XML）、表现（CSS）和行为（DOM/JS）相分离。当前的最新规f’)} 指定向div元素内部的尾端插入content属性对应的内容（图片）
包含选择器：selector1 selector2 {} 对处于selector1之内的selector2起作用，可以是子元素或孙子元素
子选择器：selector1>selector2 {} 目标选择器必须是某个选择器对应的元素的子元素。子选择器和包含选择器类似，区别在于子选择器要求目标选择器必须作为外部选择器的直接子元素才可以。
兄弟选择器：selector1~selector2 {} 在selector1的后面，能匹配selector2的兄弟节点。
选择器组合：selector1,selector2,selector3,…{} 各选择器之间是或的关系，以逗号分隔
通配选择器：*
属性选择器：
div[id]：对所有具有id属性的div元素其作用
div[id=xx]：有id属性值等于xx
div[id*=xx]：有id属性值包含xx
div[id^=xx]：有id属性值以xx开头
CSS应用样式的优先级：最近最优先原则
最近原则：元素中直接使用的CSS > 页面头部调用的CSS > 链接形式调用的CSS
最优先原则：ID选择符 > 类选择符 > 类型选择符
盒模型：
block类型：如DIV元素，是块级元素，默认占用一行，自上而下排列；可通过CSS设置宽、高。
inline内联类型：如SPAN或<a…/>元素，是行内定义的一个区域。没有固定形状，不会占据一行，无法设置宽、高，形状由其所含的内容决定。
float属性：控制目标是否浮动以及如何浮动。
None：默认，不浮动
Left/right：向左/右浮动
Inherit：继承父容器属性
clear属性：不希望某个DIV块状元素浮上去。通过此属性可以让浮动组件换行。这个规则只能影响使用清除的元素本身，不能影响其他元素。
None：默认，允许两边都有浮动元素
Left/right：不允许左边/右边有浮动元素
Both：两边都不允许有浮动元素
clip属性：对元素进行裁剪，值auto表示不裁剪，或只有在矩形rect(top,right,bottom,left)之内的区域才会显示
visibility属性：目标对象是否显示，值为visible和hidden，隐藏后其空间依然会被保留。
display属性：改变组件默认的盒模型
inline：改变为内联模式，改变后可以一行显示多个组件，且设置宽、高无效
block：改变为盒模式，改变后一行只能显示一个组件，可以设置宽度和高度
none：隐藏组件，且释放其页面空间
inline-block：这种盒模型是inline和block的综合，既不会占据一行，又可以设定宽度和高度。默认情况下，多个inline-block组件会底端对齐，如果要顶端对齐，则指定：vertical-align:top
inline-table：将一个表格更改为内联模式，即其左右可以出现其他内容。
table/table-row/table-column/table-cell：将某个组件显示为表格、行、列或单元格
table-caption/table-header-group/table-footer-group/table-row-group/table-column-group：表格相关显示
list-item：将目标组件转换为类似于ul的列表元素，list-style-type属性同时可以设置。
run-in：此组件希望显示在它后面的元素内部，即后面的盒包含显示此元素
box属性：可以更好地实现多栏布局，可自行控制分栏位置，更适合页面布局。
overflow属性：定义溢出内容区会如何处理。有两个子属性：overflow-x/overflow-y
visible：不剪切内容也不产生滚条，默认
auto：在需要时产生滚动条
hidden：不显示超出的内容部分，自动裁剪不够空间显示的内容
scroll：总是显示滚条，有可能即使元素框中可以放下所有内容也会出现滚动条。
box-shadow属性：为盒模型添加阴影，除了DIV，也可以对表格及单元格添加阴影
hOffset：控制阴影在水平方向的偏移
vOffset：控制阴影在垂直方向的偏移
blurLength：控制阴影的模糊程度
scaleLength：控制阴影的缩放程度
color：阴影的颜色