[Title]css制作教程(中)[EndTitle] [Content]
[区块]属性共有六项：
「单词间距」（word-spacing），主要用于控制文字间相隔的距离。有正常（normal）和值（自定义间隔值）两种选择方式。当选择值时，可用的单位有英吋（in）、厘米（cm）、毫米（mm）、点数(pt）、12pt字(pc）、字体高（em）、字体x有高（ex）像素（px）。 「字母间距」（letter-spacing），其作用与字符间距类似，也有正常（normal）和值（自定义间隔值）两种选择方式。 「垂直对齐」（vertical-align），控制文字或图像相对于其母体元素的垂直位置。如将一个2×3像素的GIF图像同其母体元素文字的顶部垂直对齐，则该GIF图像将在该行文字的顶部显示。共有基线（baseline，将元素的基准线同母体元素的基准线对齐）、下标（sub，将元素以下标的形式显示）,上标（super，将元素以上标的形式显示）、顶部（top ，将元素顶部同最高的母体元素对齐）、文本顶对齐（text-top，将元素的顶部同母体元素文字的顶部对齐）、中线对齐（middle，将元素的中点同母体元素的中点对齐）、底部（bottom，将元素的底部同最低的母体元素对齐）及值（自定义）等9种选择。 「文本对齐」（text-align），设置块的水平对齐方式。共有左对齐（left）、右对齐（right）、居中（center）和均分（justify）等4种选择。 「文字缩进」（text-indent），控制块的缩进程度。 「空白间距」（white-space），在HTML中，空格是被省略的；在CSS中则使用属性（white-space）控制空格的输入。共有正常（normal）、保留（pre）和不换行（nowrap）等3种选择。
[边框]的属性有3项：
「宽」（border-width），控制边框的宽度，其中分为4个属性：border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width左边框的宽度。 「颜色」（border-color），设置各边框的颜色。若要使边框的四边显示不同的颜色，可在设置中分别列出。如， p{: #ff0000 #009900 #0000ff #55cc00} 浏览器将四种颜色依次理解为：上边框、右边框、底边框和左边框（自上开始顺时针）。 「样式」（border-style），设定边框的样式，共有无（none）、虚线（dotted）、点划线线（dotted）、点划线（dashed）、实线（solid）、双线（double ）、槽状（grove）、脊状（ridge）、凹陷（inset）和凸起（outset）等9种。
「盒子」属性共有6项：
「宽」（width），确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内容多少。 「高」（height），确定盒子本身的高度。 「浮动」（float），设置块元素的浮动效果。 「清除」（clear），用于清除设置的浮动效果。 「边距」（margin），控制围绕边框的边距大小。其中包含4个属性：margin-top控制上边距的宽度、margin-right控制右边距的宽度、margin-bottom控制下边距的宽度、margin-left控制左边距的宽度。 「边界」（padding），确定围绕块元素的空格填充数量，其中包含4个属性「padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白宽度、padding-left控制左留白的宽度。
[列表]属性共有3项：
「类型」（list-style-type），确定列表每一项前使用的符号，共有圆点（disc）、圆圈（circle）、方形（square）、数字（decimal）、小写罗马数字（lower-roman ）、大写罗马数字（upper-roman）、小写字母（lower-alpha）和大写字母（upper－alpha）等8种。 「项目图像」（list-style-image），其作用是将列表前面的符号换为图形。 「位置」（list-style-position），用于描述列表位置，有内（outside）和外（inside）两种选择。
[定位]属性共有6项：
「类型」（position），用于确定定位的类型，共有绝对（absolute）、相对（relative）和静态（static）等3种选择。 「Z轴」（z-index），用于控制网页中块元素的叠放顺序，可为元素设置重叠效果。该属性的参数值使用纯整数，值为0时，元素在最下层，适用于绝对定位或相对定位的元素。 「显示」（visibility）使用该属性可将网页中的元素隐藏，共有继承（inherit，继承母体要素的可视性设置）、可见（visible）和隐藏（hidden）等3种选择。 「溢出」（overflow），在确定了元素的高度和宽度后，如果元素的面积不能全部显示元素中的内容时，该属性做一日和尚撞一天钟起作用了。其中共有可见（visible，扩大面积以显示所有内容）、隐藏（hidden，隐藏超出范围的内容）、滚动（scroll，在元素的右边显示一个滚动条）和自动（auto，当内容超出元素面积时，显示滚动条）等4种选择。 「定位」，当为元素确定了绝对定位类型后，该组属性决定元素在网页中的具体位置。该组属性包含4个子属性，分别是「左」（属性名为「left」，控制元素左边的起始位置）、「上」（属性名为「top」，控制元素上面的起始位置）、 「宽」或「高」（与「盒子」类属性面板中「宽」或「高」的属性作用相同）。 「剪辑」（clip），当元素被指定为绝对定位类型后，该属性可以把元素区域切成各种形状，但目前提供的只有方形一种。属性值为rect(top right bottom left)，即： rect(top right bottom left)，属性值的单位为任何一种长度单位。
[扩展]属性共有两部分：
「分页」，其中两个属性的作用是为打印的页面设置分页符。 「之前」（page-break-before）；「之后」（page-break-after）。 「视觉效果」，其中两个属性的作用是为网页中的元素施加特殊效果。 「光标」（cusor），可以指定在某个元素上要使用的光标形状，共有15种选择方式，分别代表鼠标在Windows操作系统中的各种形状。另外它还可以指定指针图标的URL地址；「滤镜」（fiter），可以为网页中元素施加各种奇妙的滤镜效果，共包含有16种滤镜
. 基本语法 CSS的定义是由三个部分构成：选择符（*or），属性（properties）和属性的取值（value）。 基本格式如下：
*or {property: value} （选择符 {属性：值}） 选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：
body {color: black}
选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。
如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：
p {font-family: “sans serif“}
（定义段落字体为sans serif）
如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：
p {text-align: center; color: red}
（段落居中排列；并且段落中的文字为红色）
为了使你定义的样式表方便阅读，你可以采用分行的书写格式：
p { text-align: center; color: black; font-family: arial }
（段落排列居中，段落中文字为黑色，字体是arial）
你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：
h1, h2, h3, h4, h5, h6 { color: green }
（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）
p, table{ font-size: 9pt }
（段落和表格里的文字尺寸为9号字）
效果完全等效于：
p { font-size: 9pt } table { font-size: 9pt }
用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：
p.right {text-align: right} p.center {text-align: center}
然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：
这个段落向右对齐的
这个段落是居中排列的
这个段落向右对齐的
这个段落是居中排列的
注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。
类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：
.center {text-align: center}
（定义.center的类选择符为文字居中排列） 这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：
这个段落也是居中排列的
注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。
在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。 ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：
这个段落向右对齐
定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id=“intro“的元素：
{ font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }
（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明） 下面这个例子，ID属性只匹配id=“intro“的段落元素：
p#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }
注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。
可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：
table a { font-size: 12px }
在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。
层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记： div { color: red; font-size:9pt} ……
这个段落的文字为红色9号字
（P元素里的内容会继承DIV定义的属性） 注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。
另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：
div { color: red; font-size:9pt} p {color: blue} ……
这个段落的文字为蓝色9号字
我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。
不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：
p { color: #FF0000!important } .blue { color: #0000FF}
我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。
你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以“/“ 开头，以“/“ 结尾，如下：
/ 定义段落样式表 / p { text-align: center; / 文本居中排列 / color: black; / 文字为黑色 / font-family: arial / 字体为arial / }
/ 定义段落样式表 / p { text-align: center; / 文本居中排列 / color: black; / 文字为黑色 / font-family: arial / 字体为arial / }
前面我们了解了CSS的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。
链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的
区内，如下： …… ……上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。
一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。
样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记，mystyle.css这个文件的内容如下：
hr {color: sienna} p {margin-left: 20px} body {background-image: url(“images/back40.gif“)} /定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件/
内部样式表是把样式表放到页面的
区里，这些定义的样式就应用到页面中了，样式表是用 ……注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（<!-- 注释 -->）隐藏内容而不让它显示：
…… ……接下一节
[EndContent]