CSS_day02

一.选择器详解
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.预习明天内容