css基础知识：
css以<style type="text/css">开始，以</style>结束。
可以用css对文本进行美化：
我们可以给文字加上阴影：
<html>
<head>
<title>练习</title>
<style type="text/css">
p{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
font-size: 56px;
color: #f90;
text-shadow: -5px -5px 12px #00f,
5px 5px 12px #121212;
}
</style>
</head>
<body>
<p>阴影<br/>
shadow</p>
</body>
</html>
我们可以让文字发光：
<html>
<head>
<title>练习</title>
<style type="text/css">
p{
padding: 50px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
font-size: 46px;
background-color: #121212;
color: #f90;
text-shadow: 0 0 10px #fff;
}
</style>
</head>
<body>
<p>阴影<br/>
shadow</p>
</body>
</html>
我们可以对溢出的文本进行处理：
<html>
<head>
<title>练习</title>
<style type="text/css">
li{
list-style: none;
line-height: 22px;
font-size: 14px;
border-bottom: 1px solid #ccc;
width: 220px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<li>这是第一行的内容</li>
<li>这是第二行的内容 这是第二行的内容 这是第二行的内容 这是第二行的内容 这是第二行的内容</li>
</body>
</html>
我们还可以进行边界换行：
<html>
<head>
<title>练习</title>
<style type="text/css">
p{
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 1px solid #ccc;
padding: 10px;
width: 220px;
font-size: 12px;
word-wrap: break-word;
}
</style>
</head>
<body>
<p>这是需要边界换行的内容 这是需要边界换行的内容 这是需要边界换行的内容 这是需要边界换行的内容<br/></p>
</body>
</html>
我们可以改变字体：
<html>
<head>
<title>练习</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
}
h1{
float: right;
width: 20px;
margin: 0 0 0 10px;
padding: 0;
font: 24px "隶书";
font-size: 33px;
color: #f90;
text-shadow: 12px 12px 12px #121212;
word-wrap: break-word;
}
p{
float:right;
width: 20px;
padding: 0;
margin: 0 20px 0 0;
line-height: 33px;
font: 24px "隶书";
font-size: 30px;
color: #f90;
text-shadow: 0 0 1px #fff;
word-wrap: break-word;
}
footer{
float: right;
width: 20px;
padding-top: 80px;
font: 24px "隶书";
font-size: 30px;
color: #f90;
text-shadow: 0 0 12px #333;
margin-right: 3px;
}
</style>
</head>
<body>
<h1>游子吟</h1>
<p>慈母手中线，</p>
<p>游子身上衣。</p>
<p>临行密密缝，</p>
<p>意恐迟迟归。</p>
<p>谁言寸草心，</p>
<p>报得三春晖？</p>
<footer>孟郊</footer>
</body>
</html>
我们可以使用hsl色彩模式：
<html>
<head>
<title>练习</title>
<style type="text/css">
.hsl{
height: 20px;
border: 1px solid #f00;
padding: 10px;
height: 170px;
background-color: hsl(0,0%,90%);
color: hsl(0,100%,50%);
font-size: 12px;
text-align: center;
line-height: 25px;
width: 320px;
}
ul{
width: 320px;
margin: 0;
padding:10px 0;
border-top: 1px solid #ccc;
}
li{
float: left;
margin: 1px 0 0 1px;
width: 50px;
height: 15px;
list-style: none;
font-size: 12px;
line-height: 15px;
}
li:nth-child(8){background-color: hsl(0,100%,100%);}
li:nth-child(9){background-color: hsl(0,75%,100%);}
li:nth-child(10){background-color: hsl(0,50%,100%);}
li:nth-child(11){background-color: hsl(0,25%,100%);}
li:nth-child(12){background-color: hsl(0,0%,100%);}
li:nth-child(14){background-color: hsl(0,100%,75%);}
li:nth-child(15){background-color: hsl(0,75%,75%);}
li:nth-child(16){background-color: hsl(0,50%,75%);}
li:nth-child(17){background-color: hsl(0,25%,75%);}
li:nth-child(18){background-color: hsl(0,0%,75%);}
li:nth-child(20){background-color: hsl(0,100%,50%);}
li:nth-child(21){background-color: hsl(0,75%,50%);}
li:nth-child(22){background-color: hsl(0,50%,50%);}
li:nth-child(23){background-color: hsl(0,25%,50%);}
li:nth-child(24){background-color: hsl(0,0%,50%);}
li:nth-child(26){background-color: hsl(0,100%,25%);}
li:nth-child(27){background-color: hsl(0,75%,25%);}
li:nth-child(28){background-color: hsl(0,50%,25%);}
li:nth-child(29){background-color: hsl(0,25%,25%);}
li:nth-child(30){background-color: hsl(0,0%,25%);}
li:nth-child(32){background-color: hsl(0,100%,0%);}
li:nth-child(33){background-color: hsl(0,75%,0%);}
li:nth-child(34){background-color: hsl(0,50%,0%);}
li:nth-child(35){background-color: hsl(0,25%,0%);}
li:nth-child(36){background-color: hsl(0,0%,0%);}
</style>
</head>
<body>
<div class="hsl">
<div>色调：0 红色</div>
<div>竖向：亮度：横向：饱和度</div>
<ul>
<li></li> <li>100%</li><li>712%</li><li>50%</li><li>25%</li><li>0%</li>
<li>100%</li><li></li> <li></li> <li></li> <li></li> <li></li>
<li>75%</li><li></li> <li></li> <li></li> <li></li> <li></li>
<li>50%</li><li></li> <li></li> <li></li> <li></li> <li></li>
<li>25%</li><li></li> <li></li> <li></li> <li></li> <li></li>
<li>0%</li><li></li> <li></li> <li></li> <li></li> <li></li>
</ul>
</div>
</body>
</html>