- 1、本文档共17页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
第15章CSS样式表
第15章 层叠样式表CSS 样式表的定义 样式表的定义 样式表的引用 样式表的引用 样式表的引用 样式表的引用 类选择符 id选择符 伪类 DIV 样式的继承 样式的继承 样式的作用顺序 在Javascript控制CSS CSS的定位 CSS的定位 * * CSS(Cascading Style Sheets)是W3C协会用于管理HTML文档的格式化信息的标准集。 格式化信息:字体、背景、颜色、布局和HTML文档外观的其它特性。 优点:增加了层等新概念 可集中式管理 便于共享 内容与样式分离(本质) 允许重叠、定位 CSS的基本语法: 选择符{规则表} 说明: Span标签和div标签 如:span style=color:red;font-family:隶书;font-size:12pt 选择符:类选择符、ID、伪类 规则表:一个或多个样式属性组成的样式规则,各个样式属性间由分号隔开,其格式为:样式名:值; 一般的CSS属性 Text-align:center; 对齐方式 Text-align Color:red; 前景色 Color Font-weight:bold; 字体宽度 Font-weight Border-color:blue; 边界色 Border-color Background-color:yellow; 背景色 Background-color Font-size:12pt; 字体大小 Font-size Font-family:宋体; 字体 Font-family 实例 描述 CSS属性 引用CSS的四种类型 (1)链接到外部样式表。其语法: link rel=stylesheet type=text/css href=CSS文件的URL 引用CSS的四种类型 (2)引入外部样式表。其语法: style @import URL(CSS文件的URL); ……. /style 说明 这两种方式都是利用外部独立存放的CSS文件,由此便于共享。 CSS文件中只能包含样式定义和上下文规则,并能有任何HTML标记。 区别: 前者为引用,后者为替换 举例:CSS控制的页面 引用CSS的四种类型 (3)嵌入样式表。利用style标记将CSS嵌入在HTML文档的头部 (4)内联样式表。在HTML标记中引用样式定义,只对相应的标记起作用。方法:将相应标记的style属性的值赋为所定义的样式规则,同时指明: meta http-eqiv=content-type content=text/css 如:p style=color:red;font-family:隶书;font-size:12pt 标记名.类名{规则表} 此定义只能作用于特定标记.如: p.back{font-family:宋体; font-size:12pt;} 类名{规则表} 此定义作用于所有class属性与类名相同的标记.如: .back{font-family:宋体; font-size:12pt;} 格式:#id名{规则表} 说明: 一个id选择符在一个HTML文档中只能用一次。 举例: #ddd{color:#ff00ff; background-color:#00ff00; font-size:20pt; } 格式:选择符:伪类 {规则表} 说明: 伪类可区别标记的不同状态 伪类不用HTML的class属性指定 举例: A:visited {COLOR:#CCFFFF;font-size=12pt;} A:link {COLOR:#CC00FF;font-size=12pt;} A:hover {COLOR:#006600;font-size=20pt;} Div是一个HTML块级元素,其中可含其他块级元素。 style属性的常用子属性有: zIndex Top、Left Width、Height Visibility backgroundColor 父标记:包含其它标记的标记 子标记:被父标记所包含的标记 body…… div…… h1…… …. /h1 /div body div是h1的父标记 body是div的父标记 h1是div的子标记 …………………………… 继承方式 子标记继承父标记的样式 同一属性的相对值继承 如:style p.class1{font-size:12pt;} p.class2{font-size:200%;} p.class3{font-size:100%;} /style p class=“class1”第一段/p p class=“class2”第二段/p p clas
您可能关注的文档
最近下载
- 中考--四边形考点分析研讨.ppt
- 登岳阳楼公开课一等奖优质获奖课件.pptx
- 高中英语教学:教学设计Unit 3 Environmental Protection Project.docx
- 【Renesas】CAN入门书.pdf
- 页岩砖项目可行性研究报告.docx
- 公路建设安全管理台帐(参考)用表格模板6182.pdf
- 2024-2030年中国捡石机行业市场发展趋势与前景展望战略分析报告.docx
- 高中英语教学课件:教学课件Unit 3 Environmental Protection Project.pptx
- (高清版)B-T 3836.1-2021 爆炸性环境 第1部分:设备 通用要求.pdf VIP
- 车位进行特许权经营服务投标方案(技术方案).pdf
文档评论(0)