第6章CSS美化网页元素讲述.pptx
文本预览下载声明
第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
显示全部