css -基础知识
参见w3school/css
CSS 概述
- CSS 指层叠样式表 (C ascading S tyle S heets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表 中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表 可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件 中
- 多个样式定义可层叠 为一
层叠次序
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权 ，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 基础语法
CSS 规则由两个主要的部分构成：选择器 ，以及一条或多条声明 。
selector {declaration1; declaration2; ... declarationN }
- 选择器通常是您需要改变样式的 HTML 元素 。
- 每条声明由一个属性和一个值组成。
- 每个声明之间都用分号"; "隔开,在每条声明的末尾都加上分号 ，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。
属性（property）是您希望设置的样式属性（style attribute ）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构：
提示：请使用花括号来包围声明。
如果值为若干单词，则要给值加引号： p {font-family: "sans serif" ;}
继承及其问题
body {
font-family: Verdana, sans-serif;
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}
如果子元素需要特殊的样式，则可以在父元素规则后直接定义一个子元素的样式规则。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<pid="red" >这个段落是红色。</p> <p
id="green" >这个段落是绿色。</p>
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } 上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。
类选择器
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
属性选择器
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。
下面的例子为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
插入样式表
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：
-
外部样式表
-
当样式需要应用于很多页面时，外部样式表将是理想的选择 。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head> <
linkrel="stylesheet" type="text/css" href="mystyle.css" /> </head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
-
内部样式表
-
当单个文档需要特殊的样式 时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style></head> -
内联样式
-
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。要使用内联样式，你需要在相关的标签内使用样式（style）属性。
注意：如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来 ，其他的被内部样式表中的规则取代 。
CSS 背景属性
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |