CSS-cascading stle sheets
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> 标签在（文档的）头部：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
浏览器会从文件 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字体
这个可能在爬虫中会遇到。
|
在一个声明中设置所有的字体属性 |
|
|
指定文本的字体系列 |
|
|
指定文本的字体大小 |
|
|
指定文本的字体样式 |
|
|
以小型大写字体或者正常字体显示文本。 |
|
|
指定字体的粗细。 |
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 |
|
.intro |
选择所有class="intro"的元素 |
1 |
|
|
#firstname |
选择所有id="firstname"的元素 |
1 |
|
|
* |
选择所有元素 |
2 |
|
|
p |
选择所有<p>元素 |
1 |
|
|
div,p |
选择所有<div>元素和<p>元素 |
1 |
|
|
div p |
选择<div>元素内的所有<p>元素 |
1 |
|
|
div>p |
选择所有父级是 <div> 元素的 <p> 元素 |
2 |
|
|
div+p |
选择所有紧接着<div>元素之后的<p>元素 |
2 |
|
|
[target] |
选择所有带有target属性元素 |
2 |
|
|
[target=-blank] |
选择所有使用target="-blank"的元素 |
2 |
|
|
[title~=flower] |
选择标题属性包含单词"flower"的所有元素 |
2 |
|
|
[lang|=en] |
选择 lang 属性以 en 为开头的所有元素 |
2 |
|
|
a:link |
选择所有未访问链接 |
1 |
|
|
a:visited |
选择所有访问过的链接 |
1 |
|
|
a:active |
选择活动链接 |
1 |
|
|
a:hover |
选择鼠标在链接上面时 |
1 |
|
|
input:focus |
选择具有焦点的输入元素 |
2 |
|
|
p:first-letter |
选择每一个<P>元素的第一个字母 |
1 |
|
|
p:first-line |
选择每一个<P>元素的第一行 |
1 |
|
|
p:first-child |
指定只有当<p>元素是其父级的第一个子级的样式。 |
2 |
|
|
p:before |
在每个<p>元素之前插入内容 |
2 |
|
|
p:after |
在每个<p>元素之后插入内容 |
2 |
