Web前端（二）：CSS3

CSS是描述HTML元素的样式的语言。类似于HTML5，CSS3也是最新的CSS标准。

CSS样式起作用的方法有两种，第一种是直接写在.html文件内，再通过选择器匹配到相应的元素，从而改变样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
</head>
<style>
.hello{
	background-color: red;
}
#hello{
	background-color: blue;
}
</style>
<body>
	<div id="hello">Hello</div>
	<div class="hello">World</div>
</body>
</html>

第二种是新建一个.css的文件，然后再将其引用进来，这样子有利于代码的管理。随着你的网页越来越复杂，代码量越来越大，HTML、CSS、JS都应该分开管理。

<link rel="stylesheet" href="hello.css" type="text/css" />

CSS功能十分强大，可以改变网页元素的大小、宽高、颜色、位置等等属性，几乎可以算得上是随心所欲了，只要是你能想得到的内容，都可以通过CSS样式来实现。具体的样式太多太繁琐，还是自己学习掌握吧。接下来是CSS的几个进阶内容。

1、CSS选择器：CSS有多种匹配元素的方法。如：

.hello{
//选择class为hello的元素(多个)
}
#hello{
//选择id为hello的元素(单个)
}
div{
//选择所有的div
}
div,p{
//选择所有的div和p
}
div p{
//选择所有的div内部的p
}
div+p{
//选择所有在div后的p
}

以上几种选择方式是比较常见的，也能够满足大多数需求。
比如说我可以通过#hello> span,p 表示选择id为hello的所有span和p子元素。
也可以通过#hello>div>p.special表示id为hello的div中的class为special的p元素。

2、CSS动画。以上的操作，基本上都是静态的，也就是在页面渲染完成之前就完成了，不会再改变了，但是有时候我们需要网页能够给予我们视觉上的反馈，比如鼠标悬停在一个元素上它的样式就会发生变化，再比如希望某些元素可以一直在运动着，通过这些动画效果，都能够使我们的网页更加的美观，用户体验更加良好。

transform: translate(50px,100px);//移动，使元素向右侧移动 50 像素，向底部移动 100 像素。
transform: rotate(30deg);//以中心为原点旋转 30 度。
transform: scale(2,4);//缩放，把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
transform: skew(30deg,20deg);//翻转，围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
transform: rotate(360deg) scale(2,2) skew(10deg,5deg);//当我们需要多个变换时，只需要用空格隔开。

其中rotate和skew十分地相似，区别是rotate是整个元素以左上角的顶点为中心进行旋转，元素还是保持原有的形状；而skew是向着轴做倾斜，整体的形状也会发生扭曲变形。

细心的你可能已经发现了，以上的变换都是2D的，也就是只对横向、纵向两个维度进行了变换操作，更加炫酷的方式还有3D，也就是对三个维度进行变换。

translate3d(x,y,z)//同时进行三个方向上的移动
translateX(x)//只进行X方向上的移动
translateY(y)//只进行Y方向上的移动
translateZ(z)//只进行Z方向上的移动
同样的方法也适用于rotate、scale，但是skew翻转是没有3D效果的

悬停：hover

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

以上代码，写了两套样式，当鼠标悬停在元素上时，元素的样式会切换为:hover中的内容，在通过transition:width 2s, height 2s;设置过度效果，即宽高的变化都在两秒完成。这里需要注意，CSS的动画只有较为高级的浏览器可以支持，像老IE上就不能实现动画效果，并且需要加以不同的前缀来使不同的浏览器实现动画。

自动播放的动画：animation和@keyframes 规则。

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}

animation是动画的意思，这里是将元素设置为一个动画，并且设置动画名称和一次变化的时间，再通过@keyframes规则实现动画效果。

总结：以上差不多就是CSS中最核心的内容了，在掌握了这些内容之后，你就能通过多种多样的CSS样式来丰富你的网页了。不过如果你从零开始写网页的样式，就会发现这是一件十分痛苦的事情，所以在实际的开发过程中为了效率和便捷，我们都会选择在前端UI库的基础上设计网页、修改样式。好了，接下来就在不断的实践中更好地掌握CSS吧！

另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog

Web前端（二）：CSS3

猜你喜欢