<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*div{*/
/**/
/*color: chocolate;*/
/*width: 30px;*/
/*height: 30px;*/
/*}*/
/*@import "test1.css";*/
</style>
<link href="test1.css" rel="stylesheet">
</head>
<body>
<p style="background-color: red;color: green">curry</p>
<div>tom</div>
</body>
</html>
div{
background-color: aqua;
color: chocolate;
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**{*/
/*color: #0c4fff;font-size: 45px;*/
/*}*/
#name{
font-size: 110px;
color: #d23a42;
}
.ppg{
color: #d23a42;
}
.ff{
font-size: 10px;
}
/*顺序从上到下*/
div[class~="ff"]{
color: yellow;
}
div[lang|="ppg"]{
color: red;
font-size: 120px;
}
a:link{
color: black;
}
a:hover{
color: yellow;
}
</style>
</head>
<body>
<a>tom</a>
<p id="name">jim</p>
<div class="ppg ff">jimmy</div>
<div lang="ppg-ff">jimmk</div>
<a href="http://www.baidu.com">hello-world</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div p.p1{
color:rgb(255,0,0);
color: #2e56ff;
color: blue;
color: rgba(255,0,0,0.5);
font-family: 宋体;
background-image: url("0.jpg");
background-repeat: no-repeat;
background-color: blue;
background-position: center center;
}
div p.p1{
font-size: 20px;
line-height: 100px;
text-align: center;
}
div p.p2{
text-indent: 200px;
}
div p.p3{
background-color: blue;
height: 400px;
width: 300px;
/*border-style: solid;*/
/*border-color: red;*/
/*border-width: 20px;*/
border: red 20px dashed;
}
ul{
/*list-style: none;*/
/*list-style: circle;*/
list-style: decimal-leading-zero;
}
div.outer{
height: 600px;
width: 600px;
background-color: cornsilk;
/*border: 1px solid ;*/
/*padding-top: 200px;*/
}
div.inner{
height: 200px;
width: 200px;
background-color: blue;
border: 1px solid ;
margin-top: 200px;
/*margin-left: 200px;*/
/*margin-bottom: 200px;*/
}
</style>
</head>
<body>
<p style="height: 800px">tom</p>
<div>
<p class="p1">text1</p>
<p class="p2">text2</p>
</div>
<div>
<p class="p3">text2</p>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.p1{
background-color: red;
height: 200px;
width: 100px;
/*float: left;*/
/*clear: both;*/
}
div.p2{
background-color: blue;
width: 500px;
position: fixed;
top: 20px;
/*float: left;*/
/*clear: left;*/
}
</style>
</head>
<body>
<div class="p1">
test1
</div>
<div class="p2">
test2
</div>
</body>
</html>
