文档详情

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

发布:2017-04-05约1.16万字共58页下载文档
文本预览下载声明
第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
显示全部
相似文档