张瑜-20201028
css3:层叠样式表——用来修饰网页
选择器:精确地选中要修饰的目标 id>类>标签
常用的选择器:0、通用选择器 *{ background-color:gold;}
1、类选择器 <div class="box"></div> .box { width: 300px; height:200px; background-color:red }
<h1 class="box"></h1>
2、标签选择器 <h1></h1> h1{ width: 400px; height: 200px; background-color : #llaabb; }
3、id选择器 <p id="box"></p>#box{width: 400px; height: 200px; background-color : #112233; }
4、后代选择器 li{ color:blue;} p ul li { color:black;}
5、伪类选择器 (鼠标悬停状态) a:hover{text-decoration: none;}
修饰字体和文本的常用样式<div class="box"></div>
color:red;/*修饰字体的颜色*/ font-size:30;/*修饰字体的大小*/ font-family:"宋体";/*字体类型*/ font-style:italic;/*字体的样式*/ font-weight:bold;/*字体加粗*/
letter-spacing: 5px;/*字体间距*/
text-align: center;/*对齐方式*/ line-height: 300px;/*行高*/ text-decoration:underline(下划线);overline(上划线);line-through(划错)/*文本划线*/
text-shadow:2px 2px 3px yellow;/*字体阴影*/ text-indent:2em;/*首行缩进*/
修饰背景的常用样式 alt+/(注释/解注释)
background-color: red;/*背景颜色*/ background-image: url(../img/icon/.jpg);/*背景图片*/ background-size: 300px 300px;/*背景图片的大小*/ background-size: cover(等比例缩放) background-repeat: no-repeat;/*背景图片平铺*/ background-attachment: fixed;/*背景图片固定*/
background-position:-100px 0;/*背景图片平移*/ opacity: 0.5/*透明度*/ background-color: transparent;/*背景全透明*/s
心得体会:
在这几天几天的实训中我学习到了许多的新知识,学习的时候感觉不是很难,但当自己动手做的时候还是会遇到一些些的问题,从错误中自己慢慢研究解决问题,就会受益匪浅,并从中获得很多。
近期评论