该笔记基于W3Cschool的CSS教程
0x01 需要具备的基础知识
- HTML
- XHTML
0x02 css的概述
- css是指层叠样式表，是用来定义HTML元素的，通常存储在样式表中。
- 在HTML4.0中解决了内容与样式分离的情况。
- 外部样式可以提高工作效率，通常在css文件中。
- 多个样式可层叠为一。
0x03 层叠的优先级
1.浏览器的缺省值
2.外部样式表
3.内部样式表
4.内联样式表
其中4为最高优先级
0x04 css的语法
css语法规则由：选择器+申明（属性：值）。
如下所示：
selector｛preproty：value｝
h1{color:#003;} //若有多个定义，则每个定义之间用；号隔开
h1{font-family:"sans-serif"}
0x05 css的高级语法
1.可以对选择器进行分组，从而快速的设置多个样式：h1,h2,h3,h3{color:#003;font-size:10px;font-family:"Verdana, Geneva, sans-serif"} //中间用逗号隔开2.继承的问题
子元素理论上讲应该继承父元素的属性：
body{10}比如如果body的属性是width：10.那么子元素诸如：h1，p之类的都会应用这个。但是有些情况是，企业并不会按照标准来执行。一些旧的浏览器也不会理解继承，这时候只有在每一层都写上width：10。3.如何特殊设置某个子元素的值属性值：
body{10}
p{11}我们只需要单独在设置一遍子元素的属性值。0x06 css派生选择器
1.派生选择器：通过元素位置的上下文关系，来定义样式，使其更加简洁。
下面是一个例子：
li strong{font-style:italic;} //设置列表里的加粗字体为斜体
<li><strong>什么字体</strong></li> <strong>什么字体</strong> //一个是列表里的strong，一个是普通的strong
//关于派生选择器的高级用法还会在后面深入讲解。
0x07 ID选择器
1.顾名思义，ID选择器可以为相同id的元素设置样式，用#来定义。
下面举个例子，在css样式中设置如下：
#red｛color：red｝ //设置id为red（第一个只是id名，你设置其他的也可以）的样式为red #green｛color：green｝ //设置id为green的样式为green在html中应用：
<h1 id="red">color</h1> <h2 id="green">color</h2>
0x08 类选择器
1.类选择器以一个点号（.）显示。
2.代码如下：
.center{text-align:center} //center类都会被居中显示0x09 属性选择器
1.形式如下：
[属性名字]{属性：值}[title]｛text-align：red;｝2.属性值选择器
[title=www]{text-align:red;}
[title~=www]{text-align:red}:适用于属性值由空格连接的
[title|=www]{text-align:red}:适用于属性值有连字符连接的
0x0A 创建
关于插入样式表的方式一共有三种：
1.外部样式表的插入（样式应用与多个页面，修改一个文件就可以修改整个站点）
<head> <link rei="stylesheet" herf="mysheet.css"/> </head> //外部样式表可以在任何编辑器里编辑，但不能出现html元素，且文件以.css结尾
2.内部样式表的插入（对于单个页面的样式编辑）
<head> //直接在某个页面下定义样式
<style type="text/css">
hr{color:#F00;}
p{margin:inherit;}
body{backface-visibility:visible;}
</style>
</head> 内联样式表的插入：
<p style="color:#3FF">today is a sunning day!</p>就是对某个元素的定义，不过不建议使用，这会损失很多样式的优势。
3.多重样式插入
在外部样式表中：
body{color:#9F9; backface-visibility:hidden; bottom:tijiao; }
在内部样式表中：
<style type="text/css">
body{color:#090;}
</style>
body{color:#090;
backface-visibility:hidden;bottom:tijiao;}
可以看到，内部样式没有而外部样式有的属性将以外部样式显示。如果内外样式都有的，则以内部样式显示。
0x0B 背景
1.css允许任何合法的颜色，这一点比html强大的多。
body{background-color:red} //background-color不能继承，默认值为transparent
body{background-image:url；｝当然该属性不只应用在body，段落等也可以应用。PS：所有的背景属性都不能被继承。
3.背景的平铺
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y; //repeat属性是重复之意，可以实现对图像的平铺，-x，-y可以实现对纵向和横向的平铺
}
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top; //position实现背景的定位，该例子中实现定位在顶部
}定位会使用到关键字：
| 单一关键字 | 等价的关键字 |
|---|---|
| center | center center |
| top | top center 或 center top |
| bottom | bottom center 或 center bottom |
| right | right center 或 center right |
| left | left center 或 center left |
除了表示位置的关键字，百分数也可以表示位置，比如50%，50%，表示图像居中显示。
也可以使用长度值表示，比如50px 60px。但是这个的表示的是图像左上角距离元素内边距的偏移。该例子中表示，图像向向右偏移50px和向下偏移60px。
5.解决滚动时，图像浏览完的情况
浏览网页的时候若网页背景是一张图像，你会发现，不论网页多长，都不会出现背景图像被浏览完的情况，这是因为使用了：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed //这条代码就是固定图像之意，使得不论怎么滚动图像，图像不会随滚动而动
}
body
{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}