CSS-cascading stle sheets

1. CSS

什么是CSS？CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

简单来说，做了两件事，声明对象样式，声明匹配对象，以供调用。

2. 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是HTML元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

p {color:red;text-align:center;}

当然，为了提高可读性，一般情况下是这样写的：

p
{
color:red;
text-align:center;
}

CSS 注释

注释以 "/*" 开始, 以 "*/" 结束:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

2.1.
id 和 class 选择器

如果要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器

id选择器：可以为标有特定id的HTML元素指定特定的样式。

在html中的体现是id=,在css中的对应声明方法是#<id name>

实例：

#para1 { text-align:center; color:red; }

ID属性不要以数字开头，数字开头的ID在
Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

选择器在HTML中以class属性表示, 在CSS中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

实例

.center {text-align:center;}

也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

实例

p.center {text-align:center;}

2.2.
CSS声明

怎么引用样式表，与script类似，有三种方式：

插入样式表的方法有三种:

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

2.2.1.
外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;} p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

2.2.2.
内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head> <style> hr
{color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}
</style> </head>

2.2.3.
内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p
style="color:sienna;margin-left:20px">这是一个段落。</p>

2.2.4.
多重样式

多重样式最关键的问题是会优先使用哪一级的样式。

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style
sheet > 浏览器默认样式

3.
CSS常用属性

3.1.
backgrounds

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

案例：body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"

RGB - 如："rgb(255,0,0)"

颜色名称 - 如："red"

3.2.
text

颜色body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}

（对于W3C标准的CSS，定义文字颜色的同时还要定义背景色）

水平对齐方式：

h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}

修饰符：h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}

文本转换：字母大小写，包括全大、小写，首字母大写；

p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}

文本缩进：p {text-indent:50px;}

3.3.
font字体

这个可能在爬虫中会遇到。

font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

3.4.
links

CSS支持不同的链接可以有不同的样式。

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

链接状态样式，可以有不同的样式，这取决于他们是什么状态，四个链接状态是：

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

注意：

a:hover 必须跟在 a:link 和 a:visited后面

a:active 必须跟在 a:hover后面

3.5.
display

display属性设置一个元素应如何显示。

隐藏元素有两种方法：display:none或visibility:hidden

注意：两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

3.6.
position

position 属性指定了元素的定位类型。

position 属性的五个值：

static：默认值，没有定位，遵循正常的文档流对象；

div.static { position: static; border: 3px solid #73AD21; }

fixed：相对于浏览器窗口的固定位置，即使窗口是滚动的它也不会移动；Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

p.pos_fixed { position:fixed; top:30px; right:5px; }

relative：相对定位

h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }

移动相对定位元素，但它原本所占的空间不会改变。

absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

h2 { position:absolute; left:100px; top:150px; }

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

其实说白了定位就是指定某一元素在page中的相对位置和在定位冲突时的行为。（所有定位都是相对的，无非是坐标系不同）

4.
CSS参考手册

4.1.
CSS 选择器

CSS选择器用于选择元素的样式的模式。

"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。

选择器	示例	示例说明	CSS
.class	.intro	选择所有class="intro"的元素	1
#id	#firstname	选择所有id="firstname"的元素	1
*	*	选择所有元素	2
element	p	选择所有<p>元素	1
element,element	div,p	选择所有<div>元素和<p>元素	1
element element	div p	选择<div>元素内的所有<p>元素	1
element>element	div>p	选择所有父级是 <div> 元素的 <p> 元素	2
element+element	div+p	选择所有紧接着<div>元素之后的<p>元素	2
[attribute]	[target]	选择所有带有target属性元素	2
[attribute=value]	[target=-blank]	选择所有使用target="-blank"的元素	2
[attribute~=value]	[title~=flower]	选择标题属性包含单词"flower"的所有元素	2
[attribute\|=language]	[lang\|=en]	选择 lang 属性以 en 为开头的所有元素	2
:link	a:link	选择所有未访问链接	1
:visited	a:visited	选择所有访问过的链接	1
:active	a:active	选择活动链接	1
:hover	a:hover	选择鼠标在链接上面时	1
:focus	input:focus	选择具有焦点的输入元素	2
:first-letter	p:first-letter	选择每一个<P>元素的第一个字母	1
:first-line	p:first-line	选择每一个<P>元素的第一行	1
:first-child	p:first-child	指定只有当<p>元素是其父级的第一个子级的样式。	2
:before	p:before	在每个<p>元素之前插入内容	2
:after	p:after	在每个<p>元素之后插入内容	2