1、第10章使用CSS格式化网页,清华大学出版社,主要内容,CSS在页面风格设计中的作用,用多个HTML页面调用一个CSS文件,用DIV+CSS的方式来写HTML页面,用CSS控制背景图片的显示方式,用CSS设置滚动条的样式,用CSS设置滚动条的样式,10.1理解CSS,10.1.1 CSS的简介 10.1.2 CSS构造,CSS的简介,CSS的英文名为Cascading Style Sheet，译成中文的意思为层叠样式表。 样式就是格式，对于网页来说，像网页显示的文字的大小、颜色以及图片位置以及段落、列表等，都是网页显示的样式。层叠就是指当HTML文件引用多个CSS样式时，如果CSS的定义发生冲
2、突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优选原则”。 CSS能将样式的定义与HTML文件内容分离。只要建立定义样式的CSS文件，并且让所有的HTML文件都来调用CSS文件所定义的样式，如果要改变HTML文件中任意部分的显示风格时，只要把CSS文件打开，更改样式就可以了。,CSS构造,构造样式规则 样式表的每个规则都有两个主要部分：选择符（selector）和声明（declaration）。选择器决定哪些因素要受到影响，声明由一个或多个属性值对组成。 基本语法：selector属性:属性值;属性:属性值 语法说明： selector表示希望进行格式化的
3、元素； 声明部分包括在选择器后的大括号中； 用“属性:属性值”描述要应用的格式化操作； 声明中的多个属性值对之间必须用分号隔开。,CSS构造,在样式规则中添加注释 在样式表规则中添加注释有助于记住复杂的样式规则的作用，应用的范围等，便于进行维护和应用。例如，下面是一个添加注释的样例。/*此标记应用在文档中*/ h1color:red;background:yellow; 注意：注释不能嵌套。,CSS构造,继承 继承是CSS的一个主要特征，许多CSS属性不但影响选择符所定义的元素，而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。下面举例说明。,CSS的继承性CS
4、S的继承性,10.2 样式表的定义与使用,在CSS里可以使用四种不同的方法，将样式表的功能加到网页里。 直接定义标记的style属性 定义内部样式表 嵌入外部样式表 链接外部样式表,定义标记的style属性,将CSS样式定义在HTML标记内的，这是最简单的样式定义方法。 基本语法：语法说明： 标记：HTML标记，如body、table、p等； 标记的style定义只能影响标记本身； style的多个属性之间用分号分割； 标记本身定义的style优先于其他所有样式定义。,直接定义标记的style属性此行文字被style属性定义为蓝色显示 此行文字没有被style属性定义,示例代码第一个段落标记被
5、直接定义了style属性，此行文字将显示18像素大小，蓝色字体；而第二个段落标记没有被定义，将按照默认设置来显示文字样式。结果如图10-2所示。,定义内部样式表,内部样式表允许在他们所应用的HTML文档的顶部设置样式，后在整个HTML文件中直接调用使用该样式的标记。 基本语法： ,定义内部样式表,语法说明： 元素是用来说明所要定义的样式，type属性是指style元素以CSS的语法定义； 隐藏标记：避免了因浏览器不支持CSS而导致错误，加上这些标记后，不支持CSS的浏览器，会自动跳过此段内容，避免一些错误； 选择符1选择符n：选择符可以使用HTML标记的名称，所有的HTML标记都可以作为选择符
6、； 样式属性主要是关于对选择符格式化显示风格的样式属性名称； 属性值设置对应样式属性的值。,定义内部样式表,定义内部STYLE属性此行文字被内部的样式定义为蓝色显示 此行文字没有被内部的样式定义 ,定义内部样式表,嵌入外部样式表,嵌入外部样式表就是在HTML代码的主体中直接导入样式表的方法。 基本语法： import url(“外部样式表的文件名称“);语法说明： import语句后的“;”号，一定要加上！ 外部样式表的文件名称是的是要嵌入的样式表文件名称，后缀为.css； import应该放在style元素的任何其他样式规则前面。,嵌入外部样式表,嵌入外部样式表import url(“sty
7、le.css“)；此行文字被style属性定义为蓝色显示 此行文字没有被style属性定义,嵌入外部样式表,示例代码调用的外部style.css文件的内容是： .p1font-size:18px; color:blue 执行结果如图,链接外部样式表,除了以嵌入外部样式表的方法达到在HTML文件中引用样式表的目的外，还可以用链接的方式，使用外部CSS文件。 基本语法：语法说明： 链接外部样式表时，不需要使用style元素，只需直接用标记放在标记中就可以了； 同样外部样式表的文件名称是要嵌入的样式表文件名称，后缀为.css； CSS文件一定是纯文本格式； 在修改外部样式表时，引用它的所有外部页面也
8、会自动地更新； 外部样式表中的URL相对于样式表文件在服务器上的位置； 外部样式表优先级低于内部样式表； 可以同时链接几个样式表，靠后的样式表优先于靠前的样式表。,链接外部样式表,嵌入外部样式表此行文字被style属性定义为蓝色显示 此行文字没有被style属性定义,10.3 定义选择符,选择符决定了格式化将应用于哪些元素。最简单的选择符可以对给定类型的所有元素进行格式化，更复杂的选择符可以根据元素的class或id、上下文、状态等来应用格式化规则。,按照名称选择元素,选择要格式化的元素最常用的标准可能是元素的名称或类型。例如，可以让所有p元素显示为红色、且大小为16像素。 下面的示例中除非指
9、定其他情况，指定类型的所有元素（这里是标记p）都将被格式化。, pfont-size:16px; color:red; ,按照id和class选择元素,如果已经在页面元素中标识了id或class属性，那么就可以在选择器定义中使用，从而对被标识的元素进行格式化。,按照id和class选择元素基本语法,或者,语法说明 可以单独使用classname和idname选择器，也可以与其他选择器标准一起使用。例如，“.newscolor:red;”会影响所有标记中定义了“class=“news“”类的元素，而“h1.newscolor:red;”只影响属性中定义了“class=“news“”类的h1元素。
10、,示例, ID和类的定义此段文字以默认方式显示此段文字以16像素大小，红色字体显示此段文字以26像素大小，玫红色字体显示,按照上下文选择元素,在CSS中，可以根据元素的祖先元素、父元素或同胞元素来定位它们。祖先元素就是包含所关心元素（希望样式影响的元素）的任何元素，父元素就是直接包含所关心元素的元素。,基本语法：祖先元素 祖先元素 显示元素属性名=属性值;. 语法说明： 祖先元素是希望格式化的元素的祖先元素的名称，上面程序中是“#divdemo”； 如果还需要继续指定后续的祖先元素，则元素名中加空格； 最后是最终希望格式化影响的元素名，上面程序中指定了影响段落标记P，也可以是前面讲过的一个ID
11、（#p1）或者CLASS（.p1)，例如：,如果祖先元素和影响元素是父子关系，则可采取下面的定义风格：,#divdemo #p1font-size:26px; color:#FF0066; #divdemo .p1font-size:26px; color:#FF0066;,#divdemo pfont-size:26px; color:#FF0066;,选择元素的一部分,还可以只选择元素的第一个字母或第一行进行格式化。 基本语法： 选择符:first-letterfont-size:26px; color:#FF0066;选择符:first-linefont-size:26px; color
12、:#FF0066; 语法说明： 下面是关于此规定的一个实例。 p:first-letterfont-size:26px; color:#FF0066;p:first-linefont-size:26px; color:#FF0066;,指定元素组,多个元素使用同样的样式规则，可以组合使用选择器。例如：h1,h2,divcolor:#FF0066;这里规定了标记h1、h2和div的color都是同样的颜色。组合选择其中的元素名中间要用“,”隔开。,h1,h2,divcolor:#FF0066;,10.4 文字与排版样式的使用,CSS 的网页排版功能十分强大，使用 CSS，不仅可以控制文字的大小、
13、颜色、对齐方式和字体，还可以控制行高、字母间距、大小写（全部大写、首字大写、小型大写或全部都小写等），甚至还可以控制文本的第一个字或第一行的样式。 不仅如此，只需要在某一位置创建样式规则（即样式表），就可以让这些样式规则应用于整个网站的所有文本（当然也可以为特定的段落或网页的某些区域创建特别的样式表）。此外，任何时候发现需要让网站上的文字增大，或是需要改变正文的字体，只需更改样式表中的“值”即可。,长度、百分比单位,在CSS文字、排版、边界等的设置上，常常会在属性值后加上长度或者百分比单位，通过本小节的学习将掌握两种单位的使用。,长度单位,百分比单位,百分比单位也是一种常用的相对类型，通常的参
14、考依据为元素的font-size属性，下面的语句将设置margin属性值为font-size的150%，如下所示： pmargin:150%此处表示的是相对于font-size 高度的150%。需要注意的是，不管使用哪种单位，在设置的时候，数值与单位间不需要加上空格。,10.4.2 文字样式属性,font-family设置字体 font-size设置字号 font-style设置字体样式 font-weight设置字体加粗 font-variant设置字体变体 text-decoration设置文字效果属性 font设置综合字体属性,font-family设置字体,除了利用HTML的标记来设置
15、字体外，也可以用CSS的font-family属性来设置需要的字体。 基本语法： font-family:字体一，字体二，字体三 语法说明： 上面的语法定义了几种不同的字体，并用逗号隔开，当浏览器找不到字体一时，将会用字体二代替，以此类推，当浏览器完全找不到字体时，则使用默认字体（宋体）。,设置字体设置字体的顺序为，黑体，草书，宋体 设置字体的顺序为，琥珀，草书，宋体 ,font-size设置字号,font-size设置字号 可以用标记来设置文字的大小。在CSS里，利用font-size属性来设置字号。 基本语法： font-size：绝对大小 | 相对大小 语法说明： 绝对大小：是以pt为单
16、位，以绝对大小的方式来设置字号。可以指定精确的大小，如16px，或者使用关键字来指定大小，如：font-size属性的关键字（xx-small | x-small | small | medium | large | x-large | xx-large）。不过这些关键字，在不同的设备下，可能会显示不同的字号。, 设置字号的绝对大小设置字号为xx-small 设置字号为x-small 设置字号为small 设置字号为medium 设置字号为large 设置字号为x-large,相对大小：利用百分比或者em(当前字母中，字母的宽度)，以相对父元素大小的方式来设置大小。例如指定font-size的
17、属性值时父元素的1.5em或150%，或者使用相对关键字(larger | smaller)来指定。, 设置字号的相对大小设置字号的相对大小 设置字号的相对大小 ,font-style设置字体样式,在HTML里，可以使用标记，将网页文字设置为斜体。而在CSS里，则可以利用font-style属性来达到字体变化的效果。 基本语法： font-style:normal | italic | oblique 语法说明： normal为默认值，一般以浏览器默认的字体来显示，italic为斜体效果，oblique为歪斜体效果。,font-weight设置字体加粗,在HTML里，可以利用标记或者标记将文字
18、设置为粗体。在CSS里，则可以利用font-weight属性来设置字体的粗细。 基本语法： font-weight：normal | blod | bolder | lighter | 100-900 语法说明： normal表示默认字体，bold表示粗体，bolder表示粗体再加粗，lighter表示比默认字体还细，100-900共分为九个层次（100、200、900），数字越小字体越细、数字越大字体越粗。, font-weight字体加粗 此段文字正常显示此段文字以blod方式显示此段文字以bolder方式显示此段文字以lighter方式显示 此段文字以900方式显示,font-varia
19、nt设置字体变体,在HTML里设置字体变体，实际就是设置字体是否显示为小型的大写字母。而CSS中的字体变体主要用于设置英文字体。 基本语法： font-variant:normal | small-caps 语法说明： normal表示默认值，small-caps表示英文字体显示为小型的大写字母。, font-variant字体变体font-variant:normal 字体变体font-variant:small-caps 字体变体 ,text-decoration设置文字效果属性,text属性所提供的text-decoration属性，主要完成文字加下划线、顶线、删除线及文字闪烁效果。 基
20、本语法： text-decoration：underline | overline | line-through | blink | none 语法说明：,文字效果属性文字加下划线文字加删划线 ,font设置综合字体属性,font属性是一种复合属性，可以同时对文字设置多个属性。包括字体族科、大小、风格、加粗及字体变体。 基本语法： font: font-style font-weight font-variant font-size/line-height font-family 语法说明： 如果要利用font属性，同时设置多个文字属性时，属性与属性之间必须利用空格隔开； 前三个属性次序不定或
21、者省略，默认为normal； 大小和字体系列必须显式地指定，先设置大小，再设置字体系列，字体系列如果有多个，以逗号分割； 行高必须直接出现在字体大小后面，中间用斜杠分开，行高是可选的属性； font属性是继承的。,font字体设置本行文字以黑体25像素大小加粗来显示本行文字以黑体斜体25像素大小加粗来显示 ,10.4.3 排版样式属性,text-indent首行缩进属性 letter-spacing字符间距属性 line-height行距属性 text-align水平对齐属性 text-transform转换英文大小写,利用text-transform属性可以转英文大小写。 基本语法： tex
22、t-transform：uppercase | lowercase | capitalize | none语法说明： uppercase表示使所有单词的字母都大写，lowercase表示使所有单词的字母都小写，capitalize表示使每个单词的首字母大写，none表示默认值。,text-indent首行缩进属性,text-indent首行缩进属性，通常被用来指定一个段落，第一行文字缩进的距离。 基本语法： text-indent：长度单位 | 百分比单位 语法说明：,letter-spacing字符间距属性,letter-spacing字符间距属性，可以设置字符与字符间的距离。 基本语法：
23、letter-spacing：normal | 长度单位 语法说明： normal表示默认值，此处的长度单位可使用负数,line-height行距属性,line-height是用来设置行与行之间的距离。 基本语法： line-height：normal | 比例 | 长度单位 | 百分比 语法说明： normal为默认值，比例是倍数，相对于元素font-size的几倍大小，长度单位和百分比请参考10.4.1的说明，此处的长度单位可使用负数。,text-align水平对齐属性,text-align属性可以控制文字段落的水平对齐方式。 基本语法： text-align：left | right |
24、 center | justify 语法说明： left为默认值，right表示右对齐，center表示居中对齐，justify表示左右对齐。,text-transform转换英文大小写,利用text-transform属性可以转英文大小写。 基本语法： text-transform：uppercase | lowercase | capitalize | none 语法说明： uppercase表示使所有单词的字母都大写，lowercase表示使所有单词的字母都小写，capitalize表示使每个单词的首字母大写，none表示默认值。,10.5 背景与颜色的使用,设置颜色方法 背景颜色的属性
25、 背景图片的属性,设置颜色方法,利用RGB设置颜色 利用RGB函数设置颜色 利用颜色名称设置颜色,利用RGB设置颜色,在HTML网页，或者CSS样式的颜色定义里，设置颜色的方式是利用RGB概念，在RGB的概念中，所有颜色都是由红色、绿色、蓝色混合而成。 CSS则有四种定义颜色的方法： 十六进制数 RGB函数（整数） RGB函数（百分比） 颜色名称,在计算机中，定义每种颜色的强度都是由0255。当所有颜色的强度为0时，将产生黑色，当所有颜色的强度都是255时，将产生白色。在HTML中，要使用RGB来指定颜色时，将使用#号，加上6个十六进制的数字来表示，表示方法如下：#RRGGBB 其中R，G，B
26、这三个字母的值范围0，1，2，3，4，5，6，7，8，9，a，b，c，d，e，f这16个数字。比如要表示红色的值，则表示方法为：#FF0000。,利用RGB函数设置颜色,在CSS里，可以利用RGB函数，加上三组范围为0255的数字来设置所要的颜色。因为每组数字可表现256种颜色强度，所以利用RGB函数共可表达出256*256*256种颜色表示方法如下：RGB(R，G，B)其中，R，G，B代表的整数范围为0255。 比如现在要表示红色的值，则表示方法为：RGB（255，0，0）。,利用颜色名称设置颜色,背景颜色的属性,在HTML里，可以使用bgcolor属性来设置网页的背景颜色，而在CSS里，不
27、仅可以用background-color属性来设置网页背景颜色的变化，还可以设置文字的背景颜色。 基本语法： background-color：关键字 | RGB值 | transparent语法说明： transparent表示透明的意思，也是浏览器的默认值。,背景颜色的属性此行文字以红色背景显示n此行文字以黄色背景显示,背景图片的属性,background-image插入背景图片 background-attachment插入背景附件 background-repeat设置重复背景图片 background-position设置背景图片位置,background-image插入背景图片,除
28、了可以设置背景的颜色以外，还可以用background-image来设置背景图片。 基本语法： background-image:url | none 语法说明： url表示要插入背景图片的路径，路径可以是绝对路径也可以是相对路径，none表示不加载图片。,background-attachment插入背景附件,background-attachment背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动。 基本语法： background-attachment：scroll | fixed 语法说明： scroll表示背景图片是随着滚动条的移动而移动，是浏览器的默认值；fixed表示
29、背景图片固定在页面上不动，不随着滚动条的移动而移动。,background-repeat设置重复背景图片,background-img属性设置网页的背景图片重复显示方式。 基本语法： background-repeat：repeat | repeat-x | repeat-y | no-repeat 语法说明： repeat表示背景图片在水平和垂直方向平铺，是默认值；repeat-x表示背景图片在水平方向平铺；repeat-y表示背景图片在垂直方向平铺；no-repeat表示背景图片不平铺。,background-position设置背景图片位置,当在网页中插入背景图片时，每一次插入的位置，都
30、是位于网页的左上角，所以通过background-position属性来改变图片的插入位置。 基本语法： background-position：百分比 | 长度 | 关键字 语法说明： 利用百分比和长度来设置图片位置时，都要指定两个值，并且这两个值都要用空格隔开。一个代表水平位置，一个代表垂直位置。水平位置的参考点是网页页面的左边，垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right，关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。,10.6 美化网页与超链接的设置,设置网页链接属性设置滚动条属性 设置光标属
31、性,设置网页链接属性,在HTML里，可以使用标记来建立网页的链接，CSS允许按照链接的状态来设置网页链接文字的效果。语法如表10-5：,设置滚动条属性,有些网页的窗口滚动条上，增加了许多漂亮的颜色，其实这些滚动条的颜色效果，是利用CSS所制作出来的。下图显示了滚动条的区域划分。,设置滚动条属性,滚动条的属性参见表10-6。,设置光标属性,在浏览网页时，常看到不同的光标，有的代表程序正在执行，有的代表文字位置光标，或者是超链接光标等，在HTML里并没有提供设置光标的功能，但在CSS的cursor属性刚好可以弥补这个缺点，设置出许多变化的光标图形。 基本语法： cursor:s-resize 语法
32、说明： s-resize ：cursor属性共提供了16种属性值，具体见课本表10-7所示。,10.7 矩形模块的概念与使用,矩形模块 设置边界 设置元素边框 设置元素内边界,矩形模块,在CSS中，将样式调用在每一个元素上，都以一个假想的矩形格式模型看待 .一般使用矩形模块的时候，搭配margin属性、border属性以及padding属性，可以更好的控制元素的样式。,设置边界,margin的四个属性主要是控制元素边界与文件其他内容的空白距离，四个边界一般按顺时针方向上（margin-top）、右（margin-right）、下（margin-bottom）、左（margin-left）属性。
33、四个边界的设置语法一样。 基本语法： margin-(top、right、bottom、left):长度单位 | 百分比单位 | auto,设置元素边框,border-style边框样式属性 border-width边框宽度属性 border-color边框色彩属性 border属性的综合设置,border-style边框样式属性,在CSS里了，利用边框样式属性不仅可以设置单位边框样式属性，还可以对单位边框进行设置，而且也可以利用复合边框样式属性来统一设置四条边框的样式。 基本语法： border-style:样式值 border-top-style:样式值 border-bottom-sty
34、le:样式值 border-left-style:样式值 border-right-style:样式值,border-style边框样式属性,语法说明： border-style是一个复合属性，复合属性的值有四种设置方法，其他4个都是单个边框的样式属性，只能取一个值。样式值属性的具体说明见表10-8。 设置一个值：四条边框宽度均使用一个值。 设置两个值：上边框和下边框宽度调用第一个值，左边框和右边框宽度调用第二个值。 设置三个值：上边框宽度调用第一个值，右边框与左边框宽度调用第二个值，下边框调用第三个值。 设置四个值：四条边框宽度的调用顺序为上、右、下、左。,border-width边框宽度属
35、性,border-width属性，是控制元素边框的宽度的一个综合属性，和border-style一样也有四种单独的设置方法，分别来定义四条边框的宽度，设置方法和边框样式一样。 基本语法：,border-width边框宽度属性,语法说明： thin、medium、thick分别表示细、中等、粗，length表示长度单位,border-color边框色彩属性,border-color属性是用来控制边框显示的颜色，和边框宽度、边框样式的设置方法一样，也可以分别来设置每个边框的颜色 . 基本语法： border-color:颜色关键字 | RGB值 border-top- color: 颜色关键字 |
36、 RGB值 border-bottom- color: 颜色关键字 | RGB值 border-left- color: 颜色关键字 | RGB值 border-right- color: 颜色关键字 | RGB值,border属性的综合设置,在CSS中，border属性用来同时设置边框的样式、宽度和颜色，也可以另外对每个边界属性单独进行设置 基本语法： border:边框宽度 | 边框样式 | 边框颜色border-top:上边框宽度 | 上边框样式 | 上边框颜色 border-bottom:下边框宽度 | 下边框样式 | 下边框颜色 border-left:左边框宽度 | 左边框样式 |
37、 左边框颜色 border-right:右边框宽度 | 右边框样式 | 右边框颜色 语法说明： 每一个属性都是一个复合属性，都可以同时设置边框的样式、宽度和颜色，每个属性的值中间用空格隔开，在这5个属性中，只有border可以同时设置四条边框的属性，其他的只能设置单边框的属性。,设置元素内边界,元素内边界主要是指边框和内部元素之间的空白距离，利用padding属性设置元素内的边界时，也包括5个属性，同样也有四种设置方法。 基本语法： padding:长度 | 百分比 padding-top: 长度 | 百分比 padding-bottom: 长度 | 百分比 padding-left: 长度
38、| 百分比 padding-right: 长度 | 百分比 语法说明： 长度包括长度值和长度单位，百分比是相对于上级元素宽度的百分比，不允许用负数，padding作为复合属性的四种取值方法请参考边框样式的取值方法。,10.8 CSS的进阶应用,区域组件 div标记的使用 标记的使用 与的区别 列表 list-style-type列表样式 list-style-image图像列表 list-style-position列表符号的缩进,div标记的使用,在写HTML文件时，要定义区域间不同样式时，可以使用标记达到这个效果，除此以外，通过设置的z-index属性还可以设置层次的效果。 基本语法：,d
39、iv标记的使用,语法说明： 用style来表示层的样式，因为如果没有定义层的样式的话，在浏览网页的时候是看不到效果的。其中： position属性主要是来定义层的定位方式； left和top是用来定位层的位置，与它并列的还有right和bottom，这四个属性主要是用来设置层的位置，分别表示对象与其他对象的左部、顶部、右部和底部的相对位置； width和height用来定义层的宽度和高度； float是层的浮动属性，用来设置层的浮动位置，当然这个属性不仅可以用在图像和表格上，还可以用到其他任何元素上； clear是层的清除属性，表示是否充许在某个元素的周围有浮动元素，它和浮动属性是一对相对立的
40、属性，浮动属性用来设置某个元素的浮动位置，而清除属性则要去掉某个位置的浮动元素； z-index主要是设置区域的上下层关系，利用此属性设置可以让区域更多层次的效果，相当于三维空间的z坐标，z-index越大，区域在堆中的位置就越高。,标记的使用,标记主要用来定义网页上的区域，通常用于比较大范围的设置，而标记被用来组合文档中的行内元素。 基本语法： 或者 语法说明： 如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会有任何视觉上的差异，只有对它应用样式时，它才会产生视觉上的变化。,与的区别,基本上与标记在网页上的使用，都可以用来产生区域范围，以定义不同的文字段落，且区域间彼
41、此是独立的。不过，两者在使用上还是有一些差异。 区域内是否换行：标记区域内的对象与区域外的上下文会自动换行，而标记区域内的对象与区域外的对象不会自动换行。 标记相互包含：与标记可以同时在网页上使用，一般在使用上建议用标记包含标记；但最好不包含标记，否则会造成标记的区域不完整，而形成断行的现象。,list-style-type列表样式,list-style-type属性，可用于设置列表的符号或编号，此属性通常搭配或标记使用。 基本语法： list-style-type:属性值,list-style-image图像列表,除了特定的list-style-type属性设置列表符号的样式外，利用css还
42、可以把列表的符号设置成喜欢的图片。 基本语法： list-style-image:url | none 语法说明： url是指定要载入的图片路径，在使用上与插入图片的用法差不多； none表示不使用图片式的列表符号。,list-style-position列表符号的缩进,list-style-position列表符号缩进属性，主要是设置每个列表项目的符号或图片，是否向外凸出。 基本语法： list -style-position:inside | outside 语法说明： inside表示列表符号不向外凸出，也可以理解成列表项上的第二行文字与列表符号对齐；outside表示列表符号向外凸出，
43、也是默认值。,小实例,页面布局设计始终是网页设计中的一个核心问题，它包括技术和美学两个方面的问题，两者结合的非常紧密。页面布局的主要工具是、和Flash文件。 对于框架，一般而言应尽量避免使用； 表格作为可以在上面布置元素的二维网格，它的优点在于在所有浏览器中几乎都可以无差错的运行，而只有微不足道的差异，而且，对于像切割图像这样的问题可以非常容易的用表格实现；但是过度使用表格所带来的页面无序，会给后期的维护带来极大的困难； 技术虽然难以全部代替，但是它的位置、尺寸、背景、边框等都可以很好的设计，更重要的是它所依赖的内容和样式分离的思想使得页面代码更为简洁，样式的更改更为方便。,,Thank You !,
