css
2 CSS
基本语法结构
<head>
<style type="text/css">
选择器（即修饰对象）{
对象的属性1: 属性值1;
对象的属性2: 属性值2;
}
</style>
</head>
1.标签选择器
标签名{ 属性名1: 属性值1;
属性名2: 属性值2;
}
2.类选择器
类选择器是定义某类样式，让多个HTML 元素共享，这些样式是可以共享和代码复用的。
（1）定义样式：
.类名{ 属性名1: 属性值1;
属性名2: 属性值2;
}
（2）应用样式：
<标签名 class=“类名1 类名2">标签内容</标签名>
注意：定义时类名前有个点号，应用样式时则不需要点号
嵌套选择器：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
3.ID选择器
ID选择器用于修饰某个指定的页面元素或区块，这些样式是对应ID标识的HTML 元素所独占的
(1)定义样式
#ID标识名{ 属性名1: 属性值1;
属性名2: 属性值2;
}
（2）应用样式
<标签名 id=“ID标识名">标签内容</标签名>
注意：定义ID选择器时有个井号，但给HTML 标签设置ID 属性时不需要
4.伪类选择器
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
##当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
CSS 中规定样式的优先级规则为:
行内样式表> 内部样式表> 外部样式表
ID 选择器 > 类选择器 > 标签选择器
插入样式表
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和字体。
<p style="color:sienna;font:large 楷体 ">这是一个段落。</p>
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
1）链接外部样式表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2）外部样式表
<style type="text/css">
@import url("sheet1.css");
@import url("sheet2.css"");
</style>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
属性
文本和字体属性
| 属性 | 含义 |
|---|---|
| color | 颜色 |
| line-height | 行高（即行间距），常用取值为25px、28px |
| text-align | 对齐方式，常用取值为left、 center、 right |
| letter-spacing | 字符间距，常用取值3px、8px |
| text-decoration | 文本修饰，line style color的复合，常用取值underline(下划线) line-through（删除线）none(默认) |
| font | "font-style font-variant font-weight font-size/line-height font-family" font-size和font-family的值是必需的。 |
| font-family | font-size和font-family的值是必需的。字体 宋体、隶书、楷体、黑体 |
| font-size | 大小 small、medium、large |
| font-weight | 粗细 normal bold bolder lighter 100~900 |
| font-style | 正常、斜体 normal、italic |
背景属性
| 属性 | 含义 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片 值： url(“路径”) |
| background-repeat | 背景平铺方式 no-repeat、 repeat-x、 repeat-y、 repeat() |
| background-attachment | scroll背景图片随着页面的滚动而滚动，默认的fixed背景图片不随着页面的滚动 |
| background-position | 偏移位置 x%,y% or x,y or left right top bottom |
列表属性
| 属性 | 含义 |
|---|---|
| list-style-type | 值 none disc实心圆默认 circle圈 square实心方块 decimal数字 |
| list-style-position | inside、outside（默认） |
| list-style-image | url(“路径”) |
| list-style | 按 type position image 顺序，可以缺省 |
盒子属性
| 属性 | 含义 |
|---|---|
| margin | 设置外边距，顺序是上下左右，可以缺省，值可以是 px、%，auto(默认) |
| margin-(top|right|bottom|left) | 单独设置一边的外边距 |
| border-color | 属性用于设置边框的颜色 |
| border-width | 可以指定长度值,也可用thick 、medium（默认值） 和 thin。 |
| border-style | none无 dashed虚线 solid实线 double双线 inset陷入 outset突出 可以单独设置某一边 例 border-top-style：dashed |
| border-radius | 设置外边框圆角。使用一个半径时确定一个圆形，使用两个半径时确定一个椭圆。 |
| border | 按width style color顺序设置复合边框，可缺省。 |
| outline-width outline-style outline-color outline | 元素周围轮廓线 |
| padding | 设置内边距，顺序是上下左右，可以缺省，值可以是 px、%，auto(默认) |
| padding-(top|right|bottom|left) | 单独设置一边的内边距 |
尺寸
| 属性 | 含义 |
|---|---|
| height | 元素高度,该属性不包括填充，边框和页边距 值：auto, px, % |
| width | |
| line-height | 行高 |
| max-height | 最大高度 |
| cursor | 移动到该项时光标的形状：url auto crosshair十字 pointer手 move移动 text文本 wait沙漏 help问号 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。auto hidden scroll visible |
| display | none此元素不会被显示且不占空间 block显示为块级元素，此元素前后会带有换行符。inline显示为内联元素，元素前后没有换行符。 |
请把鼠标移动到单词上，可以看到鼠标指针发生变化：
auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
DIV+CSS布局
| 属性 | 含义 |
|---|---|
| float | 指定一个盒子（元素）是否可以浮动。值： left right none |
| clear | 如果前一个元素存在左浮动或右浮动，则换行以区隔 值： right left both none |
浮动的三大显著特征：
- DIV块元素失去“块状”换行显示特征，变为行内元素
- 紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示
- 占据行内元素的空间，导致行内元素围绕显示
div设置width height （%）嵌套 进行布局
三行两列模式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div+css布局</title>
<style type="text/css">
#bg{width: 100%;height: 1000px;}/*大容器*/
#header{
width: 100%;height: 20%;background:yellowgreen;
}
#main{
width: 100%;height: 70%;
}
#left{
width: 20%;height: 100%;background:brown;float: left;
}
#right{
width: 80%;height: 100%;background:yellow;float: left;
}
#footer{
width: 100%;height: 10%;background:black;clear: both;
}
</style>
</head>
<body>
<div id="bg">
<div id="header"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
