武汉纺织大学传媒学院 cm.wtu.edu.cn

Presentation on theme: "武汉纺织大学传媒学院 cm.wtu.edu.cn"— Presentation transcript:

1 武汉纺织大学传媒学院 cm.wtu.edu.cn
第12节 CSS样式的定义与使用 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/4/17 传媒学院

2 1、回顾概念 样式（也叫样式表） 行样式 例子 <p style="color:red;font-size:32px">武汉</p> 既是定义也是使用 2019/4/17 传媒学院

3 Q：除蓝色，18像素的大小外，还有什么效果？
2、内部样式 内部样式表定义在HTML文件的head部分，该HTML页面内所有标签都可使用该样式来美化其包含的内容 例子 定义（这些样式代码一般放在网页的head部分） <style type="text/css"> <!-- .p1{font-size:18px; color:blue;} --> </style> 使用举例 <b class="p1">此行文字被内部的样式定义为蓝色显示</b> 说明 <style>标签是用来表明进行样式定义，其type属性是指该标签为CSS定义 Q：除蓝色，18像素的大小外，还有什么效果？ 2019/4/17 传媒学院

4 2、使用DW定义内部样式 开始定义 2019/4/17 传媒学院

5 在弹出的CSS规则定义面板选择两个属性及取值
后面会详细讲解怎么使用 2019/4/17 传媒学院

6 确定后，DW会自动地将选定的规则翻译成CSS代码放置在网页的head部分
2019/4/17 传媒学院

7 3、外部样式 CSS样式不定义在网页中，而是单独定义在一个样式文件中，网页链接外部样式表后就可以使用外部样式表所定义的CSS样式了
好处：同一个样式可以被多个网页使用，而无需重复定义 定义的方法和内部样式表一样，只是不需要<style>和<!--…… -->隐藏标记了 例子：比如外部样式文件style.css文件的内容如下 .s1{font-size:18px; color:red} 外部样式文件以.css结尾 2019/4/17 传媒学院

8 在标签中使用外部样式和使用内部样式的方法一样
外部样式的使用 使用前必须先链接外部样式文件 网页链接外部样式表文件的语法例子 <link type="text/css" rel="stylesheet" href=" style.css"> 在标签中使用外部样式和使用内部样式的方法一样 例如 <font class=s1>Welcome to WTU</font> 2019/4/17 传媒学院

9 4、利用DW创建外部样式表 点击DW的“新建CSS规则”按钮开始创建 在弹出的界面选择“定义在 新建样式表文件”选项
在弹出的界面选择“定义在 新建样式表文件”选项 随后会弹出一个界面要求输入外部样式表文件的路径和文件名，完成就会弹出CSS样式规则定义面板 2019/4/17 传媒学院

10 设置CSS规则后（设置方式和内部样式的设置一样），样式定义将被保存在外部样式表文件中；而且会自动增加一个当前网页到该样式表文件的链接，而且dw会自动打开该外部样式文件
2019/4/17 传媒学院

11 5、理解网页和外部样式表文件的关系 网页中放置的是HTML标签和所要呈现的内容 外部样式表文件中保存的是CSS样式的定义
这两个不同文件的存储位置要理解 如果是要手工书写网页到外部样式表的链接，要注意路径，在DW中可通过浏览按钮来找到外部样式表文件 2019/4/17 传媒学院

12 6、思考下列问题 如果已经创建了一个外部样式表，现在要创建一个新的CSS规则，应该怎么办？ 如何修改外部样式 光标在网页中时，如何新建？
光标在外部样式表中时，如何新建？ 如何修改外部样式 在网页中如何修改？ 在外部样式表中如何修改？ 2019/4/17 传媒学院

13 作业1 使用Dreamweaver创建内部样式，并通过规则定义面板定义三个样式，1.设置字体大小为24px，颜色为红色；2.设置字体大小为16px，颜色为蓝色；3.设置字体大小为24px，颜色为白色，背景颜色为绿色。并在font、sup标签中通过class属性使用定义好的样式，达到如下效果 2019/4/17 传媒学院

14 作业2（可选） 利用DW新建一个网页，在该网页中创建一个外部样式表文件wtu.css，并新建一个CSS样式规则s1（字体大小18）；完成后又在 wtu.css中新建另外一个CSS规则c1（颜色为红色），观察网页和外部样式文件代码，理解它们之间的关系；最后分别在p，font标签中使用定义的s1、c1样式，比如 2019/4/17 传媒学院