css笔记
CSS (HTML美容师)
1、CSS定义
CSS—Cascade Style Sheet层叠样式表（装修标签）
1998/5/12，CSS level2成为W3C标准；用来装饰HTML/XML的标记集合
2、特点：
样式表由样式规则组成，以告诉浏览器如何显示一个文档
每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式
每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现
3、CSS样式
样式规则格式：选择符{属性:值}
单一选择符的复合样式声明应该用分号分割：选择符{属性1:值1; 属性2:值2}
4、CSS的调用方式
在Head中调:<head ><style type = “text/css”>h1{ font-size:20pt;color:blue}</head> <body><h1>hello</h1></body>
在Body中调用<h1 style=”font-size:20pt;color:blue”>hello</h1>
调用css文件 <head> <link REL= stylesheet href=”0.3.css” type=”text/css”></head>
5、CSS的优先级问题
按照最靠近元素的定义来显示;如果两个css文件冲突,以后面的为准
6、CLASS & ID
类选择符（点与class相对应）：Class(p.code{}----<p class=”code”>….</p>)<per>保留格式</pre>
一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式
不同的选择符也可以同时定义一样的样式 .code{} 任何标签属性class=“code”
ID选择（#与id相对应） #code1{}-----标签属性id=“code1”
CSS组合/注释
可以一次性定义多个选择符的样式
H1,H2,H3{color:red;font-family:serif}//h1,h2,h3 相同的格式
P A{} //位于p中以A标记的格式
7、字体属性
属性 含义 属性值
font-family 字体 各种字体
font-style 字体样式 italic、oblique
font-variant 小体大写 small-caps
font-weight 字体粗细 bold、bolder、lighter…
font-size 字体大小 absolute、relative、%
color 字体颜色 颜色值
8、颜色与背景属性
属性 含义 属性值
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 …
9、文本属性
属性 含义 属性值
word-spacing 单词间距 n em （12pixels的M常用于印刷的单位）
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、%
10、装饰超链接 伪类选择符
对链接的修饰
A:link 未访问时的状态
A:visited 访问过后的状态
A:active 鼠标点中不放时的状态
A:hover 鼠标划过时的状态
11、边距属性
属性 含义 属性值
margin-top 上边距 n em | %
margin-right 右 n em | %
margin-bottom 下 n em | %
margin-left 左 n em | %
12、填充属性
属性 含义 属性值
padding-top 上填充 n em | %
padding-right 右 n em | %
padding-bottom 下 n em | %
padding-left 左 n em | %
13、边框属性
属性 含义 属性值
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
14、图文混排（用表格处理）
属性 含义 属性值
Width 宽度 n em | %
Height 高度 n em
Float 文字环绕 Left | right
clear 去除文字环绕 Left | right | both
15、列表属性
属性 含义 属性值
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|none
List-style-image 项目前图片 Img-url
List-style-position 第二行位置 Inside | outside
List-style 全部属性 Keyword | position | url
16、鼠标属性
属性值 含义 属性值 含义
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 帮助
17、定位属性
属性 含义 属性值
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
18、滤镜属性
属性值 含义 属性值 含义
Alpha 半透明 Invert 底片
Blur 模糊 Light 灯光投影
Chroma 指定颜色透明 Mask 透明膜
Dropshadow 投射阴影 Shadow 阴影
Fliph 水平翻转 Wave 波纹
Flipv 垂直翻转 Xray X射线
Glow 光效 Grayscale 灰度
1、CSS定义
CSS—Cascade Style Sheet层叠样式表（装修标签）
1998/5/12，CSS level2成为W3C标准；用来装饰HTML/XML的标记集合
2、特点：
样式表由样式规则组成，以告诉浏览器如何显示一个文档
每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式
每个元素可以定义多个属性，每个属性带有一个值，共同的描述选择符如何呈现
3、CSS样式
样式规则格式：选择符{属性:值}
单一选择符的复合样式声明应该用分号分割：选择符{属性1:值1; 属性2:值2}
4、CSS的调用方式
在Head中调:<head ><style type = “text/css”>h1{ font-size:20pt;color:blue}</head> <body><h1>hello</h1></body>
在Body中调用<h1 style=”font-size:20pt;color:blue”>hello</h1>
调用css文件 <head> <link REL= stylesheet href=”0.3.css” type=”text/css”></head>
5、CSS的优先级问题
按照最靠近元素的定义来显示;如果两个css文件冲突,以后面的为准
6、CLASS & ID
类选择符（点与class相对应）：Class(p.code{}----<p class=”code”>….</p>)<per>保留格式</pre>
一个选择符能有不同的Class，因而允许同一个选择符具有不同的样式
不同的选择符也可以同时定义一样的样式 .code{} 任何标签属性class=“code”
ID选择（#与id相对应） #code1{}-----标签属性id=“code1”
CSS组合/注释
可以一次性定义多个选择符的样式
H1,H2,H3{color:red;font-family:serif}//h1,h2,h3 相同的格式
P A{} //位于p中以A标记的格式
7、字体属性
属性 含义 属性值
font-family 字体 各种字体
font-style 字体样式 italic、oblique
font-variant 小体大写 small-caps
font-weight 字体粗细 bold、bolder、lighter…
font-size 字体大小 absolute、relative、%
color 字体颜色 颜色值
8、颜色与背景属性
属性 含义 属性值
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 …
9、文本属性
属性 含义 属性值
word-spacing 单词间距 n em （12pixels的M常用于印刷的单位）
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、%
10、装饰超链接 伪类选择符
对链接的修饰
A:link 未访问时的状态
A:visited 访问过后的状态
A:active 鼠标点中不放时的状态
A:hover 鼠标划过时的状态
11、边距属性
属性 含义 属性值
margin-top 上边距 n em | %
margin-right 右 n em | %
margin-bottom 下 n em | %
margin-left 左 n em | %
12、填充属性
属性 含义 属性值
padding-top 上填充 n em | %
padding-right 右 n em | %
padding-bottom 下 n em | %
padding-left 左 n em | %
13、边框属性
属性 含义 属性值
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
14、图文混排（用表格处理）
属性 含义 属性值
Width 宽度 n em | %
Height 高度 n em
Float 文字环绕 Left | right
clear 去除文字环绕 Left | right | both
15、列表属性
属性 含义 属性值
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|none
List-style-image 项目前图片 Img-url
List-style-position 第二行位置 Inside | outside
List-style 全部属性 Keyword | position | url
16、鼠标属性
属性值 含义 属性值 含义
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 帮助
17、定位属性
属性 含义 属性值
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
18、滤镜属性
属性值 含义 属性值 含义
Alpha 半透明 Invert 底片
Blur 模糊 Light 灯光投影
Chroma 指定颜色透明 Mask 透明膜
Dropshadow 投射阴影 Shadow 阴影
Fliph 水平翻转 Wave 波纹
Flipv 垂直翻转 Xray X射线
Glow 光效 Grayscale 灰度