css学习笔记（一）
一 css样式表基础
1，css基本概念
css（cascading style sheet）即层叠样式表，简称样式表，要理解样式表的概念先要理解样式的概念，样式是对网页中的元素（字体，段落图像，列表等）属性的整体概括，即描述所有网页对象的显示形式（例如文字的大小，字体，背景及图像的颜色，大小等都是样式）。层叠，就是指当HTML文件引用多个css文件时，如果css文件之间所定义的样式发生了冲突，将依据层次的先后来处理其样式对内容的控制。
2，css基本语法
css语法包括三部分：选择符，样式属性和属性值
css基本语法：
selector{property:value; property:value;.... proerty:value}
selector代表选择符，property代表属性，value代表属性值
选择符包括多种样式，所有HTML标记都可以作为选择符，如body，p，table等都是选择符。但在利用css的语法给他们定义属性和值时，其中属性和值要用冒号隔开。
例如：body{color:red}
如果属性值由多个单词组成，并且单词间有空格，那么必须给值加上引号，如字体的名称经常是几个单词组成
例如：p{font-family:"Courier New"}
如果需要对一个选择符指定多个属性时，用分号将属性隔开
例如：p{text-align:center; color:red; font-family:calibri}
为了提高代码的可读性，上面的例子也可以分行写
p
{
text-align:center;
color:red;
font-family:calibri
}
相同属性和值的选择符组合起来称为选择符组。如果需要给选择符组定义属性和值，只要用逗号将选择符组分开即可，这样可以减少重复定义样式
例如：
p,table{font-size:10pt}
其效果完全等效于：
p{font-size:10pt}
table{font-size:10pt}
3，类选择符
用户类选择符可以把相同的元素分类定义成不同的样式，在定义类选择符时，在自定义类名称的面前加一个句点（.）。
类选择符语法：
标记名.类名{样式属性:取值; 样式属性:取值;...}
例如：要设置两个不同文字颜色的段落，一个为红色，一个为蓝色，可以利用如下代码预定义两个类
p.red{color:red}
p.blue{color:blue}
以上的代码中定义了段落选择符p的red和blue两个类，即red和blue成为类选择符，其中类得名称可以是任意英文字母或是字母开头的数字组合。要注意的是，这里的p（HTML）标记是可以省略的。而且在实际应用中，这种省略HTML标记的类选择符是最常用的css方法，因为这种方法定义的类选择符没有适用范围的限制。而不省略HTML标记的类选择符，其适用范围仅限于该标记所包含的内容，例如下面省略了HTML标记的类选择符。
.red{color:red}
.blue{color:blue}
但是要怎么样才能在不同的段落里应用这些样式呢？只要在HTML标记里加入已经定义的class参数即可，如下应用了刚才定义的两个类选择符
<p class=red>或者是<p class=blue>
4，id选择符
在HTML文档中，需要唯一标识一个元素时，就会赋予它一个id标识，以便哎对整个文档进行处理时能够很快地找到这个元素。而id选择符就是用来对这个单一元素定义单独的样式。其定义方法与类选择符大同小异，只需要把句点（.）改为井号（#），而调用时需要把class改为id
id选择符语法：标记名#标识名{样式属性:取值; 样式属性:取值;...}
例如，如果要在页面中定义一个id为salary的元素，并要设置这个元素为红色，那么只要添加如下代码
#salary{color:red}
<p id="salary">
由于id选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用
5，包含选择符
包含选择符是对某种元素包含关系（如元素1里包含元素2）定义的样式表。这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。例如：
table b{font-size:11px}这里只是说明表格b内的字号为11像素，对表格外的字号没有影响
6，伪类
伪类不属于选择符，它是让页面呈现丰富表现力的特殊属性，之所以称为“伪”，是因为它指定的对象在文档中并不存在，他们指定的是元素的某种状态
应用最广泛的伪类是链接的4个状态——未链接状态（a:link）,已访问链接状态：（a:visited）,鼠标指针悬停在链接上的状态（a:hover）以及被激活（在鼠标单击与发生的事件）的链接状态（a:active）。在HTML页面内，使用<a>标记链接元素并没有设置4个状态的代码，但是可以通过设置链接的伪类来使其呈现这些状态。选择符和伪类之间用英文分号隔开
7，选择符优先级
在应用选择符的过程中，可能会遇到同一个元素由不同选择符定义的情况，这时候就要考虑到选择符的优先级。通常我们使用的选择符包括id选择符，类选择符，包含选择符和HTML标记选择符等。因为id选择符是最后被加到元素上的，所以优先级最高，其次是类选择符。!important语法主要用来提升样式规则应用优先级。只要使用了!important语法声明，浏览器就会优先选择它声明的样式显示。所以若想打破已定义的优先级顺序们可以使用!important声明
8，插入css样式表
插入css样式表到HTML文件中有4种方法，分别是：链入外部样式表，内部样式表，嵌入样式表和导入外部样式表。单在应用这4种方法将css文件插入到HTML文件时，由于css文件的定义可以放置在HTML文件的几个不同位置，所以将其分为头部，主体和外部。css文件的定义可以放置在HTML文件的几个不同位置，所以将其分为头部，主体和外部。
css文件定义在HTML文件头部的方法：内部样式表
css文件定义在HTML文件主体的方法：嵌入样式表
css文件定义在HTML文件外部的方法：链入外部样式表，导入外部样式表
9，链入外部样式表
链入外部样式表先把样式表保存为一个单独的文件，然后在HTML文件中使用<link>标记链接，同时这个<link>标记必须放到HTML代码的<head>区域内
基本语法：
- < head >
- ...
- < link rel = "stylesheet" type = "text/css" href = "样式表文件的地址" >
- </ head >
- ...
rel="stylesheet"是指在HTML文件中使用的是外部样式表
type="text/css"指明该文件的类型是样式表文件
href中的样式表的地址，可以为绝对地址或相对地址
外部样式表文件中不能含有任何HTML标签，如<head>或<style>等
css文件要和HTML文件一起发布到服务器上，这样在用浏览器打开网页时，浏览器会按照该HTML网页所链接的外部样式表来显示其风格
一个外部样式表可以应用于多个HTML文件。当改变这个样式表文件时，所有网页的样式随之改变，因此常用在制作大量相同的网页中，因为使用这种方法不仅能减少重复工作量，而且方便以后的修改和编辑，有利于站点的维护。同时在浏览网页时一次性将样式表文件下载，减少了代码的重复下载
10，内部样式表
内部样式表是通过<style>标记把样式表内容直接定义在HTML文件的<head>标记之内
基本语法：
- < head >
- < style type = "text/css" >
- <!--
- 选择符{样式属性:取值; 样式属性:取值; ...}
- 选择符{样式属性:取值; 样式属性:取值; ...}
- ...
- -->
- </ style >
- </ head >
<style>标记用来说明所要定义的样式所要定义的样式
type="text//css"说明这是一段css代码
<!--与-->标记的加入是为了防止一些不支持css的浏览器，将<style>与</style>之间的css代码当成普通字符串显示在网页中
选择符也就是样式的名称，这领的选择符可以选用HTML标记的所有名称
内部样式表方法就是将所有的样式信息都列于HTML文件的头部，因此这些样式可以在整个HTML文件中调用。如果想对网页一次性加入样式表，即可选用该方法
11，嵌入样式表
嵌入样式表是在HTML代码的主体，即<body>标记中直接加入样式表的方法，所以这种方法可以很直观地对某个元素直接定义样式
基本语法：
- < head >
- ...
- </ head >
- < body >
- ...
- < HTML 标记 style = "样式属性:取值; 样式属性:取值; ..." >
- ...
- </ body >
HTML标记就是页面中标记HTML元素的标记，例如body，p等
style参数后面引号中的内容就相当于样式表大括号里的内容。需要指出的是，style参数可以应用于HTML文件中的body标记，以及除了basefont，param和script之外的任何元素
利用这种方法定义的样式，其效果只能控制某个标记，所以比较适用于指定网页中某个小段文字的显示风格，或某个元素的样式
12，导入外部样式表
导入外部样式表是指在样式表的<style>区域内引用一个外部的样式表文件，和链入外部样式表方法相似，但导入时需要使用@import做声明。@import声明可以放到head外也可放到head内，但根据语法规则，一般都放在head内来使用
基本语法：
- < head >
- < style type = "text/css" >
- @import url（外部样式表地址）;
- ...
- </ style >
- ...
- </ head >
import语句后面的“;”是不可以省略的
外部样式表文件的文件扩展名必须为.css
样式表地址可以是绝对地址，也可以是相对地址
在使用中，某些浏览器可能会不支持导入外部样式表的@import声明。所以此方法不经常用到
上面四种方法优先级最高的是嵌入样式表方法，其余三中方法顺序相同，若同时出现，浏览器会遵守“最近优先原则”，即与内容最靠近的那个样式表插入方法