- 1、本文档共36页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
第六章 使用CSS 内容提要 CSS样式概述 CSS样式的基本使用介绍 设置CSS样式属性 CSS滤镜 CSS样式概述 CSS(Cascading Style Sheet)样式是一系列格式设置规则,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS样式可以非常灵活并更好地控制具体的页面外观,从精确的布局定位到特定的字体和样式等。 CSS样式的基本使用介绍 CSS格式设置规则由两部分组成:选择器和声明。选择器是标识已设置格式元素(如 P、H1、类名称或 ID)的术语,而声明则用于定义样式元素。在下面的示例中,H1 是选择器,介于大括号 ({}) 之间的所有内容都是声明: H1 { font-size: 16 px; font-family: Helvetica; font-weight: bold; } 声明由两部分组成:属性和值。上述示例为 H1 标签创建了样式:链接到此样式的所有H1标签的文本都将是 16 像素大小并使用 Helvetica字体和粗体。 在网页中加入CSS样式 在Dreamweaver中,可以使用四种不同的方法在网页中加入CSS样式。 链接外部样式表文件 定义内部CSS样式 导入外部样式表文件 定义内联CSS样式 注意:可以在一个网页中同时使用外部样式表、内部CSS样式和内联CSS样式,如果相互之间存在属性设置冲突,则优先权排列为: 内联CSS样式内部CSS样式外部样式表 方法一:链接外部样式表文件 首先建立外部样式表文件(.css),然后在网页中使用link标签链接样式表文件。这种方法使页面内容与版面设计分开,易于管理整个网站的网页风貌。 方法二:定义内部CSS样式 在网页的HEAD.../HEAD标签间加入CSS样式定义,这种方法适用于指定某个网页的具体外观。 head style type=text/css !-- H1 { font-size: 16px; font-family: Helvetica; font-weight: bold; } -- /style /head 方法三:导入外部样式表文件 导入外部样式表文件是指在定义内部CSS样式时利用“@import”来引用外部样式表文件。 head style type=text/css !-- @import style.css; 其它CSS样式定义 -- /style /head 方法四:定义内联CSS样式 内联CSS样式是在某个HTML标签内使用style属性定义适用于该标签的个别样式。 body style=background-color: #cbcbcb h1 style=font-size: 16px; font-family: Helvetica; font-weight: bold; 内联CSS样式的应用 /h1 /body “CSS样式”面板 在Dreamweaver中,可以使用“CSS 样式”面板查看、创建、编辑和删除 CSS样式,并且可以将外部样式表附加到当前文档。 若要打开“CSS 样式”面板,执行下列操作之一: 选择“窗口”“CSS 样式” 按 Shift+F11键 单击属性检查器中的“CSS”按钮 CSS样式的创建和应用 用户可以创建一个新的CSS样式嵌入到当前文档中,也可以使用外部样式表文件中的CSS样式来自动完成HTML标签的格式设置。 创建新的CSS样式 在“CSS样式”面板中,单击右下角区域中的“新建CSS规则”按钮,打开“新建CSS规则”对话框。 在“选择器类型”单选按钮组中,选择要创建的CSS样式的类型。 类型一:类样式(自定义样式) 可应用于任何文本范围或文本块的样式,HTML标签通过自身的class属性来指定应用该样式。 style type=text/css !-- .mystyle1 { font-family: 华文楷体; font-size: 24px; font-weight: bold; color: #6633FF; text-decoration: underline; } -- /style p class=mystyle1 应用了类样式的文本 /p 类型二:标签样式 应用于指定HTML标签的样式。 style type=text/css !-- p { font-family: 华文楷体; font-size: 24px; font-weight
您可能关注的文档
最近下载
- 小学语文古诗教学策略 专题讲座 三省小学 郑艺蓉.ppt VIP
- 浅谈矿山生态环境恢复治理和土地复垦思路.docx
- 河南12系列建筑标准设计图集:12YN1 采暖工程.docx
- QBT5300-2018 糖尿病足保护鞋.pdf
- 01部编版语文一年级上册1 a o e(陈丹老师)(公开课课件).ppt
- 招聘word模板 (93))最新版本2020.docx
- 阅读理解-分析借景抒情的写作方法(试题)- 语文五年级上册.docx VIP
- 《旅游消费者行为学》电子教案(第二版).pdf VIP
- 2023年初级统计师《统计专业知识和实务》历年真题汇编(共251题).doc VIP
- 2022年档案专业 (军队文职)判断题大全(含六套)含答案解析.pdf
文档评论(0)