<ul>
<li>CSS背景</li>
<li>CSS字体</li>
<li>CSS链接</li>
<li>CSS 列表</li>
<li>CSS 表格</li>
<li>CSS轮廓</li>
</ul>
CSS背景
1、背景色
background-color 属性
p {background-color: gray; padding: 20px;}
background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
2、背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
3、背景重复
background-repeat 属性
- repeat 水平竖直都平铺
- repeat-x 水平
- repeat-y 竖直
- no-repeat 不允许任何方向上平铺
4、背景定位
background-position 属性
- center、top、bottom、right、left及两两组合
- 百分数 background-position:66% 33%;
- 长度值 background-position:50px 100px;
5、背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。
background-attachment:fixed 防止这种滚动
示例：
所有背景属性在一个声明之中
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
CSS文本
1、text-indent 缩进文本
这个属性最常见的用途是将段落的首行缩进
p{text-indent: 5em;}
text-indent 还可以设置为负值。(如果对段落设置负值，首行的某些文本可能会超出浏览器窗口的左边界,建议针对负缩进再设置一个外边距或一些内边距：)
p{text-indent: -5em; padding-left: 5em;}
2、水平对齐
text-align
left、right、center、justify（两端对齐）、inherit（从父元素集成text-align属性的值）
3、字间隔
word-spacing
默认值：normal，与设置为0是一样的
正直字间隔增加 负值 字间隔拉近
4、字母间隔
letter-spacing 字符与字符或字母之间的间隔。
5、字符转换
text-transform 处理文本的大小写
none 使用源文档中的原有大小写
uppercase 大写
lowercase 小写
capitalize 只对每个单词的首字母大写
6、文本装饰
text-decoration
none
underline 对元素加下划线
overline 在文本的顶端画一个上划线
line-through 在文本中间画一个贯穿线
blink 让文本闪烁
示例：
去掉超链接的下划线
a{text-decoration: none;}
可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线
a:link a:visited {text-decoration: underline overline};
7、处理空白符
white-space
对源文档中的空格、换行和 tab 字符进行处理
normal ：会合并所有的空白符，并忽略换行符
pre ： 浏览器不会合并空白符，也不会忽略换行符
nowrap ：防止元素中的文本换行，除非使用了一个 br 元素
pre-wrap ：保留空白符序列，但是文本行会正常地换行
pre-line ：合并空白符序列，但保留换行符。
8、为文本设置阴影
语法text-shadow: h-shadow v-shadow blur color:
h-shadow：水平阴影的位置。允许负值。
v-shadow：垂直阴影的位置。允许负值。
blur：模糊的距离。
color：阴影的颜色。
.h1{
text-shadow:2px 2px 8px #ff0000;
}
.h2{
text-shadow:2px 2px 4px #000000;
color:white;
}
.h3{
text-shadow:0 0 3px #ff0000;
}
| color | 设置文本颜色 |
|---|---|
| direction | 设置文本方向。 |
| line-height | 设置行高。 |
| letter-spacing | 设置字符间距。 |
| text-align | 对齐元素中的文本。 |
| text-decoration | 向文本添加修饰。 |
| text-indent | 缩进元素中文本的首行。 |
| text-shadow | 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 设置文本方向。 |
| white-space | 设置元素中空白的处理方式。 |
| word-spacing | 设置字间距。 |
CSS字体
在 CSS 中，有两种不同类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
- 特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
- Serif 字体
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
1、指定字体系列
如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。我们可以通过结合特定字体名和通用字体系列来解决这个问题
h1{font-family: Georgia,serif;}
2、字体风格
font-style
normal 正常显示
italic 斜体
oblique 倾斜显示
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。
3、字体变形
font-variant
设定小型大写字母
p {font-variant:small-caps;}
4、字体加粗
font-weight
bold : 粗体
lighter
100~900： 指定9级加粗度
5、字体大小
在所有浏览器中，可以显示相同的文本大小，有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
body {font-size:100%;}
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
6、文本与图片垂直对齐方式
img.top{
vertical-align:text-top;
}
img.middle{
vertical-align:middle;
}
img.bottom{
vertical-align:text-bottom;
}
text-top 把元素的底端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部
text-bottom 把元素的底端与父元素字体的底端对齐
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
CSS链接
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
示例：
文本修饰
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
向链接添加不同的样式
```
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:'微软雅黑';}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>请把鼠标指针移动到下面的链接上，看看它们的样式变化。</p>
<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体尺寸</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本的装饰</a></b></p>
</body>
</html>
```
创建连接框
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>
CSS 列表
ul {list-style-type : square}
ul li {list-style-image : url(xxx.gif)}
li {list-style : url(example.gif) square inside}
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。square 实心方块circle 空心圆none 不显示标记项 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
| marker-offset |
CSS 表格
1、表格边框
table, th, td{
border: 1px solid blue;
}
2、折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
3、表格宽度和高度
table
{
width:100%;
}
th
{
height:50px;
}
4、表格文本对齐
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
td
{
text-align:right;
}
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
td
{
height:50px;
vertical-align:bottom;
}
5、表格内边距
如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
td
{
padding:15px;
}
6、表格颜色
下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
CSS轮廓
| 属性 | 描述 |
|---|---|
| outline | 在一个声明中设置所有的轮廓属性。 |
| outline-color | 设置轮廓的颜色。 |
| outline-style | 设置轮廓的样式。 |
| outline-width | 设置轮廓的宽度。 |
p
{
border:red solid thin;
**outline:#00ff00 dotted thick;**
}
元素隐藏：
display：none 隐藏不占用空间
visibility：hidden 隐藏但是占用空间
visibility：visible 元素可见 默认值
