没有合适的资源?快使用搜索试试~ 我知道了~
层叠样式表
需积分: 10 2 下载量 191 浏览量
2017-09-05
10:33:40
上传
评论
收藏 2.21MB PPT 举报
温馨提示
试读
56页
CSS是网页设计中众多样式的集成,它可以使页面风格统一化和标准化。CSS提供的链接功能可以让所有的网页使用同一种样式,使网页的维护更新变得轻松、高效。CSS由一系列样式规则组成,浏览器将这些规则应用到相应的元素上。一条CSS 规则由两部分构成:选择器(selector)以及一条或多条声明(declaration),多条声明之间用分号分开。选择器其实就是CSS样式的名字,常用的选择器有:标记、类、ID、伪类等;声明用于定义元素样式,使用花括号将其包围起来,每条声明由属性(property)和值(value)组成,其中属性是希望设置的样式属性,属性和值之间用冒号分开
资源推荐
资源详情
资源评论
课 题:网页表现 语言
课 题:网页表现 语言
——
——
CSS
CSS
目的及要求:使用
目的及要求:使用
CSS
CSS
设置页面格式
设置页面格式
教学重点:新建、编辑
教学重点:新建、编辑
CSS
CSS
样式和文档的方法以
样式和文档的方法以
及超级链接的
及超级链接的
CSS
CSS
样式定义
样式定义
教学难点:附加样式表
教学难点:附加样式表
教学课时:
教学课时:
2
2
课时
课时
教学方法:提问与比较教学方式,激发学生兴趣;
教学方法:提问与比较教学方式,激发学生兴趣;
教学内容与步骤:
教学内容与步骤:
第六讲
样式风格设计
样式风格设计
CSS
CSS
是网页设
是网页设
计中众多样式的集
计中众多样式的集
成,它可以使页面
成,它可以使页面
风格统一化和标准
风格统一化和标准
化。
化。
CSS
CSS
提供的
提供的
链接功能可以让所
链接功能可以让所
有的网页使用同一
有的网页使用同一
种样式,使网页的
种样式,使网页的
维护更新变得轻松、
维护更新变得轻松、
高效。
高效。
CSS
CSS
样式表概述
样式表概述
CSS
CSS
样式面板
样式面板
CSS
CSS
样式的创建
样式的创建
CSS
CSS
样式的管理
样式的管理
CSS
CSS
样式中滤镜的使用
样式中滤镜的使用
3
3.1 CSS 概述
3.1.1 CSS 与 HTML 的关系
CSS 技术诞生于 1996 年,由 W3C 负责组织和制定
的。 HTML 和 CSS 的关系就是“内容”和“形式”,即 HTML
来组织网页的结构和内容, CSS 来决定页面的表现形式
。
3.1.2 CSS 的优点
和传统的 HTML 相比, CSS 除了具有强大的控制
能力和排版能力之外,最主要的是实现了内容与样式的分
离,这种做法带来了许多好处。
( 1 )简化了网页的代码,提高了访问速度。
( 2 )可以构建公共样式库,便于重用样式。
( 3 )便于修改网站的样式。
( 4 )方便团队的开发。
4
3.2 CSS 的基本语法
3.2.1 CSS 的语法
CSS 由一系列样式规则组成,浏览器将这些规则应
用到相应的元素上。一条 CSS 规则由两部分构成:选择
器( selector )以及一条或多条声明( declaration ),
多条声明之间用分号分开。选择器其实就是 CSS 样式的
名字,常用的选择器有:标记、类、 ID 、伪类等;声明
用于定义元素样式,使用花括号将其包围起来,每条声明
由属性( property )和值( value )组成,其中属性是希
望设置的样式属性,属性和值之间用冒号分开。 CSS 规
则可以表达为如图 3-3 所示。
5
3.2.2 CSS 的语法规则
1. 和 HTML 一样可以在 CSS 中插入注释来说明代码的意思, CSS 注释是以“ /*”
开头,以“ */” 结尾。
2 .属性和值可以设置多个,从而实现对同一标记声明多条样式风格。如果要设
置多个属性和值,则每条声明之间要用分号隔开,并养成在最后一条声明也加上分号
的习惯,这样在增删声明时不易出错。例如: p { text-align: center; color: red; }
3 .为了方便阅读,可以采用分行的方式书写样式表,即每行只描述一个属性。
例如可以将 p {text-align: center; color: black; font-family: arial; } 写成:
P {
text-align: center;
color: black;
font-family: arial;
}
4 .如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是
几个单词的组合。例如: P { font-family : "sans serif"; } /* 注意代码里面的标点符号
都是英文符号 */
5 .如果一个属性有多个值,则每个值之间要用空格隔开。例如:
a { padding : 6px 4px 3px} /*padding 的详解请看第 6 章的 6.1.1*/
6 .如果要为某个属性设置多个候选值,则每个值之间用逗号隔开。例如:
P { font-family : "Times New Roman" , Times , serif ; }
7. 可以把具有相同属性和值的选择器组合起来书写,用逗号将选择器分开,这
样可以减少样式的重复定义,这也叫做选择器的集体声明。
p, table { font-size: 9pt ; }
效果完全等效于:
p { font-size: 9pt ;}
table { font-size: 9pt ;}
剩余55页未读,继续阅读
资源评论
weixin_40107499
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功