CSS3--j惊艳到你的新前端

一、css3的选择器

1、 父子选择器

直接关系 .box>.com

2、 兄弟选择器

相邻关系 .box+.com

<span>hello</span>

<p>world</p>

span+p{color:red;}

这里通过span 找到p里面的元素 目的是p

3、通用兄弟选择器

属于同一个父元素E~F

跟E同属于一个父元素的所有的F

4、群组选择器

把具有相同样式租在一起中间用,隔开，也是常用的选择器

5、P[class=^box] 以box开头的类

6、P[class~box] class里面有一个名字为box的类 这个类也可以有其他的类名

7、P[class$=box] 以box结尾的类

8、P[class*=box] 模糊匹配 里面只要具有box三个字母链接起来的类名都可以

9、div：not([class]){} 没有class属性的div

二、伪类选择器

css伪类用于向某些选择器添加特殊效果

UI中的伪类

:enabled{} 选择可用的元素

:disabled{} 不可用的元素

:checked{}  默认被选中 或者被选中

三、css中的nth选择器

1、：first-child{}  第一个子元素

2、：last-child{}  最后一个子元素

3、：nth-child(n){}  第n个孩子

4、：nth-child(odd){}   第奇数个子元素

5、：nth-child(even){}  第偶数个子元素

6、：only-child{}      独生子

考点：

：nth-of-type{...}和 ：nth-child{.....}的区别

前者可以不在同一个父元素里面但是后者必须在同一个父元素里面

伪元素：默认呈现一个行内元素

div:: after{....}  正规写法

为了兼容旧版本的浏览器一般是写一个冒号div:after{....}

但是它与伪类的区别就在于一个冒号和两个冒号

常见的伪元素

1、div::after{

content:"内容";

display:"block";

}

2、div::after{...}

3、::first-letter 第一个字母

4、::last-letter  第一行

5、::selection 被选中时候

四 CSS的重要属性和样式

1、关于透明度

opacity:0~1;

做兼容 ：filter；alpha(opcity...)取值在0-100;

这个的透明度是整体的透明度改变包括图片和文字而 rgba的只是改变他的背景

2、关于阴影效果

2.1、文本阴影

text-shadow:h-shadow v-shadow blur color ;

水平阴影的位置向右为正向左为负

垂直方向的位置向上为正向下为负值

模糊距离

背景颜色

2.2 盒子阴影

box-shadow: x轴 y轴 模糊半径 扩展半径 颜色 投影方式 [inset]\[outset]

3、文字相关的样式

字体的引入

css3 @font-face命名规则

@font-face{

font-family:自己定义的字体名字;

src:url(路径);

需要给字体的格式做兼容

}

4、 圆角 border-radius

一个值的时候为四个角的一样 一般是圆形的话就写50%；

两个值的时候显示的样式是对角 值1 表示左上角和右下角  值2 表示右上角和左下角

四个值的时候表示顺时针 上左 上右 下右 下左

三个值的时候 值1 表示左上  值2  右上 左下  值3 右下

有的人还会写 border-radius: 10px  20px /30px  40px;

这是把一个叫分割成为水平方向和垂直方向上的 斜线前面表示水平方向的 后面表示垂直方向上的

5、 关于给边框加背景图片

border-image-source:url(路径);

border-image-slice:数值 取值个数 1-4 fill；

border-image-repeat：是否平铺 默认被拉伸

repeat: 平铺 从中心开始平铺 会有半个图片的情况

stretch: 拉伸

round ： 铺满

border-image：url() 27 fill;

border-image-width: 边框图片的宽度

border-image-outset 边框图片外凸

6、CSS3多背景图片

background-image: url() , url(),url();

7、 背景渐变——现行渐变

background: linear-gradient(angle,颜色 0%, 颜色 50% , 颜色 100%)

angle: left right top bottom.

30deg to left(以偏移30度的方向向左)

to top left (向左上角偏移);

repeat-linear-grandient: 重复渐变

8、 兼容问题

-webkit-height: ; 谷歌 苹果

-moz-height: ; 火狐

-ms-height： ; ie

-0-height : ; 欧朋

五、关于变换 transform

变换： transform;

transform: rotate| scale | skew | translate

属性之间用空格隔开

rotate 旋转

scale 缩放

skew 扭曲

translate 移动

a、 transform:translateX(值)；

如果不写xyz默认x

transform=translate(值1,值2); 值1 是水平方向上的位移 值2是垂直方向上的位移

b、 transform:rotateX(60deg) 在x轴旋转60度， 如果不写XYZ的话是默认沿着Z轴旋转。

c、 scale 缩放

transform: scaleX (0.5)水平方向上的是x缩放

括号里的值为一个数的时候默认水平缩放和垂直缩放都是这个值

括号里有两个值的时候第一个值为水平方向的缩放 第二个值为垂直方向的缩放。

d、 扭曲 skew

transform : skew(45deg);

默认情况下绕着X 轴扭曲

transform: center center;

改变基点

transform-oligin:top center; 这里的值除了可以是带有方位词 还可以是带有百分号的像素

六 、三种位置居中的方法

第一种、

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

第二种、

position=absolute;

left:50%;

top:50%;

margin-top:负的标签宽度的一半;

margin-left:负的标签高度的一半;

第三种、

position=absolute;

left:50%;

top:50%;

translate(-50%,-50%);

七、 关于过渡 transition

1、transition的属性和值

transition: all 5s ease 0s;

all 表示改变多个属性

5s   表示改变这个属性的总时间

ease 是指这个改变的速度

0s　　表示除法事件延迟的时间

transition-property: 过度属性；

transition-duration: 持续时间

transition-timing-function:   速度

transition-delay:    延迟时间

tramsition: 改变属性 持续时间 速度  延迟时间

2、 transition的速度的值

ease: 逐渐变慢；

linear: 匀速；

ease-in: 匀加速

ease-out: 匀减速

ease-in-out: 先加速在减速

cubic-bezien: 自定义贝塞尔曲线

3、关于transition 的位置

改变谁hover 时候的样子一般就放在这个元素里面

li{

transition: all 5s ease 0s;

}

放在li{} 和li:hover{} 里面的区别

如果放在li{} 里面那么过去了之后他自己会向刚刚过去的样子一样再回到原来的位置

如果放到li:hover{} 里面那么过去了之后在哪就在那 不会再回来

八、 自定义动画 animation

animation:'my' 20s linear 2s infinite animation-interation-count;

动画名字 持续时间 速度  循环次数  循环的方向

1、 animation的属性和值

animation-name: 名字;

animation-duration:  时间

animation-timing-function: 速度

animation-delay:   延迟

animation-interation-count: 次数 当为infinite的时候为无限次

animation-direction: 方向 当为alternate 是来回运动  当为reverse的时候反向运动

animation-fill-mode:            默认值为 none 不改变默认行为

forwords :向前走 停在结束的位置

backwords:向后走 停在开始位置

both     ：走到哪 听到那

2、设置关键帧

例子是摩天轮的关键帧

@keyframe myname{

0%{

transform: rotate(0deg);

}

100%{

transform: rotate(360deg);

}

}