本文主要是介绍Html-样式表、字体、背景图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一. 样式表
1. 行内样式：
直接在标签里面添加style属性来添加样式。(不建议使用)
如：
<div class="div1" style="width: 100px; height:
100px;background-color: red;">
2. 内部样式表：
在head添加style标签来写样式。
如：
*{
margin: 0;
padding: 0;
}
3. 外部样式表：
通过link—方式来引入外部样式表。
如：
<link rel="stylesheet" href="css/mycss.css"/>
二. 选择器
1. 标签选择器(所有的标签)
如：
div{
width: 100px;
height: 100px;
background-color: red;
}
2. 类选择器
如：
.div1{
width: 17px;
height: 20px;
background-image: url("img/1.gif");
background-position: 0px -20px;
float: left;
}
3. id选择器
如：
#div3{
background-color: red;
}
4. 交集选择器
如：
div.c2{
width: 100px;
height: 100px;
background-color: red;
}
5. 并集选择器
如：
div,p,h1{
width: 100px;
height: 100px;
background-color: green;
}
6. 后代选择器
如：
div p{
width: 100px;
height: 100px;
background-color: green;
}
7. 通配选择器：*（原子化）
如：
*{
margin: 0;
padding: 0;
}
三. 字体
1. 改变字体大小
如：
font-size: 30px;
2. 字体类型
如：
font-family: "微软雅黑","楷体";
3. 加粗
如：
font-weight: bolder;
4. 字体样式(斜体)
如：
font-style: italic;
5. 字体颜色
如：
color: red;
6. 文本对齐方式
如：
text-align: center;
7. 行高（垂直居中让行高等于当前容器的高度）
如：
line-height: 300px;
8. 字间距
如：
letter-spacing: 20px;
9. 文字加划线
underline：下划线
line-through：中划线
overline：上划线
如：
text-decoration: underline;
10. 文字缩进
如：
text-indent: 10px;
四. 背景图
1. 添加背景图
如：
background-image: url("img/star2.jpg");
2. 背景图平铺
如：
background-repeat: no-repeat;
no-repeat:不平铺
repeat-x:水平平铺
repeat-y:垂直平铺
3. 设置背景图大小
如：
background-size: 1300px 1200px;
background-size: 100% 100%;
①. 保持图片最大的属性和容器相同，剩下的截取，显示不全
如：
background-size: cover;
②. 保持图片最小的属性和容器相同，剩下的留白,保证图片完全在容器内
如：
background-size: contain;
4. 背景图偏移
如：
background-position: -27px 0px;
五. 列表（li）常用属性
1. none：无风格
如：
list-style: none;
结果：
2. disc：实心圆（<ul>默认样式）
如：
list-style: disc;
结果：
3. circle：空心圆
如：
list-style: circle;
结果：
4. square：实心正方形
如：
list-style: square;
结果：
5. decimal：数字（<ol>默认样式）
如：
list-style: decimal;
结果：
详细请查看我的笔记：
http://note.youdao.com/noteshare?id=fbde2466c04383d8ed0055648a8454b0&sub=982F3BF3CE8544088EB91C1AA562727D
这篇关于Html-样式表、字体、背景图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
