css3
1. 学习目标
1) 如何重置样式
2) 如何优化样式
1. 如何布局
2. 如何细化
2. 认识css
层叠样式表，用于修饰HTML结构的（布局、样式修饰）
1) 什么是布局？
默认情况下，左、右是上下排列（块元素的特点是独占一行空间！）
可以使用css技术，让其进行左右排列
2) 什么是样式修饰
排列（居中，居左，居右）
字体（粗细、大小、颜色）
背景（背景色，背景图片，背景渲染起点，背景填充方式）
3. css语法
1. 样式
选择器1 {
key1:val1; /*规则 */
key2:val2;
....
}
选择器2 {
key1:val1; /*规则 */
key2:val2;
....
}
什么是选择器？
精确选择要添加样式的目的地
.header > div:first-child{
float:left;
text-align: left;
color: #666666;
}
解释：
选择器 .header > div:first-child
规则 {key:val}
文本类 text-
字体类 font-
背景色 background
布局类 float position ...
-
css如何应用到html中
-
嵌入在html(header)标签中【上课】
将css写在html中 -
外部导入一个单独的css文件【项目】
将css写在一个单独的css文件中，然后通过link导入到html中 -
嵌入在html标签中【较少，修改别人代码】
将css写在html中的标签的属性中
-
-
选择器
-
基本选择器
id选择器
#two {}
类选择器
.second{}
标签选择器
p {}
或者选择器
.first , .second {}
并且选择器
div.first{} -
层次选择器
子代选择器 (建议再5层以内)
div.first > p {}
后台选择器
div.first li {}
下一个兄弟选择器
#two_li + li
之后所有兄弟选择器
#two_li ~ li -
过滤器
选择器 过滤器-
伪元素过滤器（伪元素选择器）
::after 在选中元素的内部后面插入一个元素(伪元素【没有开始标签结束标签】)
::before 在选中元素的内部前面插入一个元素(伪元素【没有开始标签结束标签】)ul>li::before{}
ul>li::after{} -
伪类过滤器（伪类选择器）
:first-child
:last-child
:nth-child(n)
:only-child:first-of-type
:last-of-type
:nth-of-type(n):hover
:visited
:active -
属性过滤器
选择器[key x val ]
div[id] 选中div元素，并且这个元素中具有id属性
div[id=one] 选中div并且id属性值为one,等价于 div#one
div[id^=o] 选中div并且id的值以o开头
div[id$=o] 选中div并且id的值以o结尾
div[id~=o] 选中div并且id的值之一为o
div[id*=o] 选中div并且id的值中包含o
-
-
选择器的优先级
《起跑线》印度电影特权：!important (添加在规则上，优先级最高)
权值:
1000 声明在style属性中的规则
100 id选择器
10 类选择器，伪类选择器，属性选择器
1 元素选择器，伪元素选择器
-
-
盒子模型
块元素（盒子）
搭建网页结构-
特点：
1) 独占一行空间
2) 默认宽度为100%，（占满父元素）
3) 高度默认为0，如果有子元素，父元素高度由子元素决定
4) 宽度和高度可以改变，通过width/height -
概念
1）宽度 width
2）高度 height
3）外边距 margin
margin:1px; 【速写形式】外边距上右下左都有1px
margin:1px 2px; 上下为1px;右左为2px
margin:1px 2px 3px; 上1px ,右左2px,下3px
margin:1px 2px 3px 4px; 上1px ,右px,下3px,左4pxmargin-top:1px; margin-bottom:2px; margin-left:10px; margin-right:5px;4）边框 border
border:1px solid #ccc; 【使用频率最高的速写，超级速写】
上下右左边框的宽度为1，样式为实心线，颜色为#ccc
border-width 【速写】边框宽度
border-width:1px;
border-top-width:1px;
border-bottom-width:1px;
border-right-width:1px;
border-left-width:1px;
border-style 边框样式
border-top-style:solid;
border-bottom-style:dotted;
border-right-style:dashed;
border-left-style:double;
border-color 边框颜色
border-top-color:
border-right-color:
border-bottom-color:
border-left-color:5）内边距 padding
与margin类型
padding:1px; 【速写形式】
padding:1px 2px;
padding:1px 2px 3px;
padding:1px 3px 3px 4px;padding-top: padding-right: padding-bottom: padding-top:- 圆角边框
border-radius:5px;
border-top-left-radius:
border-top-right-radius:
…
3.盒子类型 - 传统盒子（内容盒子）
box-sizing:content-box;
width 表示的是盒子中内容的宽度，不包含border padding
盒子所在的宽度 = width = 左右boder + 左右padding - 怪异盒子（边框盒子）
box-sizing:border-box;
width 表示的是边框内部（包含边框）的所有总和
width : 100px
假如border:10px;padding:10px; 内容的宽= 100px - 210px - 210px = 60px
- 圆角边框
行内元素
特点：
1) 与其他行内元素共享一行空间
2) 无法指定宽高，所占位置由其内容决定 -
-
布局
使用盒子来进行布局，布局目的是为了让块元素在一行中显示-
浮动布局
.content > div {
float:left;
}float:left;
让元素进行浮动：
1) 脱离文档流（1. 宽高如果没有指定，其由内容决定；2.元素脱了文档流后不占据屏幕空间，其下面的块元素就会顶上来）
2. 所有的浮动元素会进入到另外一个文档流（浮动文档流），在浮动文档流中所有的浮动元素会在一行显示，当这一样放不下的时候就会进入到下一行
3. 由于浮动元素脱离了文档流，那么就会对父元素【非浮动的块元素】失去了支撑
解决方案：
在父元素中插入一个伪元素，让这个伪元素清理浮动 -
定位布局
定位元素的特点
1. 【绝对定位、固定定位】脱离文档流（1. 宽高如果没有指定，其由内容决定；2.元素脱了文档流后不占据屏幕空间，其下面的块元素就会顶上来）
2. 所有的定位元素都可以使用如下属性
left/right/bottom/top
3. position的取值决定了相对点position:static; （非定位元素）
position:relative; 相对定位元素
不脱离文档流
相对于其当前所在位置注意：一般情况下的相对定位不会让他发生移动，而是作为决定定位的参照物；position:absolute; 绝对定位元素
脱离文档流
相对于距离它最近的父定位元素（relative、absolute、fixed）,如果所有的父元素都不是定位元素，那么就相对于浏览器视口position:fixed; 固定定位元素
脱离文档流
相对于浏览器视口position:sticky; 粘滞定位
不脱离文档流
是相对定位和固定定位的一种结合，当没有超过阈值的时候，为相对定位，超过阈值的时候为固定定位。
-
伸缩盒布局（css3）
-
网页分类
-
固定内容宽度 （wrapper width:1190px） 网易，淘宝，京东，太原理工…
-
内容宽度自适应 （响应式） 腾讯视频，爱奇艺
1240px - 1090px
1600px - 1400px -
完全响应式 H5网页【伸缩盒】（flex兼容性，移动端浏览器【android(google chrome),ios(safari)】）
微信打开的网页都属于完全响应式
bootstrap 栅格系统
v3 float
v4 flex
如果将一个pc端布局的网页在手机设备中打开，一般是非常难看的
pc端网页： 固定内容宽度（1090px）,内容宽度自适应（1280px-1090px,1680px-1480px）
移动端网页： 宽度自适应， 手机设备标准各异。（满屏铺） -
一般应用于响应式布局
-
概念
主轴： 伸缩盒元素排列的轴
交叉轴：与主轴垂直的轴伸缩盒元素沿着主轴排列，默认情况下，伸缩盒元素在交叉轴上的距离是100%，在主轴的距离由内容决定
-
应用
伸缩盒容器
display: flex; /声明当前元素为伸缩盒元素/
flex-direction:row ; /主轴在x轴上/
flex-wrap: wrap; /当伸缩盒元素在伸缩盒容器中放不下的时候，是否需要进行换行/
justify-content: space-around; /伸缩盒元素在主轴上的排列方式/
align-items:stretch; /伸缩盒元素在交叉轴的排列/
伸缩盒元素
flex-grow:1; // 伸缩盒元素对于主轴上伸缩盒容器的剩余空间的分配 ，1表示占一份
flex-shrink:1; // 对于亏损空间的抵扣
flex-basis:100px; // 基准值
flex:grow shrink basic; 速写模式
-
-
-
规则
-
字体规则(可以被继承)
font-family ‘Microsoft YaHei’,宋体
font-style:
font-weight:
font-size:
line-height:
font:bold normal 14px/1.5em ‘微软雅黑’em 相对单位，相对于当前元素的字体大小
hello worldrem 相对单位，相对于body中声明的字体大小
body{
font-size:10px
}hello worldhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/font
-
网络字体（字体图标库）iconfont
图片（设计师设计icon图标）图标–特殊的字体 （写的字跟画画一样）
-
文本相关规则【可以被继承】
text-decoration 字体装饰
none 不加任何字体装饰
underline 下划线
line-through删除线
overline 上划线
color
关键字 lightblue blue red
十六进制 #000000 #ffffff #ff0000 #32b593
rgb rgb(r,g,b) 0~255 rgb(255,0,0)
rgba rgba(r,g,b,a) 0~255 rgb(255,0,0,0.5)
text-align 容器中的字体的排列方式
text-transform 转换英文的大小写
uppercase
lowercase
text-indent -
列表相关（ul,ol）
list-style:none 取消列表的样式（列表项前面的小黑点或者数字） -
盒子相关
width
height
margin 外边距
margin-top
margin-right
margin-bottom
margin-left
border 边框
padding 内边距
box-sizing
content-box 内容盒子 (默认盒子) width 不包含padding、border
border-box 边框盒子 (怪异盒子) width 包含padding、border -
背景相关
background-color: 背景色
background-clip: 背景的铺设范围
border-box 边框及边框以内
padding-box 内边距及内边距以内
content-box 内容
background-image:
url(’./images/logo.jpg’);
背景图，参数为地址【相对地址、绝对地址】
background-repeat: no-repeat;
背景图的重复方式
no-repeat 不重复
repeat-x
repeat-y
background-position: center;
背景图的显示位置
center
let 左边中间
left top 左上角
10px 20px
background-size: cover;
cover 调整背景图的大小以至于覆盖整个区域
contain 调整背景图的大小以至于背景图嵌入到区域中，有可能回导致容器中部分没有背景覆盖
background-origin: content-box;
背景图的铺设七点
border-box
padding-box
content-boxbackground
背景色的简写形式
-
-
阶段性案例（网易严选）
-
响应式布局
布局会根据屏幕宽度进行调整-
应用在pc端
当检测到用户的屏幕分辨率较小，比如小于1280px,内容区域为990px；当用户屏幕分辨率较大，比如大于1420px，内容区域为1190px;这个变化不需要程序员调整，程序自动使用
1280px - 990px
1420px - 1190px -
应用在移动设备中
手机端网页会使用终端设备，并且占满整个屏幕
手机的像素及宽度大不相同
iphone
华为
小米
方案1，2结合的大型电商及体量交大的网站会用（京东，淘宝，腾讯视频） -
既可以在pc中打开也可以在移动设备中打开 （一般newbalance中国/特斯拉会采用这种方案）
如果在pc中打开，一行放6列
如果是在pad中打开，一行放4列
如果是在phone中打开，一行防2列
语法：
- 在link中使用媒体查询
<link rel="stylesheet" href="./css/1-style-990.css" media="(max-width:1300px)" > <link rel="stylesheet" href="./css/1-style-1190.css" media="(min-width:1300px) and ((max-width:1600px))"> <link rel="stylesheet" href="./css/1-style-1480.css" media="(min-width:1600px)">-
通过@media来进行设置
@media screen and (max-width: 1300px) {
.wrapper {
width: 990px;
}
/可以添加任意的响应式代码/
}
@media screen and (min-width: 1300px) and (max-width: 1600px) {
.wrapper {
width: 1190px;
}
}
@media screen and (min-width: 1600px) {
.wrapper {
width: 1480px;
}
} -
响应式布局框架
bootstrap
-
-
动画
flash
js
css3 高效，在可以使用css3完成动画的时候绝对不使用js-
动画定义【交给专业的来做】
@keyframes 动画名称 {
form {} to { }}
@keyframes 动画名称 {
0% {} 30% { } 50% { } 100%{ }}
-
动画调用【】
animation-name: 动画名称
animation-duration: 动画持续时间
animation-fill-mode 动画的填充，最后一帧应该如何设置
forwards
backwards
animation-timing-function: 动画的时间曲线
linear
easy-in
easy-out
steps
…
animation-delay: 1s; 动画延迟
animation-iteration-count: infinite; 动画重复次数
animation-direction: alternate-reverse; 动画运行方向
alternate
reverse
alternate-reverse
animation-play-state: running; 动画的运行状态
running
paused -
动画的企业级应用【animate.css】
在企业级开发的时候，动画的定义、动画的调用我们一般交给第三方，我们只是单纯的添加样式即可- 安装
思考？字体图标库我们是如何应用的？
-
-
过渡
transition-property: all; 过渡属性
transition-duration: 2s; 持续时间
transition-delay: 1s; 延迟时间
transition-timing-function: linear; 时间曲线transition: property duration delay linear;
过渡和动画的区别
动画是需要定义关键帧[可以同时对多个属性多个时间段进行更细致控制]
过渡无需声明关键帧，过渡也可以对多个属性进行控制，但是无法对多个时间段进行细致控制;过渡需要有一个触发行为，一般为hover -
变形
transform:变形函数
rotate(xdeg) 旋转deg表示度数
rotateZ
rotateX
rotateYscale(x,y) 缩放函数 skew(xdeg) 拉伸函数 skewX skewY translate() 平移
**
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
