【技能锤炼】
【案例3-9】 CSS优先级
一、案例描述
1、考核知识点
CSS优先级
2、练习目标
Ø 理解CSS优先级的原理。
Ø 掌握CSS优先级的应用。
3、需求分析
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。本案例通过给元素设置不同的CSS选择器和属性样式来学习CSS的优先级。
4、案例分析
1) 效果如图3-17所示。
图3-1 CSS优先级应用效果
2) 具体实现步骤如下：
a) 给同一元素设置不同的CSS选择器。
b) 给每种选择器应用不同的CSS样式。
c) 通过输出的页面效果，来学习CSS优先级的应用。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
2、定义CSS样式
使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下：
保存后，在谷歌浏览器中预览，效果如图3-18所示。
图3-2 CSS优先级的应用效果
注意：
1、行内样式优先。应用style属性的元素，其行内样式的权重非常高。
2、权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
【案例3-10】制作新浪博客效果
一、案例描述
1、考核知识点
字体样式属性、文本外观属性
2、练习目标
Ø 掌握CSS行内式、CSS字体样式属性、CSS文本外观属性。
Ø 综合运用CSS行内式、CSS字体样式属性、CSS文本外观属性制作页面。
3、需求分析
在实际工作中，为了让页面更加美观，经常需要对字体和文本进行综合的控制来实现页面的效果。本案例通过综合使用CSS字体及文本样式属性，并结合CSS行内式制作一个新浪博客首页的展示效果。
4、案例分析
1) 效果如图3-19所示。
图3-3 新浪博客展示效果
2) 具体实现步骤如下：
a) 使用行内式引入CSS样式。
b) 设置所有文本为微软雅黑、14像素、黑色字体。
c) 设置“新浪”、“新浪网”为红色字体，“博客首页”为蓝色、加粗字体，网址及日期为绿色字体。
d) 设置标题为16像素、左对齐、下划线的效果。
e) 设置文本“-百度快照-评价”为灰色、下划线的效果。
二、案例实现
1、制作页面结构
新建HTML页面，具体代码如下：
2、定义CSS样式
使用行内式CSS样式表为页面添加样式，将第8~15行代码更改如下：
保存后，在谷歌浏览器中预览，效果如图3-20所示。
图3-4 新浪博客首页展示效果
【练习1】服装推广软文
本章前几个节重点介绍了CSS3的浏览器支持情况、CSS样式规则、选择器、CSS文本相关样式及高级特性。为了使读者更好地认识CSS，本节将通过案例的形式分步骤制作一款服装推广软文，其效果如图3-29所示。
图3-1 服装推广软文
1.1.1 分析效果图
1、结构分析
效果图所示的服装推广软文由1个标题、多个段落构成，可以使用标题标记<h2>、段落标记<p>进行定义。同时，为了设置页面中需要特殊显示的文本，还需要在文本中嵌套不同类名的<strong>标记对其进行单独控制。
2、样式分析
仔细观察效果图，可以发现页面中使用了多种字体，这就需要预先下载字体，并使用@font-face属性定义服务器字体，然后应用font和color属性，控制段落文本的字号、粗细和颜色等样式。需要注意的是最后一行文本中有省略号标示溢出文本的效果，可以使用text-overflow:ellipsis;样式来实现。
1.1.2 制作页面结构
对效果图有了一定的了解后，下面使用相应的HTML标记搭建页面结构，如例3-21所示。
在例3-21中，分别使用<h2>、<p>标记定义标题、段落，同时为了控制段落中特殊显示的文本，在段落相应的位置嵌套了<span>标记。
运行例3-21，效果如图3-30所示。
图3-2 HTML结构页面
在图3-30所示的页面中，出现了相应的网页结构。
1.1.3 定义CSS样式
例3-21中，使用HTML标记，得到的是没有任何样式修饰的新闻页面，如图3-30所示。要想实现图3-29所示的效果，就需要使用CSS对文本进行控制。这里使用实际工作中最常用的链入式引入CSS样式表，步骤如下：
（1）首先新建一个CSS文件，命名为style03.css，保存在chapter03文件夹中。
（2）在example21.html文件的<head>头部标记内，<title>标记之后，书写如下CSS代码，引入外部样式表style03.css。
<linkrel="stylesheet" href="style03.css"type="text/css" />
（3）为页面中需要单独控制的标记添加相应的类名，具体代码如下所示。
（4）书写CSS样式，具体代码如下：
需要注意的是，在上述代码中第3行代码应用了通配符选择器清除浏览器的默认样式，其原理将在后面的盒子模型中详细讲解，这里了解即可。
运行案例代码，效果如图3-31所示。
图3-3 CSS样式效果
【练习2】移动端字体准则
