css3笔记

字数 2394阅读 62

1,css3针对CSS2版本出现的弱点进行的一个补充性提升。主要提升了新的CSS样式的设置,

弹性盒子和媒体查询以适应手机端的开发。,增加动画和变形以适应动画特效的制作。

能够制作一些有弧度的元素框。增加关于背景的尺寸设置,增加新的css选择器类型。

2,css3为了解决浏览器兼容的问题,设置了一些常用浏览器私有前缀:

常用浏览器:

IE(内核:Trident),

chrome,苹果浏览器(webkit内核),

firfox(mozilla内核)

-webkit-css3样式名称

-ms-css3样式名称//IE的私有前缀。

-moz-css3样式名称

3,css3选择器:

1,属性选择器:

1),利用属性来查找HTML标签[attr]//标签的属性名英文单词:attr.

[attr="value"]利用属性名称和值来找标签的。

[attr*="内容"]寻找只要该属性内包含了该内容的所有标签

    [attr^="内容"]以该内容开头的标签。

[attr$="内容"]以该内容结尾的标签。

2,结构伪类选择器:

父元素下的子元素选择器:

e:first-child{}

e:last-child{}

e:nth-child(n){}注意:这个n的取值必须计算标签e在父级元素下总的排序号,同时该序号所代表的标签名必须和冒号左侧的标签名能对上。

相同父元素下的相邻兄弟元素选择器:这个选择器只是选择父元素下同一类元素的顺序个数。

e:first-of-type{}

e:last-of-type{}

e:nth-of-type(n){}这里的n代表的是同一个父级下第n个同类元素.

3.状态伪类选择器:

:focus 当点击的行为获取焦点时 input:focus{color:red;}

:after 在元素的内容的后面插入内容 div:after{content:"hello";display:block;color:red;}

:before在元素的内容前面插入内容。

:enabled,当元素可以使用的时候

:disabled,当元素不可以使用的时候

css3:text属性:

text-shadow:x偏移量 y偏移量 z轴上的模糊值 阴影的颜色

box-shadow:x偏移量 y偏移量 z轴上的模糊值 阴影的颜色

text-stroke:文字轮廓线的宽度  文字轮廓线的颜色。

css2:overflow:的属性拓展:

overflow:hidden/scroll/auto

word-wrap:break-word  强制换行,主要针对长单词和URL地址。

透明属性:

rgba(255,245,10,0.5)//只能针对颜色设置透明,不能直接将标签设置为透明。

opacity(0.5)//具有继承性。、

渐变:

线性渐变:

background:linear-gradient(to 方向,开始颜色,结束颜色);

径向渐变:

background:radial-gradient(定位点,渐变形状,开始颜色,结束颜色)//需要添加私有前缀

边框:

弧角border-radius:

border-radius:

上top left

右 top right

下 right bottom

左 bottom left;

圆形:正方形的标签框,使用border-radius:50%;

椭圆:长方形的,使用border-radius:50%;

半圆:宽取值:高取值=2:1 border-radius:高的值 高的值 0 0;

background:

background-size:背景图的尺寸控制:

关键词取值:

cover覆盖,

contain容纳。

固定取值:px取值:

background-size:

x轴取值 

y轴取值

background:可以实现多背景写法:每个背景图片的引入需要用“,”号隔开

background:

url(icon4.png) no-repeat left,

url(icon6.png) no-repeat right,

url(icon5.png) no-repeat top,

url(icon7.png) no-repeat bottom;

变形:transform:

transform:有四种变形方法:

位移:translate(),

旋转:rotate();

缩放:scale();

倾斜:skew();

因为变形是瞬间完成的,所以我们无法看到变形的过程,为了呈现更好的效果,

我们需要将变形的成果表现出来这就是我们需要学习

过渡:transition:

transition-property:对什么属性进行过渡(all,单独的具体属性),

transition-duration:过渡的持续时间。

transition-timing-function:linear//线性速度,从头到尾都是保持匀速变化,

transition-delay:变形的推迟时间。

简写方式:

transition:transform 2s linear 2s;

需要结合着用:

transition:all 0.5s linear ;

transform:translate(0px,-6px);

不能出现过渡的属性:display:none ---display:block;

translate(500px)【位移】//向右移动500px;

translate(500px,600px)//元素沿着500px宽600px高的轨迹走的是对角线 ,走的距离可以取负值,代表相反方向。

rotate(360deg)【旋转】,沿着元素的中心点宣传360度。顺时针方向,负值是逆时针方向。

scale(1.5,1.5)【缩放】//沿着水平和垂直方向将元素放大为原来的1.5倍,取值小于1,大于0是指缩小。

skew(xxdeg);【倾斜】将元素倾斜一定的角度,形成平行四边形的立体效果。

变形中心点设置:

transform-origin:定位值

动画:面试题:动画和过渡的区别是什么?

1,过渡的特点:

1,所有的过渡变形都是一次性动作,中间无法做状态转换。

2,所有的过渡都无法重复运动,一次运动结束,立即停止。

3,所有过渡均需要使用人为触发才能实现。

4. 变形无法做批量运动设置。

动画:就是将整个形变动作都归于一个时间段内。并且能够对时间段进行相应的片段划分,实在在不同片段内,动作变形不一样。

动画内容属性:@keyframes{

0%{}

20%{}

40%{}

60%{}

80%{}

100%{}

}

如果我们的动画内容想要加载到指定的标签上,就需要使用另一个属性:animation。

animation-name:规定了动画的名称

animation-duration:动画持续时间

animation-timing-function:动画的运动方式

animation-delay:动画触发的延迟时间。

animation-iteration-count:播放次数:有一个永久播放:infinite

animation-derection:播放的方向:反向播放:reverse

alternate:奇数正向,偶数反向。

animation-play-state:播放状态。暂停:paused

创建动画:

animation:a1 5s linear infinite

媒体查询:

1,媒体查询的样式:@media。

如果我们要进行媒体查询,那么查询什么呢?

查询媒体类型:就是显示设备的类型:

1,阅读器设备kindle,

2,printer打印设备,

3,显示器:screen,

显示器根据尺寸分为四种类型屏幕。

1,屏幕宽度大于等于1200px的称为大屏幕。

2,大于992,小于1200,称为中屏。

3,大于768,小于992,称为小屏

4,小于768称为超小屏

为了配合媒体查询能够在手机设备上显示样式。我们需要讲在页面的head区域设置视窗。

弹性盒子:

弹性盒子的推出是为了对css2传统盒子的一种补充和改善,

1,提高了元素盒子的使用灵活性,

2,实现关键词取值,简化了css布局样式的使用,提升了浏览器的通用性。

样式属性:

设置弹性盒子:

用法:在父级元素上设置:

display:flex,能够直接作用在相邻子级元素上,让相邻子级元素变成弹性盒子。

当子级变成弹性盒子之后,所有的子级标签高度默认为父级高度。所有的子级都自动排为一行。不再需要浮动。

弹性盒子的排列方向:

flex-direction:

row/

row-reverse/

column/

column-reverse;

练习:综合利用弹性盒子排列和弹性盒子的设置来替代float实现一行四列的布局。

设置弹性盒子在默认排列方式下,

水平对齐的方式:

属性名称:

justify-content:取值:

flex-start//居左,

flex-end//居右,

center居中,

space-between:左右两侧紧挨着父级标签,子级块之间的间距相等。

space-around:子级块左右两侧间距等于子级块之间的间距的一半。

弹性盒子在垂直方向的对齐方式:

属性:align-items

值:

flex-start:顶部

flex-end:底部

center:居中

flex-wrap:wrap;弹性盒子的子级,换行

align-content:

flex-start,

flex-end,

center,

space-between,

space-around

以上属性均为:放在父级标签上实现对相邻子级的控制。

以下属性都是放在子级上实现对自身的控制

order:数值;数值大的排序在后面,。数字小的排前面,支持负数。

align-self:设置具体的子级在垂直方向的对齐问题,

flex-start,

flex-end,

center

flex:设置子级的所占比例问题,设置的数字表示子级标签所占份数。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
  • 1.多栏布局 使用float或position进行页面布局时,有个比较显著的缺点,元素之间是各自独立的,因此经常底...
  • 因为三毛,我知道有一片大地上说着这样一种语言 因为Álvaro Soler,我发现这是一种美丽的语言 因为寻梦环游...