css篇

                              css篇         

CSS作为一门基础语言，可为页面添加一些静态或些许动态的效果，类似于为一个人添加衣服，发型之类的。

通过添加CSS可让页面变得更加好看、舒适，CSS语言也是非常容易上手的一门语言，它包含着许多非常有趣的东西(2d动画，3d动画，伪类（hover）)等等，

接下来让我们一起了解这门非常有趣的语言。

CSS中又有样式（字体颜色，字体大小，背景、文本......）、

选择器（类选择器，ID选择器，元素选择器，属性、后代、子元素、兄弟选择器等等）、

 

定位（相对定位（relative ）；绝对定位（position）；固定定位（fixed））

盒模型等等。

盒模型：

 

 

选择器：

 

 

字体样式：

 

 

 

CSS水平对齐:可使用多种属性来水平对齐元素。

使用margin属性来水平对齐，可通过将左和右边距设置为auto来对齐块元素，宽度为100%，对齐则没有效果。

Position属性可进行左和右对齐

Float属性也能完成对齐效果

透明度：Opacity:(0-1)

文本阴影效果：text-shadow：水平阴影、垂直阴影、模糊距离、阴影颜色

转换：

translate（移动）：向X坐标或Y坐标移动

rotate（旋转）：围绕X坐标或Y坐标旋转，正值则顺时针旋转，负值则逆时针旋转

scale（缩放）：元素的尺寸会增加或减少

skew（翻转）：skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

matrix：把所有2D转换方法组合在一起，需要六个参数。

过渡：

鼠标移入改变元素

 

动画：

创建动画，则需要学习@keyframes规则，定义动画的名称和时长

 

三秒后开始执行动画，动画时长5秒

CSS是编程人员必学的一门的语言，并且也是非常容易上手的一门语言。

欢迎大家前来交流！