您的位置：360文档中心› 第3章使用CSS技术美化网页

第3章使用CSS技术美化网页

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS基础选择器
让IT教学更简单，让IT学习更有效
1．通配符选择符 通配符选择符用“*”进行表示，用于清理标签的默认
样式。如果单独使用，其作用范围是页面中所有元素。这是 一种强大的方法，也是最简单，最安全的方法，不过，也是 最占用资源的方法。所以不提倡直接使用该选择符
样式应用于文档中的所有元素
*{ margin: 0; padding: 0;
内嵌样式表
让IT教学更简单，让IT学习更有效
查看源代码
<HEAD>
<STYLE type="text/css">
P
选择符
{ font-family:"隶书";
font-size:18px;
样式规则
color:#FF0000;
}
</STYLE>
</HEAD>
……
<P>床前明月光，</P>
<P>疑是地上霜。</P>
}
/* 定义外边距*/ /* 定义内边距*/
CSS基础选择器
让IT教学更简单，让IT学习更有效
2、标记选择器
标记选择器是指用HTML标记名称作为选择器，按标记名
称分类，为页面中某一类标记指定统一的CSS样式。其基本
语法格式如下：
<head> <style type="text/css">
选择器（即修饰对象）{ 对象的属性1: 属性值1; 对象的属性2: 属性值2; } </style> </head>
3.1 【案例4】文字Logo
让IT教学更简单，让IT学习更有效
案例引入
“Logo”是“商标”的英文缩写，是企 业最基本的视觉识别形象， “文字Logo” 由于涵义明确、直接，易于被理解、认知， 被广泛应用。本节将引入CSS，通过CSS控 制文字来模拟一款“文字Logo”，其效果如 下图所示。
3.1 【案例4】知识引入
网页2
……
网页N
外部样式表文件
让IT教学更简单，让IT学习更有效
使用LINK（链接）标签 : <HEAD> <LINK href="newsyle.css" rel="stylesheet" type="text/css"> </HEAD>
引入的样 式文件
第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定
无。
行内（嵌入）样式表
让IT教学更简单，让IT学习更有效
如果希望某段文字和其他段落文字显示风格不一样， 该如何解决？
使用行内（嵌入）样式表可以解决
行内（嵌入）样式表
让IT教学更简单，让IT学习更有效
查看源代码
<HTML>
<<THIETALDE>>设置本属用段性了<行<P/>内T标I样T签L式采E> </HEAD>
程序员 写代码
为什么需要CSS样式表
让IT教学更简单，让IT学习更有效
• 样式复用、方便网站的后期维护
同一网站共用同 一样式，确保网 站统一的风格
为什么需要CSS样式表
让IT教学更简单，让IT学习更有效
• 页面的精确控制，实现精美、复杂页面
CSS的用途
1、外观美化 2、布局、定位
让IT教学更简单，让IT学习更有效
让IT教学更简单，让IT学习更有效
如果希望一个网站中多个页面的样式保持一致， 如何解决？
使用外部样式表文件样式表可以解决
外部样式表文件
让IT教学更简单，让IT学习更有效
• 根据样式文件与网页的关联方式又分为： – 链接（LINK ）外部样式表 – 导入（@import）外部样式表
样式文件.css
网页1
</div>
实例：标签选择器
CSS基础选择器
让IT教学更简单，让IT学习更有效
3．类选择符 类选择符，通过直接引用元素中类属性的值而
产生效果，这个应用前面总是有一个实心句点 “.”，这个句点用来标识一个类选择符，类名可 以随意命名。
class类选择器
让IT教学更简单，让IT学习更有效
如果希望其他的标签也能采用P标签的样式，怎么办？
<head> <style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> 该语法中，<style>标记一般位于<head>标记中<title>标记之后，也可以把 它放在HTML文档的任何地方。
外部样式表文件
内嵌样式表
让IT教学更简单，让IT学习更有效
• 内嵌样式表
– 内嵌样式表使用格式如下：
<HEAD> <STYLE type="text/css"> 样式规则
</ STYLE> </HEAD>
如果希望本网页内的所有同类标签都采 用统一样式，这时应采用内嵌样式。
• 行内（嵌入）样式表 • 外部样式表文件
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
3.1 【案例4】知识点讲解
让IT教学更简单，让IT学习更有效
• 样式表的基本结构
文档样式表开始， 类型为CSS样式
样式规则
<STYLE type="text/css">
声明文档样
P {color:red; font-size:30px; font-family:隶书;}
其他标签和P标签应该采用相同的样式，所以要为它 们定义一个共享样式。
类样式(class)
<STYLE type="text/css">
样式规则
.red {
.类名
color:red; font-family:"隶书"; font-size:24px; }
……
</STYLE>
class类选择器
选择器的分类3-2 让IT教学更简单，让IT学习更有效
@ import newstyle.css;
</STYLE>
</HEAD>
演示示例4：使用外部样式表1 使用外部样式表2
CSS基础选择器
让IT教学更简单，让IT学习更有效
• HTML 选择符：将HTML标签定义为选择符 ，样式应用于所有该标签。
• CLASS 类选择符 • ID 选择符 • 关联选择符 • 组合选择符 • 伪元素选择符
式表结束
……
</STYLE>
属性
CSS样式规则
P {color:red; font-size:30px; font-family:隶书;}
选择器
属性的值
3.1 【案例4】知识点讲解
让IT教学更简单，让IT学习更有效
1、CSS样式规则
CSS代码结构中的几个特点，具体如下： • CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书
知识引入
让IT教学更简单，让IT学习更有效
CSS样式规则 引入CSS样式表 CSS基础选择器
3.1 【案例4】知识点讲解
让IT教学更简单，让IT学习更有效
1、CSS样式规则
使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对 网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
让IT教学更简单，让IT学习更有效
2、引入CSS样式表
（1）行内式 行内式也称为内联样式，是通过标记的style属性来设置元素的样式，其基本 语法格式如下： <标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名> 该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来 设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在 的标记及嵌套在其中的子标记起作用。
（1）定义样式 （2）应用样式
<style type="text/css">
.blue{color:blue;}
查看源代码
<P><IMG src="libai.jpg" width="140" height="170"
align="left"></P>
本段<P>标签采
<H2>静夜思</H2>
用了行内样式
<H3>作者：李白</H3>
<P style="color:#FF0000; font-size:18px; font-family:隶书;
<BODY> <P style = “color:red;font-size:30px;font-family:隶书;"> 这个段落应用了样式
</P> <p>这个段落按默认样式显示</p>
</BODY> </HTML>
为标签p指 定样式
行内（嵌入）样式表
让IT教学更简单，让IT学习更有效
<BODY style=" background-color:#CCCCCC">
• HTML标签的外观样式比较单一
– 颜色只有黑白 – 字体类型和大小无变化 • 样式表的作用相当于华丽的衣服
外观不同 内容相同
演示示例1：演示能换皮肤的页面
为什么需要CSS样式表
让IT教学更简单，让IT学习更有效
• 样式表能实现内容与样式的分离，方便团队开发
美工做样式
内容与样式和谐Hale Waihona Puke Baidu统一的完整网页
<P>我是郭德刚，</P>
<P>低头思故乡。</P>
……
样式表
所有的段落都采用 P 样式，保证样式统一
3.1 【案例4】知识点讲解
让IT教学更简单，让IT学习更有效
2、引入CSS样式表
（2）内嵌式
内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并
且用<style>标记定义，其基本语法格式如下：
写习惯一般将“选择器、属性和值”都采用小写的方式。 • 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可
以省略，但是，为了便于增加新样式最好保留。 • 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加
上英文状态下的引号。 • 在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。 • 在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可
样式文件： newstyle.css
第三步：浏览查看各网页
Link_Outcss1.html Link_Outcss2.html
演示示例3：使用外部样式表1 使用外部样式表2
3.1 【案例4】知识点讲解
让IT教学更简单，让IT学习更有效
2、引入CSS样式表
（3）链入式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过 <link />标记将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<style type="text/css">
li{color:red;font-size:28px;
font-family:宋体; } </style> ……
标签选择器：用于修饰同 类HTML标签的共性风格
<div>
<ul>
<li>服装城</li>
<li>食品</li>
<li>团购</li>
</ul>
border-bottom-style:dashed ">床前明月光，<BR>
疑是地上霜。<BR>
我是郭德刚，<BR>
低头思故乡。</P>
<P>注释:静夜思：宁静的夜晚所引起的乡思。
疑：怀疑，以为。 举：抬、仰。</P>
</BODY>
行内样式使用范围更小，只适用于 某一个标签，对其他标签不起作用
3.1 【案例4】知识点讲解
文件为CSS样式表。 • rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，
表示被链接的文档是一个样式表文件。
导入外部样式表
让IT教学更简单，让IT学习更有效
使用@import导入 ，语法：
<HEAD>
引入样式表文件
<STYLE TYPE="text/css">
<style>标签声明标签内为 CSS
多条样式规则 1.多个属性间用分号分隔 2.用冒号声明对应属性值
标记选择器
选择器
li { color: red; font-size: 30px; font-family: 隶书; }
让IT教学更简单，让IT学习更有效
样式规则
标签选择器
选择器的分类3-1 让IT教学更简单，让IT学习更有效
让IT教学更简单，让IT学习更有效
第三章 使用CSS技术美化网页
• CSS样式规则 • CSS复合选择器
• CSS字体样式及属性 • CSS层叠性、继承性与优先级
目录
让IT教学更简单，让IT学习更有效
【案例4】：文字Logo 【案例5】：专题栏目
【案例6】：搜索页面
为什么需要CSS样式表
让IT教学更简单，让IT学习更有效
<head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head>
该语法中，<link />标记需要放在<head>头部标记中，并且必须指定<link />标记的三 个属性，具体如下：
• href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 • type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部
相关文档
最新文档