【技能锤炼】
【案例3-6】传智新闻
一、案例描述
1、考核知识点
文本外观属性
2、练习目标
Ø 掌握CSS文本外观属性的用法。
Ø 熟练运用CSS文本外观属性控制文本效果。
3、需求分析
使用HTML可以对文本外观进行简单的控制，但是效果并不理想。为此CSS提供了一系列的文本外观样式属性，主要有：color、letter-spacing、word-spacing、line-height、text-transform、text-decoration、text-align、text-indent、white-space、text-shadow及text-overflow属性。本案例通过使用以上的某几种属性来控制文本的样式，制作一篇传智新闻效果。
4、案例分析
1) 效果如图3-11所示。
图3-1 传智新闻效果
2) 具体实现步骤如下：
a) 设置所有文本为宋体、16像素、黑色字体，行高为28像素。
b) 设置两个标题的字体、颜色、字号及文本外观显示样式。
c) 设置段落文本的某些字体样式和文本外观显示样式。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>传智新闻</title>
6 </head>
7 <body>
8 <h1>重要消息</h1>
9 <h2>关于举办2015年全国高校IT骨干教师暑期培训班的通知</h2>
10 <pclass="one"><em>2015年4月15日11:08</em><em>传智播客网</em><em>我有话说(<emid="num">802</em>人参与)</em></p>
11 <hr />
12 <pclass="two">2015年全国高校IT骨干教师暑期培训班将于7月在京举办</p>
13 <p><emid="num">传智播客网4月15日消息</em> 本次培训课程已纳入“国家信息技术紧缺人才培养工程（ NITE）”课程体系，由中国电子学会将携手CSDN（CSIP）<em>[微博]</em>主办，由传智播客教育集团<em>[微博]</em>承办的全国骨干教师师资培训（软件开发与应用）。本次培训于2015年7月14日到25日举办，课程涵盖：<strong>JavaEE</strong>、<strong>.NET</strong>、<strong>PHP</strong>、<strong>网页平面设计</strong>、<strong>iOS</strong>、<strong>C++</strong>六个方向。传智播客<emclass="blue">[微博]</em>还将为校企之间、校校之间提供交流分享专业建设与教学改革的理念、经验与成果的平台。</p>
14 </body>
15 </html>
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
1 <style type="text/css">
2 *{padding:0; margin:0;} /*设置所有元素的边距为0*/
3 body{ /*对页面进行整体控制*/
4 font:16px/28px "宋体";
5 color:#000;
6 }
7 h1{
8 font:36px/70px "微软雅黑";
9 color:#072885;
10 text-shadow:10px 10px 2pxred;
11 text-align:center;
12 letter-spacing:40px;
13 }
14 h2{ /*单独设置标题的样式*/
15 font:normal 22px/35px "微软雅黑";
16 color:#072885;
17 text-align:center;
18 text-decoration:underline;
19 }
20 .one{
21 font-size:12px;
22 text-align:center;
23 }
24 p{text-indent:2em; }
25 .blue{color:#3d6cb0;}
26 .gray{ color:#666;}
27 #num{ color:#b60c0c;}
28 em{ font-style:normal;}
29 .two{ font-family:"楷体_GB2312";}
30 .four{ font-weight:bold;}
31 strong{ color:#F00;}
32 </style>
保存后，在谷歌浏览器中预览，效果如图3-12所示。
图3-2 传智新闻
注意：
1、CSS文本外观属性中的text-indent属性仅适用于块级元素，对行内元素无效。
【案例3-7】《你若安好，便是晴天》
一、案例描述
1、考核知识点
文本外观属性
2、练习目标
Ø 掌握CSS字体样式属性、CSS文本外观属性、CSS基础选择器的使用。
Ø 综合应用CSS字体样式属性、CSS文本外观属性、CSS基础选择器制作页面。
3、需求分析
在CSS中，仅仅通过控制字体或者文本难以做到页面的美观。在实际工作中，经常需要对字体和文本进行综合的控制来实现页面的效果。本案例通过综合使用CSS字体及文本样式属性，并结合不同的选择器输出一段《你若安好，便是晴天》的短文。
4、案例分析
1) 效果如图3-13所示。
图3-3 《你若安好，便是晴天》效果
2) 具体实现步骤如下：
a) 综合使用标记选择器、id选择器及类选择器控制元素。
b) 设置整体大盒子宽度为800像素；所有文本为宋体、14像素，行高为18像素。
c) 设置标题“你若安好，便是晴天”为18像素、紫色、加粗、居中、下划线的效果。
d) 设置第一段文本为红色、居中对齐。
e) 设置第二段文本为蓝色、首行缩进2个字符、字间距为16像素，并使用省略“…”标示溢出文本。
f) 设置第三段文本为绿色、加粗、斜体。
g) 设置第四段文本为紫色、删除线效果。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <metacharset="utf-8">
5 <title>你若安好，便是晴天</title>
6 </head>
7 <body>
8 <div id="all">
9 <h1>你若安好，便是晴天</h1>
10 <pclass="part1">一个人，一本书，一杯茶，一帘梦。</p>
11 <pclass="part2"> 站在时光的十字路口，回望过去的种种单纯与美好，欣慰而悲凉。</p>
12 <pclass="part3">花开花落，风卷云舒。青春如同流沙般从指缝溜走，过去的倔强与轻狂，原来如此荒诞不羁。俗世喧嚣，总会想在空灵停滞的时空内，独倚幽窗，品一壶清茶，细细体味光阴如梭，年华老去。</p>
13 <pclass="part4">时光轮回，生命交替，红尘无尽。</p>
14 </div>
15 </body>
16 </html>
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
1 <styletype="text/css">
2 #all{
3 width:800px;
4 font-family:"宋体";
5 font-size:14px;
6 line-height:18px;
7 }
8 h1{
9 color:#F0F;
10 font-size:18px;
11 text-align:center;
12 text-decoration:underline;
13 }
14 .part1{
15 text-align:center;
16 color:red;
17 }
18 .part2{
19 color:#00F;
20 text-indent:2em;
21 letter-spacing:16px;
22 white-space:nowrap; /*强制文本不能换行*/
23 overflow:hidden; /*修剪溢出文本*/
24 text-overflow:ellipsis; /*用省略标记标示被修剪的文本*/
25 }
26 .part3{
27 color:#090;
28 font-weight:bold;
29 font-style:italic;
30 }
31 .part4{
32 color:#F0F;
33 text-decoration:line-through;}
34 </style>
保存后，在谷歌浏览器中预览，效果如图3-14所示。
图3-4 《你若安好，便是晴天》
【案例3-8】 CSS层叠性
一、案例描述
1、考核知识点
CSS层叠性和继承性
2、练习目标
Ø 理解CSS层叠性的原理。
Ø 掌握CSS层叠性的应用。
3、需求分析
CSS具有层叠性，所谓层叠性是指多种CSS样式的叠加。例如，使用内嵌式CSS样式表定义<p>标记字号大小为12像素，链入式定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。本案例通过给同一个元素设置不同的颜色值来演示CSS层叠性的效果。
4、案例分析
1) 效果如图3-15所示。
图3-5 CSS层叠性应用效果
2) 具体实现步骤如下：
a) 分别给<div>、<p>、<h3>标记使用不同的选择器来设置不同的颜色。
b) 通过输出的文本颜色，来演示CSS的层叠性和优先级的效果。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <metacharset="utf-8">
5 <title>CSS层叠性</title>
6 </head>
7 <body>
8 <divclass="red">CSS层叠性，猜猜我是什么颜色</div>
9 <p>普通段落文本（蓝色）</p>
10 <pclass="special">指定了.special类的段落文本（红色）</p>
11 <h3class="special">指定了.special类的标题文本（绿色）</h3>
12 </body>
13 </html>
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
1 <styletype="text/css">
2 div{color:#00F;}
3 .red{color:#F0F;}
4 p{ color:blue;}
5 .special{ color:green;}
6 p.special{ color:red;} /*标签指定式选择器*/
7 </style>
保存后，在谷歌浏览器中预览，效果如图3-16所示。
图3-6 CSS层叠性应用效果
注意：
1、如果多个选择器作用于同一元素时，若多个选择器定义的样式不发生冲突，则元素将应用所有选择器定义的样式。
2、如果多个选择器定义的样式发生了冲突，则CSS按照选择器的优先级应用较高优先级的样式。
【案例3-9】 CSS优先级
一、案例描述
1、考核知识点
CSS优先级
2、练习目标
Ø 理解CSS优先级的原理。
Ø 掌握CSS优先级的应用。
3、需求分析
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。本案例通过给元素设置不同的CSS选择器和属性样式来学习CSS的优先级。
4、案例分析
1) 效果如图3-17所示。
图3-7 CSS优先级应用效果
2) 具体实现步骤如下：
a) 给同一元素设置不同的CSS选择器。
b) 给每种选择器应用不同的CSS样式。
c) 通过输出的页面效果，来学习CSS优先级的应用。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <metacharset="utf-8">
5 <title>CSS优先级</title>
6 </head>
7 <body>
8 <divstyle="color:#00F;">CSS优先级的应用</div>
9 <h1 id="blue"class="red dada" style="color:#F0F;">测试效果</h1>
10 </body>
11 </html>
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
1 <styletype="text/css">
2 div{color:green;}
3 h1{color:#F00;}
4 .red{color:red;}
5 .dada{font-size:50px;}
6 #blue{color:#00F;}
7 </style>
保存后，在谷歌浏览器中预览，效果如图3-18所示。
图3-8 CSS优先级的应用效果
注意：
1、行内样式优先。应用style属性的元素，其行内样式的权重非常高。
2、权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
【案例3-10】制作新浪博客效果
一、案例描述
1、考核知识点
字体样式属性、文本外观属性
2、练习目标
Ø 掌握CSS行内式、CSS字体样式属性、CSS文本外观属性。
Ø 综合运用CSS行内式、CSS字体样式属性、CSS文本外观属性制作页面。
3、需求分析
在实际工作中，为了让页面更加美观，经常需要对字体和文本进行综合的控制来实现页面的效果。本案例通过综合使用CSS字体及文本样式属性，并结合CSS行内式制作一个新浪博客首页的展示效果。
4、案例分析
1) 效果如图3-19所示。
图3-9 新浪博客展示效果
2) 具体实现步骤如下：
a) 使用行内式引入CSS样式。
b) 设置所有文本为微软雅黑、14像素、黑色字体。
c) 设置“新浪”、“新浪网”为红色字体，“博客首页”为蓝色、加粗字体，网址及日期为绿色字体。
d) 设置标题为16像素、左对齐、下划线的效果。
e) 设置文本“-百度快照-评价”为灰色、下划线的效果。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
1 <!doctype html>
2 <html>
3 <head>
4 <metacharset="utf-8">
5 <title>新浪博客</title>
6 </head>
7 <body>
8 <div>
9 <h1>新浪<strong>博客首页—</strong>新浪网</h1>
10 <p><strong>新浪网</strong>
11 博客频道是全中国最主流，最具人气的博客频道。拥有最耀眼的娱乐明星博客、最知性的名人博客、最动人的情感博客、最自我的草根博客。
12 </p>
13 <strong>blog.sina.com.cn/2014-07-07</strong>
14 <strong>-百度快照-评价</strong>
15 </div>
16 </body>
17 </html>
2、定义CSS样式
使用行内式CSS样式表为页面添加样式，将第8~15行代码更改如下：
1 <divstyle="font-family:'微软雅黑';font-size:14px;color:#000;">
2 <h1style="font-size:16px;color:#F00;text-decoration:underline;font-weight:normal;">新浪<strongstyle="color:#00F;text-decoration:underline;">博客首页—</strong>新浪网</h1>
3 <p><strongstyle="color:#F00; font-weight:normal;">新浪网</strong>
4 博客频道是全中国最主流，最具人气的博客频道。拥有最耀眼的娱乐明星博客、最知性的名人博客、最动人的情感博客、最自我的草根博客。
5 </p>
6 <strongstyle="color:#006600;font-weight:normal;">blog.sina.com.cn/2014-07-07</strong>
7 <strongstyle="color:#333;font-weight:normal;text-decoration:underline;">-百度快照-评价</strong>
8 </div>
保存后，在谷歌浏览器中预览，效果如图3-20所示。
图3-10 新浪博客首页展示效果
