一.选择器详解 1.子代选择器 作用：通过元素的子代（一层嵌套）关系匹配元素。 语法：选择器1>选择器2{样式声明} 2.伪类选择器 作用：匹配元素不同的状态 语法：所有的伪类以:开始的 选择器:伪类选择器{样式声明} 伪类选择器分类： (1)链接伪类 :link 匹配元素尚未访问时的状态 :visited 匹配元素访问过的状态 (2)动态伪类 :hover 匹配鼠标悬停在元素上时的状态 :active 匹配元素被激活时的状态 :focus 匹配元素获取焦点时的状态
练习： 在页面中增加一个a标记，并设置以下效果： 1.链接未访问时，颜色为红色，没有下划线 （text-decoration:none;）。 2.鼠标悬停时，文本颜色为黄色。 3.被激活时，文本为橙色。 4.访问后，文本颜色为绿色。 在页面中再增加一个输入框，默认文本颜色为灰色，字体为斜体（font-style:italic） 1.被激活时，字体为非斜体(font-style:normal)。 2.获取焦点时，文本颜色为红色。3.选择器的优先级 权值：标识当前选择器的重要程度，权值越大的优先级越高。 元素选择器 1 类选择器 10 伪类选择器 10 ID选择器 100 内联样式 1000 选择器的权值加到一起，大的优先，权值相同，以后定义为主。 二.尺寸与边框 1.单位 1.尺寸单位 px：像素（1024*768） in：英寸（1in=2.54cm） pt：磅（1pt=1/72in）表示文字大小 cm：厘米 mm：毫米 em：相对单位（相对于元素本身字体的大小乘以倍数 ex:2em） rem：相对单位（相对于根元素字体的大小乘以倍数 3rem ） %：相对单位（50%） 2.颜色单位（取值） 1.英文单词（red,blue,black,yellow,orange…） 2.rgb(r,g,b) r:red; g:green; b:blue; r,g,b取值范围0-255 ex: rgb(0,0,255) 3.#rrggbb 由6位16进制的数字和字母表示一个颜色 由0-9和A-F组成 #eeeeee 灰色 #000000 黑色 #ffffff 白色 4.#rgb是上面的缩写形式 #eeeeee–>#eee 5.rgba(r,g,b,alpah) alpah:透明度，取值0-1的小数，值越小越透明 2.尺寸属性 1.作用 改变元素的宽度和高度 2.语法 1.宽度 width min-width:最小宽度 max-width:最大宽度 2.高度 height min-height:最小高度 max-height:最大高度 3.页面中允许设置尺寸的元素 1.所有块级元素都允许设置尺寸 div,p,h1-h6,结构标记,ul,ol,dl 2.行内块元素允许设置尺寸 表单控件元素（单选按钮，复选框除外） 3.本身具备width和height属性的元素 img,table 注意：大部分的行内元素是无法修改尺寸的。 3.溢出处理 当内容多，元素区域小的时候，就会产生溢出的效果，默认都是纵向溢出。 属性：overflow/overflow-x/overflow-y 取值： 1.visible 可见的，溢出可见，默认值 2.hidden 隐藏的，溢出的内容全部隐藏，不可见 3.scroll 显示滚动条，溢出时可用 4.auto 自动，溢出时自动显示滚动条并可用 练习：参考视频中效果，完成溢出处理 (边框的设置：border:1px solid black;) 4.边框 1.边框的简写方式 border:width style color; width:边框的宽度，以px为单位的数字 style:边框的样式 取值：solid 实线 dotted 虚线（点） dashed 虚线（线） color:边框颜色，合法的颜色值，也可以为transparent 透明色 注意： 取消边框：border:0/none;
练习：在网页中创建一个id为main的div元素，设置尺寸为200px*200px,并设置4个方向的边框为1px的宽度，实线，红色。（2分钟） 2.单边定义 只设置某一条边的三个属性。 属性： border-top/bottom/left/right:width style color 练习：在上面练习的基础上，设置上边框为2px 颜色为蓝色，边框的样式为虚线（dotted） 3.单属性设置 设置四条边框的某一个属性。 属性： border-width/style/color:值; ex: border-color:red; 4.单边单属性 只设置某一条边的某一个属性 属性： border-方向-属性：值; ex： 设置上边框的颜色 border-top-color:red;5.边框倒角 将元素的四个角，由直角倒成圆角。 属性： border-radius:值; 取值：以px为单位的数字 或者 百分比（圆形） 单角设置： border-top-left-radius:左上角 border-bottom-left-radius:左下角 border-bottom-right-radius:右下角 border-top-right-radius:右上角 6.边框阴影 属性：box-shadow 取值：h-shadow v-shadow blur spread color inset; h-shadow:阴影在水平方向的偏移，必须值 取值为正，阴影向右偏移 取值为负，阴影向左偏移 v-shadow:阴影在垂直方向的偏移，必须值 取值为正，阴影向下偏移 取值为负，阴影向上偏移 blur:阴影模糊距离，取值越大，模糊效果越明显 spread:阴影的尺寸，指定要在基础阴影上扩充出来的大小距离 color:阴影的颜色 inset:将默认的外阴影改为内阴影 练习： 1.在上午溢出练习基础上，当鼠标悬停在图片上时，为图片添加向右下方偏移的阴影效果，偏移尺寸为5px,阴影颜色为灰色。（2分）
2.设置一个圆形的外发光效果（外阴影）（3分钟）7.轮廓 轮廓指的是边框的边框，绘制于边框外的一条线。 属性： outline:width style color; outline:none/0 取消轮廓 三.框模型（重点） 1.什么是框模型 框：页面上的元素皆为框 框模型：box model盒子模型，定义了元素框处理元素的内容，内边距，外边距以及边框的一种计算方式。 外边距：元素与元素之间的间距。 内边距：元素边框与内容之间的间距。 框模型的计算方式： 元素实际占地宽度=左右外边距+左右内边距+左右边框+width 元素实际占地高度=上下外边距+上下内边距+上下边框+height 2.外边距 1.什么是外边距 围绕在元素边框外的空白间距，就是外边距。 2.语法 属性： margin:定义某元素四个方向的外边距 margin-top/bottom/left/right:单边定义 取值： 1.以px为单位的数字 2.取值为负数 让元素向着相反的方向移动 margin-left:取值为正，元素向右移 取值为负，元素向左移 margin-top:取值为正，元素向下移 取值为负，元素向上移 练习：页面中添加一个div元素，设置尺寸和边框，查看默认效果，然后设置div的左外边距为60px,查看页面效果，再将左外边距设为-60px查看页面效果（上外边距做同样的设置）。 3.取值为% 外边距的值，父元素宽或高的占比 4.取值为auto 自动计算外边距的值 实现块级元素的水平居中对齐 3.简写方式 1.margin:value 四个方向外边距 2.margin:v1 v2 上下 左右 3.margin:v1 v2 v3 上 左右 下 4.margin:v1 v2 v3 v4 上 右 下 左（顺时针） 4.自带外边距的元素 p,h1-h6,body,ul,ol,dl,pre 通过CSS Reset的方式来重置具备外边距的元素 p,h1,h2,h3,h4,h5,h6,body,ul,ol,dl,pre{margin:0;} 5.外边距的特殊效果 1.外边距合并 当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个外边距中较大的那个，如果两个值相同，取其中一个。 2.行内元素和行内块元素 1.行内元素垂直外边距无效，但左右外边距有效并会相加 2.行内块元素，设置垂直外边距时，整行元素都会跟着发生改变。
练习： 1.在页面中创建两个div，尺寸都是200*200，分别设置不同的背景； 2.在第二个div中添加一个子元素div，设置其尺寸为100*100，同时设置其背景颜色； 3.并设置子元素的上外边距为50px，观察页面效果 3.外边距溢出 在特殊的条件下，为子元素设置上边距时会作用到父元素上： 1.父元素没有上边框 2.为第一个子元素设置上外边距时 解决方案： 1.为父元素增加上边框 弊端：对父元素的高度有影响 2.使用父元素的内边距取代子元素的上外边距 弊端：对父元素的高度有影响 3.在父元素的第一个子元素位置处，增加一个空的<table></table>课后作业： 1.完成学子商城登录页面效果 （参考http://www.codeboy.com/login.html，背景图先用灰色背景替代） 2.整理今天所学内容思维导图 3.预习明天内容
