1 / 78

第三章 层叠样式表（ CSS ）技术

第三章 层叠样式表（ CSS ）技术. 元素定位 元素布局 列表样式 表格制作 页面布局. 基于 CSS, 本章介绍网页的基本格式化和布局技术 CSS 简介 定义样式 使用样式 CSS 基本属性 样式层叠性 元素框模型. 如今网页排版格式越来越来复杂，如果要对多个网页的同样格式一一进行设计，那么就会给制作人员带来很多的工作量，所以解决办法是采用 CSS 样式来一次性对若干个文档的格式进行控制。. 3.1 CSS 简介.

mia-saunders
Télécharger la présentation

第三章 层叠样式表（ CSS ）技术

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第三章 层叠样式表（CSS）技术 • 元素定位 • 元素布局 • 列表样式 • 表格制作 • 页面布局 基于 CSS,本章介绍网页的基本格式化和布局技术 CSS 简介 定义样式 使用样式 CSS 基本属性 样式层叠性 元素框模型

  2. 如今网页排版格式越来越来复杂，如果要对多个网页的同样格式一一进行设计，那么就会给制作人员带来很多的工作量，所以解决办法是采用CSS样式来一次性对若干个文档的格式进行控制。如今网页排版格式越来越来复杂，如果要对多个网页的同样格式一一进行设计，那么就会给制作人员带来很多的工作量，所以解决办法是采用CSS样式来一次性对若干个文档的格式进行控制。 3.1 CSS 简介

  3. CSS（Cascading Style Sheet，层叠样式表 ）技术是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 3.1 CSS 简介

  4. CSS样式存于样式表文件中，然后在多个网页中同时应用该样式表中的样式 ，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。 3.1 CSS 简介

  5. 3.1 CSS 简介 • 例3.1 使用 CSS 将所有文字显示为“倾斜” • Dreamweaver8操作：菜单“文本/CSS样式/新建”

  6. 生成的代码 参看教材P47 样式选择器 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- p { font-style: italic; } --> </style> </head>

  7. 3.2 定义样式3.2.1 样式定义格式 样式定义由样式规则组成，每条样式规则包括选择器和样式声明,如： selector {property:value; …} 样式声明由一系列属性声明组成,而属性声明又由属性名和属性值构成 示例 p { font-style: italic; color: #FF0000;} /* 将普通 p 段落文字显示为斜体、红色 */ h1,h2,h3 { color:red } /* 将 h1,h2,h3 标题文字显示为红色 */ h2 { font-size: small; color:blue } /* 将 h2 标题文字指定为小的蓝色字 */

  8. 3.2.2 基本选择器 最常用的选择器:HTML 标签选择器、类选择器和 ID 选择器 一、HTML 标签选择器 为 HTML 标签定义的样式将改变它的默认显示格式 例3.2 超链接没有下划线 a {text-decoration: none; /* 去除超链接的下划线 */} 中山大学计算机科学系

  9. 3.2.2 基本选择器 二、类选择器 形式:一个点号和一个类名： .classname { property:value;…} 效果:使具有指定 class 属性的页面元素具有该类样式指定的显示格式 例3.3 所有大学名显示为“倾斜、加粗” .university_name { font-style: italic; font-weight: bold; } /* 文字倾斜、加粗 */ 中山大学计算机科学系

  10. 3.2.2 基本选择器 三、ID 选择器 形式:一个井号（#）和一个 ID #IDname { property:value;…} 效果:使具有指定 ID 属性的元素具有指定格式 例3.4 使术语“级联样式表(CSS)”显示为“倾斜、加粗、大字体” #css_name { font-style: italic; font-weight: bold; font-size: large; } 中山大学计算机科学系

  11. 3.3 使用样式 CSS 样式的三种使用方式: 嵌入样式表（即在新建样式规则时选择：仅对该文档） 链接外部样式表(标准方法，实现网页结构和表现的完全分离，外部样式表是一个独立的CSS文件) 内嵌样式（在HTML标签中定义样式） 优先程度：内嵌式>嵌入样式表>链接外部样式表

  12. 3.3.1 嵌入样式表 形式:使用 <style> 元素把 CSS 样式定义在 HTML 文档的 <head> 元素内 效果:作用于当前页面的有关元素 例3.5 所有大学名显示为“加粗”，并且所有超链接没有下划线 <style type="text/css"> .university_name { font-weight: bold; } a { text-decoration: none; } </style> 中山大学计算机科学系

  13. 3.3.2 链接外部样式表 定义:把 CSS 样式定义写入一个以 css 为扩展名的文本文件中，如 mystyle.css 形式:在 <head> 元素内加入代码： <link rel="stylesheet" type="text/css" href="mystyle.css" /> 效果:外部样式表中的样式作用于页面 好处：一个外部样式表可以控制多个页面的显示外观，从而确保这些页面外观的一致性 例3.6 设计多个页面，要求这些页面中所有大学名称的显示样式为“加粗”，并且所有超链接没有下划线

  14. 3.3.3 内嵌样式 定义:直接使用 HTML 标签的 style 属性定义的样式,如： <p style="font-size:large;color:red">Hello</p> 效果:只作用于这个元素 例3.7 使大学名显示为“加粗”，并且超链接没有下划线

  15. 3.4 CSS 基本格式化属性 • CSS 属性分类： • 基本格式化属性：包括字体、文本和背景属性等 • 布局性属性：包括框属性、定位属性、布局属性、列表属性和表格属性等。 • 可视化设置方法:“样式”对话框、“CSS 属性”窗格

  16. 显示当前样式 显示所有样式 内部样式表 样式名称 样式及属性值

  17. 3.4.1 属性值与单位 一、属性值分类 单词。如 font-style: italic; 数字值。通常带有单位，如 font-size:12px; 颜色值。如 color: red;

  18. 3.4.1 属性值与单位 二、数字值单位 数字值用于定义各种元素的长度（包括高度、宽度和粗细等），可以使用下表单位 中山大学计算机科学系

  19. 3.4.1 属性值与单位 三、颜色值 可以下表所列方式为 CSS 属性（如前景色、背景色）指定颜色值

  20. 3.4.2 字体属性 字体属性用于控制文本中的字体格式，如文字的字体、大小、粗细、颜色和修饰等 常用字体属性:font-family、font-size、font-style、font-weight、font-variant、font、text-transform、text-decoration、color 例3.8 将文字“JavaScript”设置为Times New Roman 字体、加粗、倾斜、字体大小36磅、红色字，并且小体大写

  21. 3.4.3 文本属性 文本属性用于控制文本块的段落格式，如首行缩进、段落对齐方式等 常用文本属性:text-align、vertical-align、text-indent、line-height、letter-spacing、word-spacing、white-space 例3.9 将标题居中，并使正文段落首行缩进2个字符、行间距150%、字间距1磅 中山大学计算机科学系

  22. SPAN span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。 举例:<p>早睡早起 使人健康、富裕又聪颖。</p> 假设我们想将健康,富裕,聪颖这三个词用红色显示.我们可以用<span>标签来标记,然后，我们将这几个span设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。

  23. <p>早睡早起 使人<span class="benefit">健康</span>、 <span class="benefit">富裕</span> 和<span class="benefit">聪颖</span>。</p> 相应的CSS代码如下： span.benefit { color:red; } 示例程序见d:/test/span-exe.html

  24. SPAN与DIV span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。 让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表：

  25. <div id="democrats"> <ul> <li>富兰克林·D·罗斯福</li> <li>哈利·S·杜鲁门</li> <li>约翰·F·肯尼迪</li> <li>林登·B·约翰逊</li> <li>吉米·卡特</li> <li>比尔·克林顿</li> </ul> </div> • <div id="republicans"> <ul> <li>德怀特·D·艾森豪威尔</li> <li>理查德·尼克松</li> <li>杰拉尔德·福特</li> <li>罗纳德·里根</li> <li>乔治·布什</li> <li>乔治·W·布什</li> </ul> </div>

  26. 可以定义样式如下: #democrats { background:blue; } #republicans { background:red; }

  27. 3.4.4 背景属性 背景属性用于控制页面元素的背景颜色和背景图案 常用背景属性: background-color、background-image、background-position、background-repeat、background-attachment、background 例3.10 一个小图像填充整个页面背景，并且程序代码设置为银灰色背景

  28. 3.5 样式层叠性3.5.1 文档结构 • HTML 文档的结构:是指 HTML 元素之间的嵌套关系，可以用文档结构树表示 • 节点表示 HTML 元素 • 若一个元素直接包含另一个元素，则画一条连线 中山大学计算机科学系

  29. 3.5.2 样式继承 • 样式继承是指 HTML 元素可以继承父元素的 CSS 属性 • 有些属性被自动继承，如字体、文本等属性；但有些属性不被自动继承，如背景、边框等属性 • 对于相对长度单位值（如百分比），继承的是相对值的实际计算值 • 特殊的属性值:inherit • 例3.11 定义样式，将页面的普通文字大小设置为 12pt，而将 h1 标题的文字大小设置为普通文字的 150% body { font-size: 12pt; } h1 { font-size: 150%; }

  30. 3.5.3 样式层叠 • 样式层叠性：所有样式规则将按继承层次传递作用于相关 HTML 元素，并按层叠规则解决 CSS 属性的重复定义问题 • 层叠规则： • 规则1：HTML 标签 ＜ 类 ＜ ID 优先级依次升高 • 规则2：外部样式表 ＜ 嵌入样式表 ＜ 内嵌样式。但是，当选择器更有针对性时，规则1优先于规则2 • 规则3：定义的样式覆盖继承的样式 • 例3.12 超链接的字体为“隶书”，没有下划线，但其中一个超链接有下划线

  31. 3.5.4 结构性选择器 通配选择器 * * { padding: 0; margin: 0; } 清除所有元素的内边距和外边距 后代选择器 address i { color:red; } 将位于 <address> 元素内的 <i> 元素设置为红色字 子选择器 body > h1{ color:red;} 将 <body> 元素的 <h1> 子元素设置为红色字

  32. 3.5.4 结构性选择器 相邻兄弟选择器 h1 + p { color:red;} 将与 <h1> 元素相邻的下一个 <p> 兄弟元素设置为红色字 带类名的 HTML 标签选择器 span.term { color: red; } 将具有类名为“term”的 <span> 元素设置为红色字 带 id 的 HTML 标签选择器 span#id_name { color: red; } 将其 id 属性为“id_name”的 <span> 元素设置为红色字

  33. 3.5.4 结构性选择器 属性选择器:为具有某个属性值的 HTML 元素定义样式 ⑴简易匹配属性选择器： li[class] { color: red;} ⑵精确匹配属性选择器： li[class="term"] { font-weight: bold; } ⑶部分匹配属性选择器： li[class~="att"] { font-style: italic; } ⑷前缀匹配属性选择器： li[class|="term"] { text-decoration: underline; }

  34. 3.5.5 伪类 • 常用伪类 • :link 未访问超链接 • :visited 已被访问超链接 • :active 激活状态 • :hover 鼠标悬停状态 • :focus 已获取焦点状态 • :first-child 第1个子元素 • 例3.13 中山大学计算机科学系

  35. 3.5.6 伪元素 • 伪元素是指在 HTML 文档中没有用 HTML 标签明确标记的元素 • :first-letter 首字母 • :first-line 首行 • :before 在某元素内容之前插入内容 • :after 在某元素内容之后插入内容 • 例3.14 中山大学计算机科学系

  36. 3.6 元素框模型3.6.1 框模型概述 元素框:可显示的页面元素都显示为一个矩形框，包括内容区、内边距、边框和外边距4个区域 例3.15

  37. 3.6.2 框属性 一、边框属性 • CSS 边框属性包括边框设置和方向的组合: • 边框设置:包括边框颜色（color）、边框样式（style）和边框宽度（width） • 边框方向：上（top）、右（right）、下（bottom）和左（left） • 例3.16 为段落设置灰色边框，其中，上、下边框宽度分别为 thin 和 thick，而左、右边框宽度都为 medium 中山大学计算机科学系

  38. 3.6.2 框属性 二、内边距属性 内边距属性 padding-top、padding-right、padding-bottom 和 padding-left 分别设置上、右、下、左内边距的宽度 例3.17 为段落设置内边距，其中，上、下内边距宽度为 10px，而左、右内边距宽度为 20px

  39. 3.6.2 框属性 三、外边距属性 外边距属性 margin-top、margin-right、margin-bottom 和 margin-left 分别设置上、右、下、左外边距的宽度 例3.18 为页面体设置外边距，其中，上、下外边距宽度为 1cm，而左、右外边距宽度为 2cm 中山大学计算机科学系

  40. 3.6.3 外边距重叠 当两个元素的垂直外边距相遇时，它们将重叠为一个外边距。重叠后的外边距高度等于两个发生重叠的外边距的高度中的较大者 例3.19 标题的下外边距高度为 1cm，列表项上、下外边距高度为 0.5 cm。易知：标题与第1个列表项之间的外边距高度为 1cm 中山大学计算机科学系

  41. 3.6.4 框大小 一、替换元素与非替换元素 替换元素：是指其元素内容来自 HTML 标签的属性值。如 img 元素 非替换元素：是指其元素内容来自 HTML 标签自身或标签对之间的内容。如 p、h1、h2、hr 等 二、大小属性 自动计算大小 width、height max-width、min-width、max-height 和 min-height

  42. 3.6.4 框大小 三、内容区大小与元素框大小 内容区大小:是指元素内容区的宽度和高度，可以由属性 width 和 height 设置。 元素框大小 元素框宽度=width+左右内边距+左右边框+左右外边距 元素框高度= height +上下内边距+上下边框+上下外边距 例3.20 中山大学计算机科学系

  43. 3.7 元素定位3.7.1 定位概念 一、文档流 每个可显示元素以元素框的形式，按照其 HTML 代码位置依次显示，从而构成一个文档流。即： 块级框从上至下依次排列 行内框在一行中水平布置 二、定位属性 position ：static、relative、absolute 、 fixed top、bottom、left、right和z-index

  44. 3.7.1 定位概念 三、包含块 包含块是显示文档流的矩形区域，最基本的包含块是 body 元素框和浏览窗口 自定义包含块：将一个元素的定位方式设置为非 static 方式 “一个元素的包含块”是指该元素最近的按非 static 方式定位的祖先元素（注：不一定是父元素）的元素框，或者是 body 元素框（或浏览窗口）

  45. 3.7.2 四种定位方式 静态定位（static）：默认，使元素框处于文档流的常规位置 相对定位（relative）：将元素框从常规位置偏移指定距离 绝对定位（absolute）：元素框从文档流完全删除，并相对于其包含块定位 固定定位（fixed）：与绝对定位类似，但其包含块是浏览窗口

More Related