- 1、本文档共29页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
第四章CSS层叠样式表分析
第章CSS层叠样式表CSS的” ” color=” ”这样的标签以及与标签搭配的显示属性(如”background, bgcolor”等)来实现这一功能,但这样做存在两个问题:
1.不同的浏览器对显示属性的解释不同,不同的浏览器提供不同的视觉标签,并且同一属性在不同的浏览器里还可能表达不同的视觉效果。
2.使用相对独立的HTML所提供的显示属性,不利于整体效果的统一,修改起来也会比较麻烦。
例如,假设我们要使某个table的第一列的所有表格单元(td)的背景色显示为暗红色,那么或许我们可以使用第二章学习的方法,使用td bgcolor=”#b82222”这样的标签来标记所有第一列的表格单元来达到这样的目的。那么,如果有一天我们厌烦了这样的视觉效果,而想将其背景色改为纯蓝色,我们就不得不使用td bgcolor=”#0000ff”这样的标签对所有第一列的td单元进行替换。假如这个table有20行或者更多……好吧,你可以想象一下,这是一件多么让人厌烦的工作。
因此,我们需要一种能独立于浏览器之外的、能够统一设计并管理所有(不仅仅局限于一个Web文档,而是在同一站点内的所有Web文档)相同类型的Web文档内容的视觉样式的简单机制,这就是CSS。
通过这一章的学习,我们要学会CSS的基本语法,CSS的单位和属性,以及CSS的“层叠”规则,并通过一些实例掌握CSS在Web页面设计中的应用。
CSS基础
4.2.1 CSS基本语法
CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行,属于浏览器解释型语言。通常,解释型语言的语法都比较简单,CSS也正是如此。一般而言,我们可以先定义一个样式(Style),然后再在html代码中使用这个样式。
一个典型的样式的定义由三部分组成,分别是:
选择符(Selector):选择符可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE等。你也可以简单的理解为该样式的名字。我们通过它定义一个样式,也通过它使用该样式。
属性(Property):需要定义的显示属性,一个样式中可定义多个显示属性。
属性值(Value):各属性的取值,包括单位。
以下是一个样式一般的语法格式:
selector {property: value;}
例如:
p {color:blue;}
其中,p就是选择符,它对应HTML中的p标签;color是属性,表示需要
设置p标签中的内容颜色;blue是属性值,表示p标签中的内容颜色为纯蓝色。最后以一个分号“;”作为一个“属性:值对”的结尾,一个选择符可以包含多条属性,属性间以分号“;”间隔,例如:
P { color:blue; font-size:12px;}
定义了一个样式之后,就可以在html代码中使用这一样式。样式的使用(引用)共有三种方式,分别是:内联引用、内部引用(嵌入)与外部引用。
1.CSS的内联引用
内联,即把CSS样式直接作用在html标签中,例如:
p style=font-size:12px; color:blue;
(该段落的文字大小为12个像素,其颜色为纯蓝色)
/p
除了BASEFONT、PARAM和SCRIPT这三个html标签外,STYLE属性可以应用于任意BODY元素(包括BODY标签本身)。这个属性将任何数量的CSS声明当作自己的值,而每个声明用分号“;”隔开。
使用内联CSS的网页制作者必须将META标签里的CONTENT属性设置为text/css,而HTTP-EQUIV属性设置为Content-Style-Type,例如:
META HTTP-EQUIV=Content-Style-Type CONTENT=text/css
注意: 中文网页的标记为:
META HTTP-EQUIV=Content-Type CONTENT=text/css
因为和需要展示的内容混合在一起,内联样式会失去一些样式表的优点。一般情况下,应当尽量避免使用。
需要注意的是,使用内联方式时,其样式只在使用了style属性的这一标签中有效,在其它的标签中是无效的。例如:
p style=font-size:12px; color:blue;
(该段落的文字大小为12个像素,其颜色为纯蓝色)
/p
p
(该段落的文字的显示属性为默认)
/p
2.CSS的内部引用(嵌入)
可以使用style标签直接把CSS代码加载到html文档内部,例如:
style type=text/css
/* ----------文字样式开始---------- */
/* 定义在P标签中的文字大小为12个像素,颜色为纯蓝色 */
P
{
color:blue;
您可能关注的文档
- 第六章超市防损管理.doc
- 第六章组织与用人.pptx
- 第六章边际革命分析.ppt
- 第六章节事.pptx
- 第六章砌体结构房屋的墙.ppt
- 第六章铸件与焊缝宏观组织及其控制分析.doc
- 第六章圆轴的扭转分析.pptx
- 第六章远洋运价.pptx
- 第六章除灰系统.doc
- 第六章香料.ppt
- 2024年新人教版数学七年级上册教学课件 6.3.2 角的比较与运算.pptx
- 2024秋新人教版数学一年级上册教学课件 第2单元 6~10的认识和加减法 第4课时 8和9的分与合.pptx
- 2024年新华师大版七年级上册数学教学课件 3.6角课时2.pptx
- 2025年春新苏教版数学一年级下册全册教学课件.pptx
- 中图版高中地理选择性必修2全册教学课件.pptx
- 2024秋新人教版生物七年级上册课件 第二单元 第一章 第二节 种子植物.pptx
- 2025年春新苏科版物理八年级下册全册课件.pptx
- 2024年新人教版数学七年级上册 6.3.2 角的比较与运算 教学课件.pptx
- 2024年新华师大版数学七年级上册教学课件 1.5 有理数的大小比较.pptx
- 2024年秋新人教版七年级上册数学教学课件 第五章一元一次方程章末小结课.pptx
最近下载
- 城市污泥综合利用(肥料)项目可行性研究报告书.pdf
- 结核病防治知识竞赛考试题库资料300题(含答案).pdf VIP
- 部编版二年级语文上册 场景歌 课件.pptx VIP
- 精神科业务培训课件.pptx VIP
- 全国中学生英语能力竞赛试题.pdf VIP
- 《水电工程验收管理办法》(2015年修订版).doc VIP
- TZS 0678—2025《生物安全实验室工作人员本底血清样本管理规范》(水印版).pdf VIP
- 2024定日镜安装及验收规范.docx VIP
- 01 关于EKAC500BR1LH机组优势及产品情况说明.pdf VIP
- 浸渍法 沉积沉淀法 离子交换法:负载型催化剂的制备 2019.ppt VIP
文档评论(0)