这周我们学习了选择器 字体样式 文本 边框 列表 表格 图片 背景 超链接练习
练习的CSS如下：
<style>
img{
border-width: 10px;
border-style: solid;
border-color: black;
}
body{
color: blanchedalmond;
}
h1 {
color: red;
font-size: 20px;
font-family:'Courier New', Courier, monospace;
font-weight:bold;
font-style: oblique;/*注释*/
text-align: center;
text-decoration: underline;
text-transform: capitalize;
letter-spacing: 4px;
}
p{
color: blue;
text-indent: 26px;
text-decoration: line-through;
text-transform: uppercase;
}
#a{
color: aqua;
text-align: left;
text-decoration: overline;
text-transform: lowercase
}
div{
color: rgb(246, 240, 255);
text-align: right;
text-decoration: none;
border: 1px red solid;
border-bottom: 0px;
}
</style>
</head>
<body>
<h1 style="color: red;">
aaaaa
</h1>
<img src="./img/1.jpg" alt="1">
<p id="a">
aaaaaaaaaaaaaaaaaa <!--注释-->
</p>
<div> bbbbbbbbbbbb</div>
<p>ccccccccccc</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,tr,td{ border: 1px solid black; }
table{caption-side: bottom;}
table{border-spacing: 8px;}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>s</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
<td>o</td>
<td>u</td>
<td>f</td>
</tr>
</table>
</body>
</html>
<style>
p{
color: black;
background-color: brown;
}
a{
text-decoration: none;
color: blue;
}
a:hover{
color: red;
text-decoration: underline;
cursor: cell;
}
</style>
</head>
<body>
<p>文字<br/>
背景
</p>
<a href="http://www.lvyestudy.com/css/pseudo-class"target="_blank">绿叶学习网</a>
</body>
</html>
/head>
<body>
<table>
<caption>表格标题</caption>
<tr>
<td>a</td>
<td>b</td>
<td>x</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
<td>y</td>
</tr>
</table>
</body>
</html>
<title>css</title>
<style type="text/css">
p{color: blue;font-weight:bolder;letter-spacing: 3px;border-top-width: 1px;border-bottom-width: 1px;border-top-style: dashed;border-bottom-style:dashed ;}
div{color: red;text-decoration: line-through;border-width: 1px;border-style: solid;border-color: black;}
/*注释*/
#p1{color: rgb(38, 163, 78);text-indent: 28px;}
.p2{color: rgb(44, 101, 125);font-size: 40px;}
span{font-family:微软雅黑;}
#y{text-transform: uppercase;}
img{width: 500px;height: 300px;border-style: solid;border: width 3px;border-color: rgb(35, 192, 90); }
#d2{text-align: center;}
body{background-color: rgb(123, 107, 69);}
#d1{padding: 20px;background-color:hotpink;}
#d3{width: 300px;
background-color:#0C6A9D;
border:1px solid silver;}
div{padding: 10px;margin: 15px;}
#x1{ background-color:hotpink;float: left;}
#x2{background-color: aqua;float: left;}
</style>
</head>
<body>
<h1>绿叶学习网</h1>
<div id="d1">绿叶学习网</div>
<p>绿叶学习网</p>
<span>绿叶学习网</span><br>
<span>绿叶学习网</span>
<div>绿叶学习网</div>
<p>绿叶学习网</p>
<p id="p1">绿叶学习网</p>
<p class="p2">绿叶学习网</p>
<p class="p2">绿叶学习网</p>
<div>绿叶学习网</div>
<p id="y">shhddjkdjodo</p>
<div id="d2">
<img src="img/10.jpg" alt="照片">
</div>
<div id="d3">
<div id="x1">box1</div>
<div id="x2">>box2</div>
</div>
</body>
</html>
