CSS基础
来源：互联网 发布：未注册域名查询工具 编辑：程序博客网 时间：2024/05/12 03:40
===========================
第12章 使用CSS样式表
===========================
12.1 认识CSS
CSS(层叠样式表)是一种制作网页的新技术。
样式表的首要目的是为网页上的元素精确定位，还可包网页上的内容结构和格式控制分离。
文件后缀名为.css。
12.2 使用CSS
12.2.1 CSS的基本语法
CSS语法有三部分构成：选择符、样式属性、值。
选择符：这组样式编码要针对的对象。可以是标记，也可是定义的ID或class。
属性：样式的颜色、大小等属性。
值：属性的值。形式有：1.指定范围的值。2.数值(px)或数字单位。定义多个属性时，用分号隔开。
语法：选择符{样式属性：值；样式属性：值...}
12.2.2 添加CSS的方法
添加CSS的方法有4种：链接外部样式表、内部样式表、导入外部样式表、内嵌样式。
1.链接外部样式表
链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，在页面中用<link>标记链接到这个样式表文件。
<link>标记必须放到页面的<head>标记中。
这种方法适用大型网站的CSS样式定义，一个样式表可应用多个页面。
语法：<head>....<link rel="stylesheet" href="样式表文件名.css">...</head>
2.内部样式表
内部样式表一般在HTML文件的头部，即<head></head>标记中，以<<style></style>包含。
语法：<head>...<<style type="text/css">样式表的定义</style>...</head>
3.导入外部样式表
导入外部样式表是指在内部样式表的<style>里导入一个外部样式表。导入时用@import。
语法：<head>...<style type="text/css"> @import 样式表名.css</style>...</head>
4.内嵌样式
内嵌样式就是混合在HTML标记中使用。
使用方法：直接在HTML标记中添加style参数，而style参数的内容就是CSS的属性和值。
12.3 字体属性
12.3.1 字体font-family
设置字体样式，和font中的face一样。
若定义了多种字体，则会由前到后选择字体。即浏览器不支持字体1，则采取字体2，直到支持。若都不支持，则采用系统默认。
语法：font-family:"字体1","字体2",...
12.3.2 字号font-size
设置字体大小。
取值：
xx-small 绝对字体尺寸，最小
x-small 绝对字体尺寸，较小
small 绝对字体尺寸，小
medium 绝对字体尺寸，正常默认值。
large 绝对字体尺寸，大
x-large 绝对字体尺寸，较大
xx-large 绝对字体尺寸，最大
larger 相对字体尺寸，相对于父对象的字体尺寸，增大
smaller 相对字体尺寸，相对于父对象的字体尺寸，减小
length 采用百分比(50%)或长度值(12px)，不可为负值。百分比是基于父对象字体的尺寸。
语法：font-size:值
12.3.3 字体风格font-style
设置字体的风格，如：斜体。
取值：normal：默认、italic：斜体、oblique：偏斜体
语法：font-style:值
12.3.4 加粗字体font-weight
取值范围：normal：正常、bold：粗体、bolder：特粗体、lighter：特细体、number(数字表示):范围100~900，一般都是整百数且后面不加px。
语法：font_weight:值
12.3.5 小写字母转为大写font-variant
将小写英文转为大写。
取值：normal：正常显示、small-caps：将小写转为大写且字体较小。
设置font的复合属性，用来简化CSS代码。
复合属性包括：字体族科(样式)、字体大小、字体风格、加粗等，各值之间用空格相连。
语法：font:字面取值。
例子：font:"宋体" 12px bold
12.4 颜色和背景属性
12.4.1 颜色属性color
指定颜色，取值为单词或16进制RGB值。
语法：color:值
12.4.2 背景颜色background-color
可设置网页的背景颜色，还可设置文字的背景颜色。
语法：background-color:颜色
12.4.3 背景图像background-image
语法：background-image:url(图像地址)
12.4.4 背景重复background-repeat
可设置背景图像是否平铺，并且可以设置如何平铺。
取值范围：
no-repeat：背景不平铺
repeat：背景平铺满整个网页
repeat-x：背景水平平铺
repeat-y：背景垂直平铺
12.4.5 背景附件background-attchment
设置背景图像是否随对象滚动，即相对于所属的对象，如：属于页面，若拖动滚动条，是否滚动。scroll：默认值，滚动。fixed：固定。
语法：background-attachment:取值
12.4.6 背景位置background-position
设置背景图像位置，只适用于块级元素和替换元素。
替换元素：img、input、textarea、select、object
位置取值：
1.数字
X(数值) 网页横向位置，单位可是所有尺度单位。
Y(数值) 网页纵向位置，单位可是所有尺度单位。
2.关键字描述：top、bottom、left、right。4个关键字结合使用，组成不同位置。
如：
top left 左上位置
top center 靠上居中
top right 右上位置
3.百分比：百分比1 百分比2 。百分比1设置X坐标，百分比2设置Y坐标。
12.4.7 背景复合属性
取值范围：背景颜色、背景图像、背景重复、背景附件、背景位置。各值之间用空格相连。
语法：background:取值
12.5 段落属性
包括：单词间隔、字符间隔、文字修饰、纵向排列、文本转换、文本排列、文本缩进、行高等。
12.5.1 单词间隔word-spacing
取值可以是normal：正常间隔，也可使用长度值px。可取负值。
语法：word-spacing:取值
12.5.2 字符间隔letter-spacing
语法：letter-spacing:取值
12.5.3 文字修饰text-decoration
设置下画线、删除线等。
normal：默认，不修饰。
underline：添加下画线。
overline：添加上划线。
line-through：添加删除线
blink：文字闪烁效果
语法：text-decoration：取值
12.5.4 垂直对齐方式vertical-align
取值范围：
baseline 默认的对齐方式
sub 文字的下标
super 文字的上标
top 垂直靠上对齐
text-top 元素和上级元素的字体向上对齐
middle 垂直居中对齐
text-bottom 元素和上级元素的字体向下对齐
语法：vertical-align:排列方式
12.5.5 文本转换text-transform
用来转换英文大小写。
取值：
none 使用原始值
capitalize 每个单词的第一个字母大写
uppercase 所有字母大写
lowercase 所有字母小写
语法：text-transform：转换值
12.5.6 水平对齐方式text-align
设置文本水平对齐方式。
取值：
left 左对齐
right 右对齐
center 居中
justify 两端对齐
语法：text-align:排列值
12.5.7 文本缩进text-indent
默认不缩进，只能设置向右缩进。可控制段落的首行缩进以及缩进的距离。可是长度值或百分比。
语法：text-indent:缩进值
12.5.8 文本行高line-height
设置文本行的高度。
语法：line-height:取值
12.5.9 处理空白white-space
设置页面内空白的处理方式。
取值：
nonrmal 默认，连续的空格合并。
pre 源代码中的空格和换行符保留(在IE6中才能正确显示)
nowrap 强制在同一行显示
语法：white-space:取值
12.5.10 文本反排unicode-bidi、direction
这两个属性经常一起使用。
1.unicode-bidi
取值：
bidi-override 严格按照direction属性的值重排序
normal 默认
embed 对象打开附加的嵌入层
语法：unicode-bidi:取值
2.direcrtion
取值：
ltr 从左到右顺序阅读
rtl 从右到左顺序阅读
12.6 外边距与内边距属性
外边距属性可设置：元素周围的边界宽度，包括上下左右的距离。
内边距属性可设置：边框和元素内容之间的间距，包括上下左右的边距值。
这两个属性的值都是数值，可为长度，也可为百分比。
CSS盒子模式：Content(内容)、padding(内边距)、border(边框)、margin(外边距)。
Centent(内容区)：是盒子的主要信息内容，可是文本、图片等。内容区是必选的。
padding(内边距)：内容区和边框之间的距离，可看作内容区的背景区域。属性：top、bottom、left、right。快捷内边距属性：padding。
border(边框)：属性：border-style、border-width、border-color。快捷属性：border。
margin(外边距)：位于盒子的最外围，不是一条线，而是添加外边框外围的空间。使元素盒子之间不必紧凑连接，是CSS布局的重要手段。属性：top、bottom、left、right。快捷内边距属性：margin。
12.6.1 上边距margin-top
也叫顶端边距，可设置元素的上边界，可用长度值或百分比。
长度值相当于设置顶端的绝对边距值，包括数字和单位。
百分比是设置相对于上级元素的宽度的百分比，允许负值。
auto是自动取值，即元素的默认值。
left、right、bottom用法一样。
语法：margin-top:边距值
12.6.2 外边距复合属性margin
设置1个值：应用于4个边界
设置2或3个值：则省略的值与对边相等
设置4个值：对应上下左右
语法：margin:长度值|百分比|auto
12.6.3 内边距padding
设置边框与内容间的间隔。用法和margin相同，但在快捷属性中没auto取值。
12.7 边框属性
3个属性：1.宽度 2.颜色 3.样式
12.7.1 边框样式border-style
用此属性时必须指定可见的边框。
可分别设置：上(border-top-style)、下(border-bottom-style)、左(border-left-style)、右(border-right-style)的边框。
样式值：
none 默认，无边框
dotted 点线边框
dashed 虚线边框
solid 实线边框
double 双实线边框
groove 边框具有立体感的沟槽
ridge 边框成脊形
inset 整个边框凹陷，即在边框内嵌一个立体边框
outset 整个边框凸起，即在外边框嵌入一个立体边框
语法：border-top-style:值
12.7.2 边框宽度border-wigth
设置元素边框的宽度。
border-width取值：
medium 默认宽度
thin 小于默认
thick 大于默认
单方向的取值为长度值，不能为负。
语法：
border-wigth:值
border-top-width:值
border-right-width:值
border-bottom-width:值
border-left-width:值
12.7.3 边框颜色border-color
设置边框颜色，用单词或RGB值。
语法：
border-top-color:值
border-bottom-color:值
border-left-color:值
border-right-color:值
12.7.4 边框属性border
设置元素的边框样式、宽度、颜色。
语法：
border:宽度 样式 颜色值
border-top|bottom|left|right:设置单个边框
12.8 定位属性
设置元素的位置，包括相对定位和绝对定位。
相对定位：允许元素相对于文档布局的原始位置上进行偏移。
绝对位置：允许元素与原始文档布局分离并任意定位。
12.8.1 定位方式position
设置定位方式。
取值：
static 默认值
absolute 绝对定位，需要left、right、top、bottom等属性进行绝对定位。
fixed 表示当页面滚动时，元素不随滚动。
relative 采用相对定位，对象不可层叠。
12.8.2 元素位置top、bottom、left、right
元素位置和定位方式共同设置元素的具体位置。
语法：top|bottom|left|right:auto|长度值|百分比
12.8.3 层叠顺序z-index
可设置层的先后顺序和覆盖关系。
默认，z-index值为1，表示该层位于最底层
auto遵从其父对象的定位。数字必须是无单位的整数值，可取负值。
语法：z-index:auto|数字
12.8.4 浮动属性float
设置文字在某个元素的周围，能应用于所有的元素。
取值：
none 默认，表示对象浮动
left 文字浮动在元素的右边
right 文字浮动在元素的左边
语法：float：none|left|right
12.8.5 清除属性clear
用于指定一个元素是否允许有其他元素漂浮在其周围。
取值：
none 允许两边都有浮动对象，默认
left 不允许左边有浮动对象
right 不允许右边有浮动对象
both 不允许有浮动对象
语法：clear：none|left|right|both
12.8.6 可视区域clip
可以限定只显示裁切出的区域，形状为矩形。
只要设置两点即可，一个是矩形左上角的顶点，由top和left设置完成，另一个是右下角的顶点，由bottom和right设置完成。
auto表示对象不裁剪，默认。
rect(数字、数字、数字、数字)：表示上下左右顺序，也可用auto替换，表示不裁切。
语法：clip：auto|rect(数字、数字、数字、数字)
12.8.7 层的宽度和高度width、height
语法：width|height：auto|长度值
12.8.8 超出范围overflow
设置当层内的内容超出层所能容纳的范围时的显示方式。
取值：
visible 层的大小和内容自动显示出来
auto 只在内容超出的层的范围时显示滚动条
hidden 隐藏超出层范围的内容
scroll 总是显示滚动条
语法：overflow：visible|auto|hidden|scroll
12.8.9 可见属性visibility
针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层和被嵌套的层。
取值：
inherit 继承父对象的可见性，默认
visible 无论父层对象是否可见，子层都可见
hidden 无论父层是否可见，子层都隐藏。
12.9 列表属性
设置列表项的样式、包括符号、缩进。
语法：visibility：inherit|visible|hidden
12.9.1 列表符号list-style-type
设置列表项所使用的符号类型。
取值：
disc 默认，实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写字母
upper-alpha 大写字母
none 不使用任何项目符号或编号
语法：list-style-type：值
12.9.2 图像符号list-style-image
使用图像作为列表符号。
取值：none：不指定图像 url使用图像
语法：list-style-image:none|url(图像地址)
12.9.3 列表缩进list-style-position
设置列表缩进的程度。
outside 列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
语法：list-style-position：outside|inside
12.9.4 列表复合属性list-style
当list-style-image和list-style-type都被指定时，list-style-image优先，除非list-style-image设置为none或指定url的图片不能显示。
语法：list-style：list-style-image|list-style-position|list-style-type
12.10 光标属性cursor
设置在对象上移动时鼠标指针采用的光标形状。
取值：
default 默认，通常是一个箭头
hand 竖起一只手指的手型光标
crosshair 简单的十字线光标
text 大写I的形状
help 带有问号的箭头
wait 用于标示程序忙，用户需等待的光标
e-resize 向东的箭头
ne-resize 东北的箭头
n-resize 向北的箭头
nw-resize 西北的箭头
w-resize 向西的箭头
sw-resize 西南的箭头
s-resize 向南的箭头
se-resize 东南的箭头
auto 默认。根据当前情况自动确定光标类型
12.11 滤镜属性
可对网页的对象进行特效处理。
12.11.1 不透明度alpha
设置对象内容的透明度，使图像产生透明渐变效果。
参数：
opacity 开始时的透明度，取值：0~100。默认为0，完全透明。
finishopacity 结束时的透明，取值：0~100
style 渐变的样式，0：无渐变，1：直线渐变，2：圆形渐变，3：矩形渐变
startx 设置透明渐变开始点的水平坐标，数值为对象宽度的百分比处理，默认为0
starty 设置透明渐变开始点的垂直坐标
finshx 设置透明渐变结束点的水平坐标
finishy 设置透明渐变结束点的垂直坐标
语法：filter：alpha(参数1=值，参数2=值，...)
12.11.2 动感模糊blur
设置对象的动态模糊效果。
属性取值：
add 设置是否显示原始图片
direction 设置动态模糊的方向，按顺时针的方向以45度为单位进行累积。
strength 设置动态模糊的强度，只能用整数指定，默认为5个。
语法：filter：blur(add=值，direction=值，strength=值)
12.11.3 对颜色进行透明处理chroma
将图片中的某种颜色转换为透明色，产生透明效果。
语法：filter：chroma(color=颜色)
12.11.4 阴影效果dropShadow
设置在指定的方向和位置上产生阴影效果。
取值：
color 控制阴影的颜色
offX和offY 设置阴影相对于原图移动的水平和垂直距离。
positive 阴影是否透明
语法：dropShadow(color=阴影颜色，offX=值，offY=值，positive=值)
12.11.5 对象翻转flipH、flipV
flipH设置沿水平方向翻转对象
flipV设置沿垂直方向翻转对象
语法：filter：flipH|flipV
12.11.6 发光效果 glow
设置在对象周期产生发光的效果。
color：设置发光的颜色
strength：设置发光的强度，取值：1~255，默认为5.
语法：filter：Glow(color=颜色，strength=强度值)
12.11.7 灰度处理gray
把彩色图片的色彩去掉，转为黑白图。
语法：filter：gray
12.11.8 反相invert
设置对象反相，可将图片的颜色、饱和度、亮度完全反过来。
语法：filter：invert
12.11.9 X光片效果xray
制作类似X光片的效果。
语法：filter：xray
12.11.10 遮罩效果mask
为对象产生遮罩效果，可做出向印象一样的效果。
color：设置外围遮盖的颜色，可是单词或RGB值。
语法：filter：mask(color=颜色)
12.11.11 波形滤镜wave
为对象内容创建波纹扭曲效果。
取值：
add 设置是否要把对象按照波形样式打乱
freq 设置图片上的波浪数
lightstrength 设置波浪的光照强度，取值：0~100
phase 设置波浪的起始位置
strength 设置波浪的强度大小
语法：filter：wave(add=值，freq=值，lightstrength=值，phase=值，strength=值)
13.1 Web标准与CSS布局
Web标准是W3C和其他标准化组织制定的一套规范集合。主要有3部分：结构、表现、行为。
1.结构
用于对网页中用到的信息进行分类与整理。主要用到技术：HTML、XML、XHTML。
2.表现
用于对信息进行版式、颜色、大小等控制，主要用到技术：CSS层叠样式表。
3.行为
文档内部的模型定义及交互行为的编写，用于编写交互式的文档，主要技术：DOM\ECMAScript。
DOM(文档对象模型)：浏览器与内容结构之间沟通的接口，使浏览器可访问页面的标准组件。
ECMAScript脚本语言：用于实现具体界面上对象的交互操作。
第12章 使用CSS样式表
===========================
12.1 认识CSS
CSS(层叠样式表)是一种制作网页的新技术。
样式表的首要目的是为网页上的元素精确定位，还可包网页上的内容结构和格式控制分离。
文件后缀名为.css。
12.2 使用CSS
12.2.1 CSS的基本语法
CSS语法有三部分构成：选择符、样式属性、值。
选择符：这组样式编码要针对的对象。可以是标记，也可是定义的ID或class。
属性：样式的颜色、大小等属性。
值：属性的值。形式有：1.指定范围的值。2.数值(px)或数字单位。定义多个属性时，用分号隔开。
语法：选择符{样式属性：值；样式属性：值...}
12.2.2 添加CSS的方法
添加CSS的方法有4种：链接外部样式表、内部样式表、导入外部样式表、内嵌样式。
1.链接外部样式表
链接外部样式表就是在网页中调用已经定义好的样式表来实现样式表的应用，它是一个单独的文件，在页面中用<link>标记链接到这个样式表文件。
<link>标记必须放到页面的<head>标记中。
这种方法适用大型网站的CSS样式定义，一个样式表可应用多个页面。
语法：<head>....<link rel="stylesheet" href="样式表文件名.css">...</head>
2.内部样式表
内部样式表一般在HTML文件的头部，即<head></head>标记中，以<<style></style>包含。
语法：<head>...<<style type="text/css">样式表的定义</style>...</head>
3.导入外部样式表
导入外部样式表是指在内部样式表的<style>里导入一个外部样式表。导入时用@import。
语法：<head>...<style type="text/css"> @import 样式表名.css</style>...</head>
4.内嵌样式
内嵌样式就是混合在HTML标记中使用。
使用方法：直接在HTML标记中添加style参数，而style参数的内容就是CSS的属性和值。
语法：<HTML标记 style=属性:值;...>
12.3 字体属性
12.3.1 字体font-family
设置字体样式，和font中的face一样。
若定义了多种字体，则会由前到后选择字体。即浏览器不支持字体1，则采取字体2，直到支持。若都不支持，则采用系统默认。
语法：font-family:"字体1","字体2",...
12.3.2 字号font-size
设置字体大小。
取值：
xx-small 绝对字体尺寸，最小
x-small 绝对字体尺寸，较小
small 绝对字体尺寸，小
medium 绝对字体尺寸，正常默认值。
large 绝对字体尺寸，大
x-large 绝对字体尺寸，较大
xx-large 绝对字体尺寸，最大
larger 相对字体尺寸，相对于父对象的字体尺寸，增大
smaller 相对字体尺寸，相对于父对象的字体尺寸，减小
length 采用百分比(50%)或长度值(12px)，不可为负值。百分比是基于父对象字体的尺寸。
语法：font-size:值
12.3.3 字体风格font-style
设置字体的风格，如：斜体。
取值：normal：默认、italic：斜体、oblique：偏斜体
语法：font-style:值
12.3.4 加粗字体font-weight
取值范围：normal：正常、bold：粗体、bolder：特粗体、lighter：特细体、number(数字表示):范围100~900，一般都是整百数且后面不加px。
语法：font_weight:值
12.3.5 小写字母转为大写font-variant
将小写英文转为大写。
取值：normal：正常显示、small-caps：将小写转为大写且字体较小。
语法：font-variant
设置font的复合属性，用来简化CSS代码。
复合属性包括：字体族科(样式)、字体大小、字体风格、加粗等，各值之间用空格相连。
语法：font:字面取值。
例子：font:"宋体" 12px bold
12.4 颜色和背景属性
12.4.1 颜色属性color
指定颜色，取值为单词或16进制RGB值。
语法：color:值
12.4.2 背景颜色background-color
可设置网页的背景颜色，还可设置文字的背景颜色。
语法：background-color:颜色
12.4.3 背景图像background-image
语法：background-image:url(图像地址)
12.4.4 背景重复background-repeat
可设置背景图像是否平铺，并且可以设置如何平铺。
取值范围：
no-repeat：背景不平铺
repeat：背景平铺满整个网页
repeat-x：背景水平平铺
repeat-y：背景垂直平铺
语法：background-repeat:取值
12.4.5改变背景图片大小background-size
取值：
length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
百分比：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
12.4.5 背景附件background-attchment
设置背景图像是否随对象滚动，即相对于所属的对象，如：属于页面，若拖动滚动条，是否滚动。scroll：默认值，滚动。fixed：固定。
语法：background-attachment:取值
12.4.6 背景位置background-position
设置背景图像位置，只适用于块级元素和替换元素。
替换元素：img、input、textarea、select、object
位置取值：
1.数字
X(数值) 网页横向位置，单位可是所有尺度单位。
Y(数值) 网页纵向位置，单位可是所有尺度单位。
2.关键字描述：top、bottom、left、right。4个关键字结合使用，组成不同位置。
如：
top left 左上位置
top center 靠上居中
top right 右上位置
3.百分比：百分比1 百分比2 。百分比1设置X坐标，百分比2设置Y坐标。
语法：bakcground-position:位置取值
12.4.7 背景复合属性
取值范围：背景颜色、背景图像、背景重复、背景附件、背景位置。各值之间用空格相连。
语法：background:取值
12.5 段落属性
包括：单词间隔、字符间隔、文字修饰、纵向排列、文本转换、文本排列、文本缩进、行高等。
12.5.1 单词间隔word-spacing
取值可以是normal：正常间隔，也可使用长度值px。可取负值。
语法：word-spacing:取值
12.5.2 字符间隔letter-spacing
语法：letter-spacing:取值
12.5.3 文字修饰text-decoration
设置下画线、删除线等。
normal：默认，不修饰。
underline：添加下画线。
overline：添加上划线。
line-through：添加删除线
blink：文字闪烁效果
语法：text-decoration：取值
12.5.4 垂直对齐方式vertical-align
取值范围：
baseline 默认的对齐方式
sub 文字的下标
super 文字的上标
top 垂直靠上对齐
text-top 元素和上级元素的字体向上对齐
middle 垂直居中对齐
text-bottom 元素和上级元素的字体向下对齐
语法：vertical-align:排列方式
12.5.5 文本转换text-transform
用来转换英文大小写。
取值：
none 使用原始值
capitalize 每个单词的第一个字母大写
uppercase 所有字母大写
lowercase 所有字母小写
语法：text-transform：转换值
12.5.6 水平对齐方式text-align
设置文本水平对齐方式。
取值：
left 左对齐
right 右对齐
center 居中
justify 两端对齐
语法：text-align:排列值
12.5.7 文本缩进text-indent
默认不缩进，只能设置向右缩进。可控制段落的首行缩进以及缩进的距离。可是长度值或百分比。
语法：text-indent:缩进值
12.5.8 文本行高line-height
设置文本行的高度。
语法：line-height:取值
12.5.9 处理空白white-space
设置页面内空白的处理方式。
取值：
nonrmal 默认，连续的空格合并。
pre 源代码中的空格和换行符保留(在IE6中才能正确显示)
nowrap 强制在同一行显示
语法：white-space:取值
12.5.10 文本反排unicode-bidi、direction
这两个属性经常一起使用。
1.unicode-bidi
取值：
bidi-override 严格按照direction属性的值重排序
normal 默认
embed 对象打开附加的嵌入层
语法：unicode-bidi:取值
2.direcrtion
取值：
ltr 从左到右顺序阅读
rtl 从右到左顺序阅读
inherit 文本流的值不可继承
12.6 外边距与内边距属性
外边距属性可设置：元素周围的边界宽度，包括上下左右的距离。
内边距属性可设置：边框和元素内容之间的间距，包括上下左右的边距值。
这两个属性的值都是数值，可为长度，也可为百分比。
CSS盒子模式：Content(内容)、padding(内边距)、border(边框)、margin(外边距)。
Centent(内容区)：是盒子的主要信息内容，可是文本、图片等。内容区是必选的。
padding(内边距)：内容区和边框之间的距离，可看作内容区的背景区域。属性：top、bottom、left、right。快捷内边距属性：padding。
border(边框)：属性：border-style、border-width、border-color。快捷属性：border。
margin(外边距)：位于盒子的最外围，不是一条线，而是添加外边框外围的空间。使元素盒子之间不必紧凑连接，是CSS布局的重要手段。属性：top、bottom、left、right。快捷内边距属性：margin。
12.6.1 上边距margin-top
也叫顶端边距，可设置元素的上边界，可用长度值或百分比。
长度值相当于设置顶端的绝对边距值，包括数字和单位。
百分比是设置相对于上级元素的宽度的百分比，允许负值。
auto是自动取值，即元素的默认值。
left、right、bottom用法一样。
语法：margin-top:边距值
12.6.2 外边距复合属性margin
设置1个值：应用于4个边界
设置2或3个值：则省略的值与对边相等
设置4个值：对应上下左右
语法：margin:长度值|百分比|auto
12.6.3 内边距padding
设置边框与内容间的间隔。用法和margin相同，但在快捷属性中没auto取值。
12.7 边框属性
3个属性：1.宽度 2.颜色 3.样式
12.7.1 边框样式border-style
用此属性时必须指定可见的边框。
可分别设置：上(border-top-style)、下(border-bottom-style)、左(border-left-style)、右(border-right-style)的边框。
样式值：
none 默认，无边框
dotted 点线边框
dashed 虚线边框
solid 实线边框
double 双实线边框
groove 边框具有立体感的沟槽
ridge 边框成脊形
inset 整个边框凹陷，即在边框内嵌一个立体边框
outset 整个边框凸起，即在外边框嵌入一个立体边框
语法：border-top-style:值
12.7.2 边框宽度border-wigth
设置元素边框的宽度。
border-width取值：
medium 默认宽度
thin 小于默认
thick 大于默认
单方向的取值为长度值，不能为负。
语法：
border-wigth:值
border-top-width:值
border-right-width:值
border-bottom-width:值
border-left-width:值
12.7.3 边框颜色border-color
设置边框颜色，用单词或RGB值。
语法：
border-top-color:值
border-bottom-color:值
border-left-color:值
border-right-color:值
12.7.4 边框属性border
设置元素的边框样式、宽度、颜色。
语法：
border:宽度 样式 颜色值
border-top|bottom|left|right:设置单个边框
12.8 定位属性
设置元素的位置，包括相对定位和绝对定位。
相对定位：允许元素相对于文档布局的原始位置上进行偏移。
绝对位置：允许元素与原始文档布局分离并任意定位。
12.8.1 定位方式position
设置定位方式。
取值：
static 默认值
absolute 绝对定位，需要left、right、top、bottom等属性进行绝对定位。
fixed 表示当页面滚动时，元素不随滚动。
relative 采用相对定位，对象不可层叠。
12.8.2 元素位置top、bottom、left、right
元素位置和定位方式共同设置元素的具体位置。
语法：top|bottom|left|right:auto|长度值|百分比
12.8.3 层叠顺序z-index
可设置层的先后顺序和覆盖关系。
默认，z-index值为1，表示该层位于最底层
auto遵从其父对象的定位。数字必须是无单位的整数值，可取负值。
语法：z-index:auto|数字
12.8.4 浮动属性float
设置文字在某个元素的周围，能应用于所有的元素。
取值：
none 默认，表示对象浮动
left 文字浮动在元素的右边
right 文字浮动在元素的左边
语法：float：none|left|right
12.8.5 清除属性clear
用于指定一个元素是否允许有其他元素漂浮在其周围。
取值：
none 允许两边都有浮动对象，默认
left 不允许左边有浮动对象
right 不允许右边有浮动对象
both 不允许有浮动对象
语法：clear：none|left|right|both
12.8.6 可视区域clip
可以限定只显示裁切出的区域，形状为矩形。
只要设置两点即可，一个是矩形左上角的顶点，由top和left设置完成，另一个是右下角的顶点，由bottom和right设置完成。
auto表示对象不裁剪，默认。
rect(数字、数字、数字、数字)：表示上下左右顺序，也可用auto替换，表示不裁切。
语法：clip：auto|rect(数字、数字、数字、数字)
12.8.7 层的宽度和高度width、height
语法：width|height：auto|长度值
12.8.8 超出范围overflow
设置当层内的内容超出层所能容纳的范围时的显示方式。
取值：
visible 层的大小和内容自动显示出来
auto 只在内容超出的层的范围时显示滚动条
hidden 隐藏超出层范围的内容
scroll 总是显示滚动条
语法：overflow：visible|auto|hidden|scroll
12.8.9 可见属性visibility
针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层和被嵌套的层。
取值：
inherit 继承父对象的可见性，默认
visible 无论父层对象是否可见，子层都可见
hidden 无论父层是否可见，子层都隐藏。
12.9 列表属性
设置列表项的样式、包括符号、缩进。
语法：visibility：inherit|visible|hidden
12.9.1 列表符号list-style-type
设置列表项所使用的符号类型。
取值：
disc 默认，实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写字母
upper-alpha 大写字母
none 不使用任何项目符号或编号
语法：list-style-type：值
12.9.2 图像符号list-style-image
使用图像作为列表符号。
取值：none：不指定图像 url使用图像
语法：list-style-image:none|url(图像地址)
12.9.3 列表缩进list-style-position
设置列表缩进的程度。
outside 列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
inherit 从父元素继承
语法：list-style-position：outside|inside
12.9.4 列表复合属性list-style
当list-style-image和list-style-type都被指定时，list-style-image优先，除非list-style-image设置为none或指定url的图片不能显示。
语法：list-style：list-style-image|list-style-position|list-style-type
12.10 光标属性cursor
设置在对象上移动时鼠标指针采用的光标形状。
取值：
default 默认，通常是一个箭头
hand 竖起一只手指的手型光标
crosshair 简单的十字线光标
text 大写I的形状
help 带有问号的箭头
wait 用于标示程序忙，用户需等待的光标
e-resize 向东的箭头
ne-resize 东北的箭头
n-resize 向北的箭头
nw-resize 西北的箭头
w-resize 向西的箭头
sw-resize 西南的箭头
s-resize 向南的箭头
se-resize 东南的箭头
auto 默认。根据当前情况自动确定光标类型
12.11 滤镜属性
可对网页的对象进行特效处理。
12.11.1 不透明度alpha
设置对象内容的透明度，使图像产生透明渐变效果。
参数：
opacity 开始时的透明度，取值：0~100。默认为0，完全透明。
finishopacity 结束时的透明，取值：0~100
style 渐变的样式，0：无渐变，1：直线渐变，2：圆形渐变，3：矩形渐变
startx 设置透明渐变开始点的水平坐标，数值为对象宽度的百分比处理，默认为0
starty 设置透明渐变开始点的垂直坐标
finshx 设置透明渐变结束点的水平坐标
finishy 设置透明渐变结束点的垂直坐标
语法：filter：alpha(参数1=值，参数2=值，...)
12.11.2 动感模糊blur
设置对象的动态模糊效果。
属性取值：
add 设置是否显示原始图片
direction 设置动态模糊的方向，按顺时针的方向以45度为单位进行累积。
strength 设置动态模糊的强度，只能用整数指定，默认为5个。
语法：filter：blur(add=值，direction=值，strength=值)
12.11.3 对颜色进行透明处理chroma
将图片中的某种颜色转换为透明色，产生透明效果。
语法：filter：chroma(color=颜色)
12.11.4 阴影效果dropShadow
设置在指定的方向和位置上产生阴影效果。
取值：
color 控制阴影的颜色
offX和offY 设置阴影相对于原图移动的水平和垂直距离。
positive 阴影是否透明
语法：dropShadow(color=阴影颜色，offX=值，offY=值，positive=值)
12.11.5 对象翻转flipH、flipV
flipH设置沿水平方向翻转对象
flipV设置沿垂直方向翻转对象
语法：filter：flipH|flipV
12.11.6 发光效果 glow
设置在对象周期产生发光的效果。
color：设置发光的颜色
strength：设置发光的强度，取值：1~255，默认为5.
语法：filter：Glow(color=颜色，strength=强度值)
12.11.7 灰度处理gray
把彩色图片的色彩去掉，转为黑白图。
语法：filter：gray
12.11.8 反相invert
设置对象反相，可将图片的颜色、饱和度、亮度完全反过来。
语法：filter：invert
12.11.9 X光片效果xray
制作类似X光片的效果。
语法：filter：xray
12.11.10 遮罩效果mask
为对象产生遮罩效果，可做出向印象一样的效果。
color：设置外围遮盖的颜色，可是单词或RGB值。
语法：filter：mask(color=颜色)
12.11.11 波形滤镜wave
为对象内容创建波纹扭曲效果。
取值：
add 设置是否要把对象按照波形样式打乱
freq 设置图片上的波浪数
lightstrength 设置波浪的光照强度，取值：0~100
phase 设置波浪的起始位置
strength 设置波浪的强度大小
语法：filter：wave(add=值，freq=值，lightstrength=值，phase=值，strength=值)
13.1 Web标准与CSS布局
Web标准是W3C和其他标准化组织制定的一套规范集合。主要有3部分：结构、表现、行为。
1.结构
用于对网页中用到的信息进行分类与整理。主要用到技术：HTML、XML、XHTML。
2.表现
用于对信息进行版式、颜色、大小等控制，主要用到技术：CSS层叠样式表。
3.行为
文档内部的模型定义及交互行为的编写，用于编写交互式的文档，主要技术：DOM\ECMAScript。
DOM(文档对象模型)：浏览器与内容结构之间沟通的接口，使浏览器可访问页面的标准组件。
ECMAScript脚本语言：用于实现具体界面上对象的交互操作。
0 0
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- css基础
- CSS基础
- css基础
- css基础
- CSS基础
- css基础
- css基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- Android学习笔记 十六 使用RxBinding响应控件的异步事件
- HTML基础总结
- （五）组合查询-机房收费系统
- 经典sql语句
- LCD简介
- CSS基础
- C++获取磁盘符
- linux之删除vi残留的swp文件
- Linux下查看文件和文件夹大小
- UVA 1593 代码格式（stl）
- debian系 杂记
- Java面试宝典2013版（11版块1000题）
- kanzi状态机实现
- android之从0开始
