层级选择器：后代选择器、子代选择器
l 后代选择器：又称包含选择器，用于选择某元素的后代元素：
selector1selector2
子代选择器：用于选择某元素的直接子代元素
selector1>selector2
伪类选择器（pseudo[‘su:dou]）
伪类选择器向某些选择器添加特殊的效果
l 使用冒号（:）作为结合符：[selector]:pseudo
分类：
1、链接伪类：
:link，代表尚未访问的链接
:visited,代表访问过的链接
2、动态伪类：
:hover,代表鼠标悬停在元素上方
:active,代表鼠标在元素上按着的时候
:focus,代表表单元素获取鼠标的焦点时
选择器的优先级：
尺寸和边框
尺寸单位：
%：占父元素的百分比
in：英寸
cm:厘米
mm:毫米
pt:磅（1pt等于1/72英寸）
px:像素（计算机上的一个点）
em:1em等于当前的字体的尺寸，2em是当前字体尺寸的两倍。
颜色单位：
rgb(x,x,x):RGB值，0 <= x<= 255
rgb(x%,x%,x%):RGB百分比值
#rrggbb:十六进制数，如#FF0000,#FFFF00
#rgb:简写，如#F00,#FF0
颜色名称,如red,orange,yellow,green,cyan,blue,purple
尺寸属性：
宽度属性：width/max-width/min-width
高度属性：height/max-height/min-height
溢出：内容大于容器尺寸会导致内容溢出
overflow：visible(默认)/hidden(隐藏超出部分)/scroll（出现滚动条）/auto（根据内容自动选择是否出现滚动条）
overflow-x/overflow-y：同上
哪些HTML元素可以设置尺寸属性？
块级元素：p,div,hn,ul,ol,li,dl,dt,dd等
存在width/height属性的元素：img,table等
边框属性border
简写：border:border-width
border-style border-color,例如border：1px solidblack
没有边框 border:none;
单边定义：border-left/border-right/border-top/border-bottom
border-bottom:none;
拆分方式：
border-width:1px;
单边方式border-left-width:1px;
border-style:solid（默认，实线）/dashed(虚线)/dotted（点线）
单边方式border-left-style:solid;
border-color:red
单边方式border-left-color:red;
边框倒角（圆角）CSS3
border-radius:val1[val2 val3 val4];
1个值：4个角一样
2个值：val1代表左上和右下，val2代表右上和左下
3个值：val1代表左上，val2代表代表右上和左下，val3代表右下角
4个值：从左上顺时针转一圈
单边：
border-top-left-radius:10px 左上角
border-top-right-radius:10px右上角
border-bottom-left-radius:10px左下角
border-bottom-right-radius:10px右下角
浏览器兼容性：
-ms-border-radius:5px;/*兼容IE9以前的*/
-moz-border-radius:5px;/*兼容老版火狐*/
-o-border-radius:5px;/*兼容老版opera */
-webkit-border-radius:5px;/*兼容老版chrome和safari */
边框阴影box-shadow:CSS3
box-shadow:h-shadowv-shadow blur spread color inset
前两个是偏移量
第三个是模糊程度
第四个是延展距离
第五个是阴影颜色
第六个是内阴影（inset）还是外阴影（默认outset）
图片边框CSS3
border-image:sourcewidth repeat
拆分写法：
border-image-source:图片路径
border-image-width:边框宽度
border-image-repeat:重复方式，可选平铺（repeat）、铺满(round)、拉伸（stretch)
轮廓CSS3
outline：1px solidcolor;
网友评论