一.CSS概述 1.什么是CSS？ CSS：Cascading Style Sheets层叠样式表/级联样式表，简称样式表。 2.CSS作用 设置HTML网页元素的样式（修饰网页） 3.HTML与CSS的关系 HTML：构建网页内容 CSS：修饰网页 4.HTML属性与CSS属性是使用原则 w3C建议尽量使用CSS属性来取代HTML的属性。 二.CSS的语法规范 1.使用CSS的方式 1.内联方式（行内样式） 特点：将CSS样式定义在HTML的开始标记中 语法： 样式声明：由样式属性和值组成，CSS属性名与其值之间用冒号连接，多个样式声明之间用分号分割。 常用的属性和值： (1)设置文本颜色的属性和值 属性：color 值：颜色的英文单词（red,blue,yellow…） (2)设置背景颜色的属性和值 属性：background 值：颜色的英文的单词 (3)设置字体大小的属性和值 属性：font-size 值：以px/pt为单位的数字（24px）
2.内部样式 在网页的头元素中增加一对<style></style>,在<style></style>标记中声明该网页的所有样式。 语法： <head> <style> 样式规则 </style> </head> 样式规则：由选择器和样式声明组成 选择器：规范页面中哪些元素能够使用定义好的样式。 元素选择器：由元素名称作为选择器 元素选择器语法：元素名称{样式声明} ex：div{ color:red; font-size:24px; } 3.外部样式 独立于任何网页的位置处，声明一个样式文件（*.css）,在css文件中保存样式规则。 使用步骤： 1.创建样式表文件（.css为后缀） 2.在文件中编写样式规则 3.在网页头元素中引入外部样式表 <link rel="stylesheet" href="CSS文件url"> 练习： 新建一个网页，页面中创建p,div和h3分别放上一段文本，然后用外部样式表修饰： p元素的样式为红色字体，大小为30px； div元素中文本的样式为蓝色字体，40px； h3元素中的文本样式为绿色，背景颜色为灰色。2.CSS的样式特点 1.继承性 子元素继承父元素的样式（有层级关系）。 大部分的样式可以直接被继承。 2.层叠性 可以为一个元素定义多个样式规则，规则中的属性不冲突时，可以同时都应用到当前元素上。 ex： p{ color:blue; } p{ font-size:50px; } #p1{ background:gray; } 3.优先级 在样式声明有冲突时（重复），则按照样式的优先级来应用样式。 优先级由低到高： 浏览器默认设置：低 样式表（内部样式和外部样式）：中-就近原则 内联样式：高 4.调整优先级 !important 规则 将!important加在属性值的后面，与值之间用空格隔开。 ex: color:red !important; 练习： 网页中新建一个div元素，内容随意，用内部样式设置其字体大小为40px，字体颜色为红色，然后用外部样式设置其字体大小为70px，字体颜色为蓝色，将外部样式引入到网页中查看页面的效果，然后交互内 外样式的位置，再查看页面的效果，最后用!important去改变优先级。
三.选择器（重点） 1.选择器的作用 规范了页面中哪些元素能够使用定义好的样式。 为了匹配元素。 2.选择器详解 (1)通用选择器 语法：*{样式声明} 作用：可以匹配页面上的任意元素 注意：通用选择器的效率较低，尽量少用 (2)元素选择器 语法：元素名称{样式声明} 作用：设置页面上某种元素的样式 ex: div{…} p{…} a{…} header{…} (3)类选择器 作用：定义页面上某个元素或某些的样式（谁想用谁就可以使用） 特点：通过元素的class属性来引用类选择器 语法： 1.声明 .类名{样式声明} 定义类名注意：点不能省略，类名不能以数字开头，不能包含特殊字符，但可以包含（-，_） 2.引用 类选择器的特殊用法： 1.多类选择器 让元素引用多个类选择器 2.分类选择器 将元素选择器和类选择器结合使用 语法：元素选择器.类选择器{样式声明} ex: div.test{color:red;} 练习：页面中新建div和p元素，内容随意 用类选择器为所有元素设置字体为红色； 用分类选择器为p元素设置背景颜色为黑色。 (4)id选择器 作用：设置指定id元素的样式（专属定制） 语法：#id值{样式声明} (5)群组选择器 作用：将多个选择器放在一起进行样式的声明 语法：选择器1,选择器2,选择器3…{样式声明} ex: #s1,.myColor,div,p.test{color:red;} 对比： #s1{color:red;} .myColor{color:red;} div{color:red;} p.test{color:red;}
(6)后代选择器 作用：通过元素的后代关系匹配元素 后代：一级或多级嵌套 语法：选择器1 选择器2 选择器3...{样式声明}课后作业： 按以下布局完成样式设置： 用后代选择器完成第一个span元素样式的设置，字体大小为32px，文本颜色为红色，背景颜色为黄色。
这是第一个span元素
这是第二个span元素
一.选择器详解 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.预习明天内容
一.框模型 1.内边距 1.什么是内边距 元素边框与内容之间的间距。 内边距会扩大元素边框占地区域。 2.语法 属性： padding:value 四个方向的内边距 padding-top/bottom/left/right:value 单边定义 取值： 1.以px为单位的数字 2.以%为单位的数字 3.简写方式 padding:value 四个方向 padding:v1 v2 上下 左右 padding:v1 v2 v3 上 左右 下 padding:v1 v2 v3 v4 上 右 下 左（顺时针） 2.属性：box-sizing 作用：指定框模型的计算方式 取值： 1.content-box 默认值，采用默认的方式计算元素的占地尺寸 实际宽度=左右外边距+左右内边距+左右边框+width 实际高度=上下外边距+上下内边距+上下边框+height 2.border-box 元素的尺寸，会包含border以及padding的值 实际宽度=width+margin 实际高度=height+margin 二.背景 以单一颜色或图片来填充元素作为背景。 1.背景颜色 属性：background-color 取值：合法的颜色值 注意：背景颜色和背景图片都从边框位置处开始填充。 2.背景图像 属性：background-image 取值：url(图像路径); ex: background-image:url(a.jpg); 3.背景图像平铺 属性：background-repeat 取值： 1.repeat 平铺，默认值 2.no-repeat 不平铺，只显示一次图片 3.repeat-x 只在水平方向平铺 4.repeat-y 只在垂直方向平铺 4.背景图像尺寸 属性：background-size 取值： 1.width height 2.width% hegiht% 3.cover 覆盖，将背景图等比放大，直到背景图完全覆盖元素所有区域为止。 4.contain 将背景图等比放大，直到背景图碰到元素的某一个边缘为止。 5.背景图像固定 将背景图固定在网页的某个位置，一直在可视化区域中，不会随着滚动条而发生位置的变化。 属性：background-attachment 取值： 1.scroll 默认值，滚动 2.fixed 固定 6.背景图像定位 作用：改变背景图在元素中的位置 属性：background-position 取值： 1.x y x:背景图在水平方向的偏移距离 取值为正，向右移动 取值为负，向左移动 y:背景图在垂直方向的偏移距离 取值为正，向下移动 取值为负，向上移动 2.x% y% 0% 0% 左上角 50% 50% 正中间位置 100% 100% 右下角 3.关键词 x:left/center/right y:top/center/bottom 7.背景属性简写方式 属性：background 取值：color url() repeat attachment position; 三.渐变 1.什么是渐变 渐变指的是多种颜色平缓变化的一种显示效果。 2.渐变的主要因素 色标：一种颜色及其出现的位置 一个渐变是由多个色变组成（至少两个） 3.渐变的分类 1.线性渐变 以直线的方向来填充渐变色。 属性：background-image 取值：linear-gradient(angle,color-point1,color-point2,…) (1)angle 表示渐变填充的方向或角度 取值： 1.关键词 to top:从下向上填充渐变 to bottom:从上向下填充渐变 to left:从右向左填充渐变 to right:从左向右填充渐变 2.角度值 0deg 等同于to top 90deg 等同于to right 180deg 等同于bo bottom 270deg 等同于to left (2)color-point 色标：颜色 及其 位置 取值：颜色 与 位置 的组合，中间用空格隔开。 ex: red 0%:在填充方向开始的位置处颜色为红色 green 50%:到填充方向一半位置处，颜色为绿色 blue 200px:
2.径向渐变 以圆形的方式来填充渐变色。 属性：background-image 取值：radial-gradient([size at position],color-point1,color-point2,..); size at position: size:半径，以px为单位的数字 position:圆心的位置 取值：x y 具体数字 x% y% 元素宽和高的占比 关键词：left/center/right top/center/bottom 3.重复渐变 将线性渐变 或 径向渐变重复几次出现。 1.重复线性渐变 background-image:repeating-linear-gradient(angle,color-point1,color-point2,...); 2.重复径向渐变 background-image:repeating-radial-gradient([size at position],color-point1,color-point2,...); 注意：在重复渐变中色标位置用绝对值，不要用%。4.浏览器兼容性 各浏览器的新版本都支持渐变属性，但低版本不支持。对于不支持的浏览器，可以通过设置浏览器前缀的方式，让浏览器支持渐变。 firefox:-moz- IE:-ms- Oprea:-o- chrome&safari:-webkit- ex: background:-ms-linear-gradient(0deg,red,blue); background:-moz-linear-gradient(0deg,red,blue);
https://www.caniuse.com 查看css属性支持的浏览器版本号四.文本格式化属性 1.字体属性 1.指定字体类型 属性：font-family 取值：用逗号隔开字体名称列表 ex: font-family:“微软雅黑”,“黑体”,Arial; 2.指定字体大小 属性：font-size 取值：以px或pt为单位的数字 3.字体加粗 属性：font-weight 取值： 1.bold:加粗（b,h1-h6） 2.normal:正常 3.value 无单位的整百倍数字 400等同于normal 900等同于bold 4.字体样式 属性：font-style 取值： 1.normal:正常字体 2.italic:斜体(i) 5.小型大写字母 将小写字母变为大写，但大小与小写字母一致。 属性：font-variant 取值： 1.normal:正常 2.small-caps:小型大写字母 6.字体属性的简写方式 属性：font 取值：style variant weight size family; 注意：使用简写形式时，必须要设置family的值，否则无效。 ex: font:italic 12px; //无效 font:12px “微软雅黑”;//正确 练习： 页面中新建一个p元素，内容随意，最好中英文结合，然后按以下要求设置样式： 1.字体为"Arial"类型。 2.字体大小为24px。 3.文本加粗并倾斜显示。 4.将所有的字母显示为小型大写字母。 2.文本格式 1.文本颜色 属性：color 取值：合法的颜色值 2.文本排列 作用：指定文本，行内，行内块元素的水平对齐方式。 属性：text-align 取值：left/center/right/justify(两端对齐) 3.文字修饰（线条） 属性：text-decoration 取值： 1.none：无任何线条修饰 2.underline:下划线 3.overline:上划线 4.line-through:删除线(s标记) 4.行高 作用：设置一行数据所占的高度 属性：line-height 取值：以px单位的数字； 无单位的数字（行高是当前字体大小的倍数）。 注意：如果行高设置的比文字的高度大的话，那么该行文本将在指定行高内呈现垂直居中的效果。 5.首行文本缩进 属性：text-indent 取值：以px为单位的数字 6.文本阴影 属性：text-shadow 取值：h-shadow v-shadow blur color; 五.表格 1.表格常用属性 1.边距：padding 2.边框：border 3.尺寸：width/height 4.文本格式化：font-,text-,line-height 5.背景属性：颜色，图像，渐变 6.vertical-align:指定单元格数据的垂直对齐方式 取值：top/middle/bottom 上/中/下
课后作业： 1.创建一个400400px的表格，4行4列： 1.设置每个单元格的尺寸为100100; 2.设置表格和单元格的边框为1px solid #000; 3.尝试着为每个td增加上外边距10px。
2.完成"课后作业.png"效果图中的布局（注意细节修饰） 3.可以开始做个人项目（参考http://www.cssmoban.com）一.表格 1.表格特有属性 1.边框合并 属性：border-collapse 取值： 1.separate 默认值，即分离边框模式 2.collapse 边框合并 2.边框边距 作用：设置单元格之间或单元格与表格之间的距离 属性：border-spacing 取值： 1.指定一个值，水平和垂直的间距相同 2.指定两个值， 第一个值表示的水平间距 第二个值表示的垂直间距 注意：只有在分离边框的模式下才能设置边框的边距。 3.标题位置 属性：caption-side 取值： top:默认值，标题在表格正上方 bottom:标题在表格的正下方 4.显示规则 作用：用来帮助浏览器指定如何布局一张表，也就是指定td尺寸的计算方式。 属性：table-layout 取值： 1.auto 默认值，即自动表格布局，列的尺寸实际上是由内容来决定的。 2.fixed 固定表格布局，列的尺寸由设定的值为准 自动表格布局和固定表格布局： 1.自动布局 (1)单元格的大小适应内容 (2)自动布局会比较灵活（优点） (3)表格复杂时，加载速度较慢（缺点） (4)适用于不确定每列大小并表格不太复杂时使用 2.固定布局 (1)单元格的尺寸取决于设定的值 (2)任何情况下都会加速显示表格(优点) (3)固定表格不够灵活(缺点) (4)适用于确定每一列的大小时使用 二.定位-浮动定位（重点） 1.定位 定位：指的是改变元素在页面中的位置。 2.定位的分类 按照定位的效果，可以分成以下几类： 1.普通流定位(默认定位方式) 2.浮动定位 3.相对定位 4.绝对定位 5.固定定位 3.定位-普通流定位 普通流定位又称"文档流定位"，页面中元素们默认定位方式。 1.每个元素在页面中都是在父元素左上角开始显示。 2.每个元素在页面中一定都有自己的空间。 3.块级元素都是按照从上往下排列，每个元素独占一行。 4.行内元素以及行内块元素都是按照从左往右的方式来排列。 如何解决多个块级元素在一行中显示？ 4.定位-浮动定位 1.什么是浮动定位&特点 如果将元素的定位方式设置为浮动定位，元素将具备以下特点： 1.元素将被排出文档流之外（脱离了文档流），不再占页面空间，其它未浮动的元素将上前补位。 2.浮动元素会停靠在其父元素的左边或右边，或其它已经浮动元素的边缘上。 3.浮动定位解决的问题：让多个块级元素在一行中显示。 2.语法 属性：float 取值： 1.none 默认值，即无任何浮动效果 2.left 左浮动，让元素停靠在父元素的左边，或挨着左侧已经浮动的元素边缘。 3.right 右浮动，让元素停靠在父元素的右边，或挨着右侧已经浮动的元素边缘。
练习：页面中创建三个元素，id分别为d1,d2,d3,设置其尺寸各200px，分别设置背景颜色为blue,green,yellow,依次让d1,d2,d3实现右浮动，观察效果，然后再依次将d1,d2,d3分别实现左浮动观察效果。 3.浮动引发的特殊效果 1.当父元素显示不下所有已浮动元素时，最后一个将换行,但是，有可能被卡住。 2.元素一旦浮动起来后，宽度将以内容为主（未指定宽度情况下）。 3.元素一旦浮动起来，将变为块级元素 允许设置尺寸，正常处理垂直外边距。 4.文本，行内元素，行内块元素是采用环绕的方式排列的，是不会被浮动元素压在下方的，而是会巧妙的避开。 4.清除浮动所带来的影响 元素一旦浮动起来之后，就会对后续的元素带来影响（后续元素要上前补位），如果后续元素不想被影响（不想去补位），那么就可以通过清除浮动的方式来解决。 属性：clear 取值： 1.left 清除当前元素前面元素左浮动所带来的影响。 2.right 清除当前元素前面元素右浮动所带来的影响。 3.both 清除当前元素前面任何一种浮动所带来的影响。 4.none 默认值，不做任何清除浮动操作。 5.浮动元素对父元素高度带来的影响 元素的高度，都是以未浮动元素的高度为准，浮动元素是不占页面空间的，所以一旦子元素都浮动起来，那么父元素高度将为0。 解决方案： 1.直接设置父元素的高度 弊端：不是每次都知道父元素的高度 2.设置父元素也浮动 弊端：不是任何时候父元素都需要浮动，而且浮动会影响后续元素（后续元素会上前补位） 3.设置父元素的overflow 取值：hidden/auto 弊端：如果有内容要溢出显示的话，也会一同隐藏起来 4.在父元素中，追加一个空的块级元素，并设置其clear:both;三.显示 1.显示方式 1.显示方式 决定元素在网页中的表现形式（块级，行内，行内块等） 2.语法 属性：display 取值： (1)none 不显示元素-隐藏 (2)block 让元素表现的与块级元素一致 特点：从上往下排列，单独占一行，并可以设置尺寸和垂直外边距 (3)inline 让元素表现的与行内元素一致 特点：排方式从左往右在一行中显示，不能修改尺寸（img除外） (4)inline-block 让元素表现的与行内块一致 特点：排列方式如同行内元素，但是具备块级元素的特征，允许修改尺寸，也可以设置垂直外边距，但会影响整行。 (5)table 让元素表现的如同table 特点： 尺寸以内容为主 每个元素独占一行 允许修改修改尺寸 注意：一般将行内元素显示为块级或行内块，很少将块级元素转换为行内。 2.显示效果 1.显示/隐藏 属性：visibility 取值： 1.visible 可见的，默认值 2.hidden 元素不可见-隐藏 Q：display:none和visibility:hidden的区别？ display:none;会脱离文档流，不占页面空间。 visibility:hidden;不脱离文档流，占据页面空间。
练习：网页中新建两个div，id分别为d1,d2,设置各自的尺寸和背景颜色。 1.先设置第一个div的display:none,查看页面效果。 2.注释掉第一步的代码，然后再设置第一个div的visibility：hidden;再查看页面效果。 2.透明度 属性：opacity 取值：0-1 值越小越透明 Q：rgba与opacity的区别？ opactiy作用于元素，跟元素相关的颜色都会发生透明度的变化。 rgba:只作用于当前元素的某一个颜色值。 3.垂直对齐方式 属性：vertical-align 使用场合： 1.表格中使用 取值：top/middle/bottom 2.图片中使用 取值：top/middle/bottom/baseline基线对齐（默认值） 注意：编写网页时，通常都会将图片的垂直对齐方式更改为除baseline以外的任何一个值。 4.光标 1.作用 改变鼠标悬停在元素上时鼠标的状态。 2.语法 属性：cursor 取值： default 箭头 pointer 小手状态 crosshair + text I wait 等待 help 帮助四.列表 1.列表项标识 属性：list-style-type 取值： none 无标识 disc circle square 2.列表项图像 属性：list-style-image 取值：url(图片路径) 3.列表项位置 属性：list-style-position 取值： outside:默认值，将标识放在li的外面 inside:将标识放在li的里面 4.列表属性简写方式 属性：list-style 取值：type url() position; 常用方式： list-style:none;
课后作业： 1.复习今天所学内容，重点-浮动定位 2.完成"课后作业.png"中的布局效果（样式参考www.codeboy.com网站首页头部） 3.做个人大项目（参考 http://www.cssmoban.com）
一.定位（相对定位，绝对定位，固定定位）-重点 1.定位相关属性 1.定位属性 属性：position 取值： (1)static 静态，默认值 (2)relative 相对定位 (3)absolute 绝对定位 (4)fixed 固定定位 注意：将元素的position设置为relative/absolute/fixed任何一个值，那该元素就称为"已定位"元素。
2.偏移属性 top/bottom/left/right 以上四个属性取值均为数字（px单位） ex: top:150px; 元素向下偏移 bottom:-200px;元素向下偏移 left:100px;元素向右偏移 注意：只有"已定位"元素才能使用偏移属性 3.定位详解 1.相对定位 1.什么是相对定位 元素会相对于它原来的位置偏移某个距离 2.使用场合 在做元素位置的微调时使用 3.语法 position:relative; 配合着偏移属性使用 2.绝对定位 1.特点 1.绝对定位的元素会脱离文档流，不占页面空间 2.绝对定位的元素会相对于离他"最近的" "已定位的" "祖先元素"去实现位置的初始化，如果没有已定位的祖先元素，那么元素相对于body去实现位置的初始化。 (一般子元素要实现绝对定位，父元素通常都设置为相对定位) 2.语法 position:absolute; 配合偏移属性来使用 3.使用场合 1.弹出菜单 2.有堆叠效果的元素 4.注意 1.脱离文档流 2.绝对定位会将元素变为块级元素 3.堆叠顺序 一旦将元素变为已定位元素的话，元素们有可能会出现堆叠的效果。如果想要改变默认的堆叠顺序，可以使用z-index 属性：z-index 取值：无单位的数字,数字越大越靠上 注意： 1.父子元素间，z-index无效，永远都是子元素压在父元素上。 2.只有已定位元素才能使用z-index 4.固定定位 1.什么是固定定位 将元素固定在页面的某个位置，位置不会随着滚动条而发生位置的变化，始终固定在可视化的区域中。 2.语法 position:fixed; 配合偏移属性来使用。 3.注意 1.固定定位脱离文档流，不占页面空间 2.固定定位的元素会变成块级元素，允许修改尺寸 3.固定定位的元素永远都是相对于body去实现位置的初始化。 练习：仿照京东右下角返回顶部的效果，将图片固定在网页的右下角，点击图片时返回到网页的顶部。CSS3 Core===================================== 二.复杂选择器 1.兄弟选择器 兄弟元素：具备相同父元素的平级元素之间称为兄弟元素。 ex：
1.相邻兄弟选择器 作用：获取紧紧挨在某元素后的兄弟元素。 语法：选择器1+选择器2{} 注意：兄弟选择器，只能向后找，不能向前找。 2.通用兄弟选择器 作用：获取某元素后所有满足条件的兄弟元素 语法：选择器1~选择器2{} 练习：通过兄弟选择器设置样式： 1.h3与div之间有30px的外边距 2.从第二个div开始，每个div都有10px的上外边距。（3分钟） <h3>静夜思</h3> <div>床前明月光</div> <div>疑是地上霜</div> <div>举头望明月</div> <div>低头思故乡</div>2.属性选择器 id,class,style,title,name,type,value等 1.作用 允许通过元素所附带的属性及值来匹配页面元素。 2.语法 (1)基本写法 [attr] attr:表示任意属性 作用：匹配页面中所有附带attr属性的元素。 ex: [id] 匹配页面中所有附带id属性的元素 [class] 匹配页面中所有附带class属性的元素 (2)elem[attr] elem:表示任意元素 attr:表示任意属性 作用：匹配页面中所有附带attr属性的elem元素。 ex: div[id] 匹配带有id属性的div元素 (3)[attr1][attr2]… 作用：匹配同时附带多个属性的元素 ex: [id][class] 匹配同时附带id属性和class属性的元素 (4)[attr=value] 作用：匹配页面中attr属性值为value的元素 [attr~=value]:获取属性值中包含指定词汇的元素 [attr^=value]：匹配属性值以指定值开头的每个元素 [attr$=value]：匹配属性值以指定值结尾的每个元素 [attr*=value]：匹配属性值中包含指定值的每个元素 ex： [id=“one”]{color:red;} 等同于： #one{color:red;}
3.伪类选择器 已经学过的伪类： 链接伪类: :link :visited 动态伪类： :hover :active :focus 1.目标伪类 作用：突出显示活动的HTML锚点元素，匹配被激活的锚点。 语法： 选择器:target{…} 2.结构伪类 作用：通过元素的结构关系来匹配元素（上下级嵌套） 1.:first-child 匹配的元素是属于其父元素中的第一个子元素。
p1
p2
p3
ex: p:first-child{…} 2.:last-child 匹配的元素是属于其父元素中的最后一个子元素。 ex: p:last-child{…} 练习： 1.创建一个4*4表格，并填充内容 2.设置第一行的数据背景颜色为黄色 3.设置最后一行的数据背景颜色为红色（3分钟） 3.:nth-child(n) 匹配的元素是属于其父元素中的第n个元素。 ex: tr:nth-child(3){…} 练习：在上面表格的基础上，设置表格第三行第三列中的文字为粗体并倾斜显示，字体大小为30px 4.:empty 匹配没有子元素的元素。（空格也不能包含）课后作业： 1.完成"课后作业1.png"的布局效果（参考www.codeboy.com） 2.完成"课后作业2.png"的布局效果 3.继续开发个人项目
一.复杂选择器 1.结构伪类选择器 1.:only-child 匹配的元素是属于其父元素中的唯一子元素。 2.否定伪类 将满足指定选择器的元素给排除在外。 语法：:not(selector){…} 3.伪元素选择器 1.::first-letter或:first-letter 作用：用于匹配元素的首字符 2.::first-line或:first-line 作用：用于匹配元素的首行 注意：如果首字符与首行样式冲突时，优先使用首字符样式。 3.::selection 作用：匹配被用户选取的内容。 注意：只能修改文本颜色和背景颜色。 练习：创建一个div元素，内容随意. 1.设置div中首字符样式为加粗，红色，大小为32px,右外边距为20px. 2.将首行的文本设置为橙色，斜体 3.用户选取内容时文本颜色为蓝色，背景为灰色。 4.内容生成 1.什么是内容生成 使用css动态的向元素中插入一段内容。 2.伪元素选择器 1.:before或::before 作用：匹配到某元素的内容区域之前。
(:before)床前明月光
2.:after或::after 作用：匹配到某元素的内容区域之后。 <p>床前明月光(:after)</p> 3.属性 属性：content 作用：向匹配到的位置处增加的内容 取值： 1.字符串，用""引起来。 2.url(图片路径) 练习：2分钟 <p>学而时习之，不亦说乎</p> <p>有朋自远方来，不亦乐乎</p> 输出显示如下： 子曰：学而时习之，不亦说乎 ——《摘自论语》 子曰：有朋自远方来，不亦乐乎 ——《摘自论语》 3.解决问题 1.上外边距溢出 1.在父元素的第一个子元素位置处 2.添加一个table标记，并且标记的内容为空 ex: 选择器::before{ content:""; display:table; } 2.解决浮动元素对父元素高度带来的影响 1.在父元素的最后一个子元素位置处 2.添加一个空的块级元素（display:block） 3.设置其clear属性的值为both ex: .类选择器:after{ content:""; display:block; clear:both; }二.弹性布局 1.什么是弹性布局 弹性布局(Flexible layout)是一种布局方式，主要解决某元素中“子元素”的布局方式，为布局提供最大的灵活性。 2.弹性布局的相关概念 1.弹性布局容器 子元素的父元素称为容器 2.项目 要实现布局的子元素，称为项目 3.主轴 项目们排列方向的一根轴，称为主轴 如果主轴是x轴，那么y轴就是交叉轴 4.交叉轴 与主轴垂直相交的一根轴，称为交叉轴 3.语法 1.弹性（flex）容器 将元素变为flex容器后，那么所有子元素都将变为flex项目，都允许按照弹型布局的方式排列。 2.属性:display 取值： 1.flex 将块级元素变为容器 2.inline-flex 将行内元素变为容器 注意： 1.元素设置为flex容器之后，子元素的float,clear,vertical-align将失效。 2.元素变为flex容器之后，子元素尺寸允许被修改（把子元素变为块级） 3.容器属性 1.flex-direction 作用:指定容器的主轴及其排列方向 取值： (1)row 默认值，即主轴为x轴，起点在左端 (2)row-reverse 主轴为x轴，起点在右端 (3)column 主轴为y轴，起点在顶端 (4)column-reverse 主轴为y轴，起点在底部 2.flex-wrap 作用：当一个主轴排列不下所有项目时，项目是否换行显示。 取值： 1.nowrap：默认值，即空间不足时也不会换行，项目自动缩小。 2.wrap:换行 3.wrap-reverse:换行并反转 3.flex-flow 作用：是flex-direction和flex-wrap的缩写形式。 取值： 1.row nowrap（默认值） 2.direction wrap 4.justify-content 作用：定义项目在主轴上的对齐方式。 取值： 1.flex-start 在主轴的起点对齐。 2.flex-end 在主轴的终点对齐。 3.center 在主轴上居中对齐。 4.space-between 两端对齐。 5.space-around 每个项目两端的间距相同。 5.align-items 作用：定义项目在交叉轴上的对齐方式。 取值： 1.flex-start 交叉轴上起点对齐。 2.flex-end 交叉轴上终点对齐。 3.center 交叉轴上居中显示。 4.baseline 交叉轴上基线对齐。 5.stretch 如果项目未设置尺寸，在交叉轴上占满所有空间。 练习： 网页中添加一个div，id为parent，设置parent的边框,在parent中再添加两个子元素div，id分别为d1和d2设置d1和d2的尺寸和背景颜色,将父元素变为容器，并设置d1和d2在容器中水平、垂直都居中显示，并且当容器缩小时，不改变项目的尺寸。（3分钟） 4.项目属性 该组属性只能设置在某一个项目元素上，只控制一个项目，不影响其他项目。 1.order 作用：定义项目的排列顺序，值越小，越靠近起点，默认值为0。 取值：整数数字，无单位。 2.flex-grow 作用：定义项目的放大比例，如果容器有足够的剩余空间，项目按照比例放大。 取值：整数数字，无单位。 默认值0，不放大。 取值越大，占据剩余空间的比例越多。 3.flex-shrink 作用：定义项目缩小比例，即容器空间不足时，项目按照比例缩小 取值：整数数字，无单位，值越大缩小的越快。 默认值1，空间不足时，则等比缩小。 取值为0，则不缩小。 4.align-self 作用：定义当前项目在交叉轴的对齐方式 取值： 1.flex-start 起点对齐 2.flex-end 终点 3.center 居中 4.baseline 基线对齐 5.stretch 未设定项目高度时占满父元素空间 6.auto 自动继承父元素align-items的属性值。 练习： 用弹性布局完成如图所示效果 三.转换 1.什么是转换 改变元素在页面中的位置，大小，角度以及形状的一种方式。 2D转换：只在x轴和y轴上发生转换效果 3D转换：增加z轴的转换效果 2.转换属性 1.转换属性 属性：transform 取值： 1.none：默认值，无任何转换效果 2.transform-function 表示1个或多个转换函数 如果是多个转换函数，中间用空格隔开 2.转换原点 属性：transform-origin 取值：数值/百分比/关键词 2个值，表示原点在x轴和y轴的位置。 3个值，表示原点在x轴y轴和z轴的位置。
默认的原点是在元素的中心位置：(center,center)/(50%,50%)3.2D转换 1.位置（位移） 1.什么是位移 改变元素在页面的位置。 2.语法 属性：transform 取值： 1.translate(x) 指定元素在x轴上位移距离 取值为正，元素向右移 取值为负，元素向左移 2.translate(x,y) 指定元素在x轴和y轴上位移一定距离 x:同上 y:指定元素在y轴上位移距离 取值为正，元素向下移 取值为负，元素向上移 3.translateX(x) 4.translateY(y) 2.缩放 1.什么是缩放 改变元素在页面中的尺寸（大小） 2.语法 属性：transform 取值： 1.scale(value) 取值为数字 value：横向和纵向缩放比例相同 默认值1，不缩放 value>1：放大 0<value<1：缩小 value<0：放大(水平和垂直方向都翻转180度)
2.scale(x,y) x:横向缩放比例 y:纵向缩放比例 3.单向缩放 scaleX(x)只在横向缩放 scaleY(y)只在纵向缩放 3.旋转 1.什么是旋转 改变元素在页面上的角度 2.语法 属性：transform 取值： rotate(ndeg) n取值为正，顺时针旋转 n取值为负，逆时针旋转 课后作业： 1.在页面中创建两个div，id分别为d1和d2,设置其尺寸为200*200px,添加不同背景; (1)将两个div都定位到父元素的左上角显示; (2)将d1先旋转45deg,再向右位移50px; (3)将d2向右位移50px，再旋转45deg，对比两个div的效果。 2.用弹性布局完成"课后作业.png"布局效果。