1、第 12节 CSS样式的定义与使用武汉纺织大学传媒学院* 1传媒学院1、回顾概念 样式(也叫样式表) 行样式 例子 武汉 既是定义也是使用* 2传媒学院2、 内部样式 内部样式表定义在 HTML文件的 head部分,该 HTML页面内所有标签都可使用该样式来美化其包含的内容 例子 定义(这些样式代码一般放在网页的 head部分) 使用举例此行文字被内部的样式定义为蓝色显示 说明 标签是用来表明进行样式定义,其 type属性是指该标签为 CSS定义* 3传媒学院Q:除蓝色, 18像素的大小外,还有什么效果?2、使用 DW定义内部样式 开始定义* 4传媒学院 在弹出的 CSS规则定义面板选择两个属
2、性及取值 后面会详细讲解怎么使用* 5传媒学院 确定后, DW会自动地将选定的规则翻译成 CSS代码放置在网页的 head部分 由 dw自动创建的 css代码,使用方式和前面的描述一样 如果想修改样式,可以把光标放置在样式代码区域,然后点击 DW的右边的 “编辑样式 ”按钮会返回 CSS规则定义面板* 6传媒学院使用 css3、外部样式 CSS样式不定义在网页中,而是单独定义在一个样式文件中,网页链接外部样式表后就可以使用外部样式表所定义的 CSS样式了 好处:同一个样式可以被多个网页使用,而无需重复定义 定义的方法和内部样式表一样,只是不需要和 隐藏标记了 例子:比如外部样式文件 style
3、.css文件的内容如下.s1font-size:18px; color:red 外部样式文件以 .css结尾* 7传媒学院 外部样式的使用 使用前必须先链接外部样式文件 网页链接外部样式表文件的语法例子 在标签中使用外部样式和使用内部样式的方法一样 例如 Welcome to WTU* 8传媒学院4、利用 DW创建外部样式表 点击 DW的 “新建 CSS规则”按钮开始创建 在弹出的界面选择 “定义在 新建样式表文件 ”选项 随后会弹出一个界面要求输入外部样式表文件的路径和文件名,完成就会弹出 CSS样式规则定义面板* 9传媒学院 设置 CSS规则后(设置方式和内部样式的设置一样),样式定义将被保存在外部样式表文件中;而且会自动增加一个当前网页到该样式表文件的链接,而且 dw会自动打开该外部样式文件* 10传媒学院