一、CSS介绍CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。二、CSS语法1、CSS实例每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。2、CSS注释/*这是注释*/三、CSS的几种引入方式1、行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。<p style="color: red">Hello world.</p>2、内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： ???<head> ???????????<meta charset="UTF-8"> ???????????<title>Title</title> ???????????<style> ???????????????????p{ ???????????????????????????background-color: #2b99ff; ???????????????????} ???????????</style> ???</head>3、外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。<link href="mystyle.css" rel="stylesheet" type="text/css"/>四、CSS选择器1、基本选择器1)元素选择器 ???p {color: "red";}2)ID选择器 ???#i1 {background-color: red;}3)类选择器 ???.c1 {font-size: 14px;} ???p.c1 {color: red;}注意：样式类名不要用数字开头（有的浏览器不认）。标签中的class属性如果有多个，要用空格分隔。4)通用选择器 ???* {color: white;}2、组合选择器1)后代选择器 ????/*li内部的a标签设置字体颜色*/ ???li a {color: green;}2)儿子选择器 ???/*选择所有父级是 <div> 元素的 <p> 元素*/ ???div>p {font-family: "Arial Black", arial-black, cursive;}3)毗邻选择器 ???/*选择所有紧接着<div>元素之后的<p>元素*/ ???div+p {margin: 5px;}4)弟弟选择器 ???/*i1后面所有的兄弟p标签*/ ???#i1~p {border: 2px solid royalblue;}3、属性选择器1)/*用于选取带有指定属性的元素。*/ ???p[title] {color: red;}2)/*用于选取带有指定属性和值的元素。*/ ???p[title="213"] {color: green;}不常用的属性标签：3)/*找到所有title属性以hello开头的元素*/ ???[title^="hello"] {color: red;}4)/*找到所有title属性以hello结尾的元素*/ ???[title$="hello"] {color: yellow;}5)/*找到所有title属性中包含（字符串包含）hello的元素*/ ???[title*="hello"] {color: red;}6)/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ ???[title~="hello"] {color: green;}4、分组和嵌套1)分组当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 ????div, p {color: red;}上面的代码为div标签和p标签统一设置字体为红色。通常，我们会分两行来写，更清晰:2)嵌套多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。 ???.c1 p {color: red;}5、伪类选择器6、伪元素选择器7、选择器的优先级五、CSS属性相关1、字体属性2、文字属性3、背景属性4、边框5、border-radius6、display属性7、CSS盒子模型8、margin外边距9、padding内填充10、float11、clear12、overflow溢出属性13、定位（position）14、z-index15、opacity前端基础之CSS
原文地址：http://blog.51cto.com/10630401/2085689