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