CSS边控选择器的练习

Original 2018-11-16 11:51:26 310
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:完成的不错,基础知识比较枯燥,但是要细细掌握好为后面做铺垫!继续加油!

Release Notes

Popular Entries