1、样式分类和引用
-
**行内样式：**使用style属性
-
**内嵌样式：**在与标签之间，用标记声明
-
**外部样式：**包括导入式和链接式两种，实现了页面框架HTML代码与CSS代码的完全分离，使得前期制作和后期维护更加方便，网站后台的技术人员与美工分开合作。
引入式：
<style>
@import url(a.css);//格式1
@import url(“a.css”);//格式2
@import url(‘a.css’);//格式3
@import “a.css”;//格式4
@import ‘a.css’;//格式5
@import a.css;//格式6
</style>
链接式：
<link href="a.css" type="text/css" rel="stylesheet"/>
三种方式优先级：行内式>内嵌式>外部样式
浏览器中显示为红色
CSS样式的优先级遵循就近原则，理论上离对象越近，优先级越高，用！important 声明的优先级最高，同一样式下，最后定义的属性生效。
2、选择器分类
基本选择器：
-
通用选择器：某html元素范围下，公用属性设置，格式 * {…}
-
标记选择器：以html元素作为标记，格式 p {…}
-
类选择器：html元素中class=“类选择器” 格式 .class {…}
-
ID选择器：以html元素的ID名称设置，格式 #id {…}
-
属性选择器：CSS3规范，对包含某些属性的元素进行选择，格式 a[title][href] {…}
复合选择器：
-
“交集”选择器：必须是标记选择器和类选择器的组合，格式 p.class {…}
-
“并集”选择器：多种选择器以逗号分割的组合，格式 p.class,h1,.class2,#id2 {…}
-
后代选择器：html内外层元素以空格分割的组合，外层在前，内层在后，格式 div span {…}
-
子选择器：CSS2规范，相比后代选择器，只对直接后代有影响，格式 div>span {…}
-
兄弟选择器：CSS3规范，相邻元素（>1），选择后面元素，格式（相邻） p+h1 {…} 格式（不相邻） p~h1 {…}
除上述分类之外，还包括伪类/元素选择器 （由选择器和伪类/元素的组合），格式 选择器:hover {…}
- CSS伪类：active、focus、hover、link、visited、first-child、lang
- CSS伪元素：first-letter、first-line、before、after
**建议：**在构建html框架时，通常只给外层标记（父标记）定义class或者id，内层标记（子标记）能通过嵌套表示的则利用嵌套的方式，而不需要在定义新的class或者id，只有当子标记无法利用此规则时，才单独进行声明。
3、选择器权重
CSS选择器具有权重，权重越高，优先级越高；权重值实际是对选择器具体性（特殊性）的判断，依据(A,B,C,D)进行计算。
说明：C描述范围主要指类选择器和属性选择器
CSS2示例：
- 根据CSS规范，计算权重值时，特殊性值从左到右，依序分组比较（如果A相同，比较B，如果B相同，比较C，如果C相同，后定义的优先），对某个属性应用！important后，权重最高。
- 另外，通配符、子选择器、相邻选择器等，对特殊性无影响，如*、>、+特殊性值为（0,0,0,0）
- important > 内联 ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
4、继承特性
CSS中子元素自动继承外部元素属性值，但有些CSS属性并不支持继承。
无继承性的属性
- display：规定元素应该生成的框的类型
- 文本属性：vertical-align、text-docoration、text-shadow、white-space、unicode-bidi(CSS2.1支持，设置文本的方向)
- 盒子模型的属性：width、height、margin、margin-top、margin-right、margin-left、magin-bottom、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
- 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
- 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
- 生成内容属性：content、counter-reset、counter-increment
- 轮廓样式属性：outline-style、outline-width、outline-color、outline
- 页面样式属性：size、page-break-before、page-break-after
- 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
有继承性的属性
- 字体系列属性：font、font-family、font-weight、font-size、font-style、font-variant、font-size-adjust
- 文本系列属性：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color
- 元素可见性：visibility
- 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
- 列表布局属性：list-style-type、list-style-image、list-style-position、list-style
- 生成内容属性：quotes
- 光标属性：cursor
- 页面样式属性：page、page-break-inside、windows、orphans
- 声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
所有元素可继承的属性
- 元素可见性：visibility
- 光标属性：cursor
5、盒子模型
-
margin：外边距
-
border：边框
-
padding：内边距
标准盒子模型：width=content的宽度
IE盒子模型：width=content+margin+border+padding