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是编程人员必学的一门的语言,并且也是非常容易上手的一门语言。
欢迎大家前来交流!