字体样式
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标签
:hover可以用于所有标签上
作用在a标签上的伪类
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */
正常的顺序是：a:link、a:visited、a:hover、a:active
<!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>
制作有路网顶部导航效果
代码
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
<style type="text/css">
.red {
color: red;
}
.nav {
font-size: 12px;
color: #979797;
}
a:link {
text-decoration: none;
color: #979797;
}
a:visited {
text-decoration: none;
color: #979797;
}
a:hover {
text-decoration: underline;
color: #FF7F50;
}
</style>
</head>
<body>
<div class="nav">
您好，欢迎光临有路网！
<span class="red">请登陆</span> <a href="#">免费注册</a> |
<a href="#">我的有路</a>
|<a href="#">我要开店</a> |
<a href="#"><span class="fa fa-address-book">手机有路</span></a>
|
微信公众号
|团购批发 |
客服服务
</div>
</body>
目前效果
想把左右拉开指定距离，有没有好的办法呢？下一章学习
