1.css背景css
CSS 容许应用纯色做为背景，也容许使用背景图像建立至关复杂的效果。
html
(1) 背景色
可使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色：
p {background-color: gray;}
若是您但愿背景色从元素中的文本向外少有延伸，只需增长一些内边距：
p {background-color: gray; padding: 20px;}
注释：background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，若是一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。编程
(2) 背景图像
要把图像放入背景，须要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
若是须要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
大多数背景都应用到 body 元素，不过并不只限于此。
下面例子为一个段落应用了一个背景，而不会对文档的其余部分应用背景：
p.flower {background-image: url(/i/eg_bg_03.gif);}
您甚至能够为行内元素设置背景图像，下面的例子为一个连接设置了背景图像：
a.radio {background-image: url(/i/eg_bg_07.gif);}
api
(3) 背景重复
若是须要在页面上对背景图像进行平铺，可使用 background-repeat 属性。
属性值 repeat 致使图像在水平垂直方向上都平铺，就像以往背景图像的一般作法同样。repeat-x 和 repeat-y 分别致使图像只在水平或垂直方向上重复，no-repeat 则不容许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}浏览器
(4) 背景定位
能够利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有不少方法。首先，可使用一些关键字：top、bottom、left、right 和 center。一般，这些关键字会成对出现，不过也不老是这样。还可使用长度值，如 100px 或 5cm，最后也可使用百分数值。不一样类型的值对于背景图像的放置稍有差别。
app
(5)图像放置关键字框架
例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字能够按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另外一个对应垂直方向。
若是只出现一个关键字，则认为另外一个关键字是 center。
因此，若是但愿每一个段落的中部上方出现一个图像，只需声明以下：
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}ide
(6)图像放置百分数值字体
百分数值的表现方式更为复杂。假设你但愿用百分数值将图像在其元素中居中，这很容易：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
这会致使图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
若是图像位于 0% 0%，其左上角将放在元素内边距区的左上角。若是图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
所以，若是你想把一个图像放在水平方向 2/三、垂直方向 1/3 处，能够这样声明：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}
若是只提供一个百分数值，所提供的这个值将用做水平值，垂直值将假设为 50%。这一点与关键字相似。
background-position 的默认值是 0% 0%，在功能上至关于 top left。这就解释了背景图像为何老是从元素内边距区的左上角开始平铺，除非您设置了不一样的位置值。
(7)长度值this
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
好比，若是设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
注意，这一点与百分数值不一样，由于偏移只是从一个左上角到另外一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。
(8)背景关联
若是文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您能够经过 background-attachment 属性防止这种滚动。经过这个属性，能够声明图像相对于可视区是固定的（fixed），所以不会受到滚动的影响：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
| 属性 | 描述 |
|---|---|
| background | 简写属性，做用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其他部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
经过文本属性，您能够改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
(1)缩进文本 :text-indent
把 Web 页面上的段落的第一行缩进，这是一种最经常使用的文本格式化效果。
CSS 提供了 text-indent 属性，该属性能够方便地实现文本缩进。
经过使用 text-indent 属性，全部元素的第一行均可以缩进一个给定的长度，甚至该长度能够是负值。
这个属性最多见的用途是将段落的首行缩进，下面的规则会使全部段落的首行缩进 5 em：
p {text-indent: 5em;}
注意：通常来讲，能够为全部块级元素应用 text-indent，但没法将该属性应用于行内元素，图像之类的替换元素上也没法应用 text-indent 属性。不过，若是一个块级元素（好比段落）的首行中有一个图像，它会随该行的其他文本移动。
提示：若是想把一个行内元素的第一行“缩进”，能够用左内边距或外边距创造这种效果。
扩展：
| <address> | 定义地址 |
| <caption> | 定义表格标题 |
| <dd> | 定义列表中定义条目 |
| <div> | 定义文档中的分区或节 |
| <dl> | 定义列表 |
| <dt> | 定义列表中的项目 |
| <fieldset> | 定义一个框架集 |
| <form> | 建立 HTML 表单 |
| <h1> | 定义最大的标题 |
| <h2> | 定义副标题 |
| <h3> | 定义标题 |
| <h4> | 定义标题 |
| <h5> | 定义标题 |
| <h6> | 定义最小的标题 |
| <hr> | 建立一条水平线 |
| <legend> | 元素为 fieldset 元素定义标题 |
| <li> | 标签订义列表项目 |
| <noframes> | 为那些不支持框架的浏览器显示文本，于 frameset 元素内部 |
| <noscript> | 定义在脚本未被执行时的替代内容 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <p> | 标签订义段落 |
| <pre> | 定义预格式化的文本 |
| <table> | 标签订义 HTML 表格 |
| <tbody> | 标签表格主体（正文） |
| <td> | 表格中的标准单元格 |
| <tfoot> | 定义表格的页脚（脚注或表注） |
| <th> | 定义表头单元格 |
| <thead> | 标签订义表格的表头 |
| <tr> | 定义表格中的行 |
| <a> | 标签可定义锚 |
| <abbr> | 表示一个缩写形式 |
| <acronym> | 定义只取首字母缩写 |
| <b> | 字体加粗 |
| <bdo> | 可覆盖默认的文本方向 |
| <big> | 大号字体加粗 |
| <br> | 换行 |
| <cite> | 引用进行定义 |
| <code> | 定义计算机代码文本 |
| <dfn> | 定义一个定义项目 |
| <em> | 定义为强调的内容 |
| <i> | 斜体文本效果 |
| <img> | 向网页中嵌入一幅图像 |
| <input> | 输入框 |
| <kbd> | 定义键盘文本 |
| <label> | 标签为 input 元素定义标注（标记） |
| <q> | 定义短的引用 |
| <samp> | 定义样本文本 |
| <select> | 建立单选或多选菜单 |
| <small> | 呈现小号字体效果 |
| <span> | 组合文档中的行内元素 |
| <strong> | 语气更强的强调的内容 |
| <sub> | 定义下标文本 |
| <sup> | 定义上标文本 |
| <textarea> | 多行的文本输入控件 |
| <tt> | 打字机或者等宽的文本效果 |
| <var> | 定义变量 |
| <button> | 按钮 |
| <del> | 定义文档中已被删除的文本 |
| <iframe> | 建立包含另一个文档的内联框架（即行内框架） |
| <ins> | 标签订义已经被插入文档中的文本 |
| <map> | 客户端图像映射（即热区） |
| <object> | object对象 |
| <script> | 客户端脚本 |
使用负值的状况：
text-indent 还能够设置为负值。利用这种技术，能够实现不少有趣的效果，好比“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
p {text-indent: -5em;}
不过在为 text-indent 设置负值时要小心，若是对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了不出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
text-indent 可使用全部长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，若是将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：
div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>
text-indent 属性能够继承，请考虑以下标记：
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>
以上标记中的段落也会缩进 50 像素，这是由于这个段落继承了 id 为 inner 的 div 元素的缩进值。
(2)水平对齐:text-align
它一共有四个值： left：文本左对齐
right：文本右对齐
center：文本居中
justify：文本两端对齐
text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的做用同样，但实际上两者大不相同。
<CENTER> 不只影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素自己不会从一段移到另外一端，只是其中的文本受影响。
justify:两端对齐。
如今我用<center>网页常常会出问题，因此已经废弃了，用css的话，text-align:center是文本居中，要模块居中的话是margin:0 auto;
（3）字间隔：word-spacing
word-spacing 属性能够改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是同样的。
word-spacing 属性接受一个正长度值或负长度值。若是提供一个正长度值，那么字之间的间隔就会增长。为 word-spacing 设置一个负值，会把它拉近：
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
（4）字母间隔:letter-spacing
字母间隔修改的是字符或字母之间的间隔。
默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增长或减小指定的量：
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>
（5）字符转换:text-transform
text-transform 属性处理文本的大小写。这个属性有 4 个值：
none：对文本不作任何改动
uppercase：将文本转换为全大写
lowercase：将文本转换为全小写
capitalize：单词首字母大写
(6)文本装饰:text-decoration
接下来，咱们讨论 text-decoration 属性，这是一个颇有意思的属性，它提供了不少很是有趣的行为。
text-decoration 有 5 个值：
none：关闭本来应用到元素上的全部装饰
underline：对元素加下划线
overline：对元素顶端加上划线
line-through：在文本中间加一条贯穿线
blink：会让文本闪烁
(7)处理空白符:white-space
各个字之间只会显示一个空格，同时忽略元素中的换行：
<p>This paragraph has many
spaces in it.</p>
能够用如下声明显式地设置这种默认行为：
p {white-space: normal;}
值 pre {white-space: pre;}：空白符不会被忽略
值 nowrapp {white-space: nowrapp;}
与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。
(8)文本方向:p{direction:rtl;}
direction 属性有两个值：ltr 和 rtl。大多数状况下，默认值是 ltr，显示从左到右的文本。若是显示从右到左的文本，应使用值 rtl。
3.css字体
(1) 指定字体系列：font-family
css 定义了 5 种通用字体系列：
Serif 字体: 衬线字体，字体边缘具备明显的艺术修饰效果，主要用于标题、大字体。如，宋体，Times New Roman
Sans-serif 字体: 非衬线字体，字体比划通常粗细均匀、清晰，主要用于少许正文。如，微软雅黑，Arial
Monospace 字体: 等宽字体，主要针对英文，每一个字符的宽度一致，如编程经常使用的字体。如，Consolas，Courier New
Cursive 字体: 英文花体手写字体
Fantasy 字体： 用于剪纸设计的字体
注释： 若是用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。
咱们能够经过结合特定字体名和通用字体系列来解决这个问题：
h1 {font-family: Georgia, serif;}
也能够为给定的元素指定一系列相似的字体。须要把这些字体按照优先顺序排列，而后用逗号进行链接：
p {font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;}
注释： 若是字体名中包括多个单词及空格，则须要使用单引号。双引号也能够接受，但在style中，则须要使用属性没用到的那种引号。
(2)字体风格：font-style
该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
实例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
(3)字体变形:font-variant
能够设置小型大写字母。
p {font-variant:small-caps;}
(4)字体加粗：font-weigt
使用 bold 关键字能够将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。若是一个字体内置了这些加粗级别，那么这些数字就直接映射到预约义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
若是将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会致使浏览器将加粗度下移而不是上移。
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
(5)字体大小：font-size
使用像素设置字体大小：h1 {font-size:60px;}
em来设置字体大小： 浏览器默认文本是16像素，将像素转换为 em：pixels/16=em。h1 {font-size:3.75em;}
使用em能够在全部浏览器中调整文本大小。
4.css连接
连接的四种状态：
a:link - 普通的、未被访问的连接
a:visited - 用户已访问的连接
a:hover - 鼠标指针位于连接的上方
a:active - 连接被点击的时刻
实例
a:link {color:#FF0000;} /* 未被访问的连接 */
a:link {text-decoration:none;}
a:link {background-color:#B2FF99;}
注释：
a:hover 必须位于 a:link 和 a:visited 以后
a:active 必须位于 a:hover 以后
建立连接框
例.
<!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>
效果：
5.css列表
能够用来设置、改变列表项标志，或者将图片做为列表项标志。
list-style-type：ul {list-style-type : square}
list-style-image：ul li {list-style-image : url(xxx.gif)}
list-style-position ：li {list-style-position:inside}
list-style：li {list-style : url(example.gif) square inside}
6.css表格
（1）表格边框:border
例.为 table、th 以及 td 设置了蓝色边框：此例拥有双边框。
table, th, td
{
border: 1px solid blue;
}
(2)折叠边框：border-collapse
例.把表格显示为单线条边框：border-collapse 属性。
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
(3)表格宽度和高度：width、height
table
{
width:100%;
}
th
{
height:50px;
}
(4)表格文本对齐： text-align ：设置水平对齐
vertical-align：设置垂直对齐（设置底部对齐、顶部对齐、居中对齐：bottom,top,center）
(5)表格内边距：padding
td {padding: 15px;}
(6)表格颜色：边框颜色：td{border:1px solid green}
文本颜色：color
背景颜色;background-color
例.一个漂亮的表格
<html>
<head>
<style type="text/css">
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>
<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>
<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>
</table>
</body>
</html>
效果：
7.css轮廓：outline
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的做用。
(1)在元素周围画线
p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}
(2)轮廓颜色
p
{
border:red solid thin;
outline-style:dotted;
outline-color:#00ff00;
}
(3)轮廓样式
p
{
border: red solid thin;
}
p.dotted {outline-style: dotted}
p.dashed {outline-style: dashed}
p.solid {outline-style: solid}
p.double {outline-style: double}
p.groove {outline-style: groove}
p.ridge {outline-style: ridge}
p.inset {outline-style: inset}
p.outset {outline-style: outset}
(4)轮廓宽度
p.one { border:red solid thin; outline-style:solid; outline-width:thin; }