Css Day01
1、列表
1、有序
<ol></ol>
<li></li>
属性：
1、type
2、start
2、无
<ul></ul>
<li></li>
属性：
1、type
取值：
circle
square
disc(默认)
none
3、定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
2、结构标记
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
3、表单
1、表单元素
<form></form>
属性
1、action
表单提交的服务器程序路径
2、method
1、get
2、post
3、enctype
1、application/x-www-form-urlencoded
2、multipart/form-data
3、text/plain
2、表单控件
1、input元素
语法：<input>
属性：
1、type
2、name
3、value
4、disabled
1、文本框与密码框
<input type="text">
<input type="password">
属性：
1、maxlength
2、readonly
2、单选按钮和复选框
1、单选按钮
<input type="radio">
属性：
name:分组，一组中最多只能有一个按钮被选中
checked:默认被选中
2、复选框
<input type="checkbox">
name:分组，在后台服务器中，可以以一个组名获取所有的选中值。
checked:默认被选中
3、按钮
1、提交按钮
<input type="submit">
功能：提交表单数据到服务器
2、重置按钮
<input type="reset">
功能：将表单数据恢复到初始化
3、普通按钮
<input type="button">
功能：执行客户端脚本
4、隐藏域和文件选择框
1、隐藏域
<input type="hidden">
2、文件选择框
<input type="file">
注意：
1、表单的 method 必须为post
2、表单的 enctype 必须为 multipart/form-data
2、textarea元素
<textarea>内容</textarea>
属性：
1、name ：名称
2、cols ：一行中的字符数，变相设置宽
3、rows ：默认显示多少行数据
4、readonly
3、select 和 option 元素
选项框(下拉选项框，滚动列表)
<select></select>
name:名称
size:大于1的话则为滚动列表
multiple:设置多选
<option></option>
value:值
selected:预选中
4、其他元素
1、为控件分组
<fieldset>
<legend>组名</legend>
</fieldset>
2、关联文本与表单控件
<label>文本</label>
属性：
for：要关联的表单控件的ID值
3、按钮
<button>内容</button>
注意：
该元素 放在 form 中则为提交按钮，否则为普通按钮(IE除外)
4、其他元素
1、浮动框架
<iframe>内容</iframe>
属性：
src：引入浮动框架的url
width：
height：
frameborder：浮动框架的边框
2、摘要与细节
<details>
<summary></summary>
</details>
3、度量元素
<meter>内容</meter>
min：最小值，默认为0
max：最大值，默认为1
value：显示的度量值
4、高亮显示
<mark></mark>
5、时间元素
<time>文本内容</time>
datetime:关联的日期时间
=================================
1、CSS概述
2、CSS语法
3、尺寸与边框
=================================
1、CSS概述
1、问题
1、设置页面中所有的文本颜色为红色
2、页面中所有的div里面的文本的颜色变为 蓝色
3、页面中所有的div里面的文本的颜色变为 绿色
HTML元素属性的弊端：
1、想完成相同效果，却要使用不同属性
2、HTML元素改变的样式可重用性不高
2、CSS
CSS:Cascading Style Sheets
层叠样式表，级联样式表，样式表
特点：
1、实现了网页内容与表现相分离
2、提高了代码的可重用性和可维护性
3、CSS与HTML之间的关系
1、HTML用于构建网页的结构
2、css负责构建HTML页面元素的样式
4、HTML属性和CSS样式的使用原则
W3C建议 尽量使用CSS样式取代HTML属性
1、修改文本的颜色
推荐使用css的color属性
2、修改元素的背景颜色
推荐使用css的background-color属性
如果是HTML元素所特有的属性的话，只能使用HTML元素属性
td元素属性colspan
5、使用CSS样式表的方式(重点)
1、内联方式
作用：将样式定义在单个的HTML元素中
语法：
<ANY style="样式声明1;样式声明2"></ANY>
样式声明语法：
样式属性:属性值
eg:
1、文本颜色的样式属性
color:red;
2、背景颜色的样式属性
background-color:green;
3、文本大小的样式属性
font-size:24px;
练习：设置页面上的 某个 div 元素中的 样式 ， 文本颜色为 黄色(yellow)，背景颜色为黑色(black)，字体大小为48像素
2、内部样式表
1、特点
应用范围为整个页面而不是某一个别元素,能够提升可重用性和可维护性，同时体现内容与表现相分离
2、语法
1、在 <head>元素中 增加 <style></style>标记用来声明样式
2、在 <style></style>元素中 编写若干 “样式规则”
样式规则语法规范：
1、选择器
作用：规范了页面中哪些元素能够使用声明好的样式
eg：
元素选择器
p div span
2、若干样式声明
属性:值;属性:值;
选择器{若干样式声明}
练习：使用内部样式表，控制页面中所有的p标记，文本颜色为yellow色，背景颜色为black色，文字大小为 24px
3、外部样式表
1、作用
以独立的css样式表文件保存样式规则，可以应用在各个页面中
2、使用步骤
1、创建单独的样式表文件(*.css)
在该文件中可以编写若干样式规则
2、在需要使用该样式表文件的页面上，引入样式表文件
在页面的<head>元素中添加以下代码：
<link rel="stylesheet" href="样式表文件url">
4、基本排错
1、Styles 中提示 "Unknown property name"
说明 样式属性名称 写错了
2、Styles 中提示 "Invalid property value"
说明 样式属性值 写错了
2、CSS语法
1、CSS样式表特征
1、继承性
大多数CSS属性是可以被继承的
2、层叠性
可以为一个元素定义多个样式规则
多个样式规则中，如果样式声明不重复的话，那么则可以层叠为一个样式规则
3、优先级
样式定义冲突(重复)时，会按照不同样式的优先级来应用样式
低：浏览器缺省设置(User Agent)
中：外部样式表或内部样式表
就近原则
高：内联样式
注意：继承的样式和自定义样式冲突时，永远都是以自定义的为主
4、!important 规则
显示调整样式属性的优先级
只要 !important 出现，永远都以!important 的为主
语法：
选择器{属性:属性值 !important;}
注意：尽量少用
2、CSS基础选择器(重难点)
1、作用
规范了页面中哪些元素能够使用定义好的样式
同时也帮助我们去匹配页面上的元素
2、选择器
1、通用选择器(了解)
1、作用
匹配页面上所有的元素
2、语法
*{样式声明;}
3、注意
效率低，尽量不用
尽可能通过 继承性 去代替通用选择器的效果
2、元素选择器
又名：标签选择器，标记选择器
1、作用
匹配页面某一指定元素
比如：
页面所有的 div 元素
页面所有的 p 元素
2、语法
元素{}
ex:
h1{color:red;}
h2{color:blue;}
3、类选择器(重点)
1、作用
允许元素使用附带的class属性值，对选择器进行引用
2、语法
以 . 作为开始
.类名{}
类名：字母，数字，_,-组成,不能以数字开始
引用类选择器:通过元素的 class 属性，进行引用
<ANY class="类名"></ANY>
3、特殊用法-分类选择器
设置class值为redColor的p元素的 背景颜色为 Yellow
1、作用
将 元素选择器和类选择器结合到一起，从而实现对某种元素的不同样式的细分控制
2、语法
元素选择器.类选择器{
样式声明;
}
p.redColor{
background-color:yellow;
}
4、特殊引用-多类选择器
1、作用
可以让一个元素同时引用多个类选择器,中间用空格分开即可
4、id选择器(重点)
1、作用
只匹配指定ID值得元素
2、语法
#id值{}
5、群组选择器
1 、作用
选择器声明以逗号来隔开的选择器列表.其目的是为了声明一组选择器中的公共样式
2、语法
选择器1,选择器2,选择器3,..,{
}
ex：
设置页面上所有的p元素，span元素，id为d1元素，class为redColor的元素的文本颜色 为 红色
p,span,#d1,.redColor{
color:red;
}
等同于
p{color:red;}
span{color:red;}
#d1{color:red;}
.redColor{color:red;}
6、后代选择器
1 、作用
用于匹配某元素的后代元素时使用
2、语法
选择器1 选择器2{
}
7、子代选择器
1、作用
用于匹配某元素的子代元素
2、语法
选择器1>选择器2{
}
8、伪类选择器
1、作用
为了匹配元素不同的状态的
2、语法
:伪类选择器{}
3、分类
1、链接伪类
:link :匹配 超链接 未被访问时的状态
:visited :匹配 超链接 被访问过的状态
2、动态伪类
:hover :匹配鼠标悬停在 html 元素时的状态
:active : 匹配 html元素 被激活时的状态
:focus : 匹配html元素获取焦点时的状态(文本框与密码框)
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
3、尺寸与边框
1、CSS单位
1、尺寸单位
1、%
占据父元素尺寸的占比
2、in
英寸，1in=2.54cm
3、cm
厘米
4、mm
毫米
5、px
像素，计算机屏幕上的一个点
6、pt(point)
磅/点
1pt=1/72in
7、em
1em 相当于 当前字体尺寸
2em 相当于 当前字体尺寸的2倍
注意：css中描述尺寸的单位是不能省略的。
2、颜色单位
1、rgb(r,g,b)
r:red
g:green
b:blue
r,g,b的范围分别是 0~255
background-color:rgb(125,28,96);
2、rgb(r%,g%,b%)
3、#rrggbb
由6位16进制数字表示颜色
16进制范围:
0-9 A-F
#ff0000 : 红色
#123456 :
4、#rgb
#rrggbb的缩写
#001122 --》 #012
5、表示英文的单词
red,green,blue,yellow,
2、尺寸属性
1、作用
尺寸属性一般用于设置元素的宽度和高度
2、宽度
属性：
width
min-width
max-width
注意：min-width/max-width 与 width 属性相冲突，最终以width属性值为准
3、高度
属性：
height
min-height
max-height
4、注意
1、不是所有的元素都支持修改尺寸
支持修改尺寸属性的元素如下：
1、块级元素
2、非块级元素中，存在width，height属性的html元素
table，img
5、溢出
使用尺寸属性控制元素大小时，如果内容所需的空间大小大于元素本身的空间，会导致内容溢出
处理溢出的属性:
overflow:
overflow-x:横向溢出处理
overflow-y:纵向溢出处理
取值：
1、visibile
默认值，溢出可见
2、hidden
隐藏
3、scroll
让元素显示滚动条，溢出时可用
4、auto
自动，溢出时显示滚动条，并可用
3、边框
1、作用
在元素周围绘制一条线
2、属性
1、简写方式
border:width style color;
width:边框粗细，以px为单位
style:边框样式
solid : 实线
dotted : 虚线
dashed : 虚线
color:边框颜色
合法的颜色值
作用：控制元素的上下左右四个边框的粗细，样式，颜色
2、单边定义
border-方向:width style color;
方向：
top：上
bottom：下
left：左
right：右
3、单属性定义
border-属性:值;
属性：
width : 边框粗细
style : 边框样式
color : 边框颜色
作用：控制四条边的对应属性
4、单方向单属性定义
border-方向-属性:值;
5、注意
1、边框颜色可取值为 transparent，意味透明
2、取消边框显示
border:0;
border:none;
border-方向:0;
border-方向:none;
Css day02
1、CSS样式表使用方式
1、内联方式
<ANY style="样式声明">
2、内部样式表
<head>
<style>
样式规则
样式规则
... ...
</style>
</head>
3、外部样式表
1、创建 **.css 文件
2、<link rel="stylesheet" href="">
2、CSS样式基础语法
1、样式声明
属性:值;
color:red;
background-color:yellow;
font-size:12px;
2、样式规则
选择器{
样式声明;
样式声明;
... ...
}
3、选择器
1、通用选择器
*{}
2、元素选择器
元素{}
3、类选择器
.className{}
引用类选择器
<ANY class="className">
特殊使用-分类选择器
元素选择器.类选择器{}
p.redColor{}
特殊使用-多类选择器
<ANY class="类选择器1 类选择器2">
4、ID选择器
与元素ID相匹配
#idValue{}
5、群组选择器
选择器1,选择器2,选择器3{}
6、后代选择器
后代：出现在某元素中的元素
选择器1 选择器2{}
7、子代选择器
子代：出现在某元素中的下一级的元素
选择器1>选择器2{}
<div id="d1">
<span></span>
<p>
<span></span>
</p>
<div>
<p>
<span></span>
</p>
</div>
</div>
<p>
<span></span>
</p>
8、伪类选择器
1、链接伪类
:link 未被访问的状态
:visited 访问过后的状态
2、动态伪类
:hover 鼠标悬停时
:active 元素被激活时
:focus 元素获取焦点时
4、尺寸与边框
1、尺寸
1、宽度
width
min-width
max-width
2、高度
height
min-height
max-height
3、注意
页面中 哪些元素允许修改尺寸属性
1、所有的块级元素
2、具备width和height属性的非块级元素
<table width="" height="">
<img width="" height="">
4、溢出
属性：
overflow
overflow-x
overflow-y
取值：
1、visible
默认值，可见
2、hidden
隐藏
3、scroll
滚动条
4、auto
自动
2、边框
1、border:width style color;
2、border-方向:width style color
3、border-属性:值;
4、border-方向-属性:值;
注意:
1、color 可以取值为 transparent
2、取消边框显示
border:none;
border:0;
************************************
1、边框
2、框模型
3、背景属性
4、渐变
****************************
1、边框
1、边框倒角
属性：border-radius
该属性为简写属性，可以设置四个角的倒角半径
取值：以px为单位 或 以 % 为单位
单角定义:
border-top-left-radius:左上角
border-bottom-right-radius:右下角
border-bottom-left-radius:左下角
border-top-right-radius:右上角
2、边框阴影
给元素增加阴影
属性：box-shadow
取值：多属性值列表
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:必须 阴影的水平偏移距离，取值为正，向右偏，取值为负，向左偏
v-shadow:必须 阴影的垂直偏移距离，取值为正，向下偏，取值为负，向上偏
blur:可选，模糊距离
spread:可选，阴影的扩充尺寸
color:可选，阴影的颜色
inset:可选值，将默认的外阴影改为内阴影
3、轮廓
1、什么是轮廓
绘制于元素边框周围的一条线
2、属性
outline:width style color;
outline-width:宽度
outline-style:样式
outline-color:颜色
常用：
outline:0;
outline:none;
练习：
在作业基础上，完成以下操作
1、设置图像的边框倒角
2、鼠标悬停在图像上时，将边框由现有样式变成2px粗细，red边框颜色并且，不能有任何的位置变化
2、框模型(重难点)
1、框模型
框：盒子(box)
页面元素皆为框
框模型：(box-model)定义了元素处理内容，内边距，外边距，边框的一种方式
元素的 width和height属性 指定了内容区域的宽度和高度
元素的边框是绘制于元素外围的一条线，会扩大元素的占地尺寸
内边距和外边距 也会增加元素的占地尺寸，但不会影响元素的内容区域
元素的实际宽度=左右外边距+左右边框+左右内边距+width
元素的实际高度=上下外边距+上下边框+上下内边距+height
2、外边距
1、什么是外边距
围绕在元素边框周围的空白区域
作用：
1、控制元素与元素之间的距离
2、移动元素位置
2、属性
margin:四个方向的外边距
margin-方向:单边设置
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距
取值：
1、px 像素
2、%
3、auto(自动)
4、负值
3、取值-auto
左右方向设置为 auto 时，允许元素在其父元素中水平居中对齐，前提，必须设置该元素的宽度
4、取值-负值
移动元素，向着反方向移动
margin-left:-10px;向左移动10px
margin-top:-10px;向上移动10px
5、margin 属性的取值数量
margin:value;四个方向外边距
margin:v1 v2;上下 左右
margin:v1 v2 v3;上 左右 下
margin:v1 v2 v3 v4;上右下左
ex:
margin:0 auto;水平居中标准写法
6、页面中具备默认外边距的元素
h1,h2,h3,h4,h5,h6,p,ol,ul,pre,dl,dd
通过 CSS Reset 的方式 重写默认外边距
7、特殊效果
1、外边距合并
当两个垂直外边距相遇时，它们将形成一个外边距
合并后的外边距的高度等于两个发生合并外边距高度重的较大者
2、外边距的溢出
在某种特殊场合下，给子元素设置外边距时，效果却作用在父元素的外边距效果上了。
特殊场合：父元素不设置边框时，为父元素中的第一个子元素设置上外边距时，或为最后一个子元素设置下外边距时
解决方案：
1、为父元素添加边框
有瑕疵，父元素高度会发生改变
2、为父元素添加内边距来取代子元素外边距
有瑕疵，影响元素的尺寸
3、块级元素，行内元素，行内块元素的上下外边距
上下外边距对行内元素 无效
上下外边距对行内块元素的影响是，整行元素都会受到影响
3、内边距
1、什么是内边距
内容区域与边框之间的空间
会扩大元素边框所占用的区域
2、属性
padding:四个方向内边距
padding-top:
padding-bottom:
padding-right:
padding-left:
取值：
1、px
2、%
取值数量：
padding:value;四个方向内边距
padding:v1 v2;上下 左右
padding:v1 v2 v3;上 左右 下
padding:v1 v2 v3 v4;上右下左
3、特殊影响
为行内元素设置上下内边距时，只会影响元素自身，并不会影响到其他元素
4、属性-box-sizing
1、作用
指定边框，内边距，内容区域的计算模式
默认：width和height只负责定义内容区域的尺寸，border，padding额外添加到元素上的
2、属性 & 值
属性：box-sizing
取值：
1、content-box
默认值，在元素的width和height之外绘制边框和内边距
2、border-box
边框和内边距会包含在width和height之中
3、背景属性
1、背景色
属性：background-color
取值：
任意合法颜色值
transparent
注意：
背景颜色会填充到元素的内容区域，内边距区域以及边框区域
2、背景图像
属性：background-image
取值：url(图像url)
ex:background-image:url(a.jpg);
3、背景平铺
属性：background-repeat
取值：
1、repeat
默认值，垂直和水平方向都平铺
2、repeat-x
横向平铺
3、repeat-y
纵向平铺
4、no-repeat
不平铺，仅显示一次
4、背景图片尺寸
属性:background-size
取值:
1、value1 value2
具体数值，value1表示背景图像的宽度，value2表示背景图像的高度
2、value1% value2%
以元素的尺寸占比决定背景图的尺寸
3、cover
覆盖
把背景图扩展至足够的大(等比缩放)，直到背景图像完全覆盖到元素区域位置
4、contain
包含
将背景图像等比缩放，直到右边或下边碰到元素边缘为止
5、背景图片固定
属性：background-attachment
取值：
1、scroll
滚动,默认值
2、fixed
固定，将背景图保持在可视化区域内，不随着滚动条而发生变化
6、背景图片位置
属性：background-position
取值：
1、x y
x ：背景图像水平偏移位置
取值为正，向右移动
取值为负，向左移动
y ：背景图像垂直偏移位置
取值为正，向下偏移
取值为负，向上偏移
2、x% y%
3、
x:left/center/right 替代
y:top/center/bottom 替代
CSS Sprites
将若干幅小图像拼合到一副大图像中，想看具体小图像的时候，配合着背景图已经背景图像位置的方式进行移动，显示
1、根据要看的图像，创建一个元素,该元素大小要与要看的图像大小一致。
2、通过 背景图像以及背景图像位置 移动背景图到 显示的元素中
7、背景属性-简写属性
background:color url() repeat attachment position;
注意：属性值可以省略，省略的话将采用默认值
background:red;
Css day03
1、边框
1、边框倒角
border-radius
取值：
1、px
2、%
2、边框阴影
box-shadow
取值：
h-shadow:水平位置
v-shadow:垂直位置
blur : 模糊距离
spread ：大小
color ：颜色
inset ：值，内阴影
3、轮廓
outline:width style color;
outline-width:
outline-style:
outline-color:
outline:0;
outline:none;
2、框模型
定义元素处理内容尺寸，边框，内边距和外边距
元素总宽度=左右外边距+左右边框+左右内边距+width
1、外边距
属性：
margin:
margin-top:
margin-right:
margin-bottom:
margin-left:
取值：
1、px
2、%
3、auto
只对 左右 有效，上下无效
处理块级元素的水平居中对齐
4、负值
移动元素
margin-left:-10px;左移动
margin-left:10px;右移动
margin-top:-10px;上移动
margin-top:10px;下移动
margin取值数量
margin:value;
margin:v1 v2;
margin:v1 v2 v3;
margin:v1 v2 v3 v4;
特殊注意：
1、外边距合并
2、外边距溢出
3、行内元素行内块元素
行内元素：对上下外边距无效
行内块元素：设置上下外边距会影响整行元素
2、内边距
padding:
padding-top:
padding-right:
padding-bottom:
padding-left:
取值：
1、px
2、%
注意：
1、设置了内边距后，会扩大元素的边框内的占地尺寸
2、为行内元素设置内边距时，只会影响到自己，不影响其他元素
3、属性 - box-sizing
指定元素边框内距离计算模式
属性：box-sizing
取值：
1、content-box
border和padding会在width和height基础上额外计算
2、border-box
border和padding会计算在width和height之内
3、背景
1、background-color
2、background-image
取值：url(图像url);
3、background-repeat
repeat,no-repeat,repeat-x,repeat-y
4、background-size
取值：
1、width height
2、width% height%
3、cover
4、contain
5、background-attachment
取值：
scroll
fixed
6、background-position
取值：
1、x y
x:水平偏移距离
+ ：右移动
- ：左移动
y:垂直偏移距离
+ ：下移动
- ：上移动
2、x% y%
3、left,right,center,top,bottom
7、background:color url() repeat attachment position;
******************************
1、渐变
1、什么是渐变
多种颜色变化的一个过程
分类：
1、线性渐变
2、径向渐变
3、重复渐变(线性,径向)
特点：
1、渐变都有填充方向(线性渐变)
2、色标(颜色，位置)
2、语法
属性：background-image
取值：
1、linear-gradient():线性渐变
2、radial-gradient():径向渐变
3、repeating-linear-gradient():重复线性渐变
4、repeating-radial-gradient():重复径向渐变
3、线性渐变
语法：background-image:linear-gradient(angle,color-point,color-point,...);
1、angle
渐变的方向或角度
取值：
to top : 从下向上填充渐变色
to right:从左向右填充渐变色
to bottom:从上向下填充渐变
to left:从右向左填充渐变色
0deg : 0度->to top
90deg: 90度->to right
180deg:180度->to bottom
270deg:270度->to left
2、color-point
色标：表示颜色及其颜色出现的位置
ex
red 0% : 开始的时候是红色
blue 25%:25%的时候变成蓝色
red 0px : 开始的时候是红色
blue 25px:到25px的位置处，变为蓝色
练习：创建一个 400*400的div元素，从下向上分别填充red(0%)，blue(50%)，green(100%) 颜色
4、径向渐变
语法：background-image:radial-gradient([size at position],color-point,color-point);
1、size at position
size:表示圆的半径
position:圆心位置，取值可以为 数值，百分比，关键字
该参数可以省略的，圆心位置在元素的正中间
5、重复渐变
语法：
background-image:repeating-linear-gradient(同线性渐变);
background-image:repeating-radial-gradient(同径向渐变);
6、浏览器兼容性
对不支持渐变的浏览器可以增加浏览器前缀来解决兼容性
Firefox : -moz-
Chrome&Safari :-webkit-
Opera:-o-
IE : -ms-
background-image:linear-gradient();
如果浏览器不支持 属性的话 ， 那么前缀就加在属性名称前
ex:
animation,css3中所出的新属性
-webkit-animation:值;
-moz-animation:值;
-o-animation:值;
如果浏览器支持属性但不支持值得花，那么前缀就加在值前
ex:
background-image:linear-gradient();
linear-gradient()是CSS3中出现的新属性值。
background-image:-webkit-linear-gradient();
background-image:-moz-linear-gradient();
background-image:-o-linear-gradient();
2、文本格式化
1、字体属性
1、字体
属性：font-family
取值：value,value
注意：
字体取值中包含特殊符号和中文的话，要用 "" 引起来
ex:
font-family:Arial,"microsoft yahei";
2、字体大小
属性：font-size
3、字体加粗
属性：font-weight
取值：
1、normal：正常显示，大部分标记的默认值
2、bold : 加粗
3、无单位数值
400~900
400 : normal
900 : bold
4、字体样式
属性：font-style
取值：
1、normal 正常
2、italic 斜体
5、小型大写字母
Aa Bb Cc Dd
属性：font-variant
取值：
1、normal
2、small-caps
6、字体属性
属性：font
取值：style variant weight size family;
ex:
font:bold 12px "Arial";
font:12px bold "arial";不对
注意：
使用font属性的话，一定要加上 family的值，否则没效果
2、文本属性
1、文本颜色
属性：color
2、文本排列
作用：控制元素中的文本、行内、行内块元素的水平对齐方式
属性：text-align
取值：left/center/right
3、文字修饰
属性：text-decoration
取值：
1、none
没有
2、underline
下划线
3、overline
上划线
4、line-through
删除线 --> <s></s>
4、行高
作用：指定一行文本的高度。如果行高高于文字本身大小，那么文本将在指定的行高范围内垂直居中显示
属性：line-height
取值：数值
5、首行文本缩进
属性：text-indent
取值：value
6、文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color;
3、表格
1、表格常用属性
1、边距属性：padding
2、尺寸属性:width,height
3、文本、字体属性
4、背景属性：background ...
5、边框属性: border
6、垂直方向对齐：vertical-align
取值：top/middle/bottom
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate
默认值，分离边框模式
2、collapse
合并
2、边框边距
属性：border-spacing
作用：控制相邻单元格之间的距离
取值：
1个值：水平和垂直间距相同
2个值：第1个值表示水平间距，第2个值表示垂直间距。两个值之间用空格隔开
注意：border-collpase的值必须为 separate时才能设置边框边距
3、标题位置
标题：<caption></caption>
默认位置：表格上方水平居中
属性：caption-side
取值：
1、top ：默认值
2、bottom : 标题位于表格之下
4、显示规则
作用：如何去布局一个表格,指定了表格显示单元格，行的算法规则, 又称为 表格布局
属性：table-layout
取值：
1、auto ：自动，自动表格布局(默认值)
列宽度是由内容来决定的
2、fixed ：固定，固定表格布局
列宽度有表格以及单元格所设定好的数据为主
auto与fixed的区别：
1、自动表格布局
1、单元格大小会适应内容
2、表格复杂时会比较慢
3、适用于不确定每列大小时使用
4、自定布局算法较慢，但是能反映传统的HTML表格
2、固定表格布局
1、列宽度取决于表格的宽度，列的宽度
2、会加速显示表格
3、固定表格布局算法比较快，但不够灵活
4、浮动(重点)
Css day04
1、渐变
1、线性渐变
background-image:linear-gradient(angle,color-point,color-point);
ex:
background-image:linear-gradient(to bottom,#f9f9f9,#cdcdcd);
2、径向渐变
background-image:radial-gradient([size at position],color-point,...);
3、重复渐变
属性：background-image
取值：
repeating-linear-gradient()
repeating-radial-gradient()
4、浏览器兼容性
浏览器前缀：
Firefox ：-moz-
Chrome&Safari:-webkit-
Opera:-o-
IE : -ms-
1、如果浏览器不支持属性的话，那么将前缀添加在属性名称前
animation:值;
-webkit-animation:值;
-moz-animation:值;
-o-animation:值;
-ms-animation:值;
2、如果浏览器不支持值得话，那么将前缀添加在值前面
background-image:-webkit-linear-gradient();
2、文本格式化
1、字体属性
font-family
font-size
font-style
font-weight
font-variant
font:style variant weight size family;
2、文本属性
color
text-align:left/center/right;
text-decoration:none/underline/overline/line-through
line-height
text-indent
text-shadow:h v blur color;
3、表格
1、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate ：分离边框，默认值
2、collapse : 合并边框
2、边框边距
属性：border-spacing
取值：
1个值：水平垂直间距相等
2个值：
第1个值表示水平间距
第2个值表示垂直间距
3、标题位置
属性：caption-side
取值：
1、top:默认值
2、bottom
4、显示规则
属性：table-layout
取值：
1、auto
自动表格布局
由内容来决定单元格大小
传统表格布局
速度较慢
2、fixed
固定表格布局
由设定的值来决定单元格大小
加载速度较快，不够灵活
*****************************
1、浮动(重难点)
2、显示
3、列表
4、定位(重难点)
*****************************
1、浮动
1、定位
1、什么是定位
元素该出现在网页的哪个位置处
2、定位方式
1、普通流定位
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、普通流定位
又称为 文档流定位
网页元素默认定位方式
页面元素
块级元素-从上到下的方式排列
行内元素-从左到右的方式排列
<body>
<div id="d1">Hello</div>
<div id="d2">World</div>
<span>Hello</span>
<span>World</span>
</body>
4、浮动定位
1、什么是浮动定位
如果将元素的定位方式设定为浮动定位的话，那么它将具备以下特征
1、浮动元素 会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位
2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
3、浮动元素依然位于包含框之内
4、浮动定位解决的问题-让多个块级元素在一行内显示
2、属性
属性：float
取值：
1、none
默认值，无浮动定位
2、left
左浮动，让元素停靠在父元素的左边，或紧挨着左侧已有的浮动元素
3、right
右浮动，让元素停靠在父元素的右边，或紧挨着右侧已有的浮动元素
5、浮动引发的特殊效果
1、当父元素的宽度已显示不下所有的已浮动子元素时，那么最后一个子元素将换行显示
2、元素一旦浮动起来之后，元素的宽度将变成自适应(内容决定宽度)，前提：不指定元素宽度的情况下
3、元素一旦浮动起来之后，都将变成块级元素，尤其对行内元素影响较大
块级元素：允许修改尺寸
行内元素：不允许修改尺寸
4、文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的。
6、清除浮动影响
属性：clear
取值：
1、none
默认值，不做任何清除操作
2、left
清除该元素左边(上边)的浮动元素所带来的影响
3、right
清除该元素右边的浮动元素所带来的影响
4、both
清除该元素两边的浮动元素所带来的影响
7、浮动元素对父元素所带来的影响
由于浮动元素脱离文档流，所以不占据父元素空间。如果一个元素中所有的子元素全部都浮动了的话，那么该元素的高度将变成0
解决方案：
1、直接设置父元素高度
弊端：必须要知道父元素高度是多少
2、设置父元素也浮动
弊端：对后续元素会带来位置的影响
3、为父元素设置 overflow 属性
取值：hidden 或 auto
弊端：如果有内容要以溢出的方式显示的话，也一同被隐藏了。
4、在父元素中，追加空子级块级元素，并设置其clear属性值为 both
2、显示
1、显示方式
1、what
每个元素都有自己的显示方式，显示方式决定了元素的显示特点
2、属性
属性：display
取值：
1、none
不显示元素--隐藏
特点：脱离文档流--不占据页面空间
2、block
像块级元素一样显示元素
场合：将行内元素变为块级元素
3、inline
像行内元素一样显示元素
注意：不要块级元素(div/p..)改变成行内元素
4、inline-block
像行内块元素一样显示元素
行内块：多个元素会在一行内显示，但是允许修改尺寸
场合：将行内元素改变为行内块，以便修改尺寸
2、显示效果
1、元素可见性
属性：visibility
取值：
1、visible
默认值，元素可见
2、hidden
元素不可见,但依然占据页面空间
3、collapse
用在表格元素上，删除一行或一列时不影响整体表格布局
面试：dispaly:none 与 visibility:hidden之间的区别
display:none;脱离文档流,所以不占空间
visibility:hidden;没有脱离文档流，所以元素隐藏，空间保留
2、透明度
属性：opacity
取值：0.0(完全透明) ~ 1.0(完全不透明)
3、垂直对齐
属性：vertical-align
作用：
1、设置td中的内容垂直对齐方式
2、设置 img 或 行内块元素周围(左右两边)的文本 的垂直对齐方式
取值：
top/middle/bottom
baseline:默认值，基线对齐
注意：
基线对齐方式，会将图片扩大3px
3、光标
属性：cursor
取值：
1、default
2、pointer
小手
3、crosshair
+
4、text
I
5、wait
等待
6、help
?
3、列表
1、列表项标识
属性：list-style-type
取值：
1、none : 无标记
2、disc
3、circle
4、square
5、... ...
2、列表项图像
属性:list-style-image
取值:url()
3、列表项位置
属性:list-style-position
取值：
outside : 默认值，标识位于列表项区域之外
inside : 标记放在列表项区域之内
4、列表属性
属性：list-style
取值：type url position;
常用方式：list-style:none;
Css day05
1、浮动
1、定位
普通流定位(文档流定位)
浮动定位
相对定位
绝对定位
固定定位
2、浮动定位
1、特征
1、脱离文档流-不占据页面空间,后续元素上前补位
2、会停靠父元素的左边或右边，或者停靠在其他平级已浮动元素边缘上
3、依然包含在父元素内
4、让多个块级元素在一行内显示
2、语法
属性：float
取值：
none/left/right
3、浮动引发的特殊效果
1、父元素宽度已经不足以包含所有的已浮动子元素，最后一个将换行
2、元素浮动起来后，宽度将变得自适应
3、行内元素，行内块元素一旦浮动起来后，将变成块级元素
4、文本，行内元素，行内块元素采用环绕的方式进行排列，会巧妙的避开浮动元素而不会被压住
4、清除浮动
属性：clear
取值：
none/left/right/both
5、浮动元素对父元素带来的影响
对父元素高度带来的影响
1、设置父元素高度
弊端：必须知道父元素的高度
2、设置父元素也浮动
弊端：对后续元素有影响
3、为父元素设置 overflow
取值为：hidden 或 auto
弊端：如果有内容要溢出显示也会被一同隐藏了
4、在父元素中，追加空块级子级元素,并设置其clear属性为both
<div style="clear:both;"></div>
2、显示
1、显示方式
属性：display
取值：
1、none
隐藏，脱离文档流-不占据页面空间
2、block
块级
3、inline
行内
4、inline-block
行内块
除radio和checkbox外的其他行内块元素，是允许修改尺寸的
允许在一行内显示多个元素
2、显示效果
1、可见性
属性：visibility
取值：
1、visible
可见的
2、hidden
隐藏，但是会占据页面空间
3、collapse
2、透明度
属性：opacity
取值：0.0(完全透明) ~ 1.0(完全不透明)
3、垂直对齐方式
属性：vertical-align
取值：
1、baseline
基线对齐
2、top
3、middle
4、bottom
3、光标
属性：cursor
取值：pointer
3、列表
1、列表项显示标识
属性：list-style-type
取值：
none
... ...
2、列表项图像
属性：list-style-image
取值：url()
3、列表项位置
属性：list-style-position
取值：
outside ：默认值
inside ：列表项区域之内
4、列表属性
属性：list-style
取值：type url positioin
常用方式：list-style:none;
******************************
1、定位
1、定位属性
1、定位属性
属性：position
取值：
1、static
默认值，默认定位方式
2、relative
相对定位
3、absolute
绝对定位
4、fixed
固定定位
注意：position取值为 relative，absolute，fixed 的元素被称为 已定位元素
2、偏移属性
作用：移动已定位元素
属性：
top:值;
bottom:值;
left:值;
right:值;
3、堆叠顺序
属性:z-index
取值:无单位数值
2、定位方式-相对定位
1、什么是相对定位
元素会相对于它原来的位置偏移某个距离
元素移动位置后，原来所占据的空间依然会保留
2、使用场合
位置微调
3、语法：
属性：
position:relative;
配合着 偏移属性 实现位置的移动
3、定位方式-绝对定位
1、绝对定位的特征
1、元素会脱离文档流
2、相对于 最近的 已定位的祖先元素 来实现位置的初始化
3、如果元素没有已定位祖先元素，那么它的位置就相对于最初的包含块(body,html)
2、语法
属性：
position:absolute;
配合着 偏移属性 实现位置的初始化或移动
3、绝对定位使用场合
弹出菜单
4、注意
1、绝对定位的元素会变成块级
2、绝对定位的元素可以使用 margin来改变位置，但是 margin:auto 会失效
4、堆叠顺序
1、作用
处理 已定位元素的 堆叠效果
2、默认堆叠效果
1、平级元素-后来者居上
2、子元素压在父元素之上-子压父
3、属性
z-index
取值：数值越大越靠上
4、注意
1、取值可以为负
取值为负时，当前元素会位于页面正常显示内容之下
2、z-index 是无法改变父子关系的堆叠顺序
5、固定定位
1、什么是固定定位
将元素固定在网页的某个位置处
不会随着滚动条而发生位置的变化
2、语法
position:fixed;
配合 片以属性 改变元素位置
3、注意
固定定位永远都是相对于浏览器窗口进行位置初始化的。
Css core day01
1、复杂选择器
2、内容生成
3、多列
4、CSS Hack(浏览器兼容性)
*******************************
1、复杂选择器
1、兄弟选择器
1、作用
通过元素的平级关系来匹配其他元素
只能向后不能向前
2、分类
1、相邻兄弟选择器
匹配指定元素的相邻兄弟
相邻：紧紧挨在指定元素的后面
语法：
选择器1+选择器2
ex:
1、div+p{}
2、#content+.important{}
2、通用兄弟选择器
通用：某元素后面所有的兄弟元素
语法：
选择器1~选择器2
2、属性选择器
1、作用
允许使用元素所附带的属性及其值，来匹配页面的元素
2、语法
唯一一组以 [] 来进行表示的选择器
1、[attr]
attr:任意属性名称
作用：匹配 附带 attr 属性的元素
ex:
1、[id]
匹配页面所有附带 id 属性的元素
2、elem[attr]
elem : 表示任意元素
作用：匹配附带 attr 属性的 elem 元素
ex:
1、p[id]
3、elem[attr1][attr2]
作用：匹配页面中所有即附带attr1属性也同时附带attr2属性的elem元素
ex:
div[id][class]
4、elem[attr=value]
value:值
作用：匹配页面上 附带attr属性同时值为 value 的elem 元素
ex:
input[type=text] : 获取页面所有文本框
5、elem[class~=value]
作用：匹配 附带 class 属性的 elem元素，其中class属性的值是以空格隔开的值列表，value是值列表中的一个独立值。
6、elem[attr^=value]
^= : 以 value 作为开始
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为开始的
7、elem[attr$=value]
$= : 以 value 作为结束
作用：匹配附带attr属性的elem元素，并且该属性值是以value作为结束的
8、elem[attr*=value]
*= : 包含 value 字符即可
3、伪类选择器
1、目标伪类
1、作用
突出显示活动的HTML锚元素。匹配当前页面中活动的HTML锚元素。
2、语法
:target
2、元素状态伪类
1、作用
元素状态 ：启用，禁用，被选中(checked)
2、语法
:enabled , 匹配每个已启用元素(表单控件)
:disabled , 匹配每个已禁用元素(表单控件)
:checked , 匹配每个被选中元素(radio,checkbox)
3、结构伪类(重点)
1、:first-child
匹配 属于其父元素中的首个子元素
2、:last-child
匹配 属于其父元素中的最后一个子元素
3、:nth-child(n)
匹配 属于其父元素中的第n个子元素
4、:empty
匹配 没有子元素(包含文本)的每个元素
<div></div>
5、:only-child
匹配属于其父元素中的唯一子元素
<div>
<p>Hello World</p>
</div>
4、否定伪类
1、语法
:not(选择器)
作用：将 满足选择器的元素从指定范围中排除出去
4、伪元素选择器
1、作用
伪类：匹配元素的
伪元素：匹配元素中的内容
2、语法
1、:first-letter 或 ::first-letter
匹配 指定元素的 首字符
2、:first-line 或 ::first-line
匹配 指定元素的 首行
3、::selection
匹配 被用户选取的部分
3、: 和 ::的区别
CSS3之前，所有的伪元素选择器，全部都是 使用 :，ex :first-line,:first-letter
CSS3中，将所有的伪元素选择器全部都升级为 :: , ex ::first-letter, ::first-line
为了能够实现浏览器的兼容性，比较推荐使用 :的写法
2、内容生成
1、什么是内容生成
通过 css 向现有的 元素内容区域中增加一部分内容
2、伪元素选择器
1、:before 或 ::before
匹配到某元素的内容区域之前
<div>(内容区域之前)Hello World</div>
2、:after 或 ::after
匹配到某元素的内容区域之后
<div>Hello World(内容区域之后)</div>
3、属性
属性:content
取值：
1、字符串 : 纯文本
2、url : 图像
3、计数器
4、计数器
1、作用
生成一段有序的数字，并且插入到元素中
2、三步走
1、声明(复位)计数器
1、属性
counter-reset
取值：
1、默认值为 0
2、可以取值为 正数或负数
counter-reset:计数器名称 值;
一次性声明多个计数器:
counter-reset:名1 值1 名2 值2;
2、什么地方声明计数器???
不能放在使用的元素中声明
2、设置计数器的增量
1、属性
counter-increment
作用：设置某个选择器出现的计数器的增量，默认值为1
counter-increment:名称 增量值;
2、什么地方声明计数器增量???
哪个元素使用，就在哪个元素中设置增量
3、使用计数器
1、函数
counter(计数器名称)
配合着 :before 或 :after 一起使用
div:before{
content:counter(name);
}
4、练习
1、倚天屠龙记
1.1 张三丰
1.2 张翠山
1.3 张无忌
1.4 殷素素
2、西游记
2.1 孙悟空
2.2 猪悟能
2.3 沙悟净
2.4 白骨精
3、多列
1、分隔列
1、作用
将一段文本拆分成几列
2、属性
column-count
取值：数字
2、列间隔
1、作用
每两列之间的间隔距离
2、属性
column-gap
取值：px
3、列规则
1、作用
每两列之间增加分割线，并设置分割线的宽度，样式，颜色
2、属性
column-rule : width style color;
4、浏览器兼容性
IE10+,Opear 支持
Firefox : -moz-
Chrome,Safari: -webkit-
4、CSS Hack
1、解决问题
IE各版本浏览器兼容性问题
2、CSS Hack
浏览器的类型及版本不同会造成CSS的解析效果也各不相同
不同厂商浏览器：IE，Chrome，Firefox，Safari
同一厂商浏览器的不同版本：IE6,IE7,IE8,IE9,IE10
3、CSSHack 原理
使用 CSS 样式属性的 优先级 来解决兼容性问题
4、CSSHack 分类
1、CSS类内部Hack
通过 属性前缀或值后缀 的方式来解决兼容性
+ : 被IE6，IE7识别
- : 被IE6 识别
+，-如果同时出现的话，+只针对IE7，-只针对IE6
注意：
IE7的兼容代码 要在上
IE6的兼容代码 要在下
2、选择器Hack
在选择器前加上某些浏览器能识别的前缀
div{
}
*前缀：IE6识别
*+前缀：IE7识别
*div{}
*+div{}
3、HTML头部引用Hack
1、原理
通过IE条件注释 解决兼容性问题
IE浏览器会根据一个if条件判断，判断指定的内容是要被解析还是被注释
2、语法
<!--[if 条件 IE 版本]>
内容
<![endif]-->
版本：6 ~ 10 数字
条件：
1、gt
大于指定版本的浏览器
2、gte
大于等于指定版本的浏览器
3、lt
小于指定版本的浏览器
4、lte
小于等于指定版本的浏览器
5、!
除条件版本以外的其他版本浏览器
ex:
<!--[if gt IE 6]>
该段内容只能在 IE6以上版本的浏览器中显示
<![endif]-->
<!--[if IE 8]>
该段内容只能在IE8中显示
<![endif]-->
Css core day02
1、复杂选择器
1、兄弟选择器
1、相邻兄弟
选择器1+选择器2
2、通用兄弟
选择器1~选择器2
2、属性选择器
语法：[]
[attr]:匹配附带attr属性的元素
elem[attr]:... ...
elem[attr1][attr2]:
[attr=value]:
[class~=value]:
[attr^=value]:
[attr$=value]:
[attr*=value]:
3、伪类选择器
1、目标伪类
:target
2、元素状态伪类
:enabled,匹配被激活元素(表单控件)
:disabled,匹配被禁用元素(表单控件)
:checked,匹配被选中元素(radio，checkbox)
3、结构伪类
1、:first-child
2、:last-child
3、:nth-child(n)
4、:empty
5、:only-child
4、否定伪类
:not(选择器)
4、伪元素选择器
1、作用
匹配元素中的内容
2、语法
:first-letter,匹配元素的首字符
:first-line,匹配元素的首行
::selection,匹配用户选中的部分
注意： :与::的区别
2、内容生成
1、语法
1、伪元素选择器
1、:before,匹配元素内容区域之前
2、:after,匹配元素内容区域之后
2、属性
属性：content
取值：
1、字符串 ：普通文本,""
2、url() , 生成一副图像
3、计数器
3、解决问题
1、浮动元素的父元素高度问题
div:after{
content:"";
display:block;
clear:both;
}
2、外边距溢出
div:before/div:after{
content:"";
display:table;
}
4、计数器
1、声明或复位一个计数器
属性：
counter-reset:名 值 名 值;
值，可以省略，默认为0
注意：
1、不能将计数器声明在使用的元素中
2、设置计数器增量
属性：counter-increment:名 值;
值，可以省略，默认为1
注意：
1、哪个元素使用，就在哪个元素上声明增量
3、使用计数器
属性：content
取值：counter(名);
注意：
配合着:before或:after一起使用
3、多列
1、属性
1、分隔列
属性：column-count
2、列间隔
属性：column-gap
3、列规则
属性：column-rule:width style color;
2、兼容性
添加浏览器前缀
4、CSS Hack
1、CSS Hack方式
1、CSS 类内部hack
通过 属性前缀或值后缀的方式来编写指定浏览器能够识别的样式
hack 写法
* *color IE6,IE7
+ +color IE6,IE7
# #color IE6,IE7
- -color IE6
_ _color IE6
\0 color:red\0; IE8,IE9,IE10
\9\0 color:red\9\0; IE9,IE10
注意：
顺序问题
IE8,IE9,IE10(\0)
IE9,IE10(\9\0)
IE6,IE7(+)
IE6(-)
2、选择器Hack
在选择器前加上浏览器能够识别的前缀
* : IE6
*body{
/*IE6中body的样式*/
}
*+ : IE7
*+body{
/*IE7中body的样式*/
}
3、HTML都不引用Hack
通过HTML的条件注释
条件注释语法：
<!--[if 条件 IE 版本]>
内容
<![endif]-->
条件：
1、gt ：大于指定版本
2、gte ：大于等于
3、lt ：小于
4、lte ：小于等于
5、!不是指定版本
******************************
1、转换
2、过渡
3、动画
4、CSS 优化
******************************
1、转换
1、转换简介
1、什么是转换
改变元素在页面中的大小，位置，角度和形状的一种方式
2、转换分类
1、2D转换
使元素在x轴和y轴上发生变化效果
2、3D转换
在2D转换基础上，增加 z轴的变化效果
3、转换属性
属性：transform
取值：
1、none
默认值，不进行任何转换
2、转换函数
表示一个或者多个转换函数，如果是多个函数的话，中间以空格分开
4、转换原点
属性：transform-origin
默认情况下，原点是在整个元素的中心位置处
取值：数值/百分比/关键字
两个值：表示 x轴 和 y轴的位置
三个值：表示 x轴 ，y轴 ，z轴的位置
2、2D转换
1、2D位移
1、属性 和 函数
属性:transform
函数:
translate(x) :元素在x轴上的位移距离，取值为正，向右移动，取值为负，向左移动
translate(x,y) :
x表示x轴位移距离
y表示y轴位移距离，取值为正，向下移动，取值为负，向上移动
translateX(x) :只改变元素在x轴上的位置
translateY(y) :只改变元素在y轴上的位置
取值：
1、数值
2、百分比
2、2D缩放
1、作用
改变元素在页面中的大小
2、属性和函数
属性：transform
函数：
scale(value),如果只给一个值，那么x轴和y轴将等比缩放
scale(x,y):改变 x轴和y轴的缩放比例
scaleX(x):只改变x轴的缩放比例
scaleY(y):只改变y轴的缩放比例
取值：
默认值 为1
缩小：0~1 之间的数值
放大：大于1的数值
3、2D旋转
1、作用
改变元素在页面中的角度
2、属性 和 函数
属性：transform
函数：rotate(ndeg)
n取值为正，则顺时针旋转
n取值为负，则逆时针旋转
3、注意
1、转换时，坐标轴会一起进行转换
2、转换原点可以影响转换效果
4、2D倾斜
1、作用
改变元素在页面上的形状
2、属性 和 函数
属性：transform
函数：
skew(xdeg) : x轴倾斜指定角度
实际上时改变 y轴的倾斜角度
取值为正：逆时针
取值为负：顺时针
skewX(xdeg) : 效果同上
skewY(ydeg) : y轴倾斜指定角度
实际上是改变 x轴的倾斜角度
取值为正：顺时针
取值为负：逆时针
3、3D转换
1、3D转换
增加 z轴 转换效果
2、属性
属性：perspective
作用：模拟 人眼睛到 3D投射元素的距离
注意：该属性 需要加在 3D转换元素的父元素上
兼容性：
火狐：-moz-perspective:
Chrome，Safari:-webkit-perspective
Opera:-o-perspective
3、3D旋转
允许元素在 x轴，y轴，z轴上进行旋转操作
属性 和 函数
属性:transform
函数：
rotateX(xdeg):以x轴为中心轴进行元素的旋转
rotateY(ydeg)
rotateZ(zdeg)
rotate3D(x,y,z,ndeg)
x,y,z,如果取值为 0的话，说明该轴不参与旋转
x,y,z,如果取值为 1的话，说明该轴是参与旋转的
rotate3d(0,0,1,45deg)-- rotatez(45deg)
rotate3d(1,1,0,45deg)
4、3D位移
1、作用
改变元素在z轴上的位置
2、属性 和 函数
属性：transform
函数：
translateZ();
translate3D(x,y,z)
3、属性 : transform-style
作用：规范当前元素的子元素如何去排列3D位置
取值：
1、flat
默认值，不保留子元素的3D位置
2、preserve-3d
保留子元素3d位置
2、过渡
1、什么是过渡
使得CSS的属性值在一段时间内平滑过渡
2、过渡的 4个要素(属性)
1、指定过渡属性
属性：transition-property
作用：规定应用过渡效果的CSS属性名称
取值：
1、none
2、all
3、property-name : 具体使用过渡效果的属性名称
可以设置过渡的属性：
1、颜色属性
2、取值为数值的属性
3、转换属性
transform
4、渐变属性
5、visibility 属性
6、阴影属性
ex:
div{
transition-property:background;
}
2、指定过渡时间
属性：transition-duration
取值：以秒(s) 或 毫秒(ms) 作为单位的
默认值为0，即没有过渡效果
ex:
div{
transition-property:background;
transition-duration:300ms;
}
3、指定速度时间曲线函数
属性：transition-timing-function
取值：
1、ease : 默认值，慢速开始，快速变快，慢速结束
2、linear : 匀速
3、ease-in : 慢速开始，加速结束
4、ease-out: 快速开始，减速结束
5、ease-in-out:慢速开始和结束，中间先加后减
ex:
div{
transition-property:background;
transition-duration:300ms;
transition-timing-function:linear;
}
4、指定过渡延迟时间
属性：transition-delay
取值：ms 或 s 作为单位的数值
3、触发过渡效果
一般都是由用户行为触发
5、过渡属性-过渡子属性的简写模式
transition:property duration timing-function delay;
3、动画
1、什么是动画
使元素从一种样式逐渐变化为另一种样式
其原理是通过 关键帧 控制动画的每一步
注意：浏览器兼容性
通过了浏览器前缀解决兼容性
-moz-
-webkit-
-o-
2、使用动画的步骤
1、声明动画
声明动画的名称，并且指定关键帧的信息
关键帧：
1、时间点
2、该时间点上的状态(样式)
2、使用动画
通过动画属性，将动画效果绑定到某个元素上
3、声明动画
语法
@keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
... ...(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}
兼容 Chrome Safari
@-webkit-keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
... ...(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}
兼容 Firefox
@-moz-keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
... ...(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}
时间点：
0%(from) : 动画开始的时候
50% : 动画运行到一半的时候
100%(to) : 动画结束的时候
4、动画的调用
1、animation-name
要调用的动画名称
2、aniamtion-duration
动画完成一个周期需要用的时间
以s 或 ms 为单位
3、animation-timing-function
动画的 速度时间 曲线函数
ease
linear
ease-in
ease-out
ease-in-out
4、animation-delay
动画执行延迟时间
s|ms为单位
5、animation-iteration-count
动画播放次数
取值：
1、具体数值
2、infinite
无限次播放
6、animation-direction
动画播放方向
取值：
1、normal
默认值，正向播放，即从 0%~100%
2、reverse
逆向播放，即从100% ~ 0%
3、alternate
轮流播放，动画在奇数次数播放时，从 0% ~ 100%,动画在偶数次数播放时，从100% ~ 0%
7、animation属性
animation:name duration timing-function delay iteration-count direction;
8、animation-fill-mode
动画播放前后的填充方式
取值：
1、none
默认值，不改变默认行为
2、forwards
动画完成后，将保持在最后一个关键帧的状态上
3、backwards
动画播放前(在延迟时间内)，将元素保持在第一个帧的状态上
4、both
动画播放前后的填充模式都应用
9、animation-play-state
动画的播放状态
取值：
1、paused
暂停
2、running
播放
6507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
