CSS3的笔记总结_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:15:24890浏览
css3 就是css2 的一个升级版本。css2 是用来做效果渲染的，而css3 可以使做出来的效果更佳丰富。
C3有兼容性问题，移动端支持稍微要好些.
坚持以下原则：
（1）渐进增强
（2）添加私有前缀
（3）考虑用户群体
【 选择器 】css3 在之前的基础上面扩展了三种类型的选择器
（获取到一个元素有多重方式，我们要控制页面上面的元素，必须先得到页面上面的元素,假设你的页面的层级结构比较复杂的时候）
（1） 属性选择器
a[href] 所有的a 标签，这个a需要有 href 属性
a[href='demo'] 所有的a 标签，这个a需要有 href=demo
a[href*='demo'] 包含demo
a[href^='demo'] 以demo 开始
a[href$='demo'] demo 结束
（2） 伪类选择器
a:active a:link a:hover a:visited
新增:
li:first-child
li:last-child
li:nth-child() 根据n 去取值,索引是从1开始计算
li:nth-last-child 从后向前计算，倒着算
n 的用法. 取值0,1,2,3,4...
empty 空的.
div:empty 选中没有子元素的div
div:target 结合锚点进行使用，处于当前锚点的元素会被选中；
（3）伪元素选择器
我们的伪元素选择器是:: 两个
before: 想元素里面添加一个子元素，这个资源在最前面 （它默认是一个行内元素，我们需要转换成一个块元素，必须设置content:''）
after: 想元素里面添加一个子元素，这个资源在最后面
first-letter 选中第一个字或者字母。
first-line 选中第一行
::selection 可改变选中文本的样式；
1 //选中.demo 的父元素下面的第二个子元素，并且这个子元素有一个class 属性，它的的值是demo2 .demo:nth-child(2){<br />3 } （4）有两种新增方式可以表示颜色
rgba （ red，green，blue，Alpha 透明通道）
hsla（Hue 色调，Saturation 饱和度，Lightness 亮度，Alpha 透明度）
如果给父盒子设置了透明度，子盒子会继承父盒子的透明度； 新增的颜色的标识方式里面，支持设置透明，而且设置的透明不会影响到子盒子；我想实现半透明的效果，我就可以使用 rgba,hsla 颜色的表示方式.
（5） text-shadow 可以设置文本阴影，实际上就是给文本添加影子..
text-shadow:1px 1px 1px red;
第一个1px 向右移动，负值的是向左移动（正值向右偏移，负值向左偏移）
第二个1px 向下移动 ，负值是向上移动(正值是向下偏移，负值向上偏移)
第三个1px 向下移动 代表的是模糊度，，不能为负数，值越大，越模糊（模糊度，不能为负数，值越大，模糊度越高）
第四个red 代表模糊的颜色. 影子的颜色.
text-shadow:1px 1px 1px red,-1px -1px 1px red
// 可以为文本添加多个影子
（6）盒子模型
我们可以改变盒子计算宽高的方式，通过设置盒子的这个属性
box-sizing:content-box/border-box
content-box 盒子的高度以及宽度 盒子的宽度=width+padding+border
border-box 盒子的高度以及宽度 盒子的高度以及宽度=width
——————————————————————————————————————————
【 边框圆角 】
border-radius:<br /> 1:正圆<br /> 2：椭圆 x 轴 ，y 轴的概念.<br /> 3:android 机器人<br /> 4:小机器猫.<br />box-shadow 边框阴影；可以设置边框的阴影，外阴影，内阴影.<br />border-image:<br /> 1:我们可以为边框设置图片，之前设置的都是背景色
而现在我们可以为四个边设置边框图片。<br /> 我们只需要一张图，浏览器会自动帮我们进行裁剪。然后我们还可以指定宽度<br />指定边框图片的平铺方式.
1：border-image-source 边框图片的路径<br /> 2：border-image-slice 裁剪的方式<br /> 3: border-image-width 边框的宽度<br /> 4: border-image-repeat:round,stretch,repeat<br />【 渐变 】<br /> <strong>线性渐变:</strong><br /> liner-gradient(<br /> 135deg, 需要有一个角度. (顺时针方向)<br /> yellow 25%, 起始颜色<br /> green 50% 终止颜色<br /> )<br /> <strong>径向渐变：</strong>一个中心点，朝着四周进行渐变<br /> radius-gradient(<br /> 100px at center center 半径 at 中心点的位置<br /> yellow 起始颜色<br /> green 终止颜色<br /> )<br />【 背景 】<br /> <strong>背景尺寸：</strong><br /> 我们可以为一个div 设置背景，<br /> 1：假设我的背景图片的大小超过了盒子的大小.<br /> 我们显示的背景不全面<br /> 我们这个时候可以设置背景的大小与盒子的大小一致.<br /> 但是我们不能做到盒子变大，背景变大<br /> background-size:contain cover<br /> contain: 背景图片始终完全显示，等比例缩放.<br /> cover: 也会缩放，背景始终填充整个区域
<strong> 背景原点:</strong><br /> background-origin: 可以设置背景图片的位置.<br /> background-origin:border-box,padding-box,content-box;
border-box 背景的原点在border 上面<br /> padding-box 背景的原点在内边距上面<br /> content-box 背景的远在content 内容区域
<strong> 背景裁剪：</strong><br /> background-clip: border-box,padding-box,content-box;<br /> <strong>多重背景：</strong><br /> url("images/bg1.png") left top no-repeat,<br /> url("images/bg2.png") right top no-repeat,<br /> url("images/bg3.png") right bottom no-repeat,<br /> url("images/bg4.png") left bottom no-repeat,<br /> url("images/bg5.png") center center no-repeat;<br />【 过渡 】 我们要完成过渡，我们需要使用一个transition这样的一个属性<br /> 1：补间动画<br /> 开始状态，结束状态<br /> 2：帧动画 transition: all 5s linear 过渡延迟多少秒执行<br /> （1）设置过渡的属性 （all） linear 匀速<br /> （2）过渡时间 ease-in<br /> （3）过渡的速度 ease-out <br /><br />————————————————————————————————————————————————————————————————————————————————————————
【 过渡 】（transtion:all 2s linear 3s;）
transition 属性<br /> all 需要过渡的属性<br /> 2s 过渡这些属性需要执行的时间<br /> linear 过渡的速度<br /> 4s 延迟多少秒<br />【 2D——3D转换 】 我们2d 转换和3d 转换，我们都可以使用transform 属性<br /> 2d 转换<br /> 我们有三种转换效果<br /> ① scale(1.5,2) 放大 大于1；缩小 小于1<br /> ② translate(200px,200px) 向水平方向移动，垂直方向移动，可以接受负值（负值是反方向，百分比）<br /> ③ rotate() 正值顺时针方向，负值是逆时针方向<br /> transform-origin 旋转的中心点的位置；默认的中心点在中间<br /> 3d:转换<br /> 掌握一个坐标系，有了x轴，y轴，z 轴的概念。此外，我们想在一个平面实现3d 的效果，我们使用到了透视..
① x轴，z轴，y轴的方向 tranlateX(200px) 水平向右移动<br /> ② 围绕x，y，z 轴旋转，角度，旋转.<br /> ③ 旋转的中心点.<br /> <strong>立体盒子：</strong>每一个平面（盒子）都对应一个3d 坐标系
<strong>透视：</strong>观察者与目标物的距离 ，设置了这个距离之后，我们就可以透过透视产生立体的效果<br /> transform-origin 旋转的终点的位置<br /> transform-style:preserve-3d （把子元素放在一个3维空间内）
【 动画 】 有一个animation属性 （这里有八个值）<br /> 1:我要执行那个动画，名称<br /> 2:执行动画需要花费的时间<br /> 3:速度，执行动画的方式. steps()<br /> 4:延迟多少秒执行动画<br /> 5:循环的次数.<br /> 6:是否交替执行动画.<br /> 7:动画结束的状态.<br /> 8:动画的暂时，运行状态.
animation 属性: move （动画的 名称）
—— animation:move 10s linear
动画执行的时间
动画的速度<br /> 延迟时间<br /> 循环的次数<br /> 动画是否交替的效果 alternate<br /> 动画的结束状态 forward<br /> 动画的状态 running paused
1 // 定义动画2 @keyfreames move{3 from{4 }5 to{6 }7 }
1 // 我们在做动画的时候我们定义一组动画 2 @keyfreames move{ 3 0%{ 4 } 5 20%{ 6 } 7 40%{ 8 } 9 80%{10 }11 100%{12 }13 }
——————————————————————————————————————————————————
1、伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
如下图：
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
（1）必要元素：
a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴，也可改变方向
（2）各属性详解
a、flex-direction调整主轴方向（默认为水平方向）
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈（由flex-wrap产生的独立行）对齐
f、flex-flow是flex-direction、flex-wrap的简写形式 flex-flow: cloumn wrap
g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
h、order控制子项目的排列顺序，正序方式排序，从小到大
此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值可参考示例源码
2、多列布局
类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。
了解即可，实际意义不大。
3、Web字体
3.1 字体格式
不同浏览器所支持的字体格式是不一样的，所以我们有必要了解一下有关字体格式的知识。
1、TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体
3.2 字体图标
其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？
答案是肯定的。
常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；
Font Awesome 使用介绍
http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/
<br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />