中职-《网页设计与制作——CSS样式概述》同步教学高教版

CSS概述 主讲人：陈良琼 一、CSS与HTML的关系 二、CSS的优点 三、一个CSS的应用实例 四、CSS的基本语法 五、CSS的语法规则 六、 CSS的使用方法 目 录 CONTENTS CSS技术诞生于1996年，由W3C负责组织 和制定的。简单讲，HTML和CSS的关系就是 “内容”和“形式”，即HTML来组织网页的结 构和内容，CSS来决定页面的表现形式。 一、CSS与HTML的关系 CSS是Cascading Style Sheets （层叠样式表）的简称。 CSS是W3C（World Wide Web Consortium）定义和维护的标准，用来定义如何显示HTML元素外观（字体、字号、间距和颜色等）。CSS语言是一种标记语言，不需要编译，直接由浏览器解释执行。CSS技术能将样式的定义与网页内容分离，即网页的外观设置信息（CSS）从网页内容（HTML代码）中独立出来，并集中管理。 CSS的功能 灵活地控制网页中文字的字体、颜色、大小、间距等。 灵活地设置一段文本的行高、缩进，并可以为其加入三维效果的边框。 方便地为网页中的任何元素设置不同的背景颜色和背景图像。 精确地控制网页中各元素的位置。 与脚本语言相结合，产生各种动态效果。 使HTML代码更简练，缩短了浏览器打开页面的时间。 二、CSS的优点 和传统的HTML相比，CSS除了 具有强大的控制能力和排版能力 之外，最主要的是实现了内容与样式的分离，这种做法带来了许多好处。 Q1 Q2 Q3 Q4 简 化 了 网 页 的 代 码 ， 提 高 了 访 问 速 度 。 可 以 构 建 公 共 样 式 库 ， 便 于 重 用 样 式 。 便于修改网站的样式。 方便团队的开发。 三、一个CSS的应用实例 在 学 习 CSS 的 过 程 中 只 需 要 使 用 Windows 自 带 的 记 事 本 就 可 以 了 。 下 面 通 过 一 个 例 子 给出使用CSS前后两个网页的区别。 【例】运用CSS前后的对比实例。 CSS由一系列样式规则组成，浏览器将这些规则应用到相应的元素上。 CSS 规则可以表达为如图所示。 四、CSS的基本语法 一 条 CSS规 则 由 两 部 分 构 成 ： 选 择 器 （ selector ） 以 及 一 条 或 多 条 声 明 （ declaration ） ， 多 条 声 明 之 间 用 分 号 分 开 。 选 择 器 其 实 就 是 CSS 样 式 的 名 字 ， 常 用 的 选 择 器 有 ： 标 记 、 类 、 ID 、 伪 类等。 声 明 用 于 定 义 元 素 样 式 ， 使 用花括 号 将其包 围起来 ，每条 声 明 由 属 性 （ property ） 和 值 （ value ） 组 成 ， 其 中 属 性 是 希 望 设 置 的样式属性，属性和值之间用冒号分开。 下面来看一条CSS规则，这条规则的作用是将 h1 元素内的文字颜色定 义为红色，同时将字体大小设置为14像素。 h1 { color：red; font-size：14px; } 如图所示的示意图展示了这条CSS规则的结构。 五、CSS的语法规则 1. 2. 3. 和HTML一样可以在CSS中插入注释来说明 代码的意思，CSS注释是以“/*” 开头， 以“*/”结尾。 属性和值可以设置多个，从而实现对同一标记 声明多条样式风格。每条声明之间要用分号隔 开。 例如： p { text-align: center; color: red; } 为了方便阅读，可以采用分行的方式书写样 式表，即每行只描述一个属性。 例如可以将p {text-align: center; color: black; font-family: arial; } 写成： P { text-align: center; color: black; font-family: arial; } 5. 4. 如果属性的值是多个单词组成，必须在值上 加引号，比如字体的名称经常是几个单词的 组合。例如：P { font-family："sans serif"; } 如果一个属性有多个值，则每个值之间要用 空格隔开。例如：a { padding：6px 4px 3px} 6. 如果要为某个属性设置多个候选值，则每个 值之间用逗号隔开。例如：P { font- family："Times New Roman"，Times， serif ; } 7. 可以把具有相同属性和值的选择器组合 起来书写，用逗号将选择器分开，这样 可以减少样式的重复定义，这也叫做选 择器的集体声明。 p, table { font-size: 9pt ; } 效果完全等效于： p { font-size: 9pt