css篇
css
cascading style sheet，层叠样式表，将网页内容和显示样式分离，提高程序性能。
它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位。在传统的web网页设计里，使得css能让单调的html网页更富表现力。
**`css`的引入方式**
css可以控制html文档的显示，但是控制文档显示之前，首先应在需要显示的html文档中引入css样式表，html提供了以下四种引入方式：
（1）内联样式：将样式内联定义到具体的html元素上，利用元素的style属性实现，通用用于精确控制一个html元素的表现。
<!-- 内联样式：将css代码写在html具体的元素的style属性内 --> <p id="p1" style="color: red; font-size: 16px">内联样式</p>
（2）内部样式：通常在html文档头部定义样式单部分来实现，这种方式下每批css样式只控制一份html文档。
<!-- 内部样式：将css代码写在<head>里的<style>标签内实现 -->
<style type="text/css">
#p2{
color: blue;
font-size: 20px;
}
</style>
（3）外链样式：样式文件和html文档分离，样式文件需要额外引入，这种方式下每批css样式能控制多份html文档（最常用）。
<!-- 外链样式：利用link标签引入，使用频率最高 --> <link rel="stylesheet" type="text/css" href="outer.css" />
（4）导入外部样式：和第三种方式类似，只是使用@import来引入外部样式表文件。
<!-- 导入外部样式：与link方法类似，语法不通，在<style>标签内使用 -->
<style type="text/css">
@import "outer.css'";
@import url("outer.css");
</style>
优先级：内联样式style> 内部样式 > 导入外部样式import > 外链样式link
**`css`常用选择器介绍**
定义css样式的语法总遵循如下格式：
selector{
property1: value1;
property2: value2;
}
selector：选择器，决定该样式的定义对哪些元素起作用
{property:value...}：属性定义，决定这些样式起怎样的作用（字体、颜色、布局等）
标签选择器：声明哪种标签会使用该css样式
/* e{....}，其中e代表有效的html元素 */
a{
background-color: blue;
color: red;
}
class选择器：声明特定class值的标签会使用该css样式（一个标签可以设置多个class值）
/* [e].classvalue{....}，其中e表示html元素，当e存在时，指定的范围是标签为e且属性class的值为classvalue，不存在时，范围是标签属性class的值为classvalue */
.p2{
background-color: yellow;
color: gray;
}
id选择器：声明特定id值的标签会使用该css样式（一个标签只能设置一个id值）
/* [e]#idvalue{....}，同class选择器概念，e可存在或不存在 */
#id1{
background-color: gray;
color: white;
}
组合选择器：将具有相同css样式的选择器，一次性声明（不限于标签选择器，class选择器和id选择器也可以组合）
/* selector1, selector2, selector3{....}，selector都是有效的选择器，可以是标签选择器、class选择器、id选择器等 */
span, b, #id1{
color: red;
}
嵌套选择器：也叫关联选择器（不只是标签选择器能嵌套，class选择器和id选择器也可以）
/* selector1 selector2{....}，selector都是有效的选择器，表示当前需要设定样式的范围是selector1选择器下所有的selector2选择器*/
div p{
background-color: green;
color: white;
}
**常用的`css`属性介绍**
字体font-family：规定文本的字体系列，如"serif"、"sans-serif"等font-size：规定文本的字体尺寸font-style：规定文本的字体样式，主要有normal,italic,obliquefont-weight：规定字体的粗细，主要有normal,bold,自定义粗细
文本color：设置文本颜色letter-spacing：设置字符间距（每个字母间的间距）line-height：设置文本行高text-align：设置文本的对齐方式，只有left, right, centertext-decoration：设置文本的装饰效果，主要有overline（上划线）, underline（下划线）, line-through（删除线）text-indent：设置文本看首行缩进text-transform：设置文本的大小写，主要有uppercase, lowercase, capitalizeword-spacing：设置单词间距
边框border：在一个声明中设置所有的边框属性border-color：设置四条边框的颜色border-style：设置四条边框的样式，只要有dotted, solid, double, dashed等值border-width：设置四条边框的宽度
边框分为：border-left、border-right、border-top、border-bottomborder-left：在一个声明中设置所有左边框属性，对应还有border-right等border-left-color：设置左边框颜色border-lelft-style：设置左边框样式border-left-width：设置左边框宽度
可以将属性一次性写在一起，更方便border: 10px red solid;
背景background：在一个声明中设置所有的背景属性background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动，主要有fixed和scroll两个值background-color：设置元素的背景颜色background-image：设置元素的背景图片，主要有url和none两个属性background-position：px, % 设置背景图像的开始位置，可以指定top left等，也可以指定具体的像素位置background-repeat：设置是否及如何重复背景图像，主要有repeat, repeat-x, repeat-y, no-repeat
列表list-style：在一个声明中设置所有的列表属性，设置成none可以去掉ul中的原点等属性值list-style-image：将图像设置为列表项标记，主要有url值list-style-position：设置列表项标记的放置位置，主要有outside和inside两个值list-style-type：设置列表项标记的类型，主要有disc, circle, square, decimal等，不能和list-style-image同时使用
表格border-collapse：设置是否把表格边框合并为单一的边框，值为collapseborder-spacing：设置分割单元格边框的距离，与border-collapse不能同时使用caption-side：设置表格标题的位置empty-cells：设置是否显示表格中的空单元格，值为hide, show
常用伪类别属性<a>超链接标签a:link 超链接的普通样式a:visited 被点击过的超链接样式a:hover 鼠标指针经过超链接上时的样式a:active 在超链接上单击时，既"当前激活"时超链接的样式
块级标签->行级标签：display:inline
行级标签->块级标签：display:block
注：行级标签是默认情况下是不能设置宽度和高度的，如果要设置，需要把行级标签变成块级标签
**盒子模型**
我们可以把页面中的元素都可以看作一个盒子，占据着一定的页面空间，这些占据的空间往往比单纯的内容要大，换句话说，我们可以调整盒子的边框和距离的参数来调整盒子的位置。
盒子宽度：content+padding+border+margin
因此我们可以利用好盒子的这些属性，就能很好的实现各种各样的排版效果。
border属性主要有3个，border-color, border-width, border-style，通常在设置border时常常将3个属性进行很好的配合，才能达到良好的效果。
padding用于控制content与border之间的距离。padding：一次性将四个边距全部设置（上右下左，顺时针）padding-top：上边距padding-bottom：下边距padding-left：左边距padding-right：右边距
margin指的是元素与元素之间的距离。margin：一次性将四个边距全部设置（上右下左，顺时针）margin-top：上边距margin-bottom：下边距margin-left：左边距margin-right：右边距
注：
- 两个行级元素之间的距离是margin-left和margin-right两者的和，两个块级元素之间的距离不是margin-top和margin-bottom的和，而是两者之中的较大值。
- 其实margin除了设置正数以外，也可以设置负数，当设置为负数时，会使得块向反方向移动，甚至覆盖在另外的块上。
- 当块之间是父子关系，通过设置子块的margin为负数时，可以使得子块从父块中"分离出来"
**元素的定位**
网页中各个元素都必须有自己的位置，从而搭建出整个页面的结构。float：值为left, right或者默认值none，当设置了元素向左浮动或向右浮动时，元素会向其父元素的左侧或右侧靠近clear：设置块元素的clear属性清除对float的影响，值为left, right, bothposition：制定块的位置，即块相对于其父块的位置和相对它自身应该在位置，值有absolute, fixed, relative, static
当将子块的position设置为absolute时，子块已经不再从属于父块，其边框设置的距离是相对页面body的距离，而不是父块的距离
当将块的position参数设置为relative时，与将其设置为absolute时完全不同，这时子块时相对于自身在父块的原先位置来进行定位的。
定位资料参考：http://www.cnblogs.com/dolphinx/archive/2012/10/13/2722501.html