abstract:通过这几节CSS3 的学习后,自己学会了通过CSS去控制文本的样式,CSS的样式分别为内联样式,内部样式,外部样式,他们的优先级关系为内联样式>内部样式>外部样式;同样也知道了,CSS的选择器的使用,class id 标签 属性 派生 ,padding margin 的理解,border及其属性的学习。小案例如下:<!DOCTYPE html&
通过这几节CSS3 的学习后,自己学会了通过CSS去控制文本的样式,CSS的样式分别为内联样式,内部样式,外部样式,他们的优先级关系为内联样式>内部样式>外部样式;同样也知道了,CSS的选择器的使用,class id 标签 属性 派生 ,padding margin 的理解,border及其属性的学习。
小案例如下:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>CSS练习</title>
<link rel="shortcut icon" type="image/x-icon" href="../picture/mi.png">
<!-- 在开启网页的头部加入一个小图片 -->
<link rel="stylesheet" type="text/css" href="../css/css.css">
<!-- 引入样式表 css.css文件 -->
<style type="text/css">
div{width:200px;height:1000px;padding:20px;margin:0px auto;border:dotted 1px black;padding:50px;background:#ccc;border-radius:30px;box-shadow:0px 0px 100px red /*inset*/;}
/*border-radius:20px,值的大小决定边框的形状,box-shadow:0px 10px 20px #ccc第一个值时x轴第二个值是y轴第三个值是阴影宽度 inset(向内)或者默认向外阴影*/
span{color:blue;}
a {font-size:20px;text-decoration:none;}
a:hover{color:red;text-decoration:underline;}
.lx{color:red;}
</style>
<!-- 内部样式 -->
</head>
<body>
<a href="top">网页顶部</a>
<!-- 用超级链接a做一个锚点 -->
<div>css练习</div>
<span>Css练习</span><br>
<span class=lx>Css练习</span><br>
<!-- class 选择器 -->
<a href="#" name="top"><center>网页底部</center></a>
<!-- #号键代表本页面 -->
</body>
</html>
Correcting teacher:灭绝师太Correction time:2018-11-16 13:45:06
Teacher's summary:完成的不错,基础知识比较枯燥,但是要细细掌握好为后面做铺垫!继续加油!