css权威指南

使用CSS的优点

易于使用，减少工作量。
样式丰富。
方便管理，利于复用
有层叠属性
缩减文件大小

CSS中的两种基本元素：块级元素和行内元素

块级元素独占一行，block
行内元素一行可以放多个。inline，行内和内联是不太一样的？？
HTML中，行内元素是不能包含块级元素的

页面本身应当有一定的结构

CSS的引入

link标签

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all">

外部样式表，link必须放在head元素中，但千万不能放在其他元素（如title）内部，这样web浏览器才能找到并加载样式表。
文件扩展名 .css 不绝对非要有，但是为了保证老的浏览器，还是带上。
rel （relation），关系为stylesheet/alternatestylesheet（候选样式表），当为alternatestylesheet时，还应该带上属性title，title还可以分类，作为用户选择的关键字,IE不支持候选。
type值为text/css ，描述使用link加载的数据的类型，以便浏览器确定导入的是css，并进行相应操作。
href+样式表的URL，绝对URL或者相对URL
media,值为all，说明这个样式表要应用于所有表现媒体，这个属性值很多。主要标识此css文件的使用硬件范围
一个文档可以有多个样式表，若有多个，浏览器会将他们合并，全部用于文档
style

  <style type="text/css"></style>

必有type,值为"text/css"
有media属性和link相同
@import指令

@import url(sheet2.css);

import不得不要放到style容器中
可以有多个import，每个都会加载并使用，没有候选
一些老的浏览器无法处理@import指令，可以利用这一点，对浏览器隐藏样式。
可以在后面加上前面media的值，效果一样
相对URL/绝对URL
如果一个外部样式表需要使用其他外部样式表中的css，用@import
@import不得不要出现在样式规则之前，否则会被忽略（win中的IE不会忽略任何位置的@import）

选择器

元素选择器
选择器分组，用逗号分隔
通配 *
类选择器
类选择器结合标签选择器

p.warning {font-size: 14px;} //选择class属性包含warning的所有p元素

多类选择器，选择包含类1和类2的选择器,将两个类名连着写，也可以结合标签选择器

p.warning.help {background: red;}

ID选择器，一个HTML文档中只能有一个ID选择器，ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表
属性选择器，
具体属性选择器。注意这样的属性选择要求属性格式必须完全匹配，如果值本身用空格隔开，属性选择也要隔开

h1[某属性] {color: red;} //选择具有某属性的全部h1标签
*[title] {color: red;} //选择包含标题的所有元素

//根据多个属性选择
a[href][title]{color: red;} //选择同时有href和title属性的

//根据具体属性选择
a[href="http://www.waq.org/about.html"] {color: red;} //为指向web服务器上某个特定文档的超链接设置属性
p[book="1"] {color: red;} //选择book属性为1的p元素
a[href="http://www.waq.org/about.html"][title="home"] {color: red;}//选择href为指定，且title为home的a标签

部分属性选择器

p[foo~="bar"] {} //选择foo属性包含bar的p元素
p[foo^="bar"] {} //选择foo属性以bar开头的所有p
p[foo$="bar"] {} //选择foo属性以bar结尾的所有p
p[foo*="bar"] {} //选择foo属性中包含字串bar的所有元素

特定属性选择器

  *[lang|="en"] {} //选择lang属性等于en或者已en-开头的所有元素

后代选择器

  h1 em {color: red;} //选中h1下的所有em，不论em嵌套的层次多深
  ul ol ul em {color: red;}
  ul ol, ul em {color: red;}//这样也可以哦

选择子元素子元素是直接的关系，后代元素是直接或间接

h1 > strong {color: red;} //选择是h1的子元素，并且和h1紧邻的元素！就是匹配在文档树中直接相连的部分

选择相邻的兄弟元素

h1 + p {color: red;} //选择紧接在一个h1元素后出现的所有p，h1要和p有共同的父元素（选的是p，h1不会被选上）

伪类选择器能够在文档中插入假想的类
链接伪类伪类的顺序很重要，通常建议：link-visited-focus-hover-active 不要用动态伪类改变布局，因为css规范说，文档首次显示后，用户代理不用重绘文档，所以用伪类改变布局有可能没有效果。

//静态伪类
a:link {} //当链接未被访问时
a:visited {} //当链接已经被访问
//动态伪类
a:focus {} //当前拥有输入焦点的元素
a:hover{} //当前鼠标停留的元素
a:active{} //被激活的元素，当鼠标停在一个超链接上，并点击就会激活这个超链接。

选择伪类

p:first-child {} //选择作为某元素第一个子元素的所有p元素设置为粗体！！注意是p，不是选择p元素的第一个子元素！！

结合伪类注意不要把互斥的伪类结合，比如一个链接不能同时是已访问和未访问

a:link:hover {} //当一个链接未被点击 且 鼠标停留时
a:visited:hover {} //当一个链接已经点击 且 鼠标停留时

伪元素选择器能够在文档中插入假想的元素，共计有四个伪元素
设置首字母样式：first-letter
设置第一行的样式：first-line 这两种伪元素只能应用于标记或段落，不能应用于超链接，所能添加的属性也有限制，伪元素必须放在选择器的最后面
在元素之前插入：before
在元素之后插入：after

结构和层叠

###选择器优先级选择器的特殊性，标识了选择器的优先级，用户代理是计算选择器的特殊性来判断具体应该使用哪种样式，特殊性一般是有四个数字组成，权重逐个递减，也就是 1，0，0，0是要大于0，1，1，2的，多个选择器同时时，可以先相加，再比较。优先级排序：!important>内联样式>ID选择器>类选择器>标签选择器>通配符！important;要用的话在每个属性后面都要写，不然没用

继承

向上传递，只有一个，就是给body元素的背景样式可以传到html元素。
向下传递，一般是这样
有些属性不能继承，border，font这些属性不能继承

层叠规则

按权重和起源排序。有!important的胜出，再比较起源，正常权重的创作人员优先于正常权重的读者样式，但是当两个都有！important时，相反。用户代理的默认样式是影响最小的
再按优先级排序
按顺序排序，后面的覆盖前面的

值和单位

颜色表示：

rgb(255,255,255);
rgb(75%,50%,50%);
color: red;
color: #000;color: #808080;

web安全色，指在256色计算机系统上总能防止抖动的颜色

长度单位：

绝对长度单位：
in （英寸）
cm （厘米）
mm （毫米）
pt （点）一英寸是72点
Pica （派卡）1派卡是12点
相对长度单位
em定义为一种给定字体的font-size值，随着元素的不同而不同，比如一个h1字体的大小是24像素，h2是18像素，p是12像素，给他们的左边距都设置1em，那么他们的左边距就分别为24px,18px,12px。在设置字体大小的时候，em的值会相比较父元素的字体大小改变。
ex是指字体中小写x的高度，所以不同的字体是截然不同的。
px，1像素（px）就是显示器上的一个小框

字体

所有属性值例中的第一个属性为默认属性

1.字体选择

font-family属性,当字体名中有一个或者多个空格，或者有#或$之类的符号，属性值需要加引号（单引号/双引号），当有多个字体值时，为递减候选属性。

h2 {font-family : Wedgie, 'Karrank%', fantasy}

2.字体加粗

400 定义为normal，700对应bold

h1 {font-weight：normal/bold/bolder/lighter/100/200/300/400/500/600/700/800/900/inherit}

3.字体大小

h1 {font-size：medium/xx-small/x-small/small/large/x-large/xx-large/smaller/larger/<length>/<%时根据父元素字体大小计算>/inherit}

4.风格字体

h1 {font-style：normal/italic/oblique/inherit}// 竖直/斜体/倾斜/继承

5.字体变形

h1 {font-variant：normal/small-caps/inherit}// 正常/小型大写字母文本

6.拉伸和调整字体

h1 {font-stretch：normal/wider/narrower/ultra-condensed/...}// 正常/小型大写字母文本

文本属性

1.缩进文本

所有块级元素应用，行内无法用（如果想让行内元素的第一行缩进，可以用边距实现）。图像也没办法用，不过如果一个块级元素的首航有一个图像，它会随着移动。值可以为负值。

p {text-indent：<length>/<%相比较缩进元素的父元素的宽度>/inherit}
p {text-indent : 10px;} //所有首行缩进3em