12.1认识CSS
CSS-层叠样式表，目的是为网页上的元素精确定位，其次，它可以把网页上的内容结构和控制相分离
CSS可以更加精确地控制网页的内容形式，内容更加丰富，样式灵活多变
12.2使用CSS
1.基本语法
选择符{样式属性：取值；样式属性：取值；样式属性：取值；....}
选择符(Selector)：指这组样式编码要针对的对象，可以是一个XHTML标签，如body，hl，也可以是定义了特定id或class的标签
属性(Property)：对于每一个XHTML中的标签，CSS都提供了丰富的样式属性
值(value)：指定属性的值，两种类型，指定范围和指定数值
2.添加CSS方法
- 链接外部样式表
<link rel=stylesheet type=text/css href=style.css>
通过link标签调用已经定义好的样式表，link标签处在head标签里面
rel=stylesheet是指在页面中使用外部的样式表
type=text/css是指文件的类型是样式表文件
href=style.css是文件所在位置
- 内部样式表
<style type="text/css">
<!--
...
-->
</style>
一般位于head标签中
- 导入外部样式表
<style type="text/css">
<!--
@import style.css
...
-->
</style>
注意使用时外部样式表的路径，方法和链接外部样式表的方法类似
但导入外部样式表输入方式更有优势，实质上它是相当于存在于内部样式表中
- 内嵌样式
<table style=color:red;margin-right:220px>
内嵌样式混合在HTML标记中使用
内前样式的使用是直接在HTML标记里添加style参数
12.3字体属性
font-family: "字体1","字体2",...
font-size: 大小的取值
font-style: 样式的取值
font-weight: 字体粗细值
font-variant: 取值
font: 字体取值
在font-family里面定义了多种字体，浏览器会由前向后选择字体，如果都不支持，则会采用系统默认的字体
-
font-size取值：
font-size取值 font-style取值：
normal：默认的正常字体
italic：以斜体显示文字
oblique：属于中间状态font-weight取值：
normal：正常粗细
bold：粗体
bolder：特粗体
lighter：特细体
number：100~900，通常正百取值font-variant取值：
normal：正常显示
small-caps: 将小写英文字母转化为大写并且字体较小字体复合属性
.h{
font: bold italic "宋体"
}
各值之间用空格相连
12.4颜色和背景属性
color: 颜色取值
background-color: 颜色取值
background-image: url(图像地址)
background-repeat: 取值
background-attachment: scroll/fixed
background-postion: 位置取值
background: 取值
颜色的取值一般用16进制
图像的地址可以是相对地址也可以是绝对地址
background-repeat:
no-repeat：背景图像不平铺
repeat：背景图像平铺
repeat-x：背景图像只在水平方向平铺
repeat-y：背景图像只在垂直方向平铺background-attachment:
scroll：背景图像随对象滚动而滚动，默认选项
fixed：背景图像固定在页面上不动-
background-postion:
长度设置值
- 背景复合属性
background : url(...) no-repeat left top;
各值之间用空格相连
12.5段落属性
word-spacing: 取值
letter-spacing: 取值
text-decoration: 取值
vertical-align: 排列取值
text-transform: 转换值
text-align: 排列值
text-index: 缩进值
line-height: 行高值
white-space: 值
unicode-bidi: bidi-override,normal,embed
direction: ltr,rtl,inherit
单词间隔word-spacing:
normal：默认值
数值：可以为负字符间隔letter-spacing:
normal：默认值
数值：可以为负文字修饰text-decoration:
none：不修饰，默认值
underline：添加下划线
overline：添加上划线
line-through：添加删除线
blink：文字闪烁效果垂直对齐方式vertical-align:
baseline：浏览器默认的垂直对齐方式
sub：文字的下标
super：文字的上标
top：垂直靠上对齐
text-top：使元素和上级元素的字体向上对齐
middle：垂直居中对齐
text-bottom:使元素和上级元素的字体向下对齐文本转换text-transform:
none：表示使用原始值
capitalize：每个单词的第一个字母大写
uppercase：每个单词的所有字母大写
lowercase：每个单词的所以字母小写水平对齐方式text-align:
left：左对齐
right：右对齐
center：居中对齐
justify：两端对齐文本缩进text-index:
文本的缩进值必须是一个长度值或一个百分比文本行高line-height:
行高值可以为长度，倍数或百分比处理空白white-space:
normal：默认，将连续的多个空格合并
pre：导致源代码中的空格和换行符会被保留
nowrap：强制在同一行显示所有文本，直到文本结束或者遇到文本反排unicode-bidi,direction
unicode-bidi,direction经常一起使用，用来设置对象的阅读顺序
unicode-bidi
bidi-override：严格按照direction的值重排序
normal：默认值
embed：对象打开附加的嵌入层 direction的值指定嵌入层，在对象内部进行隐式重排序
direction
ltr：从左到右顺序阅读
rtl：从右到左顺序阅读
inherit：文本流的值不可继承
12.6外边距与内边距属性
内容区：盒子模型的中心，呈现了盒子的主要信息内容，内容区是盒子模型必备的组成部分，其他的三部分都是可选的
属性：width，height，overflow
使用属性可以指定盒子内容区的高度和宽度内边距：是内容区和边框之间的空间，可以被看做是内容区的背景区域
属性：padding，padding-top，padding-bottom，padding-left，padding-right
使用属性可以指定内容区与各方向边框的距，同时对盒子背景色属性的设置可以使内边距部分呈现相应的颜色，起到一定的变现效果边框：
属性：border，border-style，border-width和border-color外边距：外边距位于盒子的最外围，它不是一条线而是添加在边框外面的空间，外边距使得盒子之间不必紧凑的连接在一起
属性：margin，margin-top，margin-bottom，margin-left，margin-right
其具体设置和使用与内边距属性相似
12.6.1外边距margin
长度值：绝对边距值
百分比：相对上级元素
auto：自动取边距值
margin的值可以取一个或四个
12.6.2内边距padding
长度值：绝对边距值
百分比：相对上级元素
padding值可以取一个或四个
12.6.3边框border
-
border-style
边框样式取值 border-width
medium：默认宽度
thin：小于默认宽度
thick：大于默认宽度
长度：数字和单位，不可为负border-color
可以用16种颜色的关键字或RGB值来设置border
使用border属性可以设置元素的边框样式，宽度和颜色
12.7定位属性
12.7.1定位方式postion
postion: static | absolute | fixed | relative
static：默认值
absolute：绝对定位，需要同时使用left，right，top和bottom等属性进行绝对定位
fixed：当页面滚动时，元素不随着滚动
relative：相对定位，对象不可层叠
12.7.2元素位置left，right，top和bottom
left: auto | 长度值 | 百分比
right: auto | 长度值 | 百分比
top: auto | 长度值 | 百分比
bottom: auto | 长度值 | 百分比
12.7.3层叠顺序
z-index: auto | 数字
12.7.4浮动属性
float: none | left | right
使用float可以设置文字在某个元素的周围，它能应用于所有的元素
- none：默认值，表示对象浮动
- left：表示文字浮动在元素的右边
- right：表示文字浮动在元素的左边
12.7.5清除属性clear
clear：none | left | right | both
用于指定一个元素是否允许有其他元素漂浮在它的周围
- none：默认值，允许两边都可以有浮动对象
- left：不允许左边有浮动对象
- right：不允许右边有浮动对象
- both：不允许有浮动对象
12.7.6可视区域clip
clip: auto | rect(数字)
使用clip可以限定只显示裁切出来的区域
- auto表示对象不裁剪
- rect表示它根据提供的数值计算
12.7.7层的宽度和高度width，height
width: auto | 长度值
height: auto | 长度值
12.7.8超出范围overflow
overflow: visible | auto | hidden | scroll
设置当层内的内容超出所能容纳的范围时的显示方式
- visible：表示层的大小和内容都会自动显示出来
- auto：表示只在内容超出层的范围时才显示滚动条
- hidden：表示会隐藏超出范围的内容
- scroll：表示总是显示滚动条
12.7.9可见属性visibility
visibility: inherit | visible | hidden
针对嵌套层，插入其它层中的层
- inherit：默认值，继承父对象的可见性
- visible：无论父对象是否可见，子层都可见
- hidden：无论父对象是否可见，子层都隐藏
12.8列表属性
list-style-type: 值
list-style-image: none | url(图像地址)
list-style-postion: outside | inside
list-style
-
list-style-type：设置列表项所使用的符号类型
type的取值 list-style-image:
none：不指定图像
url：图像地list-style-postion:
outside：列表项目标记放在文本以外，且环绕文本不根据标记对齐
inside：列表项目标记放在文本以内，且环绕文本根据标记对齐list-style列表复合属性
list-style-type和list-style-image都被指定时，list-style-image优先
12.9光标属性cursor
cursor: auto | 形状取值 | url(图像地址)
设置在对象上移动时鼠标指针采用的光标形状
12.10滤镜属性
12.10.1不透明度alpha
设置对象的透明度，使图片产生透明渐变效果
filter:alpha(参数 1=参数值, 参数 2=参数值, ...)
12.10.2动感模糊blur
用于设置对象的动态模糊效果
filter:blur(add=参数值, direction=参数值, strength=参数值)
12.10.3对颜色进行透明处理chroma
chroma滤镜的作用是将图片中的某种颜色转化为透明色，产生透明效果
filter: chroma(color=颜色代码或颜色关键字)
12.10.4阴影效果dropShadow
dropShadow滤镜用于设置在指定的方向上和位置上产生阴影效果
dropShadow(color=阴影颜色, offX=参数值, offY=参数值, positive=参数值)
- color: 控制阴影颜色
- ** offX，offY分别设置阴影相对于原始图像移动的水平距离和垂直距离**
- positive：设置阴影是否透明
12.10.5对象翻转flipH，flipV
flipH用于设置沿水平方向翻转对象，flipV用于设置沿垂直方向翻转对象
filter: FlipH
filter: FlipV
12.10.6发光效果glow
glow滤镜用于设置在对象周围产生发光的效果
filter: Glow(color=颜色代码,strength=强度值)
color用于设置发光的颜色
strength用于设置发光的强度，取值范围为1~255，默认值为5
12.10.7灰度处理gray
gray滤镜用于把彩色图片中的色彩去掉，转化为黑白色图片
filter: gray
12.10.8反相invert
invert滤镜用于设置对象反相，可以将图片的颜色，饱和度，以及亮度完全反转过来
filter: invert
12.10.9X光片效果xray
xray滤镜用于制作类似X光片的效果
filter: xray
12.10.10遮罩效果mask
mask滤镜用于产生遮罩效果，可以做出像印章一样的效果
filter: Mask(Color=颜色代码)
12.10.11波形滤镜wave
wave滤镜用于为对象内容创波纹扭曲效果
filter: wave(add=参数值, freq=参数值, lightstrength=参数值,
phase=参数值, strength=参数值);
add：设置是否要把对象按照波形样式打乱
freq：设置图片上的波浪数目
lightstrength：设置波浪的光照强度，取值范围为0~100
phase：设置波浪的起始位置
strength：设置波浪的的强度大小
