本周CSS学习心得交流

Posted 2020-06-29

　　总的来说CSS分为CSS和CSS3，只不过CSS3是在CSS基础上增添了新属性，而且CSS3的兼容性暂时不好，也就是chrome支持，其他浏览器兼容性不强。

　　CSS的主要作用就是为我们的html增添样式，比如颜色，大小等，所以我们要使用CSS必须先选取到HTML的元素， 即选择器的用法，能选取到你需要改变的HTML元素，选择器分为很多种，常用的也就4种，可以去W3SCHOOL上面去查询。这里还涉及到元素的命名，主要使用的是id命名，class命名，name命名，各选取的方式也不同，在CSS中常用class来命名。

　　选择好元素之后，我们能对HTML进行元素属性的改变。元素属性分类主要是：

　　一元素样式：元素可改变的属性

　　1.背景  ------background-color背景颜色   background-image背景图片  background-repeat背景重复 background-positon背景定位  background-attachment背景跟随滚动

　　2.文本 ------text-decoration文本装饰（主要是下划线、删除线、上划线） text-indent文本缩进（段落首行缩进）text-align文本居中对齐（垂直方向） 还有字间隔，字母间隔（不常用，W3SCHOOL查询）

　　3.字体 -----font-size字体大小 font-family字体系列  font-style字体风格（字体斜体） font-weight字体加粗

　　4.链接 -----这里主要使用a:hover{color:blick} 代表当鼠标移动到a链接上的时候，字体会变成黑色，：hover不仅仅适用在a标签上，它使用在大部分元素上都可以。

　　5.列表 -----这里主要使用li{list-style:none} 代表的是去掉列表中li中的小圆点或者数字。

　　二 框模型：CSS中盒子模型十分重要，我们可以把每一个元素当做一个盒子模型使用

　　1.元素本身 ----元素本身的大小，上下左右的宽度，比如ul he p自身就有一定的大小

　　2.盒子本身的内边距 -----盒子边框距离元素的距离  ---padding

　　3. 盒子的边框 ------盒子边框也有一定的宽度     ----border{1px solid red}

　　4.盒子的外边距 ------盒子距外界的距离      ------margin    注：当2个盒子相邻时，都有外边距的时候，我们取较大的那个外边距。

 

　　三定位  - - - - -相对父元素定位，必须要要给父元素给个定位position:relative，不然会相对于body定位

　　1.相对定位 -----positon:relative  相对父元素移动，但是原位置还会占据空间，不会被后面的元素代替。

　　2.绝对定位 -----positon:absolute 相对父元素移动，但是原位置失去，因为绝对定位会漂浮起来，脱离文档流，后面的元素代替其原来的位置。

　　3.固定定位 -----positon:fixed 相对于body移动，但是移动之后位置不发生改变，不随滚动条滚动，始终出来网页的固定位置。

　　4.浮动定位 -----float:left 浮动是指让该块漂浮起来，脱离了文档流，后面的元素不浮动的话会代替该元素，clear:both代表的是清除浮动。

　　　　浮动在导航中可以使用，让ul中的li浮动即可很想显示

 

　　CSS3的作用主要是配合HTML做一些简单的动画效果，取代一些flash js的功能

　　边框效果 -------给予边框特效

　　1.边框阴影  -----box-shadow:10px 10px 5px red----红色阴影，5像素的模糊值，右下10个像素的阴影宽度

　　2.边框圆角  -----border-radius:25px  ------边框

　　还有个边框图片，不建议使用，叫UI小妹做个图吧！！！

 

　　文字效果

　　1.文字阴影 -----text-shadow:10px 10px 5px red 用法和盒子阴影一样

　　

　　2D转换 ----2D转换，平面转换

　　1.方向移动---transform:translate(300px,200px) 向右移动300px,向下移动200px.

　　2.角度旋转---transform:rotate(30deg) 顺时针方向旋转30度.

　　3.尺寸变化----transform:scale(2,4)元素以自身中心宽放大2倍，高放大4倍

　　4.元素翻转----transform:skew(30deg,20deg)指元素以自身中心X轴Y轴边框旋转30度，20度。

 

　　3D转换 ----3D转换，3维转换

　　1.绕X轴3维旋转----transform:rotateX(120deg)绕X轴旋转120度

　　2.绕Y轴3维旋转----transform:rotateY(120deg)绕Y轴旋转120度

 

　　过渡----指元素值变化使用过渡

　　DIV{transform:width 3s linear 2s}  DIV:hover{width:400px}-----当鼠标移入到DIV中时，2s后，DIV宽度变化到400px用时3S

　　

　　动画----

　　@keyframes myfirst

{

0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}

}

DIV{animation: myfirst 5s linear 2s infinite alternate;}

DIV从红色变到绿色，时间是5S,延迟时间是2S，动画效果无限次，而且一次动画效果后会反向播放。