目录
一、颜色属性
<head>
<meta charset="utf-8">
<style type="text/css">
.a1{ color:red;}
.a2{ color:#ff6600;}
.a3{ color:#f60;}
.a4{ color:rgb(95,197,175);}
.a5{ color:rgba(0,0,0,0.51);}
</style>
</head>
<body>
<a class="a1">属性定义文本的颜色</a><br>
<a class="a2">属性定义文本的颜色</a><br>
<a class="a3">属性定义文本的颜色</a><br>
<a class="a4">属性定义文本的颜色</a><br>
<a class="a5">属性定义文本的颜色</a>
</body>
二、字体属性
<head>
<meta charset="utf-8">
<style type="text/css">
.a1{ font-size:40px;}
.a2{ font-family:宋体，微软雅黑；}
.a3{ font-weight:bolder;}
.a4{
font-size:40px;
font-family:微软雅黑;
font-weight:bolder;
}
</style>
</head>
<body>
<a class="a1">字体大小</a><br>
<a class="a2">定义字体</a><br>
<a class="a3">字体加粗</a><br>
<a class="a4">一起使用</a>
</body>
三、背景属性
<head>
<meta charset="utf-8">
<style type="text/css">
body{ background-color:red;}
</style>
</head>
<head>
<meta charset="utf-8">
<style type="text/css">
body{ background-image:url(2018-08-12_173557.jpg)；}
</style>
</head>默认会横向和纵向重复
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-image:url(2018-08-12_173557.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-image:url(2018-08-12_173557.jpg);
background-repeat:no-repeat;
/*第一个代表横向，第二个代表纵向*/
background-position:right center;
}
</style>
</head>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background:#f60 url(2018-08-12_173558.jpg) no-repeat top center
}
</style>
</head>
四、文本属性
<head>
<meta charset="utf-8">
<style type="text/css">
body{ text-align:center;}
</style>
</head>
<body>
文本属性
</body>
<head>
<meta charset="utf-8">
<style type="text/css">
body{ line-height:30px;}
</style>
</head>
<body>
文本属性<br>
文本属性<br>
文本属性<br>
</body>
<head>
<meta charset="utf-8">
<style type="text/css">
body{ text-indent:50px;}
</style>
</head>
<body>
文本属性<br>
文本属性<br>
文本属性<br>
</body>
<head>
<meta charset="utf-8">
<style type="text/css">
body{ letter-spacing:20px;}
</style>
</head>
<body>
文本属性<br>
文本属性<br>
文本属性<br>
</body>
五、边框属性
<head>
<meta charset="utf-8">
<style type="text/css">
.d1{
width:150px;
height:150px;
background-color:#F60;
border-style:solid;
border-width:10px;
border-color:#C0C;
}
</style>
</head>
<body>
<div class="d1"></div>
</body>
<head>
<meta charset="utf-8">
<style type="text/css">
.d1{
width:150px;
height:150px;
background-color:#F60;
border:solid 10px #C0C;
}
</style>
</head>
<body>
<div class="d1"></div>
</body>
六、列表属性
默认情况下：
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
</body>
<head>
<meta charset="utf-8">
<style type="text/css">
ul{
list-style-type:upper-alpha;
}
ol{
list-style-type:disc;
}
</style>
</head>
<body>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
</body>
<head>
<meta charset="utf-8">
<style type="text/css">
.inside{
list-style-position:inside;
}
.outside{
list-style-position:outside;
}
</style>
</head>
<body>
<ul class="inside">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<ul class="outside">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>
<head>
<meta charset="utf-8">
<style type="text/css">
.gif{
list-style-image:url(arr.gif);
}
.png{
list-style-image:url(arr.png);
}
</style>
</head>
<body>
<ul class="gif">
<li>无序列表</li>
<li>
<ul class="png">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</li>
<li>无序列表</li>
</ul>
</body>
<head>
<meta charset="utf-8">
<style type="text/css">
.gif{
list-style:circle outside url(arr.png);
}
</style>
</head>
<body>
<ul class="gif">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</body>