css级联样式表

《css级联样式表》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS级联样式表主要内容和要求内容:CSS样式表的使用方法和技巧文本样式、超级链接样式和页面元素标签样式的创建与应用样式编辑、分级和共享CSS样式表文件要求数量掌握CSS样式表的创建和应用了解利用代码编辑方式修改CSS样式表CSS的基本概念CascadingStyleSheets，CSS，也称为CSS样式表或层叠样式表、级联样式表。和Word中样式为同一个概念，可对网页页面内容进行修饰，不同之处是增加了设置超级链接、表单元素属性和其它页面属性。CSS是将文字、超级链接和表单元素等页面元素统一为相同风格的管理工具。一、创建文本的CSS样式表打开css

2、1.htm选菜单窗口CSS样式或右击编辑窗口CSS样式表新建样式表选择"创建自定义样式表"，输入名称“.p9”选仅对该文档，然后单击确定应用CSS样式应用效果CSS代码使用CSS选择器a:link：文字链接样式a:visited：点击过链接后样式a:hover：鼠标悬停在链接上时的样式a:active：文字链接处于激活状态时样式打开link.htm进行样式设置右击编辑窗口设置样式后的效果选编辑样式表预览效果a.linka.hovera.activea.visited创建HTML标签的CSS样式打开htmlcss.htm文件，创建样式表设置i

3、nput标签的类型设置input标签的边框设置input标签的背景按下面的样式表代码设置select标签样式操作完成后得到的样式表代码按右边的样式代码设置textarea控件的样式在浏览器的预览效果CSS样式表修改打开css1.htm选中要编辑的样式进行编辑CSS样式表分组途径：用CSS样式面板中添加样式通过代码编辑器进行设置创建超级链接的big和small样式打开cssgroup.htm文件选编辑样式表，出现右图的界面按以下的要求分别建立样式a.big的样式要求a.small的样式要求样式应用完成后的效果样式表文件共享导出样式表到文件：打开css

4、1.htm，导出完成导入样式表到文件打开adds.htm文件，出现如下界面选中已存在的样式表文件act.css选择“链接”样式表得到的代码如下所示或选择“导入”方式得到的代码如下所示应用导入的样式表通过新建窗口建立样式表菜单新建窗口实验1.定义一个新的CSS样式①将插入点放在文档中。②单击【窗口】→【CSS样式】选项，弹出“CSS样式”面板，单击面板右下角区域中的“新建CSS样式”按钮。如图所示。或者在文本属性检查器中，从“样式”弹出式菜单中选择“管理样式”，然后在出现的对话框中单击“新建”。或者右键单击“窗口”→“标签检查器”→“相关CSS”

5、选项卡，从上下文菜单中选择“新建规则”。或者单击【文本】→【新建】→【CSS样式表】选项。如图所示。③定义要创建的CSS样式的类型。若要创建可作为class属性应用于文本范围或文本块的自定义样式，请选择“创建自定义样式(Class)”，然后在“名称”文本框中输入样式名称。(类名称必须以句点开头，并且可以包含任何字母和数字组合，例如.jcss。如果没有输入开头的句点，DreamweaverMX2004将自动输入)。若要重定义特定HTML标签的默认格式，请选择“重定义标签”，然后在“标签”字段中输入一个HTML标签，或从下拉列表中选择一个标签。若要为具

6、体某个标签组合或所有包含特定Id属性的标签定义格式，请选择“使用CSS选择器”，然后在“选择器”文本框中输入一个或多个HTML标签，或从下拉列表中选择一个标签。下拉列表中提供的选择器(称作伪类选择器)包括a:active、a:hover、a:link和a:visited。④选择定义样式的位置。若要创建外部样式表，请选择“新建样式表文件”。若要在当前文档中嵌入样式，请选择“仅对该文档”。⑤单击“确定”。完成定义。实验2.利用CSS样式制作一个带阴影的文字效果。①建立站点myweb，新建空白网页文件yywz.htm。②单击【窗口】→【CSS样式】选项，

7、弹出“CSS样式”面板，单击面板右下角区域中的“新建CSS样式”按钮，打开“新建CSS样式”对话框。并选中“选择器类型”单选按钮组中的“类(可应用于任何标签)”单选按钮，在名称列表框中输入“.shadow”，如图所示。③单击“确定”按钮，在弹出的“.shadow的CSS样式定义”对话框中设定参数。选择“分类”列表中的“类型”选项，设定“字体”为“隶书”，“字号”为“48”，“颜色”为“#66CCCC”。如图所示。④选择“分类”列表中的“扩展”选项，在“光标”下拉列表中选择“hand”,在“过滤器”下拉列表中选择“shadow(color=?,dir

8、ection=?)”,将过滤器的参数设为“shadow(color=#000000,direction=240)”。如图所