由于有些零散的代码夹杂其中，所以用代码块编辑。
马士兵_CSS_学习笔记_尚学堂_个人整理
一、CSS定义
CSS—Cascade Style Sheet层叠样式表(装饰标签的)
1998/5/12，CSS level2成为W3C标准
用来装饰HTML/XML的标记集合
特点：
样式表由样式规则组成，以告诉浏览器如何显示一个文档
每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式
每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现
二、CSS样式
样式规则格式：
选择符{属性:值}
单一选择符的复合样式声明应该用分号分割：
选择符{属性1:值1; 属性2:值2}
<head>
<style type="text/css">
H1{font-size:16pt;color:red}
H2{font-size:10pt;color:green}
</style>
</head>
三、 CSS的调用方式
在Head中调用
在Body中调用
调用css文件
CSS的优先级问题
按照最靠近元素的定义来显示
如果两个css文件冲突,以后面的为准
四、 CLASS & ID
类选择符：Class
在 CSS 中，类选择符以一个点号显示：
.code
一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式
不同的选择符也可以同时定义一样的样式
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
ID选择符
id 选择器以 "#" 来定义:
#code
注意：id 属性只能在每个 HTML 文档中出现一次。
五、 CSS组合/注释
可以一次性定义多个选择符的样式
H1,H2,H3{color:red;font-family:serif}(碰到H1或H2)
P A{} (P内的A标签)
#head a (任何对象叫head,里面含有的a)
注释：
/*这是注释*/
六、 字体属性
属性 含义 属性值
font-family 字体 各种字体
font-style 字体样式 Italic斜体、oblique黑体
font-variant 小体大写 small-caps 小体大写
font-weight 字体粗细 bold、bolder、lighter…
font-size 字体大小 absolute、relative、%
color 字体颜色 颜色值
七、 颜色与背景属性
属性 含义 属性值
Color 颜色 颜色值
Background
-color 背景色 颜色值
Background
-image 背景图案 图片路径
Background
-repeat 背景图案重复方式 Repeat-x | repeat-y | no-repeat
Background
-attachment 背景的滚动 Scroll | fix
Background
-position 背景图案初始位置 % | n em | top | left | right | bottom …
八、 文本属性
属性 含义 属性值
word-spacing 单词间距 n em
letter-spacing 字母间距 n em
text-decoration 装饰样式 underline| overline| line-through(中划线)| blink(闪烁)
vertical-align 垂直方向位置 sub| super |top |text-top|middle| bottom| text-bottom
text-transform 转为其他形式 capitalize| uppercase| lowercase
text-align 对齐 left| right| center| justify
text-indent 缩进 n em| %
line-height 行高 pixels、n em、%
九、 装饰超链接 伪类选择符(重点)
对链接的修饰
A:link 未访问时的状态
A:visited 访问过后的状态
A:active 鼠标点中不放时的状态
A:hover 鼠标划过时的状态
十、 边距属性
属性 含义 属性值
margin-top 上边距 n em | %
margin-right 右 n em | %
margin-bottom 下 n em | %
margin-left 左 n em | %
十一、填充属性(段落内部填充一些)
属性 含义 属性值
padding-top 上填充 n em | %
padding-right 右 n em | %
padding-bottom 下 n em | %
padding-left 左 n em | %
十二、边框属性
属性 含义 属性值
Border-top-width 上边框宽度 n em | thin | medium | thick
Border-right-width 右 同上
Border-bottom-width 下 同上
Border-left-width 左 同上
Border-width 四边 同上
Border-color 边框颜色 Color
Border-style 边框样式 Dotted | dash | solid | double | groove | ridge | inset | outset
Border-top |right|bottom|left 上(右|底|左)所有属性 Border-width | border-style | color
十三、图文混排
属性 含义 属性值
Width 宽度 n em | %
Height 高度 n em
Float 文字环绕 Left | right
clear 去除文字环绕 Left | right | both
十四、列表属性
属性 含义 属性值
Display 是否显示 Block | inline | list-item | none
White-space 空白部分 Pre | nowrap | normal（是否合并)
List-style-type 项目编号 Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image 项目前图片 Img-url
List-style-position 第二行位置 Inside | outside
List-style 全部属性 Keyword | position | url
十五、鼠标属性
属性值 含义 属性值 含义
Auto 自动 N-resize 上箭头
Crosshair "+" Se-resize 右下
Default 默认 Sw-resize 左下
Hand 手形 S-resize 下箭头
Move 移动 W-resize 左箭头
E-resize 右箭头 Text "I"
Ne-resize 右上 Wait 沙漏
Nw-resize 左上 help 帮助
十六、定位属性
属性 含义 属性值
Position 位置 Absolute|relative|static
Left | top 横向|纵向位置 N em | %
Width | height 宽度|高度 同上
Clip 剪切 Shape | auto
Overflow 内容超出时 Visible | hidden | scroll | auto
Z-index 立体效果 Integer
visibility 可见性 Inherit | visible | hidden
十七、滤镜属性
属性值 含义 属性值 含义
Alpha 半透明 Invert 底片
Blur 模糊 Light 灯光投影
Chroma 指定颜色透明 Mask 透明膜
Dropshadow 投射阴影 Shadow 阴影
Fliph 水平翻转 Wave 波纹
Flipv 垂直翻转 Xray X射线
Glow 光效 Grayscale 灰度