![跨媒体信息传播原理与技术](https://wfqqreader-1252317822.image.myqcloud.com/cover/834/25505834/b_25505834.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
第二节 CSS样式
一、“类”样式的定义与使用
Dreamweaver制作网页给定字号并不像Word那么简单,需要先定义一个样式,然后应用这个样式才能给定文字的大小。先到设计窗口(图2-14),打开CSS样式窗口(图2-15),点击右下角“
”出现新建CSS规则窗口,如图2-16所示。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0029-0003.jpg?sign=1739298547-nBvKu0sZALDwAYJ43eg61shnUHYwyLLD-0-c188d728beb2829180b8fa115bbaaff7)
图2-14 设计窗口选中文字
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0029-0004.jpg?sign=1739298547-FgOPcZHJcxoYZ9o2ySN7GsbLmdJRniC4-0-cb96d6268190830303b0d2f7ec2d33d2)
图2-15 打开CSS样式窗口
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0029-0005.jpg?sign=1739298547-bSbpzWrEnFZ8WBJ6NpQEixP0IEzD4JHW-0-37452423bfc118f1334f610846734dce)
图2-16 新建CSS样式规则
在“选择器类型”中选择“类”,自己起一个选择器名称,如“.zw”,其实就是样式名称,注意前面一定要加一个点“.”。规则定义里选“仅限该文档”,如图2-16所示。
下面可以给“.zw”这个类定义字体、字体大小和颜色,如图2-17所示。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0030-0001.jpg?sign=1739298547-I1iZVywZWoiVPQxFk9vhM9IIHvY1mP1d-0-bc7cbb8e3a0cbaec72a5de7072c3aa6a)
图2-17 .zw类的CSS样式规则定义
全部样式设计完成后,找到下方的“类”选择你定义的类,字体和字体的大小就变了,如图2-18所示。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0030-0002.jpg?sign=1739298547-6eYuZ85qCt6hAfzNLzlTW5RL9o9nsND8-0-ef870b12647c8cb2a6e4770210be5352)
图2-18 类的应用窗口
这时候你可以回来看一下代码区,如图2-19所示。
![](https://epubservercos.yuewen.com/90772C/13967296805862606/epubprivate/OEBPS/Images/Figure-0031-0001.jpg?sign=1739298547-OSCenkdUGdG7ltNqAnYmx6DbtbrzqJhs-0-7bc6a9c52f8c133d5926c35281ccf27d)
图2-19 HTML中的类定义和类使用
在<p>标签中,加了一个class="zw",这个就是你所引用的zw这个类的样式。
<p class="zw">第一个网页</p> 而在头部分多了一个样式表: <style type="text/css"> .zw { font-size: 16px; } </style>
这个样式表括在<style type="text/css">、</style>之间。
“.zw{……}”定义了“.zw”这类标签的样式。
前面的“.”代表“类”,除了类还有一种选择器叫“id”,用“#”表示。
大括号之间的{……}是类的定义。
font-family: "宋体";
font-size: 16px;
color: #F00;
这三句话定义的是这类的标签版式:字体为“宋体”、字大小为16px、字的颜色是#F00(红色)。
你也可以直接在HTML代码的状态直接修改HTML代码来修改你所定义的样式。