延安大学：《网页制作基础教程》课程PPT教学课件_第十一章 CSS

网页制作基础教程 牛永洁 延安大学计算机学院

网页制作基础教程 延安大学计算机学院 牛永洁

内容提要 ◆本章主要学习内容 CSS的基本概念 将CSS加入 XHTMLI中的方法 CSS中选择器的使用

内容提要 ❖本章主要学习内容 CSS的基本概念 将CSS加入XHTML中的方法 CSS中选择器的使用

CSS简介 ☆CSS是 Cascading Style Sheets的缩写,中文名 称是层叠样式表。 ◇样式就是一个规定(规则),描述一个网页中的 个特定部分的显示格式。样式表就是一组样式 的集合

CSS简介 ❖CSS是Cascading Style Sheets的缩写，中文名 称是层叠样式表。 ❖样式就是一个规定（规则），描述一个网页中的 一个特定部分的显示格式。样式表就是一组样式 的集合

CSS简介-样式 cSs样式的格式:两部分组成一选择器+声明块 选择器 个声明 color: red: font-size: 1.5em 个声明

CSS简介---样式 p color：red； 选择器 { font-size:1.5em； } 一个声明 一个声明 CSS样式的格式：两部分组成---选择器+声明块

XHTML与CSS结合 1.外部样式表 2.内部样式表 3.内嵌样式

XHTML与CSS结合 1. 外部样式表 2. 内部样式表 3. 内嵌样式

XHTML与CSS结合一链接外部 令在head区域添加 豪re表示链接的类型,这里表示是样式表 ※type告诉浏览器样式表是文本格式 ※hre表示样式表所在的位置

XHTML与CSS结合—链接外部 ❖ 在head区域添加  rel表示链接的类型，这里表示是样式表 type告诉浏览器样式表是文本格式 href表示样式表所在的位置

HTML与CSS结合一内部样式 令在网页的head区域添加样式代码 样式表 令内嵌样式 内嵌样式是在HTML标签内部直接使用。 <table style= color: red; margin-right: 200px

XHTML与CSS结合—内部样式 ❖在网页的head区域添加样式代码 ……样式表 ❖内嵌样式 内嵌样式是在HTML标签内部直接使用

XHTML与CSS结合 ◆如果一个网页同时具备这三种类型的样式,而 这三种样式中有冲突,该怎么办? 优先级顺序:内嵌>内部>外部。 推荐使用外部链接方式,达到内容与显示相分 离的效果

XHTML与CSS结合 ❖ 如果一个网页同时具备这三种类型的样式，而 这三种样式中有冲突，该怎么办？ ❖ 优先级顺序：内嵌>内部>外部。 ❖ 推荐使用外部链接方式，达到内容与显示相分 离的效果

CSS的这择器 冷小标签:d在表示分割,分离的意思,在视觉 上没有任何的作用,它的作用是可以把网页从逻 辑上分成几个组成部分。每个部分表示一块。 ☆span标签:行内显示元素,视觉上没有任何作用 也是在逻辑上把内容分成几部分,只是一个行内 元素

CSS的选择器 ❖div标签：div在表示分割，分离的意思，在视觉 上没有任何的作用，它的作用是可以把网页从逻 辑上分成几个组成部分。每个部分表示一块。 ❖span标签：行内显示元素，视觉上没有任何作用， 也是在逻辑上把内容分成几部分，只是一个行内 元素

CSS的选掉器 ◆元素的id:在网页中,有时候需要给标签取名字,这个名 字通过使用标签的属性d=..来表示。在一个网页中id名 必须唯一。 ◆元素的类,如果有一些标签在意义上属于同一类,可以使 用另外的一个属性 class来表示

CSS的选择器 ❖ 元素的id：在网页中，有时候需要给标签取名字，这个名 字通过使用标签的属性id=“…”来表示。在一个网页中id名 必须唯一。 ❖ 元素的类，如果有一些标签在意义上属于同一类，可以使 用另外的一个属性class来表示