如鹏网 静态Web开发 第二章：css
1、css的定义方式：内联在标签中；写到html文件的style标签中；写到单独的css文件中。
2、css选择器：id选择器；class选择器；派生选择器；子元素选择器；组合选择器；超链接的伪类选择器；
3、选择器的优先级；
4、常用样式：字体颜色；背景；字体大小；
5、margin和padding的区别；
-----------------------------------------------------------------------------------------
课程大纲
CSS概述
CSS选择器
盒子模型
CSS样式
-----------------------------------------------------------------------------------------
CSS概述（级连样式表）
CSS(Cascading Style Sheets)，它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。
相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
HTML(Hyper Text Markup Language)超文本标记语言，是用来描述页面的一种语言。
没有HTML之前，早期网页都是存文本，没有任何效果，而今天我们打开网站看到的页面都是图文并茂、布局严谨、结构清晰，这就是HTML语言的魅力，让文字会“说话”。
1982年由蒂姆·伯纳斯-李创建，后来进一步发展成为国际标准，由万维网联盟（W3C）维护。
目前最新版本为5.0，支持浏览器IE9+,Chrome25+,Firefox19+...
-----------------------------------------------------------------------------------------
CSS基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector{ declaration1; ... declarationN; }
每条声明由一个属性和一个值组成：h1 { color : red; }
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
提示：请使用花括号来包围声明。
-----------------------------------------------------------------------------------------
CSS定义方式
内联式（最高优先级）
•在标签内通过 style 属性添加样式属性
•<p style="color:red">红色内容</p>
嵌入式
•在<head>标签内放在单独的 style 元素中
•<style> p{ color:red; } </style>
外联式
就是把外部css文件中的内容加到网页中
•将内联样式的内容放到一个独立的.css文件中进行引用
•<link rel="stylesheet" type="text/css" href="*.css"/>
•@import url("*.css"); CSS特有的， 必须写到<style></style>标签中
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS 的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
优先级：内联式>嵌入式和外联式（嵌入式和外联式谁在后，最后用谁的设置，以最下面的为准）
-----------------------------------------------------------------------------------------
Css选择器：
基本选择器：
标签名选择器
ID选择器
Class选择器
扩展选择器：
派生选择器
子元素选择器
属性选择器
组合选择器
伪类选择器
......
CSS基本选择器
标签名选择器
h1{color:red;}
id 选择器：唯一性
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
实例
#para1
{
text-align:center;
color:red;
}
注：ID属性,class属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器（复用性）
在 CSS 中，类选择器以一个"."点号显示：
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
注：类名的第一个字符同样不能使用数字！
id 选择器与 class 选择器有很大的不同
一个页面内不能出现相同的ID(唯一的)；
再就是ID也是后台开发人员会经常用的，所以前端开发人员应该尽量少的使用。
选择器的优先级
style属性（内联式） > id 选择器 > class 选择器 > 标签选择器
-----------------------------------------------------------------------------------------
CSS扩展选择器
派生选择器
根据上下文选择元素 : h1 em { ... }
直接子元素选择器
对派生选择器进一步过滤,直接子元素 h1 > a { ... }
属性选择器
可以根据元素的属性及属性值来选择元素 a[href] {color : red;}
组合选择器
h1, h2, h3, h4, h5{ color : red; }
伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：a:active 必须被置于 a:hover 之后，才是有效的。
-----------------------------------------------------------------------------------------
CSS样式
背景：CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
背景色：
重复模式：background-repeat:repeat（全重复，默认），repeat-x（水平），repeat-y（垂直）,no-repeat(不重复)
背景定位：background-position:center 0 /*x:居中 y:0*/
综合写法：background: url(img/sp141001.jpg) center 0 no-repeat
综合写法：background: url(img/sp141001.jpg) center 0 no-repeat
文本：文本颜色、字符间距，对齐文本，装饰文本，对文本进行缩进
缩进 ：text-indent: 2em; /*1em等于当前文本一个字符的像素大小*/
水平对齐 ：text-align: center
文本装饰 ：text-decoration:underline(下划线) overline(上划线) none
字体：定义文本的字体系列、大小、加粗、风格和变形。
font-family: '楷体'
font-style: italic /*斜体*/
font-variant:small-caps; /*英文字母变形*/
font-weight: 900 ;（bold）加粗
font-size: 25px; 字体大小
font-size: 25px; 字体大小
链接：以不同的方法为链接设置样式。
a:link{}
a:visited{}
a:hover{}
a:active{}
a{text-decoration: none;}
a:hover{text-decoration: underline;color: red;}
列表
ul{
list-style: none;
list-style-type: square;
list-style-image: url(img/nav_sprite_v24.png);
list-style: url(img/li.png) inside;
}
表格
table,th,tr,td{border:#00f 1px solid }
table{border-spacing: 0;border-collapse: collapse;}
td{
width:50px;
height:30px;
padding: 2px;
vertical-align:bottom;
text-align: center
}
轮廓: 绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
{outline-style: dashed}
-----------------------------------------------------------------------------------------
CSS框模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
-----------------------------------------------------------------------------------------
padding、margin
padding
属性定义元素边框与元素内容之间的空白区域。
-属性接受长度值或百分比值，但不允许使用负值。
-h1{padding: 10px;} 让h1元素各边都有10px的内边距。
-h1{padding-top: 20px;} 让h1元素距离上边框为10px。
-h1{padding: 10px 0.25em 2ex 20%;} 上-右-下-左
2个值：上下 左右
3个值：上 左右 下
margin
属性定义围绕在元素边框的空白区域 (外边距)。
-属性接受任意长度值、百分比值甚至使用负值。
-百分数是相对于父元素 width计算的。
-margin 还可以指定为auto，值被设置为相对边的值。
-margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不
会出现外边距。但在实际中，浏览器对许多元素已经提供了预定的样
式，比如外边距会在每个段落元素的上面和下面生成“空行”。
margin 属性接受任何长度单位，可以是像素px、英寸in、毫米mm或 em。
-----------------------------------------------------------------------------------------
边框
元素的边框是围绕元素内容和内边距的一条或多条线。
每个边框有 3 个方面：宽度、样式，以及颜色。
tr{border: 1px solid #333;}
style="cursor: pointer"
就今天，再坚持一下，哪怕会放弃，但至少要过了今天。
