本周CSS学习心得交流

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了本周CSS学习心得交流相关的知识,希望对你有一定的参考价值。

  总的来说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,动画效果无限次,而且一次动画效果后会反向播放。

 

以上是关于本周CSS学习心得交流的主要内容,如果未能解决你的问题,请参考以下文章

学习进度二

本周心得

九月第一周学习心得

暑假第一周Java学习心得

前一个星期的学习心得

Javalucene4.0学习心得