CSS选择器
1.基本选择器
2.属性选择器
3.伪类选择器
1.
<1>通配符选择器
* 通配符——通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素
<2>元素选择器
元素选择器就是文档的元素，如html,body,p,div等等
<3>类选择器
<4>id选择器
<5>后代选择器（E F）
<6>子元素选择器 （E>F）
<7>相邻兄弟元素选择器 （E+F）
<8>通用兄弟选择器 （E~F）
相邻兄弟元素选择器 E+F
2.
<1>只使用属性名，没有任何属性值 p[class]
<2>指定了属性值 p[class=value]
<3>可以有多个属性，只要属性值中有一个value相匹配就可以选中该元素p[class~=value]
<4>属性值以“value”开头的或者等于value的所有元素p[class^=value]
<5>属性值是以value结尾的p[class$=value]
<6>属性值只要含有value无论在开头还是结尾，中间 p[class*=value]
3.
<1>动态伪类
a:link a:visited a:hover a:actived
<2>UI状态伪类
:enabled :disabled :checked
<3>nth选择器
：first-child 每一组中的第一个子元素
：last-child
：nth-child(n) n>=1 even(偶数) odd(奇数)
：nth-last-child(n) 倒数第n个
：only-child 只有一个子元素
////////////////////////////////////
不需要考虑父元素
：nth-of-type ：nth-last-of-type ：first-of-type和:last-of-type:only-of-type
:empty p:empty {display: none;}
<4>否定选择器 :not([])
<5>伪元素
无论content里面是否有内容，都得写出该项。
content：内容； content：；
::first-letter第一个字母
::first-line第一行
::before
::after
::selection 改变网页被选中文本的样式
4.样式及属性
<1>透明度
opacity：0~1
表达方式：
eg:opacity:0.1
filter:alpha (opacity=10) 两个都写
<2>文本阴影
text-shadow:h-shadow v-shadow blur color;
h-shadow：水平阴影，负：阴影左移 正：阴影右移（必写）
v-shadow：垂直阴影， 负：阴影上移 正：阴影下移（必写）
blur： 模糊距离（可选）
<3>文字相关样式@font-face规则
@font-face{
font-family: myFirstFont(自己起的名字);
src: url('字体样式文件的路径'),
}
div{
font-family:myFirstFont;
font-size:;
Font-color:;
}
<4>边框样式
(1)圆角边框(border)
border-radius: length/% ;
border-radius: 一个值； //四个角都一样
最大值等于宽，高里最小值的一半；
eg: width:200px;height:100px;
则border-radius=50px(最大)
border-radius: 值1 值2； //值1表示左上角、右下角；值2表示右上角、左下角
border-radius: 值1 值2 值3； //值1表示左上角；值2表示右上角、左下角；值3表示右下角
border-radius: 值1 值2 值3 值4；//左上角、右上角、右下角、左下角
(2)边框阴影
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
X轴偏移量：必写，水平阴影的位置；
Y轴偏移量：必写，垂直阴影的位置；
阴影模糊半径：可选，模糊距离；
阴影扩展半径：可选，阴影的尺寸；
阴影颜色：可选，省略默认为黑色；
投影方式：可选，设置为inset时为内部阴影方式，省略为外阴影方式。
(3)边框图片
先规定border,如：border:1px solid #f00;
然后写图片地址： border-image-source：url();
图片切片：border-image-slice：数值(不带单位) 取值个数(1~4个) fill
border-image-repeat：strench（默认） repeat（从边框的每边的中心向两边的角平铺，可能出现半个图片） round：完整平铺
border-image-outset:（x，y）图片外凸
(4)多重背景
background-image:url（），url（）;
(5)背景渐变
<1>线行渐变
background: linear-gradient(angle,颜色 0%,颜色 50% ,颜色 100%)
eg：background: linear-gradient(to bottom right,red green,blue); 或(45deg,red 0%,green 50%,blue 80%);
重复渐变:repeating-linear-gradient
为了实现各个浏览器的兼容，加：
-webkit-height：chorme safari浏览器
-moz-height： firefox浏览器
-ms-height： IE浏览器
-o-height: 欧朋浏览器
height： ;
<2>径向渐变
background: radial-gradient(颜色 0%,颜色 50% 颜色 100%)
Shape有：circle，ellipse；
Eg：background: repeating-radial-gradient(circle at center,#fff,#000);
(6)变换
<1>移动
transform:translate();
默认，相当于transform:translateX();
transform:translateX(数值);数值为正，向右移动；为负，向左移动；
transform:translateY(); 为正，向下；为负，向上；
transform:translateZ();
<2>旋转
transform:rotate(角度，如：45deg);
默认：相当于transform：rotateZ(角度)；
transform:rotateX(角度，如：45deg);
transform:rotateY(角度，如：45deg);
transform:rotateZ(角度，如：45deg);
<3>缩放
Transform:scale(倍数,倍数)
Transform:scaleX(倍数) Transform:scaleY(倍数)
<4>扭曲
Transform:skew(角度) 默认：skewX()
Transform:skewX(角度) Transform:skewY(角度)
<5>改变元素基点
transform-origin:X,Y
(7)过渡
transition-property:要改变的属性，可以是宽，高等属性。
transition-duration:5s；过渡时间
transition-timing-function:速度，默认ease（逐渐变慢）
ease-in：加速 ease-out:减速 ease-in-out：先快后慢
linear：匀速 贝塞尔曲线
transition-delay：延迟时间
综合写法 transition：过渡属性 过渡时间 速度 延迟时间
<8>动画
animation：”mypic”20s ease-in-out 2s infinite alternate
animation-name:”mypic”动画名字
animation-duration:20s 动画持续时间
animation-timing-function:ease-in-out 速度
animation-delay：2s 延迟时间
animation-iteration-count：infinite 次数
animation-direction：alternate 来回运动 方向
animation-direction
动画运行的方向
值：
normal （默认） 从开始到结束
alternate 来回运动
reverse 从结束到开始（反向单趟）
alternate-reverse 反向来回运动
animation-fill-mode:none 不改变
forwards 当动画完成后，保持结束的位置样式。
backwards:停在刚开始停的位置上。
both：停在结束位置
animation-play-state：控制元素动画的播放状态。
值 ：running 默认
paused：暂停
<9>定义关键帧格式：
@keyframes 动画名称{
from{ }
to{ }
}
@keyframes 动画名称{
0%{ }
50%{ }
100%{ }
}
网友评论