第三章 使用CSS技术美化网页
· CSS字体样式及属性
· CSS层叠性、继承性与优先级
· CSS样式规则
· CSS复合选择器
HTML
【案例5】：专题栏目
【案例4】：文字L第三章 使用CSS技术美化网页
· CSS字体样式及属性
· CSS层叠性、继承性与优先级
· CSS样式规则
· CSS复合选择器
HTML
【案例5】：专题栏目
【案例4】：文字Logo
【案例6】：搜索页面
目录
【案例4】文字Logo
“Logo”是“商标”的英文缩写，是企业最基本的视觉识别形象， “文字Logo”由于涵义明确、直接，易于被理解、认知，被广泛应用。本节将引入CSS，通过CSS控制文字来模拟一款“文字Logo”，其效果如下图所示。
案例引入
【案例4】知识引入
1
CSS样式规则
2
引入CSS样式表
3
CSS基础选择器
知识引入
【案例4】知识点讲解
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
1、CSS样式规则
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
【案例4】知识点讲解
CSS代码结构中的几个特点，具体如下：
CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。
在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。
在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。
1、CSS样式规则
【案例4】知识点讲解
（1）行内式
行内式也称为内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下：
该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。
2、引入CSS样式表
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>
【案例4】知识点讲解
（2）内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义，其基本语法格式如下：
该语法中，<style>标记一般位于<head>标记中<title>标记之后，也可以把它放在HTML文档的任何地方。
2、引入CSS样式表
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
【案例4】知识点讲解
（3）链入式
，通过<link />标记将外部样式表文件链接到HTML文档中，其基本语法格式如下：
该语法中，<link />标记需要放在<head>头部标记中，并且必须指定<link />标记的三个属性，具体如下：
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
2、引入CSS样式表
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
【案例4】知识点讲解
（1）标记选择器
标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：
例如：
上述CSS样式代码用于设置HTML页面中所有的段落文本——字体大小为12像素、颜色为#666、字体为“微软雅黑”。
3、CSS基础选择器
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
p{ font-size:12px; color:#666; font-family:"微软雅黑";}
3
案例4：文字Logo 来自淘豆网m.daumloan.com转载请标明出处.
