- 1、本文档共39页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS美化网页元素
第五章
回顾与作业点评
描述CSS的基本语法结构,并举例说明其构成。
CSS选择器有哪几种,并举例说明。
CSS的复合选择器有哪几种,并说明各自的特点。
2/39
预习检查
在某一段文本中突出显示某几个字,以粗体、红色、大字号显示,通常使用( )标签。
在CSS中,设置文本行高使用( )属性。
在CSS中设置背景颜色为透明的值为( )。
transparent
line-height
span
3/39
本章任务
制作百度音乐标签页面
制作开心庄园页面
制作北大青鸟网站新闻信息展示页面
制作购物网站商品分类页面
制作畅销书排行榜页面
4/39
本章目标
会使用CSS设置字体样式
会使用CSS设置文本样式
会使用CSS设置图片对齐方式
会使用CSS设置超链接样式
会使用CSS设置鼠标外观
会使用CSS设置背景样式
会使用CSS设置列表样式
5/39
为什么使用CSS
有效的传递页面信息
使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户
可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容
具有良好的用户体验
6/39
span标签
span标签 的作用
p享受span class=show“北大式”/span教育服务/p
p在北大青鸟,有一群人默默支持你成就
span id=dreamIT梦想/span/p
p class=bird选择span北大青鸟/span,成就你的梦想/p
7/39
字体样式
属性名
含义
举例
font-family
设置字体类型
font-family:隶书;
font-size
设置字体大小
font-size:12px;
font-style
设置字体风格
font-style:italic;
font-weight
设置字体的粗细
font-weight:bold;
font
在一个声明中设置所有字体属性
font:italic bold 36px 宋体;
8/39
字体类型
font-family属性
p{font-family:Verdana,楷体;}
body{font-family: Times,Times New Roman, 楷体;}
9/39
font-size属性
单位:px(像素)
in、cm、mm、pt、pc
字体大小
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:5mm;}
p{font-size:10in;}
span{font-size:12pt;}
strong{font-size:13pc;}
10/39
字体风格
font-style属性
normal、italic和oblique
斜体
正常字体
11/39
字体的粗细
font-weight属性
值
说明
normal
默认值,定义标准的字体。
bold
粗体字体。
bolder
更粗的字体。
lighter
更细的字体。
100、200、300、400、500、600、700、800、900
定义由细到粗的字体。
400等同于normal,700等同于bold。
正常粗细
字体加粗
12/39
字体属性
font属性
字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px 楷体;}
13/39
文本样式
文本属性
属性
含义
举例
color
设置文本颜色
color:#00C;
text-align
设置元素水平对齐方式
text-align:right;
text-indent
设置首行文本的缩进
text-indent:20px;
line-height
设置文本的行高
line-height:25px;
text-decoration
设置文本的装饰
text-decoration:underline;
14/39
文本颜色
color属性
十六进制方法表示颜色
color:#FFFFFF;
color:#000000;
color:FF0000;
color:#A983D8;
color:#95F141;
color:#339966;
color:#EEFF66;
color:#396;
color:#EF6;
6位颜色值相邻数字两两相同时,可两两缩写为1位
蓝色字体
15/39
排版文本段落
水平对齐方式
text-align属性
值
说明
left
把文本排列到左边。默认值:由浏览器决定
right
把文本排列到右边
center
把文本排列到中间
justify
实现两端对齐文本效果
首行缩进
text-indent:em或
文档评论(0)