一、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);

}

巴特西

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

一、css3的选择器

1、父子选择器

2、兄弟选择器

3、通用兄弟选择器

4、群组选择器

二、伪类选择器

三、css中的nth选择器

四 CSS的重要属性和样式

1、关于透明度

2、关于阴影效果

3、文字相关的样式

4、圆角 border-radius

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

6、CSS3多背景图片

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

8、兼容问题

五、关于变换 transform

七、关于过渡 transition

2、 transition的速度的值

3、关于transition 的位置

八、自定义动画 animation

1、 animation的属性和值

2、设置关键帧

最新文章

热门文章

巴特西

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

一、css3的选择器

1、 父子选择器

2、 兄弟选择器

3、通用兄弟选择器

4、群组选择器

二、伪类选择器

三、css中的nth选择器

四 CSS的重要属性和样式

1、关于透明度

2、关于阴影效果

3、文字相关的样式

4、 圆角 border-radius

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

6、CSS3多背景图片

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

8、 兼容问题

五、关于变换 transform

七、 关于过渡 transition

2、 transition的速度的值

3、关于transition 的位置

八、 自定义动画 animation

1、 animation的属性和值

2、设置关键帧

最新文章

热门文章

1、父子选择器

2、兄弟选择器

4、圆角 border-radius

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

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

8、兼容问题

七、关于过渡 transition

八、自定义动画 animation