第11讲CSS样式表

Dreamweaver8中文版网页制作基础主讲人第十讲CSS样式表1、认识样式表2、应用样式表3、CSS滤镜1、认识样式表1．CSS样式表概念2．创建CSS样式3．样式表类型4．CSS规则定义5.CSS样式结构1.1.CSS样式表概念•什么是CSS？CSS英文全称是CascadingStyleSheets，中文意思是层叠样式表，简称样式表或者CSS。CSS技术由W3C（WorldWideWebConsortium，全球广域网协会）推荐使用，1996年批准了CSS1标准，随后又颁布了CSS2标准，样式表得到了更多的充实，目前绝大多数都是用的CSS2标准。•CSS样式表是一系列格式规则的集合，它可以控制网页内容的外观，使得网页内的各文本、图像、表格等对象具有统一的风格，省去了为每个对象单独设置格式的繁琐。使用CSS样式，不仅可以控制一个网页中内容的格式，还可以同时控制多个网页中的内容格式。当CSS样式发生变动时，页面中所有应用该样式的对象的格式都会自动发生改变。•通过CSS技术可以有效地对网页布局、字体、颜色、背景和其他对象的显示效果做精准的控制。同时使用CSS可以避免页面中同类对象格式的重复设置，提高了工作效率，减少了页面的负担。1.2．创建CSS样式•执行【窗口】/【CSS样式】命令，展开【CSS样式】面板，在【CSS样式】面板中单击新建CSS规则按钮，打开【新建CSS规则】对话框，在【选择器类别】中选择类型，然后在【名称】选项框中输入名称，单击“确定”按钮后打开定义规则对话框，在【分类】列表中选择【类型】后设置具体的样式内容，如下图所示。1.3．样式表类型样式表根据使用的对象不同，分为3个类别。•【类（可用于任何标签）】：可以创建自定义名称的CSS样式，可将样式规则属性应用于任何页面元素上。所有类样式均以句点(.)开头，•【标签（重新定义特定标签的外观）】：可对HTML标签进行重新定义、规范或者扩展其属性，如body，h1，h2，h3，ul，li等标签。当创建或更改CSS样式时，所有使用该进行格式化的对象都自动更新。•【高级（ID、伪类选择器等）】：该选项会对标签组合或者是含有特定ID属性的标签应用样式。当html中出现用id的元素时，可以使用这个id来设置样式，使用方法与类相似。伪类常用的有a：link，a：visited，a：hover，a：active，分别用来定义链接未点击时、点击后、鼠标移过、激活状态下的样式。1.4．CSS规则定义在代码窗口中编写CSS样式，对新手来说是很困难的事，在Dreamweaver8中可以通过可视化的窗口【CSS规则定义】对话框来创建具体的CSS样式，此处提供了8个类别的样式设置，如图11-8所示。•【类型】：主要用于定义页面中文本的字体、大小、颜色、样式和修饰等。•【背景】：主要用于定义页面元素的背景色和背景图像。•【区块】：主要用于控制页面元素的间距，对齐方式等。•【方框】：设置页面中方框的宽、高，四周的填充、边界的粗细。•【表框】：设置网页元素的边框效果。•【列表】：控制列表内的各项元素。•【定位】：为元素设置精准的位置，通过它可以让网页元素浮动。•【扩展】：用于设置打印的分页符和视觉效果。1.5．CSS样式结构CSS样式结构主要有选择器和声明两部分组成。选择器是标识格式元素的术语（如P、H1、类名或ID），声明用于定义元素样式。声明由两部分组成：属性（如font-size）和值（如10px）。右面的图中，body、.text、h1都是选择器，介于括号{}之间的所有内容都是声明，其中body和h1是标签样式，.text是自定义的类样式。声明声明属性值属性选择器选择器选择器2、应用样式表知识•2.1应用样式表•2.2编辑样式表•2.3删除样式表•2.4附加外部样式表2.1．应用样式表•类样式可以应用于页面中的任何元素，与当前文档相关联的所有类样式都显示在【CSS样式】面板中。如果是文本元素则在文本属性面板的【样式】下拉列表中显示所有与文本有关的类样式；若是表格或图像等元素则在对应的属性面板的【类】下拉列表中显示与当前元素相关的类样式。要使用样式时，先选中对象然后直接在下拉列表中选择样式即可。•标签样式建立好之后，如果在HTML中使用这些标签的，标签里面的内容就将按照定义好的样式出现。•高级样式创建好之后，若当html中出现用id的元素时，可以使用这个id来设置样式，使用方法与类相似。对于伪类选择器同标签样式一样，设置好之后就自动更新样式。2.2．编辑样式表•展开【CSS样式】面板，在样式列表列表中选中需要编辑的样式，单击鼠标右键，在右键快捷菜单中选择【编辑】命令，打开定义规则对话框，再重新编辑CSS样式，如有图所示。2.3．删除样式表在【CSS样式】面板的样式列表中选中需要删除的样式，单击鼠标右键，在右键快捷菜单中选择【删除】命令项即可，如有图所示。2.4．附加外部样式表在【CSS样式】面板中单击附加样式表按钮，打开【链接外部样式表】对话框，选择好样式表文件后，返回【链接外部样式表】对话框，选择附加方式，然后“确定”即可。附加外部样式表有两种方式【链接】和【导入】。•【链接】：链接方式在HTML代码中自动生成一个linkhref标签，并引用指定样式表的URL，将其定义的CSS规则添加到当前网页。本例的linkhref标签格式如下：•linkhref=common/newstyl.cssrel=stylesheettype=text/cssmedia=all/•【导入】：导入方式将附加样式表的CSS规则嵌入到当前网页的HTML代码中，并且在head…../head标签之间，如同在代码视图编写CSS规则一样。如果附件样式表规则条目较多，一般采用【链接】方式，较为方便。3、CSS滤镜•3.1CSS滤镜的类型•3.2光晕字效果•3.3图片翻转效果3.1．CSS滤镜类型CSS滤镜分为静态滤镜和动态滤镜两大类，其中静态滤镜主要是使元素对象产生各种特殊的静态效果。动态滤镜主要分为混合转换滤镜和显示转换滤镜两种，主要用于处理图像之间的淡入和淡出的效果。静态滤镜主要有如下几个类型。•Alpha滤镜：用于改变页面元素的透明度，可使对象呈现半透明的效果。•Blur滤镜：可以使元素对象显示出风吹模糊的效果。•Wave滤镜：可以是页面对象在垂直方向上产生波浪变形效果。•Chroma滤镜：可以将图片或者文字中的某种颜色变成透明。•Dropshadow滤镜：为页面对象添加下落式的阴影效果。•Fliph、FlipV滤镜：FlipH使对象产生水平翻转效果；FlipV使对象产生垂直翻转效果。•Glow滤镜：使对象的外廓产生光晕效果，一般用于文本对象。•Gray滤镜：使一个彩色图片的彩色变为灰色调。•Invert滤镜：使图片产生照片底片的效果。•Light滤镜：模拟灯光的投射效果。•Mask滤镜：利用一个对象在另一个对象上产生图像的遮罩效果。•Shadow：添加有渐进感的阴影效果。•X-ray：类似X光的效果，使图片只显示其轮廓。3.2．光晕字效果利用Dreamweaver8的Glow滤镜可以制作出光晕字的特殊效果。Glow有两个参数：Color决定光晕的颜色，可用十六进制代码，也可用颜色单词表示；Strength表示发光的强度，取值范围是0～255。3.2．图片翻转利用FlipV滤镜来产生垂直翻转效果，FlipV没有参数。