网页设计与制作教程——Web前端开发(第6版)课件第4章 CSS3基础4.3

合集下载

网页设计与制作教学课件

利用鼠标或键盘事件，触发元素的动态变化。
通过改变DOM元素的属性或样式，实现动态效果。
05
网页响应式设计
响应式设计概念
01 响应式网页设计是一种网页设计方法，旨在使网页能够根据不同的设备和屏幕尺寸自适应显示，提供更好的用户体验。
02 它通过使用媒体查询、流式布局、弹性图片和灵活的字体等手段，使网页在不同设备上都能呈现出良好的视觉效果和交互体验。
02 响应式设计可以提高网站的可用性和访问性，从而增加用户满意度和网站流量。
媒体查询
媒体查询是响应式设计的核心技术之一，它允许网页根据设备的特定特性（如屏幕宽度、高度、方向等）应用不同的CSS样式。
通过媒体查询，开发者可以针对不同的设备类型和屏幕尺寸编写特定的 CSS样式，以实现更好的布局和视觉效果。
04
网页交互与动画
网页交互设计
交互元素
包括按钮、表单、链接等，设计时需考虑易用性和用户体验。
导航菜单
设计清晰、直观的导航菜单，方便用户快速找到所需内容。
响应式设计
根据不同设备的屏幕大小和分辨率，自动调整网页布局和元素大小。
CSS动画
01
02
03
关键帧动画
通过定义关键帧和过渡效果，实现元素的平滑运动。
响应性
设计适应不同设备和屏幕尺寸的响应式网站，以确保用户在不同设备上都能获得良好的浏览体验。
视觉层次
通过合理安排内容元素的优先级和组织方式，突出重要信息，引导用户的注意力。
网页设计流程
需求分析
了解客户需求，明确网站目标和目标受众，收集相关资料和竞争对手分析。
规划与草图
制定网站结构、布局和导航方案，绘制草图或线框图，确定基本的设计风格和元素。

《网页设计与制作》课件

《网页设计与制作》PPT 课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计

网页设计与制作教程PPT课件

案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业形象的塑造。采用符合企业品牌形象的颜色、字体和布局，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和习惯。提供清晰的信息架构、便捷的导航和搜索功能，以及响应式设计，确保用户在不同设备和浏览器上都能获得良好的访问体验。
使用CSS和JavaScript创建一个模态对话框，当用户与页面交互时弹出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验证，确保用户输入的数据符合要求，提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网页作品。
学习目标
01
掌握网页设计的基本理念和原则，能够独立设计出符合用户需求的网页。
02
熟悉HTML、CSS、 JavaScript等前端技术，能够熟练地编写网页代码。
外部样式表
通过外部CSS文件引入样式，并在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`

网页设计与制作

第1章网站规划在建立网站之前，需了解网站的开发流程，按照项目管理模式对网站进行必要的规划、开发、测试和发布使用。

一般流程如下：1.建设网站前进行必要的市场分析。

2.明确建设网站的目的及功能定位。

3.制定网站技术解决方案。

4.根据网站的目的确定网站内容、网站结构和网站功能。

5.进行网页设计，并根据技术方案实施网站建设。

6.做出经费预算。

7.网站测试。

8.网站发布及推广。

9.网站维护。

第2章网站基础知识网站（Website），是指在因特网上根据一定的规定，使用HTML等工具制作的用于展示特定内容的相关网页的集合。

网站的组成●域名（Domain Name），是由一串用点分隔的字母组成的Internet上某一台计算机或计算机组的名称。

●空间，常见网站空间有虚拟主机、虚拟空间、独立服务器、VPS。

●程序，即建设与修改网站所使用的编程语言，换成源码就是一堆按一定格式书写的文字和符号。

●网页网页（Web page），是网站中的任意一个页面，通常是HTML格式，文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等。

●基本构成元素：文字、图像、超级链接。

●阅读方式：浏览器。

●类型：以不同的后缀代表不同类型的网页文件。

通常分为静态页面、动态页面。

动态网页（active web page）：指网页内容可根据用户的不同请求从而返回其对应的数据，一般情况下动态网页通过数据库进行架构，一般文件名均以开发语言做后缀，如php、asp等。

也可以说凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。

静态网页：指全部由HTML标记页面，页面的内容和显示效果基本不发生变化，所有的内容包含在网页文件中。

一般文件名均以htm、html、shtml等为后缀。

术语WWW（World Wide Web），亦称作“Web”、“WWW”、“'W3'”，中文名字为“万维网”，"环球网"等，常简称为Web。

【完整版】网页设计与制作课程课件

探索响应式网页设计的原理和技巧，学习如何创建适应不同屏幕和设备的网页。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。

《网页设计与制作》第4章课件

如何实现窗口间的关联3-1
如何实现左列导航，在右面显示相关页面？
使用<a>标签的target目标窗口属性
如何实现窗口间的关联3-2
实现窗口间关联的步骤 1、设置窗口名（框架主页）
设置右窗口名为： rightFrame
…… <frameset rows="20%,*" frameborder="0"> ... ... <frame src="subframe/right.html" name="rightFrame"> ... ... </frameset> ……
操作演示：iframe常用属性
练习——引用google主页
需求说明：
根据提供的素材实现
引用Google主页
练习——<iframe>实现页面复用
需求说明：
根据提供的素材实现
总结2-1
框架的基本语法？如何实现2行2列的典型框架？
如何实现窗口间关联？
内嵌框架的语法？
……
<body> <iframe src="" width="400px" height="236px" frameborder="1" scrolling="no" > <iframe/>
引用站内页面 <iframe src="subframe/the_second.html" width="400px" height="236px" scrolling="no" > <iframe/> </body> …… 引用站外页面： sohu

网页设计与制作第4章PPT课件

ID：用于设置HTML 5音频的标题。源：用于设置HTML 5音频源文件。 Controls：选中该属性，表示显示音频播放控件。 Autoplay：选中该属性，则音频在加载完成后自动播放。 Loop：选中该属性，则音频将循环播放。 Muted：设置音频是否静音。 Preload：选中该属性，则音频在页面加载的同时进行加载，并预备播放。如果已选中 “Autoplay”，则忽略该属性。 “Alt源1”和“Alt源2”：用于设置当“源”编辑框中设置的音频格式不被当前浏览器支持时，打开的第2种和第3种音频格式。
一、网页、网站和主页
15
拓展知识
HTML 5 Audio和Video所支持的音频和视频格式
HTML 5 Audio元素能够播放声音文件和音频流，下表列出了当前Audio元素支持的3种音频格式及其所适用的浏览器。
IE 9
Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
4
相关知识
一、插入HTML 5 Audio
步骤 01 将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站点文件夹，在Dreamweaver CC中创建站点“blog”。
步骤 02 启动Dreamweaver CC，在“文件”面板中双击打开站点“blog”中的“music.html”文档。
“W”和“H”：用于设置视频对象的宽度和高度，默认单位为像素。 Flash回退：用于设置在不支持HTML 5视频的浏览器中显示的SWF文件。
9
三、插入并编辑插件
步骤 01 步骤 02
步骤 03
在“blog”站点中新建文档“chj.html”，并将其在文档编辑窗口中打开。将插入点置于文档编辑窗口中，单击“插入”面板“HTML”类别中的“插件”按钮，打开“选择文件”对话框。在对话框的文件列表中选择要插入的文件“cj.mp3”，并单击“确定”按钮，插入插件，如右图所示。

网页设计与制作PPT课件

1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。一方面是发布者，功能是发布信息；另一方面是浏览者，功能是提供浏览的信息，通过浏览网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或信息之用，如下载说明书、更新文件、驱动程序等。
超链接的标志一般有：文本、图像、热区三种。要注意的是，所有超链接标志均应清晰无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有 gif和Flash动画两种。
第2讲 HTML语言基础
$ [知识目标]
了解HTML文件的基本结构掌握HTML中文本的编辑及图像的语法掌握HTML中各种设置超级链接的语法掌握HTML中表格和框架的基本语法
8 [能力目标]
掌握进行文本及图像的编辑操作掌握创建各种超级链接的操作能够编写简单的HTML网页掌握HTML文件中表格和框架的使用
1.4 网页设计的基本流程
1.4.3网页的测试
1．浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二者对HTML和CSS等语法的支持度是不同的。在 Dreamweaver中提供了可以检查网页中是否含有某版本浏览器不能识别的语法功能，设计者可以借助其进行检查。
1.4 网页设计的基本流程
1.4.4网页上传和发布
网页设计好，必须把它发布到互联网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地。如果是发布到互联网上，要先申请域名和主页空间，然后再利用专用软件（如：CuteFTP）上传，FTP有很多种软件，最著名的是 CuteFTP 和 LeapFTP，也可以用Dreamweaver内置的FTP上传。

新媒体网页设计与制作—Dreamweaver CS6基础、案例、技巧实用教程课件第4章

4.1.1 认识【CSS样式】面板
css样式面板
4.1.2 CSS样式表分类
根据CSS样式表存放的位置以及其应用范围，CSS样式表分为以下三种：
1．外部CSS 2．内部CSS 3．内联CSS
4.1.3 CSS基本语法
CSS格式设置规则由两部分组成：选择器和声明。选择器需要标识已设置格式元素（如A标签、类名称、 ID或复合内容）的术语，而声明则用于定义样式元素。
➢应用CSS样式
对“a”标签重定义后，系统会自动应用到具有“a”标签，即具有超级链接的网页元素上。
4.5 课堂案例—CSS应用
标签“a”的CSS规则定义
4.5 课堂案例—CSS应用
（4）复合内容本例定义了页面底部单元格的背景图像。 ➢定义样式（1）新建CSS规则，【选择器类型】自动选择【复合内容（基于选择的内容）】（2）【选择器名称】自动输入“#tb tr #bot” （3）设置【背景】的【Background-image】属性为“images/bot.png”。 ➢应用样式
4.2SS样式代码添加到
“<head></head>”标签之间，并且用 “<style></style>”标签进行声明。
内部CSS样式即在【新建CSS规则】对话框中，选择【选择器类型】，并输入或选择【选择器名称】，在【规则定义】中选择“仅限该文档”选项。
4.1.3 CSS基本语法
声明由属性和值两部分组成，中间使用半角英文下的冒号“:”分隔如 “.txt”类的定义： <head> <style type="text/css"> .txt {color: #FFF; background-color: #39C;

网页设计与制作单元4 CSS3样式-任务4.1

任务4.1 定义CSS3基础样式
行内样式表的语法格式通常为： <selector style= "property: value; …">…</selector> 由于行内样式表需要为每一个标签设置style属性，后期维护工作量大、成本高，而且HTML代码繁杂，并未真正实现内容与形式的分离。因此，对于需要使用CSS样式规则较多的网页，不建议使用行内样式。
例如：
p{ font-size:12px; color:red; }
/* 设置 p 标签大小为
12px，字体为红色*/
div{ width:300px;height:240px; border:1px;} /* 设置
div标签宽度为300px，高度为240px，边框粗细为1px */
使用标签选择器，网页中所有相关标签将使用所定义的样式。
任务4.1 定义CSS3基础样式
4.1.1 CSS3简介 CSS（Cascading Style Sheets），又称层叠样式表或级联样式表，是用于控制或增强网页外观样式，并且可以与网页内容相分离的一种标记性语言。使用CSS样式表，可以使网页更小、下载速度更快，更新和维护网页更加方便，因此CSS样式表在网页设计中得到广泛应用。早期，网页一般用于传递信息，HTML用于描述网页结构和内容。随着Web的流行与发展，网页外观得到重视。网页制作的越来越复杂， HTML代码变得越来越繁杂，大量的标签堆积起来，难以阅读和理解。
任务4.1 定义CSS3基础样式
CSS设计器分为两种模式： -全部：显示并编辑CSS样式表中的多个规则。 -当前：在CSS样式表中编辑单个规则。在 CSS设计器界面中可以使用以下内容： -来源：与项目相关的 CSS 文件的集合； -@Media：用于控制屏幕大小的媒体查询； -选择器：与 @Media 面板中所选媒体查询相关的选择器； -属性：与所选的选择器相关的属性，提供仅显示已设置属性的选项。

网页设计与制作教程——Web前端开发(第6版)课件第1章 HTML 5概述1.2

2. HTML的全局事件属性事件是针对某个元素的，可识别的动作。例如，针对“确定”按钮的单击事件，文本框内容变化事件、复选框的选中或取消选中事件等。 HTML有使事件在浏览器中触发动作的能力，例如，当用户单击某个元素时执行JavaScript程序。在HTML中，事件既可以通过JavaScript直接触发，也可以通过全局事件属性触发。所谓全局事件属性是指可用于大多数HTML元素的事件属性。有关事件编程的知识，将在第9章JavaScript事件处理中介绍。
1.2 HTML5的基本结构和语法规则
4．<meta charset>标签 <head>…</head>标签中的<meta charset>指定网页文档中的字符集，称为HTML文档编码，HTML5文档直接使用meta元素的charset属性指定文档编码，语法格式如下： <meta charset="UTF-8"> 为了被浏览器正确解释和通过W3C代码校验，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际的编码一致，否则就会呈现为乱码。对于中文网页的设计者来说，指定代码的字符集为“UTF8”。
1.2 HTML5的基本结构和语法规则
1.2.4 元素的分类依据元素的作用不同，元素可以分为元信息元素和语义元素。 1．元信息元素元信息（meta-information）或称元数据（Metadata）类元素是指用于描述文档自身信息的一类元素，meta元素定义元信息，包含页面的描述、关键字、最后的修改日期、作者及其它元信息，<meta>标签写在<head>…</head>标签中。元信息类元素是提供给浏览器、搜索引擎（关键字）以及其它Web服务调用，一般不会显示给用户。 meta元素的常用属性如下： 1）charset：定义文档的字符编码，常用的是“UTF-8”。 2）content：定义与name和http-equiv相关的元信息。 3）name：关联content的名称（常用的有keyowrd关键字、author作者名、 discriptiont页面描述）。

网页设计与制作PPT教程

果等交互效果。
学习JavaScript需要理解事件、函数、对象等概念，以及如何编写有效的JavaScript代码。
响应式设显示的设计方法。
通过媒体查询、弹性布局和流式设计等技术，实现网页在不同屏幕尺寸下的自适应布局。
学习响应式设计需要理解不同屏幕尺寸和设备的特点，以及如何编写响应式设计的代码。
文字排版技巧
字体选择
选择清晰易读的字体，避免使用过于花哨的字体。
字号大小
根据内容的重要程度选择合适的字号，突出标题和重点内容。
行间距
适当的行间距可以提高文本的可读性。
文字颜色
考虑背景颜色和文字颜色的对比度，确保文字清晰可见。
图片使用规范
01
图片质量
选用高清、无损的图片，确保图片清晰度。
03 网页布局与排版
常见网页布局
固定布局
整个网页的宽度和高度固定，适合展示内容较多的页面。
弹性布局
使用百分比、em等相对单位设置元素大小，使页面在不同设备上呈现良好。
流式布局
页面元素随浏览器窗口的大小自适应调整，适合响应式设计。
网格布局
将页面划分为若干行和列，使内容在网格中排列，便于对齐和规划。
05 网页优化与发布
网站性能优化
页面加载速度
01
优化图片、脚本和CSS文件，减少HTTP请求，使用CDN加速，
以提升页面加载速度。
代码优化
02
精简HTML、CSS和JavaScript代码，避免冗余和无效的代码，
提高网页的渲染效率。
响应式设计
03
根据不同设备和屏幕尺寸，自适应调整网页布局和元素尺寸，
网页设计不仅关注页面的外观，还关注其在不同设备和浏览器上的显示效果，以及如何吸引和留住用户。

网页设计与制作教程——Web前端开发(第6版)课件第4章 CSS3基础4.4

font-size: 12px; /*设置文字大小为12px*/ color: #000; /*设置文字颜色为黑色*/ background-color: #fff; /*设置背景颜色为白色*/ } 对于有一定基础的Web设计人员可以将上述代码改写为如下： /*定义body的样式为12px大小的黑色华文中宋字体，且背景颜色为白色*/ body{font-family:"华文中宋"; font-size:12px; color:#000; background-color:#fff;}
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
非常棒的你！又开始学习新的内容
4.4 CSS的基本语法
（5）空格多重声明和空格的使用使得样式表更容易被编辑。
（6）大小写 CSS对大小写不敏感，但在编写样式时，推荐属性名和属性值都用小写。
（7）选择器的分组具有相同样式的选择器，可以将这一系列的选择器分成一个组，用逗号将每个选择器隔开。例如，定义h1~h6标题的颜色都为蓝色，对所有的标题元素合为一组。 h1,h2,h3,h4,h5,h6 { color: blue; }
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
第4章 CSS3基础
4.4 CSS的基本语法
本节介绍CSS的基本语法。
目录
第4章 CSS3基础
4.1 CSS简介 4.2 在HTML中使用CSS的方法 4.3 CSS的两个主要特性 4.4 CSS的基本语法 4.5 CSS的选择器 4.6 属性值的写法和单位 4.7 HTML文档结构与元素类型 4.8 实训——制作内容详情页习题4
（2）记得写引号如果值为若干单词，则要给值加引号。例如下面代码： p {font-family: "sans serif";}

网页设计与制作整套课件完整版电子教案最全ppt整本书课件全套教学教程

目的是为了提供给用户一个友好、易于使用的网络环境，同时提高网站的知名度和访问量。
03
网页制作的基本流程
通常包括规划、设计、开发、测试和发布等阶段。
网页制作技术和工具
网页制作技术
包括HTML、CSS、JavaScript、PHP、等，用于构建和开发网站。
网页制作工具
常见的工具有Adobe Dreamweaver、Microsoft Visual Studio、Sublime Text等，用于提高开发效率。
通过学习，学生可以掌握网页的基本架构、样式、交互等关键技术，能够独立完成简单的网页设计和制作。
本课程还注重实践操作，通过大量的案例和项目实战，培养学生的实际操作能力和创新思维。
课程展望
随着互联网技术的不断发展，网页设计与制作的技术也在不断更新和升级。未来，网页设计师需要不断学习和掌握新的技术和工具，以适应行业的发展和变化。
熟悉并能够使用常用的网页设计工具；提高学习者的综合素质和创新能力。
课程内容
第一章：网页设计与制作的基本概念第三章：网页布局与色彩搭配第五章：综合案例分析与实践操作
第二章：网页设计工具的使用
第四章：交互设计与响应式设计
每章都包含了大量的案例和实际操作，帮助学习者更好地理解和掌握所学内容。同时，课程还提供了丰富的素材和模板，方便学习者进行实践操作。
本课程在内容上不断更新和完善，将不断引入新的知识点和案例，以保持课程的新鲜感和实用性。
学生可以通过进一步学习和实践，掌握更深入的网页设计和制作技术，为未来的职业发展打下坚实的基础。
THANK YOU.
元素选择器是最基本的选择器，它通过HTML元素的标签名来选择元素。例如，`p`选择器会选择页面上的所有段落元素。

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

</body>
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
非常棒的你！又开始学习新的内容
《网页设计与制作教程Web前端开发第6版》刘瑞新主编配套资源
第4章 CSS3基础
4.3 CSS的两个主要特性
本节介绍CSS的两个主要特性。
目录Βιβλιοθήκη 第4章 CSS3基础4.1 CSS简介 4.2 在HTML中使用CSS的方法 4.3 CSS的两个主要特性 4.4 CSS的基本语法 4.5 CSS的选择器 4.6 属性值的写法和单位 4.7 HTML文档结构与元素类型 4.8 实训——制作内容详情页习题4
4.3 CSS的两个主要特性
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>继承示例</title> <style type="text/css"> p {color: #00f; /*定义文字颜色为蓝色*/ text-decoration: underline; /*增加下划线*/ } p em { /*为p元素中的em子元素定义样式*/ font-size: 24px; /*定义文字大小为24px*/ color: #f00; /*定义文字颜色为红色*/ } </style>
</head>
4.3 CSS的两个主要特性
<body> <h3>CSS基础</h3> <p>CSS是一组格式设置规则，用于控制<em>Web</em>网页的外观。</p> <ul> <li>CSS的优点 <ul> <li>表现和内容（结构）分离</li> <li>易于维护和<em>改版</em></li> <li>更好的控制页面布局</li> </ul> </li> <li>CSS设计与编写原则</li> </ul>
<head> <meta charset="utf-8"> <title>多重样式表的层叠</title> <style type="text/css"> div { color: red; font-size: 12pt; } p { color: blue; } </style>
</head> <body>
4.3 CSS的两个主要特性
1. 层叠 CSS的第一个特性是“层叠”，层叠（cascade）是指CSS能够对同一个元素应用多个样式表的能力。
【例4-5】样式表的层叠示例。在div标签中嵌套p标签，本例文件4-5.html在浏览器中显示的效果，如图4-7所示。
4.3 CSS的两个主要特性
<!DOCTYPE html> <html>
<div>  <p>这个段落的文字为蓝色12号字</p>
</div> </body> </html>
4.3 CSS的两个主要特性
2. 继承 CSS的第二个特性是“继承”，继承指的是特定的CSS属性可以从父元素向下传递到子元素。
【例4-6】CSS继承示例，本例文件4-6.html在浏览器中显示的效果如图4-8所示。