第6章CSS美化网页元素讲述.pptxVIP

第6章 CSS美化网页元素 烟台职业学院 孙俊琳 本章学习目标 熟练掌握CSS在字体、背景、边框、列表方面的常用样式 能够熟练运用相应样式美化文字、图片、列表、表格等网页元素 熟练掌握美化超链接的方法 了解表单的美化方法 6.1 丰富文字效果 文字样式属性 排版样式属性 6.1.1 文字样式属性 1.font-family设置字体 基本语法如下： font-family:字体一,字体二,字体三,… 语法说明如下： 上面的语法定义了几种不同的字体，并用逗号隔开，当浏览器找不到字体一时，将会用字体二代替，以此类推，当浏览器完全找不到字体时，则使用默认字体。例如： p{ font-famlily:黑体,隶书,微软雅黑,宋体,Arial,sans-serif;} 注意：“sans-serif”和“serif”不是单个字体的名称，而是一类字体的统称。 6.1.1 文字样式属性 2.font-size设置字号 基本语法如下： font-size:绝对大小|相对大小 语法说明如下： 绝对大小：是以绝对单位来指定大小的方式来设置字号，可以指定精确的大小，如16pt。除了用绝对单位外，CSS还提供了一些绝对大小的关键字，可作为font-size的值。如xx-small|x-small|small|medium|large|x-large|xx-large。不过这些关键字在不同的浏览器中显示的效果往往不同，因此不推荐使用。 相对大小：可以使用相对单位来指定字体大小。通常会用像素作为单位来指定字体大小。 6.1.1 文字样式属性 3.font-style设置字体样式 基本语法如下： font-style:normal | italic | oblique 语法说明如下： normal为默认值，一般以浏览器默认的字体来显示；italic是使用文字的斜体；obliqueOblique是让没有斜体属性的文字倾斜。 6.1.1 文字样式属性 4.font-weight设置字体加粗 在HTML中，字体加粗可以通过b标记或者strong标记设置。在CSS中，将文字粗细进行了细致的划分，还可以将本身是粗体的文字变为正常粗细。 基本语法如下： font-weight:normal|bold|bolder|lighter|100~900 语法说明如下： normal表示默认字体，bold表示粗体，bolder表示粗体再加粗，lighter表示比默认字体还细，100～900共分为9个层次（100，200，…，900），数字越小字体越细、数字越大字体越粗。 6.1.1 文字样式属性 5.font-variant设置字体变体 基本语法如下： font-variant:normal | small-caps 语法说明如下： normal表示默认值，small-caps表示英文字体显示为小型的大写字母。 6.1.1 文字样式属性 6.font设置综合字体属性 基本语法如下： font: font-style font-weight font-variant font-size/line-height font-family 语法说明如下： 若要利用font属性同时设置多个文字属性时，属性与属性之间必须使用空格隔开。 前3个属性次序不定或者省略，默认为normal。 大小和字体系列必须显式地指定，先设置大小，再设置字体系列，字体系列如果有多个，以逗号分隔。 行高必须直接出现在字体大小后面，中间用斜杠分开，行高是可选的属性。 font属性是继承的。 6.1.1 文字样式属性 7.text-decoration设置文字效果属性 基本语法如下： text-decoration:underline|overline|line-through|blink|none 属性值所代表的含义如表6.2所示。 设置值 说 明 underline 文字下加下划线 overline 文字上加上划线 line-through 文字中间加删除线 blink 文字闪烁（仅Netscape浏览器支持）Netscape浏览器支持） none 默认值 6.1.1 文字样式属性 8.text-transform转换英文大小写 利用text-transform属性可以转换英文大小写。 基本语法如下： text-transform:uppercase|lowercase|capitalize|none 语法说明如下： uppercase表示使所有单词的字母都大写，lowercase表示使所有单词的字母都小写，capitalize表示使每个单词的首字母大写，none表示默认值。 6.1.1 文字样式属性 9.letter-spacing字符间距属性 lette