在学习之前需要对HTML知识有基本的了解。主要是用来对HTML的元素进行美化的，所以以下只是一个便于查阅的阅读材料。
1. 是什么
CSS指层叠样式表 (Cascading Style Sheets)， 所谓的层叠就是指多个样式可以共同修饰一个html元素（标签）。
样式定义如何显示HTML元素
样式通常存储在样式表中，是为了解决内容（HTML）与表现（CSS）分离的问题 。体现编程耦合低的思想。
外部样式表可以极大提高工作效率。一次编程，多处使用。
外部样式表通常存储在CSS文件中 。通过link（href）的标签调用。
2. CSS基本语法
CSS语法
由三部分构成：选择器、属性和值：
selector {property: value}
选择器(selector)通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：
body {color: blue}
上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。
选择器有： ID选择器 类选择器 元素选择器
如何插入样式表
当读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有三种：
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用《link>标签链接到样式表。《link> 标签在（文档的）头部：
《head>
《link rel="stylesheet" type="text/css" href="mystyle.css" />
《/head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的html标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用《style>标签在文档头部定义内部样式表，就像这样:
《head>
《style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
《/style>
《/head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
《p style="color: sienna; margin-left: 20px">
This is a paragraph
《/p>
CSS基本属性
①CSS 文本：CSS文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
p {text-indent: 5em;} 设置文本首行缩进。
②CSS 字体: CSS字体 (font) 属性定义文本中的字体。设置字体属性是样式表的最常见用途之一。CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)，您还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）。
body {font-family: sans-serif;} 设置文本字样
③CSS 列表：CSS列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
④CSS 表格：CSS表格属性允许你设置表格的布局。
⑤CSS 轮廓：CSS轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。
⑥CSS 背景：CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。
p {background-color: gray;} 设置文本背景色
3.CSS框模型
CSS框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
CSS内边距
CSS padding属性
CSS padding属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有h1元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}
可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
下面的规则实现的效果与上面的简写规则是完全相同的：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
CSS边框
元素的边框(border)是围绕元素内容和内边距的一条或多条线。CSS border属性允许你规定元素边框的样式、宽度和颜色。
p { border: 1px solid red; } 设置边框为1px宽，实线，红色的边框。
CSS外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
网友评论