css概述
css是层叠样式表的缩写，用于定义html元素的显示形式，是一种格式化网页内容的技术。
样式规则
内联样式表（内嵌）：特殊的样式需要应用到个别元素时，写在标签的开始标签中，其作用范围仅限于应用它的网页元素，方法是在相关的标签中使用样式属性，样式属性可以包含任何css属性。
内部样式表（内联）：单个文件需要特别样式时使用，写在网页的<head>部分，其作用范围仅限于该网页。
外部样式表（外联）：需要被应用到很多页面的时候使用，引入在网页的<head>部分。使用<link>标记引入代码，引入的是一个外部样式表的文件链接。
内嵌>内联=外联
css 的基础语法
h1
｛color：#ff0000;｝
h1(选择器){color(属性)：#ff0000（值）;声明}（声明块）
1、多个声明用“；”隔开。
2、每条声明由一个属性和一个值组成。
3、属性和值之间用“：”隔开。
4、每个声明用“；”结束。
5、属性可简写，根据css3规范建议简写。
6、多个选择器共用一个声明，用"，"隔开。
7、每个选择器可以拥有多条声明。
8、不要在属性值和单位之间留有空格，否则浏览器可能不能读取数据。
css继承
子元素从父元素继承属性，但不是所有元素都可以继承。
可继承：color、font、font-family、font-size、font-style、visibility、font-weight等。
不可继承：display、margin、border、padding、background、height、width等。
css选择器
1、元素选择器 选择器｛｝
2、类选择器 .class名称｛｝
3、ID选择器 #ID名称｛｝
4、后代选择器（派生选择器） 父选择器 空格 子选择器｛｝
5、子元素选择器 父选择器>子选择器
6、伪类选择器 选择器：属性（hover，firstchild）｛｝
7、相邻兄弟 选择器+选择器
css样式
可以使用 background-color 属性为元素设置背景色。
p {background-color: gray;}
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
body {background-image: url(/i/eg_bg_04.gif);}
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
可以利用 background-position 属性改变图像在背景中的位置。
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进。
p {text-indent: 5em;}
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
text-transform 属性处理文本的大小写。这个属性有 4 个值：
none
uppercase
lowercase
capitalize
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：
h1 {text-transform: uppercase}
text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。
text-decoration 有 5 个值：
none
underline
overline
line-through
blink
underline 会对元素加下划线，overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线。
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
字体大小
font-size 属性设置文本的大小。
有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。
文本修饰
text-decoration 属性大多用于去掉链接中的下划线
要修改用于列表项的标志类型，可以使用属性 list-style-type。
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
CSS padding 属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
h1 {padding: 10px;}
CSS 边框
在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面：宽度、样式，以及颜色。
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。
a:link img {border-style: outset;}
边框的颜色
设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。
CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。
h1 {margin : 10px 0px 15px 5px;}
CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS 定位和浮动
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。