Div+CSS网站布局应用教程第5章 使用CSS样式设置网页文本
div+css(5)原创
第三章【DIV】div——block块状对象（块级元素），显示为一个方块，默认状态下占据一行，其他对象将在下一行显示。
in-line行间对象（内联元素），允许下一个对象与之共享一行进行显示。
【XHTML标签与功能】-----------结构标签-----------html 根元素head 头部区域body 主体区域div 区块定义标签span 行间区块定义标签-----------Meta信息-----------DOCTYPE 文档类型指定title 浏览器标题栏link 链接到扩展资源meta Meta信息vstyle 样式表区域-----------文本控制-----------p 段落h1~h6 标题1~6级strong 加重重点em 重点/强调abbr 定义文本的简写词acronym 定义首字母简写词address 标签联系信息bdo 字母顺序左右反转blockguote 块状引用内容cite 行间引用内容q 行间小型的引用-----------链接-----------a 链接vbase 基础链接类-----------图像和对象-----------img 插入图像area 图像热区细节map 图像热区object 插入对象patam 对象的参数-----------列表-----------ul 无序列表ol 有序列表li 列表项dl 带描述的列表dt 描述列表中的名词dd 描述列表中的描述-----------表格-----------table 表格tr 行td 单元格th 表头tbody 表格主体thead 表格头部tfoot 表格底部col 表格列colgroup 表格列的集合caption 表格的标题-----------表单-----------form 表单区域input 输入框textarea 文本域select 下拉列表option 下拉列表项optgroup 下拉列表项集合button 按钮label 标签fieldset 标签页legent 标签页的标题-----------脚本-----------script 脚本区域noscript 无法执行脚本的替代-----------表现-----------b 加粗i 斜体tt 打字机字体sub 下标sup 上标big 加大small 减小hr 分割线【定位】--------------------------------- 【两列右侧自适应】--------------------------------- #left{background-color:#999;border:2px #000 solid;width:100px;height:300px;float:left;}#right{background-color:#999;border:2px #000 solid;height:300px;}---------------------------------绝对定位position:static;（默认）absolute;（漂浮，可使用top，right，bottom，left）relative;---------------------------------【三列，左右两列固定，中间列自适应】主要在blog中应用，大型网站设计较少使用。
DIVCSS入门教程
DIVCSS入门教程一、DIV的基本用法```html<div><!--这里可以放入其他HTML元素--></div>```二、DIV的布局和样式1.宽度和高度可以使用CSS样式属性来设置DIV的宽度和高度，如下所示：```cssdivwidth: 200px; /* 设置DIV的宽度为200像素 */height: 100px; /* 设置DIV的高度为100像素 */```2.背景颜色和背景图片可以使用CSS样式属性来设置DIV的背景颜色和背景图片，如下所示：```cssdivbackground-color: red; /* 设置DIV的背景颜色为红色 */ background-image: url("bg.jpg"); /* 设置DIV的背景图片为bg.jpg */```3.边框和边框样式可以使用CSS样式属性来设置DIV的边框和边框样式，如下所示：```cssdivborder: 1px solid black; /* 设置DIV的边框为1像素的实线黑色边框 */border-radius: 5px; /* 设置DIV的边框圆角为5像素*/```4.文本样式可以使用CSS样式属性来设置DIV内文本的样式，如下所示：```cssdivcolor: white; /* 设置DIV内文本的颜色为白色 */ font-size: 16px; /* 设置DIV内文本的字体大小为16像素 */text-align: center; /* 设置DIV内文本的水平居中对齐*/line-height: 30px; /* 设置DIV内文本的行高为30像素*/```5.浮动布局可以使用CSS样式属性来设置DIV的浮动布局，如下所示：```cssdivfloat: left; /* 设置DIV的浮动为左浮动 */clear: both; /* 设置DIV下方没有浮动元素，用于清除浮动影响 */```6.盒模型可以使用CSS样式属性来设置DIV的盒模型，如下所示：```cssdivmargin: 10px; /* 设置DIV的外边距为10像素 */ padding: 10px; /* 设置DIV的内边距为10像素 */box-sizing: border-box; /* 设置DIV的盒模型为border-box，包含边框在内的宽度不变 */```以上是DIV的基本用法和常见的CSS样式属性。
DIV+CSS网页布局教程
DIV+CSS网页布局教程一、传统table布局传统Table布局方式只是利用了HTML的table元素所具有的零边框特性因此，Table布局的核心是：设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。
二、table布局的缺点1、设计复杂，改版时工作量巨大2、表现代码与内容混合，可读性差3、不利于数据调用分析4、网页文件量大，浏览器解析速度慢如蜗牛三、web标准的构成结构：用来对网页中的信息进行整理与分类，常用的技术有：HTML、XHTML、XML表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等..主要技术就是CSS,目前版本2.0行为：是指对整个文档内部的一个模型进行定义及交互行为的编写主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言)四、web标准布局基于Web标准的网站设计的核心目的：如何使网页的表现与内容分离！这样做的好处：高效率的开发与简单维护信息跨平台的可用性降低服务器成本；加快网页解析速度更良好的用户体验那么，CSS2.0从真正意义实现了设计代码与内容分离真正的表现与内容完全分离，代码可读性强，样式可重复应用五、css布局代码示例HTML代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>测试页</title><link href="css/style1.css" rel="stylesheet" type="text/css" /></head><body><div id="container"><div id="header">头部</div><div id=“content”>主体</div><div id="footer">尾部</div></div></body></html>Css代码：* {font-family: Arial, Helvetica, sans-serif, "宋体";font-size: 12px;margin: 0px;text-align:center;}#container {width: 810px;margin:auto;background:#CCCCCC;}#header {height: 100px;width: 800px;padding:5px;background-color: #6699FF;}#content {height: 400px;width: 800px;padding:5px;background-color#FF9900;}#footer {width: 800px;height: 50px;padding:5px;background-color: #6699FF;}六、向web标准过度/HTML基础为什么要使用XHTML?XHTML是在HTML4.0基础上，用XML规则扩展得到的，建立XHTML的目的就是为了实现HTML向XML的过度。
css网页布局中文字排版的属性和用法
css⽹页布局中⽂字排版的属性和⽤法前段时间，学习了⼏个⼤的⽹站的图⽂混排的⽅法。
今天总结下，css⽹页布局中⽂字排版的相关属性以及⽤法。
包括：设定字体、颜⾊、⼤⼩、段落空⽩，⾸字下沉、⾸⾏缩进、中⽂字的截断、固定宽度词内折⾏（word-wrap和word-break）等。
⼀、设定⽂字字体、颜⾊、⼤⼩等使⽤font等。
font-style设定斜体，⽐如font-style: italic; font-weight设定⽂字粗细，⽐如font-weight: bold; font-size设定⽂字⼤⼩，⽐如font-size: 12px;（或者9pt，不同单位显⽰问题参考CSS⼿册） line-height设定⾏距，⽐如line-height: 150%; color设定⽂字颜⾊（注意不是font-color），⽐如color: red; font-family设定字体，⽐如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;（这是通⽤的写法）上⾯是常⽤的属性，更多参考css⼿册。
⼆、段落排版：使⽤margin、padding和text-align。
中⽂段落使⽤<p>标签（也可以是其他容器），左右（相当于缩进）、段前段后的空⽩，都可以⽤margin或padding。
⽐如：p{margin: 18px 6px 6px 18px;/*分别是上、右、下、左，⼗⼆点开始的顺时针⽅向*/margin:18px 6px;/*表⽰上下为18，左右为6*/margin:1px 2px 3px;/*表⽰上为1px，下为6px,左右为2px*/}⽂字的对齐⽅式⽤text-align，⽐如：p{text-align: center; /*居中对齐*/text-align: justify/*两端对齐*/}对齐⽅式还有left、right。
网页设计入门--如何使用css设置字体和文本样式
⽹页设计⼊门--如何使⽤css设置字体和⽂本样式⼀、定义字体类型font-family:Arial,Helvetica,serif,sans-serif,monospace;ps.字体与字体之间⽤逗号隔开，句尾⽤分号例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-family:serif;}.p2{font-family:sans-serif;}.p3{font-family:monospace;}</style></head><body>welcome to my first text html!<p class="p1">我是serif字体!</p><p class="p2">我是sans-serif字体!</p><p class="p3">我是monospace字体!</p></body></html>显⽰结果如下：⼆、定义字体⼤⼩font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|lengthps:1、xx-small（最⼩）、x-small（较⼩）、small（⼩）、medium（正常）、large（⼤）、x-large（较⼤）、xx-large（最⼤）、larger（增⼤）、smaller（减⼩）、length（可以是百分数、或者浮点数和单位标识符组成的长度值，但不能为负值。
其百分⽐的取值是基于⽗对象中字体的尺⼨来计算的，与em单位计算⽅法相同）;2、还可以⽤px（像素）、in（英⼨）、em（基于⽗辈字体⼤⼩为参考设置字体⼤⼩）、cm（厘⽶）、pt（点）、pc（⽪卡）来定义字体⼤⼩;3、浏览器默认字体⼤⼩为16px，所以1.2em=19.2px，0.875em=14px，0.625em=10px；4、对于⽹页宽度固定或者栏⽬宽度固定的布局，使⽤像素是正确的选择；对于⽹页宽度不固定或者栏⽬宽度也不固定的页⾯，使⽤百分⽐或em是正确的选择，这样可以⽅便客户端浏览器调整字体⼤⼩；例如：<html><head><title>my first text html</title><style type="text/css">div{font-size:20px;}.p1{font-size:0.6in;}.p2{font-size:0.8em;}.p3{font-size:2cm;}.p4{font-size:16pt;}.p5{font-size:2pc;}</style></head><body>我的字号为16px!<div>我的字号为20px!<p class="p1">我的字号为0.6in!</p><p class="p2">我的字号为0.8em!</p><p class="p3">我的字号为2cm!</p><p class="p4">我的字号为16pt!</p><p class="p5">我的字号为2pc!</p></div></body></html>显⽰结果如下：三、定义字体颜⾊如下为定义字体颜⾊的四种⽅法：color:red; /*使⽤颜⾊名*/color:#693333; /*使⽤⼗六进制*/color:rgb(120,120,120); /*使⽤rgb*/color:rgb(0%,100%,50%);四、定义字体粗细font-weight:normal|bold|bolder|lighter|100|200|300|400（相当于normal）|500|600|700（相当于bold）|800|900 PS:bolder和lighter是相对于normal字体粗细进⾏加粗和减细操作五、定义斜体字体font-style:normal|italic（斜体）|oblique（倾斜的字体）PS:italic和oblique这两个取值只能在英⽂等西⽅⽂字中有效例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-style:normal;}.p2{font-style:italic;}.p3{font-style:oblique;}</style></head><body><p class="p1">我的字体为normal!</p><p class="p2">我的字体为italic!</p><p class="p3">我的字体为oblique!</p></body></html>显⽰结果如下：六、定义下划线、删除线和顶划线text-decoration:none|underline|overline|line-through|blink（闪烁效果）PS:不同的效果可以同时⽤，只需效果之间加空格即可例如：<html><head><title>my first text html</title><style type="text/css">.p1{text-decoration:underline;}.p2{text-decoration:underline overline;}.p3{text-decoration:underline overline blink;}</style></head><body><p class="p1">我的字体使⽤了underline效果!</p><p class="p2">我的字体使⽤了underline和overline效果!</p><p class="p3">我的字体使⽤了underline、overline和blink效果!</p></body></html>显⽰效果如下：七、定义字体⼤⼩写定义字体⼤⼩写有两种⽅法：font-variant:normal|small-caps（⼩型的⼤写字母字体）;text-transform:capitalize（⾸字母⼤写）|uppercase（⼤写）|lowercase（⼩写）;例如：<html><head><title>my first text html</title><style type="text/css">.p1{font-variant:normal;}.p2{font-variant:small-caps;}.p3{text-transform:capitalize;}.p4{text-transform:uppercase;}.p5{text-transform:lowercase;}</style></head><body><p class="p1">normal!</p><p class="p2">small-caps!</p><p class="p3">capitalize!</p><p class="p4">uppercase!</p><p class="p5">LOWERCASE!</p></body></html>显⽰效果如下：⼋、定义⽂本对齐text-align:left|right|center|justify（两端对齐）九、定义垂直对齐vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length PS:auto：根据layout-flow属性的值对齐对象内容；baseline：将⽀持valign特性的对象内容与基线对齐；sub：垂直对齐⽂本的下标；super：垂直对齐⽂本的上标；top：将⽀持vlign特性的对象的内容与对象顶端对齐；text-top：将⽀持vlign特性的对象的⽂本与对象顶端对齐；middle：将⽀持vlign特性的对象的内容与对象中部对齐；bottom：将⽀持vlign特性的对象的内容与对象底端对齐；text-bottom：将⽀持vlign特性的对象的⽂本与对象底端对齐；length：由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%例如：<html><head><title>my first text html</title><style type="text/css">.span1{vertical-align:auto;}.span2{vertical-align:baseline;}.span3{vertical-align:sub;}.span4{vertical-align:super;}.span5{vertical-align:top;}.span6{vertical-align:text-top;}.span7{vertical-align:middle;}.span8{vertical-align:bottom;}.span9{vertical-align:text-bottom;}.span10{vertical-align:2;}</style></head><body><p><span class="span1">根据layout-flow属性的值对齐对象内容</span><span class="span1">auto</span></br><span class="span1">将⽀持valign特性的对象内容与基线对齐</span><span class="span2">baseline</span></br><span class="span1">垂直对齐⽂本的下标</span><span class="span3">sub</span></br><span class="span1">垂直对齐⽂本的上标</span><span class="span4">super</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象顶端对齐</span><span class="span5">top</span></br><span class="span1">将⽀持vlign特性的对象的⽂本与对象顶端对齐</span><span class="span6">text-top</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象中部对齐</span><span class="span7">middle</span></br><span class="span1">将⽀持vlign特性的对象的内容与对象底端对齐</span><span class="span8">bottom</span></br><span class="span1">将⽀持vlign特性的对象的⽂本与对象底端对齐</span><span class="span9">text-bottom</span></br><span class="span1">由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%</span><span class="span10">length=2</span></br></p></body></html>显⽰效果如下：⼗、定义字间距letter-spacing:1em;（字母与字母或者汉字与汉字之间的间距）word-spacing:1em;（定义单词与单词之间的间距）⼗⼀、定义⾏间距line-height:normal（默认值，⼀般为1.2em）|length（表⽰百分⽐数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;例如：p{font-size:12pt;line-height:12pt;}⼗⼆、定义缩进text-indent:length（表⽰百分⽐数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;PS:建议设置缩进单位时，以em为设置单位，它表⽰⼀个字距，这样⽐较精确确定⾸⾏缩进效果。
DIV+CSS网页样式与布局
2.1 CSS选择器
每一个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个， 从而实现对同一个标记，声明多种样式风格。 如图2.1 CSS标记选择器
2.1 CSS选择器
2.1.2 类别选择器 在上一节中提到的标记选择器一旦声明，那么页面中所有的该标记都会相应地 产生变化。例如当声明了<p>标记为红色时，页面中所有的<p>标记都将显示为 红色。如果希望其中的某一个<p>标记不是红色，而是蓝色，这时仅靠标记选择 器是远远不够的，还需要引入类别（class）选择器。 类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合 CSS规范，如图2.2 类别选择器
3.1 图片样式
当同时设定width和height属性时才不会不等比例缩放，见例3-5.html。从显示 效果我们看到图片的高度固定了，当浏览器窗口变化时，高度并没有随着图片 宽度的变化而变化。 也可以如下设置图片的宽度和高度： <img src="cup.jpg" width="100" height="200">
练习一：建立一个网页，放置一张图片，宽度为980px，高度为220px，边框实线、 蓝色，边框线的宽度为6px。图片水平居中。
虽然各种CSS样式加入页面的方式有先后的优先级，但在建设网站时，最好只使 用其中的1~2种，这样即有利于后期的维护和管理，也不会出现各种样式“撞车”的 情况，便于设计者理顺设计的整体思路。
1.3 CSS的注释
编写CSS代码与编写其他的程序一样，养成良好的写注释习惯对于提高代码的 可读性，以及减少日后维护的成本都非常重要。在CSS中，注释的语句都位于 “/*” 与 “*/” 之间，其内容可以是单行业可以是多行。 在添加单行注释时，必须注意将结尾处的 “*/” 加上。另外，在<style>与</style> 之间常常会见到 “<!--” 和 “-->” 将所有的CSS代码包含于其中，这是为了避免老 浏览器不支持CSS、将CSS代码直接显示在浏览器上而设置的HTML注释。
第5章 CSS和DIV的应用
第5章 CSS和DIV的应用
5.1 CSS样式 5.1.3 创建CSS样式 在Dreamweaver CS6中，执行“窗口”|“CSS样式” 命令，打开“CSS样式”面板，如图5.1所示。在 “CSS样式”面板的底部排列有几个按钮，具体内容 如下。 “附加样式表”：可以在HTML文档中链接一 个外部的CSS文件。 “新建CSS规则”：可以编辑新的CSS样式文件。
第5章 CSS和DIV的应用
5.1.4 定义CSS样式属性 3．区块样式的定义 在“CSS规则定义”对话框左侧的“分类”列表框中选择“区块”选项可 以定义标签和属性的间距和对齐设臵，如图5.5所示。
图5.5 区块样式的定义
第5章 CSS和DIV的应用
5.1.4 定义CSS样式属性 3．区块样式的定义 在“区块”中的各选项参数如下： • Word-spacing：设臵单词的间距，若要设臵特定的值，在下拉列表框 中选择“值”选项，然后输入一个数值，在第二个下拉列表框中选择 度量单位。 • Letter-spacing：增加或减小字母或字符的间距。若要减少字符间距， 指定一个负值，字母间距设臵覆盖对齐的文本设臵。 • Vertical-align：指定应用它的元素的垂直对齐方式。仅当应用于＜img ＞标签时，Dreamweaver才在文档窗口中显示该属性。 • Text-align：设臵元素中的文本对齐方式。 • Text-indent：指定第一行文本缩进的程度。可以使用负值创建凸出， 但显示取决于浏览器。仅当标签应用于块级元素时，Dreamweaver才 S和DIV的应用
5.1.4 定义CSS样式属性 在“类型”中的各选项参数如下： • Font-weight：对字体应用特定或相对的粗体量。“正常”等于 400,“粗体”等于700。 • Font-variant：设臵文本的小型大写字母变量。Dreamweaver不在文 档窗口中显示该属性。 • Text-transform：将选定内容中的每个单词的首字母大写或将文本设 臵为全部大写或小写。 • color：设臵文本颜色。
CSS+DIV网页样式与布局
CSS+DIV⽹页样式与布局⼀、什么是CSS?CSS(Cascading Style Sheets),中⽂译为层叠样式表，它是⽤于控制⽹页样式并允许将样式信息与⽹页内容分离的⼀种标记性语⾔。
CSS的引⽤就是为了使得HTML语⾔能够更好地适应页⾯的美⼯设计。
它以HTML语⾔为基础，提供了丰富的格式化功能，如字体，颜⾊，背景和整体排版等，并且⽹页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显⽰器，打印机，打字机，投影仪和PDA等。
⼆、什么是DIV？DIV是层叠样式表中的定位技术，全称DIVision，即为划分。
DIV元素是⽤来为HTML（标准通⽤标记语⾔下的⼀个应⽤）⽂档内⼤块（block-level）的内容提供结构和背景的元素。
DIV就是将HTML划分为⼏块，⽅便对HTML进⾏管理。
三、为什么是CSS+DIV?what：DIV+CSS是WEB设计标准，它是⼀种⽹页的布局⽅法。
与传统中通过表格（table）布局定位的⽅式不同，它可以实现⽹页页⾯内容与表现相分离，使站点的访问及维护更加容易。
why：因为在CSS诞⽣之前，都是使⽤标签的属性来定义样式的，⽐如要实现加粗的效果，就要写“<b>加粗内容</b>”，要是定义⼀个字体是7号字，就要写“<font size=7></font>“，但是这个html标签属性提供的功能有限，size的字号不是您想定义多⼤就是多⼤，到了10就不好使了，怎么办呢，W3C就指定了CSS，⽤css来代替传统的html标签的属性功能，以弥补html标签的功能缺陷。
使⽤css的id和class属性可以很⽅便的给html标签加上⼀个特殊的标记，然后通过css的访问机制可以很⽅便的定义样式，这样，如果很多标签样式⼀致，我们就给它定义⼀个类（class），然后写样式就可以了，要是table就不⾏了，每⼀个标签都得把样式写进去，重复的标签样式造成代码臃肿，⼜难以维护div是⼀个标签，代表块级元素，⽽div嵌套div的模式就称为盒⼦模型。
Web标准网页设计教程-使用CSS+DIV布局页面
8.2.3 清除浮动
clear是层的清除属性，表示是否允许在某个元素的周围有浮动 元素，它和浮动属性是一对相对立的属性，浮动属性用来设置某 个元素的浮动位置，而清除属性则要去掉某个位置的浮动元素。 clear属性的值可以是left、right、both或none。left表示清除float浮 动对其左侧的影响，right表示清除float浮动对其右侧的影响。如果 左右都有浮动的块元素，而新的块两侧都不希望受到影响，则可 以将clear参数值设置为both。
8.2.2 元素的浮动
在DIV+CSS的布局中，改变元素的位置有几种方法：通过 position属性结合4个方向可以改变元素的位置，这种改变是因 为元素都被文本流限制了自身的位置；还有margin属性，它可 以通过设置4个方向上与其他元素的间距而使元素产生位置移 动；除此之外，还可以通过设置CSS的float浮动属性使得这些 元素改变自己的位置。
用CSS+DIV布局页面
任务引入——班级网站的CSS＋DIV布局
人们现在看到的绝大多数网站都是使用CSS＋DIV进行 布局的，也是Web标准网站的基本特征。班级网站也是用 CSS＋DIV进行布局的。那么如何通过CSS来控制网页的布 局呢？这正是本模块的学习重点。本模块将详细介绍班级网 站的布局过程以及涉及的CSS属性。
8.1.1 认识div对象
XHTML中的每个对象都拥有自己默认的显示模式。在XHTML中，显示 模式分两种：block块状对象和inline行间对象。div就是一个块状对象，显示 模式为display:block。块状对象指的是当前对象显示为一个方块，默认显示状 态下，它将占据整行，其他的对象只能在下一行显示。如果在布局中，两个 div是前后关系，在页面中的效果就是上下显示。所以对于块状div，在页面中 并非用于类似文本那样的行间排版，而是用于大面积、大区域的块状排版。
[PPT模板]CSS+DIV_教程_OK
</STYLE>
作为选择符。
</HEAD>
5-1.htm
CSS样式表
4
一、CSS的基本概念
• 3、CSS样式的组合、继承和关联性 样式的组合：把具有相同声明定义的选择符组合在一 起，并用逗号隔开。 －例如：段落元素p、单元格元素td和类c1可以使用相同样式：
p,td,.c1{font-size:12pt;font-family:黑体;color:red}
CSS样式表
23
鼠标属性
• 让鼠标移到不同对象上面，显示不同形状。 – Cursor属性，取值如下 • Auto：自动按默认显示 • Crosshair：“＋” • Hand:手形 • Text：文本I形 • Wait：等待 • ……
CSS样式表
24
练习：
• 1、若要在网页上使用使用统一的页面风格： – 背景为浅蓝灰色（#cdcdfe）， – 文本为深蓝色（#000066）， – 所有网页都不留边(Margin)， – 且列表项目、表格及段落文本中的字体均为10.5pt；颜色：绿色；文本对 齐：居中；字体：楷体,Times New Roman；文字格式：加粗。
CSS样式表
7
一、CSS的基本概念
• 4、注释
➢ CSS文字的注释形式与C语言类似。
p{font-size:12pt} /*P标签的样式定义*/
CSS样式表
8
一、CSS的基本概念
• 5、选择符
➢ 样式表的基本语法形式：
selector{property1:value1; property2:value2;…}
CSS样式表
25
练习：
• 2、编辑一个外联样式表，它使所有网页中表格的文本显示为如下风格： – 文字大小：10.5pt; – 颜色：绿色； – 文本对齐：居中； – 字体：楷体 – 文字格式：加下划线
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
自测3——设置网页中的字体颜 色
自测3：设置网页中的字体颜色 最终文件：光盘\最终文件\第5章\5-1-3.html 视 频：光盘\视频\第5章\5-1-3.swf
5.1.4
font-weight属性
在HTML页面中，将字体加粗或变细是吸引浏览者注意的另一种方式， 同时还可以使网页的表现形式更多样。在CSS样式中通过font-weight属性对 字体的粗细进行控制。定义字体粗细font-weight属性的基本语法如下。 font-weight: normal | bold | bolder | lighter | inherit | 100~900;
自测4——设置网页中的字体 加粗
自测4：设置网页中的字体加粗 最终文件：光盘\最终文件\第5章\5-1-4.html 视 频：光盘\视频\第5章\5-1-4.swf
5.1.5
font-style属性
所谓字体样式，也就是平常所说的字体风格，在Dreamweaver中有3种 不同的字体样式，分别是正常、斜体和偏斜体。在CSS中，字体的样式是通 过font-style属性进行定义的。定义字体样式font-style属性的基本语法如下。 font-style: normal | italic | oblique;
自测6——设置网页中英文大 小写
自测6：设置网页中英文大小写 最终文件：光盘\最终文件\第5章\5-1-6.html 视 频：光盘\视频\第5章\5-1-6.swf
5.1.7
text-decoration属性
在网站页面的设计中，为文字添加下画线、顶画线和删除线是美化和装 饰网页的一种方法。在CSS样式中，可以通过text-decoration属性来实现这 些效果。text-decoration属性的基本语法如下。 text-decoration: underline | overline | lin-throuth;
自测8——为网页中的文字添 加修饰
自测8：为网页中的文字添加修饰 最终文件：光盘\最终文件\第5章\5-2-1.html 视 频：光盘\视频\第5章\5-2-1.swf
5.2.2
line-height属性
在CSS中，可以通过line-height属性对段落的行间距进行设置。lineheight的值表示的是两行文字基线之间的距离，既可以设置相对数值，也可 以设置绝对数值。line-height属性的基本语法格式如下。 line-height: 行间距;
在制作网站页面时，可以通过CSS控制文字样式，对文字的字体、大 小、颜色、粗细、斜体、下画线、顶画线和删除线等属性进行设置。使用 CSS控制文字样式的最大好处是，可以同时为多段文字赋予同一CSS样式， 在修改时只需修改某一个CSS样式，即可同时修改应用该CSS样式的所有 文字。
Hale Waihona Puke 5.1.1font-family属性
自测2——设置网页中的字体大 小
自测2：设置网页中的字体大小 最终文件：光盘\最终文件\第5章\5-1-2.html 视 频：光盘\视频\第5章\5-1-2.swf
5.1.3
color属性
在HTML页面中，通常在页面的标题部分或者需要浏览者注意的部分 使用不同的颜色，使其与其他文字有所区别，从而能够吸引浏览者的注意。 在CSS 样式中，文字的颜色是通过color属性进行设置的。 color属性的基本语法如下。 color:颜色值;
自测7——为网页中的文字添 加修饰
自测7：为网页中的文字添加修饰 最终文件：光盘\最终文件\第5章\5-1-7.html 视 频：光盘\视频\第5章\5-1-7.swf
在设计网页时，CSS样式可以控制字体样式，同时也可以控制字间距 和段落样式。但在大多数情况下，文字样式只能对少数文字起作用，对于 段落文字来说，还需要通过专门的段落样式进行控制。
5.2.1
letter-spacing属性
在CSS样式中，字间距的控制是通过letter-spacing属性来进行调整的， 该属性既可以设置相对数值，也可以设置绝对数值，但在大多数情况下使用 相对数值进行设置。letter-spacing属性的语法格式如下。 letter-spacing: 字间距;
自测1：设置网页中的字体 最终文件：光盘\最终文件\第5章\5-1-1.html 视 频：光盘\视频\第5章\5-1-1.swf
5.1.2
font-size属性
在网页应用中，字体大小的区别可以起到突出网站主题的作用。字体 大小可以是相对大小也可以是绝对大小。在CSS中，可以通过设置fontsize 属性来控制字体的大小。font-size属性的基本语法如下。 font-size:字体大小;
自测5——设置网页中的字体倾 斜
自测5：设置网页中的字体倾斜 最终文件：光盘\最终文件\第5章\5-1-5.html 视 频：光盘\视频\第5章\5-1-5.swf
5.1.6
text-transform属性
英文字体大小写转换是CSS提供的非常实用的功能之一，其主要通过设 置英文段落的text-transform属性来定义。text-transform属性的基本语法如下。 text-transform: capitalize | uppercase | lowercase;
在HTML中提供了字体样式设置的功能，在HTML语言中文字样式是通 过<font face=“字体名称”>来设置的，而在CSS样式中则是通过font-family 属性来进行设置的。font-family属性的语法格式如下。 font-family:name1,name2,name3…;
自测1——设置网页中的字体
自测9——设置文本行间距
自测9：设置文本行间距 最终文件：光盘\最终文件\第5章\5-2-2.html 视 频：光盘\视频\第5章\5-2-2.swf
5.2.3
text-indent属性
段落首行缩进在一些文章开头通常都会用到。段落首行缩进是对一个段 落的第1行文字缩进两个字符进行显示。在CSS样式中，是通过text-indent属 性进行设置的。text-indent属性的基本语法如下。 text-indent:首行缩进量;