css3基础整理

选择器
原来的css中存在的选择器有

Id选择器
给标签实在id属性，就可以在css中用 # 找到他
标签选择器
例如有一个body标签 就可以在css中用body去寻找他
类选择器
给元素添加class属性然后在 css中使用 . 找到他
后代选择器
比如寻找body下的div 可以用 body div 中间用空格隔开
通配符选择器
作用于页面的所有元素

css3新的选择器有
子元素选择器
比如找 body下的div 就可以用 body>div 比后代选择器跟严谨，只有被body直接包含的div才会有效
兄弟选择器
比如div寻找和自己同一级的span css语法div+span
但如果有两个和div同级的span，那只能选中第一个(只作用一次)
通用兄弟选择器
和兄弟选择器很像，把 + 换成 ~ 但可以选中所有排在自己之后的兄弟元素
群主选择器 可以选中多个选择器，用 , 隔开 兼容性非常强，从IE6就开始可以兼容

css属性选择器
像选中带有id属性的div可以用

div[id]{} 

甚至可以写

div[id = "XX"]{}

寻找id == 缩小收索的范围 兼容IE8以上的浏览器
有一些标签属性可以有多个值 最典型的莫过于class 那么就可以

div[class ~= "xx"]{}

寻找 带有xx这个class属性的div元素

div[id ^= "#"]{}

寻找div中id属性以#为开头的元素

div[id $= "#"]{}

寻找div中id属性以#为结尾的元素

div[id *= "#"]{}

寻找div中id属性有包含#的元素 (最实用)

div[id |= "#"]{}

寻找div中id以#-为开头或者只有#的元素
:link 设置链接的默认样式 一般适用于a标签

a:link{}

:hover 设置鼠标停在元素是的样式

p:hover{}

:active 点击后的样式

a:active{}

:visited 链接访问后的样式

a:visited{}

:focus 专属于input框的获取光标属性

input:focus{}

HTML标签属性属性 disabled 属性 设置输入框为不可编辑状态
针对类型可分为两个样式
默认 可编辑 input:enabled 不可编辑 input:disabled

input[type="text"]:enabled
{ 
}
input[type="text"]:disabled
{ 
}

div:first-child 选中每个元素下的第一个div
div:last-child 选中每个元素下的最后一个div
div:nth-child(3) 选中每个元素下的第三个div
div:nth-child(2n+1) 选中每个元素下的奇数div
div:nth-child(2n) 选中每个元素下的偶数div
还可以用div:nth-child(3n+1) 每三个div中有一个会受到样式的影响
nth-child(odd) 奇数写在器
nth-child(even) 偶数选择器
div:nth-last-child(3) 选中每个元素下的倒数第三个div
div:nth-of-type(1) 寻找所有元素下的第一个div
nth-last-of-type(1) 寻找倒数第一个
child和of-type的区别 比如

<div>
	<span></span>
	<div></div>
</div>

在这个代码的基础上我们给样式 div:nth-of-type(2) 和 div:nth-child(2)
我们会发现div:nth-child(2)拿到了div样式内的第二个元素 而div:nth-of-type(2)并没用拿到
因为div:nth-of-type(2)只数类型为div的标签，就是说span边上的div是第一个

div:only-child 寻找所有元素下的唯一子元素
div:only-of-type 寻找所有元素下唯一的div元素(除了div外父元素可以有其他子元素)
div:empty 寻找所有没有子元素(包括文字节点)的div

div:not(span) 选中div下除了span以外的所有子元素

在这里插入图片描述

伪元素
为元素是客观是生成一个在浏览器中找不到但又客观存在的元素
div::first-line 对块元素的第一行文章起作用
div::first-letter 设置块元素的首字母样式 如果是中文那只会对第一个在产生作用

div::first-before{
	content:"插入的内容";
	color:red;
}

first-before可以控制content在元素内插入一段内容
first-before特点:1是行内元素2是插入元素的第一个子元素3支持一切css样式

div::first-after{
	content:"插入的内容";
	color:red;
}

他是插入元素的最后一个子元素，其他特点和first-before一致
:first-after最实用的莫过于清除浮动
给浮动的父元素加一个带有clear:both:清除浮动属性的(块元素)

div::first-after{
    display:block;
	content:"";
	clear:both:
}

div::selection 设置元素内的文本被鼠标选中时的样式

border-radius:1px;设置圆角
可以

border-radius:1px 2px 3px 4px;

设置浏览器兼容

内外阴影边框
box-shadow:水平(数值) 垂直(数值) 模糊(数值) 扩展(数组) 颜色(颜色值) inset;
Inset属性可以不填 不填表示外阴影 填表示内阴影

box-shadow:1em 1em 1em 0 rgb(0, 0, 0) inset;
box-shadow:1em 1em 1em 0 rgb(0, 0, 0);

就快切图法
设置图片边框

border-image-source:url(图片路径); 设置图片路径，可以设置none
border-image-slice:20px; 设置向内偏移量 可以是数值 或者fill
border-image-width:220px; 边框宽度
border-image-outset:2px; 向外延申的量
border-image-repeat:stretch; 设置是否重复 默认stretch 设置repeat为重复

可以设置背景图像

background-url(图片路径) no-repeat center center;

我们也可以选择背景图像区域
background-clip:border-box;
值有
border-box:显示背景在边框
padding-box:显示背景在内边距
content-box:设置背景在内容处
背景定位
background-origin:border-box;
设置背景图像位置，值和background-clip一样，但所设置background-origin的值的位置只是一个起点，然后会根据偏移量进行偏移
设置背景图片大小
background-size:宽度 高度;

background-size:1em 1em;

可以直接给宽高数值，或者cover:如果高度小于宽度，则高度填满，宽度溢出，高度大于宽度则相反(不留白) contain:一定要把图片全部展示出来，可能留白
多重背景图 background-image:url(图片路径),url(图片路径);
排在前面的图片将显示在上面，所以要用透明图片，否则前面的图片会挡住后面的图片
background 简写
background 颜色 位置 大小 是否重复 定位 区域 是否滚屏 图片路径;
位置可以不固定

渐变依旧存在兼容问题，所以我们需要处理不容浏览器的语法
-webkit- 解决Chrome/Safari 浏览器兼容
-moz- 解决Firefox(火狐浏览器)
-ms- 解决IE浏览器的兼容问题
-o- 解决Opera浏览器兼容问题
background: -webkit-linear-gradient(出发方向,颜色1,颜色2,颜色3);
background: -moz-linear-gradient(到达方向,颜色1,颜色2,颜色3);
background: -ms-linear-gradient(到达方向,颜色1,颜色2,颜色3);
background: -o-linear-gradient(到达方向,颜色1,颜色2,颜色3);
background:linear-gradient(to 到达方向,颜色1,颜色2,颜色3);
颜色值可以设置跟多颜色 默认为从上到下
斜向渐变也非常简单
background: -webkit-linear-gradient(left top,颜色1,颜色2,颜色3);
background: -moz-linear-gradient(right bottom,颜色1,颜色2,颜色3);
background: -ms-linear-gradient(right bottom,颜色1,颜色2,颜色3);
background: -o-linear-gradient(right bottom,颜色1,颜色2,颜色3);
background:linear-gradient(to right bottom,颜色1,颜色2,颜色3);

渐变角度图
background: -webkit-linear-gradient(45deg,颜色1,颜色2,颜色3);
background: -moz-linear-gradient(45deg,颜色1,颜色2,颜色3);
background: -ms-linear-gradient(45deg,颜色1,颜色2,颜色3);
background: -o-linear-gradient(45deg,颜色1,颜色2,颜色3);
background:linear-gradient(45deg,颜色1,颜色2,颜色3);
还可以调颜色比例 background:linear-gradient(45deg,颜色 33.33%,颜色 33.33%,
颜色 33.33%);
rgb 的前面三个数为颜色值 最后一个值是阿尔法值，用于控制透明度 0 - 1
重复渐变
语法background:repeating-linear-gradient(45deg,颜色 90%,颜色 50%);
径向渐变
background:radial-gradient(形状,颜色 90%,颜色 50%);
形状的值 默认ellipse 椭圆 还有 circle 圆形
控制大小

径向渐变可以重复 但效果看着有点不舒服
background:repeating-radial-gradient(形状,颜色 90%,颜色 50%);

text-shadow:水平方向偏移(数值) 垂直方向偏移(数值) 往外模糊(数值) 颜色;

word-break :normal ; 文本换行属性
normal 默认属性 中文会在放不下是换行，如果下一行的开头是标点则从上一行移下去一个字，避免以符号看头，英文一个单词要全部能展示在同一行，否则就换行
break-all 中文看不出什么效果，和normal比较像，英文会让文本把一行彻底占满才换行，不惜将同一个单词拆成两半
keep-all 英文连字符处换行 中文会变得有些难以控制 (本来是针对拉丁文来的)
word-wrap 以前的换行属性
normal 对中文 和 日文等方块式的文本不起作用，适合放一些api或者网址，因为就算同行溢出都不会换行
break-word 放不下就换行
css3文字对齐属性 text-align-last:auto;
默认 auto 自动 默认就是向左侧对齐
left 左对齐
right 右对齐
center 居中对齐
justify 两端伸展对齐
start 主题文字向那边对齐就用那种对齐方式
end 主体向那边对齐就用与之相反的对齐方式
Initial 设置为默认值 就是auto
Inherit 设置继承父元素的对齐方式

在IE和火狐浏览器中必须先声明text-align-last:justify;再去改变样式，否则无效，谷歌就不需要考虑
text-overflow:clip; 设置文本溢出样式
clip 超出部分直接修剪掉
ellipsis 超出部分变成省略号
string 超出部分给符号提示(string 只有火狐可以识别)
以上属性都要配合white-space: nowrap; overflow: hidden;才能使用
典型字体格式 woff
IE容纳的 .eot
大多数浏览器支持的.svg
字体下载网址
https://www.fontsquirrel.com/tools/webfont-generator

Css 2D 转换
偏转
transform:rotate(XXdeg); 设置元素旋转量，值为正顺时针旋转，为负逆时针旋转，兼容性小建议加上各个浏览器的兼容前缀 deg代表角度的单位
平移
transform:translateX(数值) 设置元素水平方向偏移 (默认从左到右)
transform:translateY(数值) 设置元素垂直方向偏移 (默认从上到下)
可以缩写为
transform:translate(200px,300px);前面为X值 后面为Y值
缩放
transform:scaleX(纯数字) 水平方向缩放 比如 0.5 就是宽度缩小到原来的0.5倍
transform:scaleY(纯数字) 垂直方向缩放 比如 0.5 就是高度缩小到原来的0.5倍
transform:scale(1.5,3);前面X值 后面Y值
是一种比例 不需要单位 放大和缩小的中心点永远是元素原本的中心点
斜切
transform:skewX(数值) 横向斜切
transform:skewY(数值) 垂直斜切 感觉怪怪的
transform:skew(数值,数值) 双向斜切，感觉没什么用
rotate和skewX的不同在于:
rotate : 正值是顺时针偏转 负值是逆时针偏转
skewX : 正值是逆时针斜切 负值是顺时针斜切
2D 中有 X轴 水平方向 即 屏幕的左右 Y轴 垂直方向 即 屏幕的上下方向
而3D 多出了一个 Z轴 即屏幕的正面和反面
Css 3D 转换
transform:rotateX(数值) 元素以中心点为基准进行高度缩放 值越大越缩小，到90变到最小，大于90后开始有放大
transform:rotateY(数值) 元素以中心点为基准进行宽度缩放 值越大越缩小，到90变到最小，大于90后开始有放大
rotate看着像在缩放，但其实是在旋转，旋转90度相当于他横过来对着我们了
transform:rotateZ(数值) 像陀螺一样旋转。。。。
transform:rotate3D(1,1,1, 45deg) 前面三个代表 xyz三轴的偏转占比 最后是度数
三者的偏转可能会受占比的影响发生度数的变化，建议计算后使用，四个参数缺一不可
transform:translateZ(数值) 这个属性是可以设置元素与屏幕的距离，可以改变元素覆盖关系
transform:translate3D(x,y,z) 设置元素在xyz轴的偏移量 三个参数缺一不可
transform:scaleZ(数值) 设置图片试图方向的厚度，效果毕竟不明显
transform:scale3D(X, Y, Z) 设置图片缩放的xyz轴数值，三个参数缺一不可
origin可以配合rotate设置偏转量和偏转的中心点,代码如下:
transform:rotate(200deg);
transform-origin: bottom right;

transform-style默认值:flat
给元素添加
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
子元素之间会出现一些3D的奇妙覆盖效果
-webkit-perspective:500px;
-moz-perspective:500px;
-ms-perspective:500px;
-o-perspective:500px;
perspective:500px;
perspective用于设置元素与屏幕的距离
Perspective-origin:值; origin的值可以是top left right bottom 设置从那个方向观察这个元素
-webkit-backface-visibility:值;
backface-visibility:值; 默认值visible 透明 还有hidden不透明
hover属性触发时transition-property:样式名; 过度效果 比如你要改变color就可以transition-property:color;
但个人感觉没什么用
transition-duration:1s; hover等动画设置转变时间 默认为0
transition-timing-function:值; 他可以设置整个动画中各个阶段的速度

transition-delay:1s; 触发hover等动画效果时设置的延迟时间 默认0
transition:可以简写 顺序如下图
animation-name可定义一个动画名称
animation-duration用于定义动画时间

.div2
{
	height:100px;
	width:100px;
	background:blue;
	-webkit-animation-name:tname;
	animation-name:tname;
	-webkit-animation-duration:20s;
	animation-duration:20s;
}
@keyframes tname {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

-webkit-animation-delay:值;
animation-delay:值; 可以设置秒或毫秒 毫秒的单位是ms
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite; 设置动画播放的参数，infinite为无限次，如果想循环1次 值填 1 就好了
-webkit-animation-direction:值;
animation-direction:值; 设置动画的播放形势 值有
normal 正方向运行
reverse 反方向运行
alternate 先正方向运行，再反方向运行 必须设置了animation-iteration-count才会生效
alternate -reverse 先反方向再正方向 必须设置了animation-iteration-count才会生效
-webkit-animation-play-state:值;
animation-play-state:值; running 开始动画 paused 停止动画
animation可简写 语法如下

@keyframes fname {
	0% {width:0px;}
	30% {width:30px;}
	59% {width:50px;}
	80% {width:80px;}
	100%{width:100px;}
}

keyframes 可以控制每个阶段的样式

-webkit-will-change:值;
-moz-will-change:值;
will-change:值; 所带有的值如下