CSS3
css3更新的一些新特性,给界面带来了更加丰富的效果,也给写代码带来了很多的便利。css3的新特性有更强大的css选择器,更多的颜色格式和透明度的设定,多栏布局的实现,多背景图的效果,文字阴影、开放的网络字体类型、圆角、边框背景图片、盒子阴影、媒体查询等丰富效果,深入学习以后css3会是我们写网页更加方便去、更加强大的助手。
1.css3的新选择器 常用的用蓝色标记
伪类选择器有
1):link 设置超链接没有被访问之前的样式。
2): visited 设置超链接被访问过的样式
3) :hover 设置元素在其鼠标悬停时的样式。
4) :active 设置元素在被用户在鼠标点击与释放之间发生的事件时的样式。
5):focus 聚焦(onfocus时)时的样式。
6):lang(fr) 内容里面包含fr的时候增加样式
7):not(s) 匹配不含有s选择符的元素。内容里面不包含s的时候增加样式
8):root 匹配元素在文档的根元素。在HTML中,根元素永远是HTML
9):first-child 匹配父元素的第一个子元素。
10):last-child 匹配父元素的最后一个子元素。
11):only-child 匹配父元素仅有的一个子元素。
12):nth-child(n) 匹配父元素的第n个子元素
13):nth-last-child(n) 匹配父元素的倒数第n个子元素
14):first-of-type 匹配父元素下第一个类型为的匹配元素的子元素。
15):last-of-type 匹配父元素下的所有E子元素中的倒数第一个。
16):only-of-type 匹配父元素的所有子元素中唯一的那个子元素。
17):nth-of-type(n) 匹配父元素的第n个子元素。
18):nth-last-of-type(n) 匹配父元素的倒数第n个子元素。
19):empty 匹配没有任何子元素(包括text节点)的元素。
20):checked 匹配用户界面上处于选中状态的元素。
21):enabled 匹配用户界面上处于可用状态的元素。
22):disabled 匹配用户界面上处于禁用状态的元素。
23):target 匹配相关URL指向的元素。
属性选择符 att为属性
1)[att] 选择有att属性的元素
2)[att="val"] 选择具有att属性且属性值等于val的元素。 例如:input[type="text"]
3)[att~="val"] 选择很多属性中 包含一个属性就可以选中
4)[att^="val"] 选择属性以val开头的
5)[att$="val"] E[att$="val"] 选择属性以val结尾的。
6)[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
7)[att|="val"] 选择具有att属性(包含val就会被选中)
伪对象选择器 (此伪对象仅作用于块级元素。前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符,但以前的写法仍然有效。即E:first-letter可转化为E::first-letter)
1)E:first-letter/E::first-letter 设置对象内的第一个字符的样式。 可以用于开头文字设置特别的样式
2)E:first-line/E::first-line 设置对象内的第一行的样式。
3)E:before/E::before 设置在对象前发生的内容。
4)E:after/E::after 设置在对象后发生的内容。
2.颜色 :rgba格式 rgba(250,250,250,0); 最后一位是透明度
单独设置透明度的属性有 opacity 取值零到1 。设置透明色color:transparent;
3.边框
边框常用的有border-radio 边框圆角 可以设置百分比,也可以设置单位数值。(如果圆角值为50%的时候 该盒子模型会变成圆的)
box-shadow 盒子阴影,可以设置四个值 box-shadow: 10px 10px 5px #888888; 分别是设置阴影x轴偏移、Y轴偏移 和阴影大小 颜色。
边框图片,在css3中可以设置边框为图片,border-image属性,可以使用图像创建一个边框。border-image:url(border.png) 30 30 round;
4.背景
1)background-image 设置背景图片各种属性,路径 是否平铺等等
2)background-size 设置背景图像的大小。
3)background-Origin
5.css3 2D转换
translate(x,y)以x和y轴平移,单独设置的写法为translateX() translateY()
transform: rotate(30deg); 把元素顺时针旋转30度(deg)
transform: scale(2,4); 拉伸方法,把宽度设置为原来的2倍,高度设置为原来的4倍,也可以分开设定,同上
skew() 翻转,transform: skew(30deg,20deg);沿着x轴翻转30deg,沿着y轴翻转20deg。分开的写法为skew(x-angle,y-angle);
6.3D转换
transform-origin : 改变被转换元素的位置。
perspective : 设置元素被查看位置的视图
7.css3过渡
transition 可以设置过渡的曲线速度
linear 线性过渡
ease 先慢后快
cubic-bezier(n,n,n,n); 设置贝塞尔曲线 可能的值是 0 至 1 之间的数值。
ease-in 以慢速开始的过渡效果
ease-out 以慢速结束的过渡效果
ease-in-out 以慢速开始和结束的过渡效果
8.动画 animation
@keyframes 声明规定动画,然后设置每个阶段效果,参照博客animation实现动画钟表效果。
animation-duration 固定一个动画的完成周期
animation-timing-function 规定动画的速度曲线,参照过渡
animation-fill-mode 当动画没有播放的时候需要的样式
animation-delay 延时播放
animation-iteration-count 规定动画播放的次数
animation-direction 规定动画是否在下一周期逆向的播放
animation-play-state 设置动画是否正在运行或暂停
9.css3 弹性盒子
后面有单独一篇介绍flex