CSS样式表详解.ppt
《CSS样式表详解.ppt》由会员分享,可在线阅读,更多相关《CSS样式表详解.ppt(33页珍藏版)》请在三一文库上搜索。
1、第6章 CSS样式表,CSS入门 CSS详解 创建和应用CSS,开 始,CSS是Cascading Style Sheets(层叠样式表)的简称。CSS的基本概念在于可将网页要展示的内容与样式设定分开,也就是将网页的外观设定信息从网页内容独立出来,并集中管理。这样,当要改变网页外观时,只需更改样式设定的部分,HTML文件本身并不需要更改。,本章主要内容:,6.1.1 “CSS样式”面板 6.1.2 定义CSS样式 6.1.3 在网页中应用CSS样式,返回本章首页,6.1 CSS入门述,CSS是W3C定义和维护的标准,是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色
2、等)的计算机语言。它可以使网页制作者的工作更加轻松和灵活,现在越来越多的网站采用了CSS技术。,6.1.1 “CSS样式”面板,返回本节,在Dreamweaver中,“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。 在没有定义CSS前,“CSS样式”面板是空白的。如果在Dreamweaver中定义了CSS,那么“CSS样式”面板中会显示所定义好的CSS规则。,图6-1 “CSS样式”面板,6.1.2 定义CSS样式,返回本节,在【CSS样式】面板上,单击【新建CSS规则】按钮,会打开如图6-3所示的【新建CSS规则】对话
3、框。,图6-3 【新建CSS规则】对话框,1【定义在】选项 【定义在】选项包括两个单选项,分别介绍如下。 (1)【新建样式表文件】:此选项将会把设定的样式最终保存在一个外部单独的样式表文件中,这个样式表文件可以被其他HTML文件共同使用,也就是说可以使站点内的所有页面文件使用同一个样式表文件,甚至不同的站点只要是网页就可以使用。 (2)【仅对该文档】:此选项将会把设定的样式仅仅放在当前文件的头文件中,这些样式只能在此文件中使用。 专家点拨:根据运用CSS的范围是局限于当前网页内部还是可以运用到其他网页文件,可以分为“内联样式表”和“外部样式表”。“内联样式表”是将CSS规则定义在HTML网页文
4、档内部。 “外部样式表”是将CSS规则定义在一个独立的外部样式表文件(扩展名为.css)中。,6.1.2 定义CSS样式,返回本节,【选择器类型】选项包括3个单选项,分别介绍如下。 (1)【类(可应用于任何标签)】:选择此类型后,需要在上方的【名称】文本框中填入一个样式名字,需要注意的是,此类名称必须以“.”开头。这种方式定义的样式可以用来定义绝大多数的HTML对象,可以使这些对象有统一的外观。如图6-4所示是创建一个.mystyle的样式。,图6-4 创建mystyle样式,6.1.2 定义CSS样式,返回本节,专家点拨:如果在【定义在】选项中选择的是【新建样式表文件】,那么单击【确定】按钮
5、后会弹出【保存样式表文件为】对话框,在其中选择要保存到的目录,输入文件名,单击【保存】按钮后进入【.mystyle的CSS规则定义】对话框。在其中可以定义【类型】、【背景】、【区块】、【方框】、【边框】、【列表】、【定位】、【扩展】等属性。 (2)【标签(重新定义特定标签的外观)】:选择此选项后,在【标签】下拉框里选择需要重新定义的HTML标签。 (3)【高级(ID、伪类选择器等)】:重新定义特定元素组合的格式,或其他CSS允许的选择器表单的格式(例如,每当h2标题出现在表格单元格内时,就会应用选择器td h2)。还可以重定义包含特定id属性的标签的格式(例如,由#myStyle定义的样式可以
6、应用于所有包含属性/值对id=“myStyle“的HTML标签)。另外,这个选项还可以设定链接文本的样式。,返回本节,定义完样式表文件后,就可以在Dreamweaver中套用这些样式了。套用样式表的方法主要有3种,下面分别进行介绍。 1在【属性】面板选择应用样式 在网页中选中需要应用样式的元素,打开【属性】面板,单击打开【样式】右边的下拉列表框,里面列出了已经定义的一些CSS样式。如图6-8所示。,6.1.3 在网页中应用CSS样式,图6-8 【属性】面板中的 “样式”列表框,2利用【标签选择器】选择样式 首先需要在【标签选择器】上选定一个标签,如图6-9中的标签,然后在标签上右击,在弹出的快
7、捷菜单中选择【设置类】|【mycss】,则可以快速把已经定义的mycss样式类指定给标签。,图6-9 利用【标签选择器】 应用样式,返回本节,3使用右键快捷菜单 也可以从右键快捷菜单中直接给对象指定一个样式,首先选中需要应用样式的对象,在右键快捷菜单中指定样式类。如图6-10所示。,6.1.3 在网页中应用CSS样式,图6-10 从右键快捷菜单中直接给对象指定样式,4清除样式 如果想清除应用的样式,首先选中对象,然后从右键快捷菜单中选择“无”,即可清除原有的样式。需要提醒注意的是,这里的清除样式并不是将定义的样式完全删除,而是网页中的某个对象不再使用这个样式了。,返回本章首页,6.2 CSS样
8、式详解,在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型)、Background(背景)、Block(块)、Box(盒子)、Border(边框)、List(列表)、Positioning(定位)、Extensions(扩展)8个部分,如图6-11所示。,图6-11 CSS规则定义,6.2.1 类型 6.2.2 背景 6.2.3 区块 6.2.4 方框 6.2.5 边框 6.2.6 列表 6.2.7 定位 6.2.8 扩展,6.2.1 类型,返回本节,类型选项主要是对文字的字体大小、颜色、效果等基本样式进行设置,如
9、图4-11所示。只对要改变的属性进行设置,没有必要改变的属性就使之为空。 1字体 字体系列是指对文字设定几个字体,当遇到第一个字体不能显示时会自动用系列中的第二个字体或后面的字体显示。相对应的CSS属性是font-family。 大小 可以通过选取数字和度量单位来选择具体的字体大小,或者也可以选择一个相对的字体大小。最好使用像素作为单位,这样不会在浏览器中文本变形。一般小字体用比较标准的12像素。相对应的CSS属性是font-size。 3样式 定义字体样式为“正常”、“斜体”或“偏斜体”。默认设置为正常。相对应的CSS属性是font-style。“斜体”和“偏斜体”都是斜体字体。而它们不同的
10、是,“斜体”是斜体字,而“偏斜体”是倾斜的文字,对于没有斜体的字体应该用“偏斜体”。 4行高 设置文本所在行的行高。默认为正常,也可以自己键入一个精确的数值并选取一个计量单位。比较直观的写法用百分比,例如140%是指行高等于文字大小的1.4倍。相对应CSS属性是line-height。 5修饰 向文本中添加下划线、上划线或删除线,或使文本闪烁。常规文本的默认设置是“无”。链接的默认设置是“下划线”。将链接设置设为无时,可以通过定义一个特殊的类去除链接中的下划线。这些效果可以同时存在,将效果前的复选框选定即可。相对应的CSS属性是text-decoration。,6.2.1 类型,返回本节,6粗
11、细 对字体应用特定或相对的粗体量。“正常”等于400;“粗体”等于700。相对应的CSS属性是font-weight。 7变体 设置文本的小型大写字母变体。Dreamweaver不在“文档编辑区”中显示此属性。Internet Explorer支持变体属性,但Navigator不支持。相对应的CSS属性是font-variant。 8大小写 将选区中每个单词的第一个字母转为大写,或者令单词全部大写或全部小写。相对应的CSS属性是 text-transform。 9颜色 定义文字颜色。相对应的CSS属性是color。CSS中颜色的值有3种表示方法。 #RRGGBB格式,是由红绿蓝三种颜色的值组合
12、,每种颜色的值为“00FF”的两位十六进制正整数。例如,#FF0000表示红色,#FFFF00表示黄色。 RGB格式,RGB为三色的值,取0255,例如,RGB(255,0,0)表示红色,RGB(255,255,0)表示黄色。 用颜色名称。CSS可以使用已经定义好的颜色名称。例如,red表示红色,yellow表示黄色。,6.2.2 背景,返回本节,背景选项主要是对元素的背景进行设置,包括背景颜色、背景图像、背景图像的控制。如图6-12所示。一般是对BODY(页面)、TABLE(表格)、DIV(区域)的设置。,图6-12 背景选项,1背景颜色 设置元素的背景色。相对应的CSS属性是backgro
13、und-color。可以单击“颜色”按钮打开调色板,然后在其中选择需要的颜色。或者直接在文本框中输入颜色代码。 2背景图像 设置元素的背景图像。相对应的CSS属性是background-image。可以单击“浏览”按钮打开“选择图像源文件”对话框,在其中选择需要的图像文件。或者直接在文本框中输入图像文件的完整路径。,6.2.2 背景,返回本节,3重复 确定背景图像是否以及如何重复。相对应的CSS属性是background-repeat。在下拉列表中包括4个选项。 不重复:在元素的开头显示一遍图像。 重复:在元素的背景部分水平和垂直方向平铺图像。 横向重复:在水平和垂直方向重复显示。 纵向重复:
14、在垂直方向重复显示。 4附件 确定背景图像是固定在其原始位置还是随内容一起滚动。注意,某些浏览器可能将“固定”选项视为“滚动”。Internet Explorer支持该选项,但Netscape Navigator不支持。相对应的CSS属性是background-attachment。 5水平位置 指定背景图像相对于元素的水平位置。相对应的CSS属性是background-position。在下拉列表中可以指定为left(左边),center(居中),right(右边);也可以在文本框中直接输入数值,如20px是指背景距离左边20象素。 6垂直位置 指定背景图像相对于元素的垂直位置。相对应的CS
15、S属性是background-position。在下拉列表中可以指定为top(顶部),center(居中),bottom(底部);也可以在文本框中直接输入数值。,6.2.3 区块,返回本节,区块选项主要是设置对象文本文字间距、对齐方式、上标、下标、排列方式、首行缩进等。如图6-13所示。,图6-13 区块选项,6.2.3 区块,返回本节,区块选项主要是设置对象文本文字间距、对齐方式、上标、下标、排列方式、首行缩进等。如图4-13所示。 1单词间距 设置单词之间的间距。若要设置特定的值,请在下拉列表中选择“值”,然后输入一个数值。在第二个下拉列表中选择度量单位(例如像素、点等)。相对应的CSS属
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 样式 详解
链接地址:https://www.31doc.com/p-2976466.html