1、第6章 使用CSS样式,第6章主要内容,使用CSS样式,五、 CSS滤镜,四、设置CSS样式,三、网页中CSS应用,二、创建CSS样式,一、 CSS样式的基本介绍,六、 CSS样式表应用实例,一、 CSS的基本概念,CSS(Cascading Style Sheet),中文译为“层叠样式”,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS样式表有以下特点：,二、CSS样式的类型,1.自定义CSS（类样式）。自定义样式最大的特点就是具有可选择性，可以自由决定将该样式应用于哪些元素，就文本操作而言，可以选择一个字、一行、一段乃至整个页面中的文本添加自定义的样式。2重定义标
2、签的CSS。实际上重新定义了现有HTML标签的默认属性，具有“全属性”。,二、CSS样式的类型,3. CSS选择器样式（高级样式）。CSS选择器样式可以用来控制标签属性，通常用来设置链接文字的样式。对链接文字的控制，有以下4种类型：,三、CSS样式的基本语法,CSS的基本语法由三部分构成：选择器（selector）、属性（property）和属性值（value）如： selector property:value pcolor:blue,三、CSS样式的基本语法,1.选择器组如果需要将相同的属性和属性值赋予多个选择器，选择器之间需要使用逗号进行分隔。h2,h3,h4,h5,h6,h7color
3、:red,三、CSS样式的基本语法,2类选择器利用类选择器，可以使用同样的HTML标签创建不同的样式。如段落“”有两种样式：一种是左对齐，一种是右对齐。可以如下书写：p.righttext-align:rightp.centertext-align:center也可以不用HTML标签，直接用“.”加上类名称作为一个选择器，代码如下：.center text-align:center,三、CSS样式的基本语法,3CSS注释为了方便以后更好地阅读CSS代码，可以为CSS添加注释。CSS注释以“/*”开头，以“*/”结束，如：/*段落样式*/PText-align:center;/*居中显示*/Co
4、lor:black;Font-family:arial ,第6章主要内容,使用CSS样式,五、 CSS滤镜,四、设置CSS样式,三、网页中CSS应用,二、创建CSS样式,一、 CSS样式的基本介绍,六、 CSS样式表应用实例,一、建立标签样式,标签样式是网页中最为常见的一种样式，一般要创建页面时，首先会建立一个body标签样式。下面操作方法如下：（1）启动Dreamweaver CS5，在菜单中选择“文件”|“打开”命令，打开文件。（2）在“CSS”面板上单击“新建CSS规则”按钮。,一、建立标签样式,（3）弹出“新建CSS规则”对话框，单击展开“选择器类型”下拉按钮，选择“标签（重新定义HT
5、ML元素）”；单击“确定”按钮。,一、建立标签样式,（4）弹出“CSS规则定义”对话框，在“分类”列表框中选择各项进行设置，设定背景颜色为绿色；单击“确定”按钮。,一、建立标签样式,（5）切换至“代码”视图，可以看到在代码中添加了相应的代码。（6）保存文档。按F12键，即可在浏览器中浏览到网页的视觉效果。,二、建立类样式,通过类样式的使用，可以对网页中的元素进行更加精确的控制，达到理想的效果，操作方法如下：（1）在“CSS样式”面板上，单击“新建CSS规则”按钮 。,二、建立类样式,（2）弹出“新建CSS规则”对话框，单击展开“选择器类型”下拉按钮，选择“类（可应用于任何HTML元素）”在选择
6、器名称输入.sh；单击“确定”。,二、建立类样式,（3）弹出“CSS规则定义”对话框，在“分类”列表框中选择各项进行设置；单击“确定” 。,二、建立类样式,（4）切换到“代码”视图，可以看到代码中添加了相应的代码为：.sh font-size: 16px;color: #00F;（5）保存文档。,三、建立复合内容样式,复合内容样式重新定义特定元素组合的格式，或其他的CSS允许的选择器表单的格式。在“新建CSS规则”对话框中单击展开“选择器类型”下拉按钮，选择“复合内容（基于选择的内容）”选项，在“选择器名称”下位列表中，包括了4个选项，在“选择器名称”下拉列表中的各项参数如下：,四、建立ID样
7、式,建立ID样式主要用于定义包含特定ID属性的标签格式。操作方法如下：（1）在“CSS样式”面板上单击“新建CSS规则”按钮 。,四、建立ID样式,（2）弹出“新建CSS规则”对话框，单击展开“选择器类型”下拉按钮，选择“ID（仅应用于一个HTML元素）”，在选择器名称中输入#top；单击“确定”按钮。,四、建立ID样式,（3）弹出“CSS规则定义”对话框，在“分类”列表框中选择“方框”选项；设置参数；单击“确定”按钮。,四、建立ID样式,（4）在文档窗口中选择“插入”栏，在“插入”栏中单击“插入Div标签”按钮。,四、建立ID样式,（5）弹出“插入Div标签”对话框，单击展开“插入”下拉列表
8、，选择“在结束标签之前”选项；单击ID下拉列表，选择top选项；单击“确定”按钮。（6）此时，已经插入ID名称为top的Div。在页面中可看到刚刚创建#top的CSS样式表。,五、链接外部样式表,CSS样式不但可以直接嵌入到页面中，而且可以保存为独立的样式文件（扩展名为.CSS），需要引用样式文件中的CSS样式中，可以将其链接到网页文档中。链接外部样式表的操作如下：单击“CSS样式”面板下方的“附加样式表”按钮,五、链接外部样式表,弹出“链接外部样式表”对话框，单击“文化/URL”右边的“浏览”按钮，插入文件。选中“链接”单选按钮，单击“确定”按钮，即可完成添加外部链接样式表的操作。,第6章主
9、要内容,使用CSS样式,五、 CSS滤镜,四、设置CSS样式,三、网页中CSS应用,二、创建CSS样式,一、 CSS样式的基本介绍,六、 CSS样式表应用实例,一、内联样式表,内联样式表是在现有HTML元素的基础上，用style属性把特定的样式直接加入到那些控制信息的标记中。例：内联样式表这种样式表只会对元素起作用，而不会影响HTML文档中的其他元素。,二、内部样式表,内部样式表是把样式表放到页的区中，这些定义的样式就应用到页面中。样式表是用标记插入的，从下例中可以看出标记的用法：,三、外部样式表,外部样式表是指将样式作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。样
10、式在样式表文件中定义和在嵌入式样表中的定义是一样的，只是不再需要style元素。例： h1 font-size:36px; font-family:”隶书”; font-weight:bold; color:#993366;嵌入式样式定义到一个样式表文件mystyle.css中，这个样式表文件的内容应该为嵌入式样式表中的所有样式。,四、样式冲突,将两个或两个以上的CSS规则应用在同一元素时，这些规则可能会发生冲突并产生意外结果，一般会存在以下两种情况。一种情况是应用于同一元素的多个规则分别定义了元素的不同属性，这时，多个规则同时起作用。另一种是两个或两个以上的规则同时定义了元素的同一属性，这种
11、情况称为样式冲突。如果发生冲突，浏览器按就近优先原则应用CSS规则。,第6章主要内容,使用CSS样式,五、 CSS滤镜,四、设置CSS样式,三、网页中CSS应用,二、创建CSS样式,一、 CSS样式的基本介绍,六、 CSS样式表应用实例,一、设置文本样式,在网页中设置文本样式和在Word中设置文本样式相同，在“CSS规则定义”对话框的“分类”列表框中选择“类型”选项，即可对文本的样式进行设置。,二、设置背景样式,在不使用CSS样式的情况下，利用页面属性只能够使用单一颜色或用图像水平垂直平铺来设置背景。,三、设置区块样式,使用“区块”类别可以定义段落文本中文字的字距、对齐方式等格式。,四、设置方
12、框样式,在图像的“属性”面板上，可以设置图像的大小、图像水平和垂直方向上的空白区域等，方框样式完善并丰富了这些属性设置，定义特定元素的大小及其他周围元素间距属性。,五、设置边框样式,在图像的“属性”面板上，可以设置图像的大小、图像水平和垂直方向上的空白区域等，方框样式完善并丰富了这些属性设置，定义特定元素的大小及其他周围元素间距属性。,六、设置列表样式,在Dreamweaver CS5中，使用“列表”选项可以定义项目符号、大小和类型等。,七、设置定位样式,在Dreamweaver CS5中，使用“列表”选项可以定义项目符号、大小和类型等。,八、设置扩展样式,扩展选项是CSS规则定义面板中的最后
13、一项，其中集合分页，鼠标效果和视觉效果等内容，在“CSS规则定义”对话框中选择“扩展”选项，即可进行相应的设置。,第6章主要内容,使用CSS样式,五、 CSS滤镜,四、设置CSS样式,三、网页中CSS应用,二、创建CSS样式,一、 CSS样式的基本介绍,六、 CSS样式表应用实例,一、CSS滤镜,Dreamweaver的滤镜和我们所熟悉的Photoshop滤镜相似，能够渲染对象元素，创建出艺术效果。Dreamweaver的CSS样式提供了丰富的滤镜效果，使用这些滤镜能够创建出文本和图像的3D、阴影和淡入淡出等效果，应用在页面中在一定程度上美化了页面。,二、CSS无参数滤镜,CSS的无参数滤镜共
14、有六个（FlipH、FlipV、Invert、Xray、Gray和Light），虽然没有参数，相对来讲，灵活性要差点，但用起来更方便，效果也相当明显。用它们可以使文字或图片“翻翻身”、获得图片的“底片”效果，甚至可以制作图片的“X光片”效果。,三、CSS带参数滤镜,CSS的带参数滤镜共有十个（ alpha 、 blur 、 wave、 DropShadow 、 chroma、 Shadow、 Glow、 Mask、 BlendTrans、和RevealTrans）,第6章主要内容,使用CSS样式,五、 CSS滤镜,四、设置CSS样式,三、网页中CSS应用,二、创建CSS样式,一、 CSS样式的
15、基本介绍,六、 CSS样式表应用实例,一、巧用样式表美化文本框与按钮,在网页制作中，表单中的对象总是给人一种单调与沉闷的感觉，比如说按钮、文本框等，它们一成不变的模样与颜色出现在主页上时，或多或少都会破坏主页的美观程度，在网上常常看见一些注册表单的输入框部分并不是常见的矩形框，而是一条细线，其实要实现这样的效果并不困难，只要用一段简短的CSS代码控制好表单输入框的样式即可。,一、巧用样式表美化文本框与按钮,1、无立体效果的文本框与按钮首先在网页中插入了相应的表单对象，比如插入一个文本框与一个按钮，按下F10键，显示出网页源代码编辑窗口，那我们在网页的与标签之间插入这个样式表：input.sma
16、llInputborder:1 solid black;FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal然后分别在文本框与按钮的html语句中加上代码class=smallInput如在 最后的效果：,一、巧用样式表美化文本框与按钮,2、带颜色的下划线式文本框与按钮效果同样，也需要样式表的帮助来实现这个效果，和第一种效果的操作步骤一样在网页的与标签之间插入样式表，input.smallInputbackground:#f
17、fffff;border-bottom-color:#ff6633; order-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px; solid #ff6633; color: #000000; FONT-SIZE: 9pt; FONT-STYLE: normal;FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal最后的效果：,input.buttonfaceBACKGROUND
18、: #ffcc00; border:1 solid #ff6633; COLOR: #ff0000; FONT-SIZE: 9pt; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: normal; HEIGHT: 18px; LINE-HEIGHT: normal,二、用CSS控制网页总体风格,1整体改变页面风格 现在网页中流行的字体是9pt和10.5pt宋体，打开“CSS 样式控制面板”，单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框，复选“标签（重新定义HTML）”的“选择器类型”，这时在标签处会出现“body”、“b
19、r”、“cite”等选项，选择“body”后确认。这样我们就建立了一个外部的CSS文档，在保存对话框中保存为css后就进入“body 的css规则定义（在css.css中）”对话框(如图6-30)。选择“分类”中的“类型”项，定义“字体”为“宋体”、“大小”参数为“9”，其后的下拉框选择“点数（pt）”、“颜色”自定义为喜好颜色就可以了。当然还可以选择“类型”中的“背景”项来定义“背景”颜色和其他背景属性。这时您会看到页面中内容的整体改变。,二、用CSS控制网页总体风格,2偏好元素风格的改变 经过上面的改变有时不免带来一定麻烦，如果遇到页面中某个元素，比如突出显示的文字的字体、字号以及颜色怎么
20、办！这里我们就需要再定义一个新的CSS样式单来对其进行控制。打开“CSS 样式控制面板”，单击“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框中选择“类（可应用于任何HTML元素）”的“选择器类型”，定义一个自己偏好的CSS控制。如果想更改页面中某一元素的属性，选中它然后右键单击“CSS 样式表”面板中“全部”中刚才定义的CSS，执行“套用”命令就可以了。,二、用CSS控制网页总体风格,3统一控制超级链接 超级链接也是网页中经常使用的，而网页的链接色默认都是蓝色，虽然可以更改，但单一色彩在不同背景色的网页上显示就不是那么奏效了，我们来看一下如何用CSS控制网页实现不同的个性链接颜色。在“新建CSS规则”对话框中，在“选择器类型”中选择“复合内容（基于选择的内容）”，在“选择器名称”下拉框中会列出“a:link(链接属性)”、“a:hover(鼠标移动到链接上的属性)”、“a:visited(链接被访问后属性)”、“a:active(链接焦点状态下的属性)”等选项(如图6-32所示)，这4个选项的设置会控制网页中所有的链接的属性，我们可以分别定义这4个属性，然后添加到“CSS样式”面板中与默认设置不同的CSS控制中，再将其“套用”到需要改变的链接上就实现了。如果将“Hover”的字体设置的比“Link”稍微大一点，就会出现鼠标移动到链接上时字体变大的效果 。,
