字体样式
p{
font-family: 华文细黑;
font-size: 20px;
font-weight: lighter;
font-style: italic;
}
font-family：字体
font-size:大小
font-weight：重量（粗细）
font-style：风格
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
span.test1{
font: bold 20px 华文细黑 oblique;
}
p span{
font:oblique bold 12px "楷体";
}
文本样式
<style>
p{
text-decoration: underline;
color:red;
text-align: center;
text-indent: 20px;
line-height: 20px;
}
</style>
**text-decoration：文本修饰 **
none : 无装饰
blink : 闪烁
underline : 下划线
line-through : 贯穿线
overline : 上划线
color:第一种 英文/16位颜色值
text-align：文本对齐
left : 左对齐
right : 右对齐
center : 居中
justify : 两端对齐
text-indent：文本缩进
**px,em em是缩进多少个字符
伪类:
可以用于所有标签，但多用于a标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:hover{text-decoration: none}
p:hover{color: red;font-weight: bold;font-size: 50px}
</style>
</head>
<body>
<a href="#">我是链接</a>
<p>我是段落</p>
</body>
</html>
背景（参考手册）
background-color：背景颜色
background-image：背景图片 配置url一起使用
background-repeat：重复方式
代码样例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
p{background-color: lemonchiffon}
body{
background-image: url("../../images/2.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body >
<div>
<p>背景</p>
列表样式
list-style:值看手册
代码样例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
}
span{
background-color: black;
color: red;
}
</style>
</head>
<body>
<ul>
<li><span>java</span> <span>phtyon</span> </li>
<li><span>java</span> <span>aaaa</span> </li>
</ul>
</body>
</html>
图标
第一步下载图标库
http://www.fontawesome.com.cn 下载矢量版
具体样式参考http://www.fontawesome.com.cn/cheatsheet/
假设我选一个fa-adjust
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../font-awesome-4.7.0/css/font-awesome.min.css">
<style>
.big{
font-size: 100px;
}
</style>
</head>
<body>
<span class="fa fa-adjust big" >首页</span>
<span class="fa fa-yen">其他</span>
<a href="#"><lihaifeng class="fa fa-yen">li</lihaifeng></a>
</body>
</html>
网友评论