CSS样式代码基础教程解析

《CSS样式代码基础教程解析》由会员分享，可在线阅读，更多相关《CSS样式代码基础教程解析（51页珍藏版）》请在金锄头文库上搜索。

1、CSS样式表,CSS技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同效果。本节共分9个实例，主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。,本章主要的内容包括以下内容: 1.1 样式表基础 实例1-1 样式表简介 实例1-2 样式表的规则 实例1-3样式表中的选择器 1.2 样式表的引用 实例1-4导入CSS文件,1.1 样式表基础,实例1-1 样式表简介 一、要求与目的： 掌握什么是样式表 掌握样式表的分类 会简单设计内联样式表和嵌入样式表 会建立外部样式表 二、过程与步骤：,1.通过依次单击任务栏上的【开始】

2、【程序】【附件】【记事本】菜单命令打开记事本。 2在记事本的编辑面板中输入以下代码，创建了使用样式的页面css1.htm： 样式表举例 , ,这段文字将显示为红色 这段文字的背景色为黄色 这段文字将以黑体显示 今天学习样式表的相关知识。 ,3将文件保存到确定目录下，文件名为css1.htm。 4运行结果见图11所示。,图11样式表示例,三、涵盖知识点： 1什么是CSS CSS(Cascading Style Sheet,层叠样式表)技术上一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 上面所举的例子只是层叠样式表中的一种应用。从中也可以看出层叠样

3、式表最大的优点就在于把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式。层叠样式表,把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式。层叠样式表因为是较晚才提出的一个标准，所以只有4.0及其更高版本的IE浏览器才对CSS有较好的支持。 2CSS的优先级 层叠样式表中“层叠”的意思是指在同一个HTML文档中可以有多层样式表存在，不同层次的样式表根据其所在的位置拥有不同的优先级，优先级越高，在显示时就被越后采用。换句话说，一个网页对象(文本、图片或者表格等)可以被多层的样式表所修饰，但是最终它会以优先级最高的样式表所定义的格式来显示。,3CSS的分类 一般

4、情况下，层叠样式表可以分为三种：内联式样式表、嵌入式样式表和外部样式表。下面我们就分别来看看这三种样式表。 内联式样式表 嵌入样式表 外部样式表,内联式样式表 内联式样式表是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中，比如下面的例子： 内联式样式表 这种样式表只会对使用它的元素起作用，而不会影响HTML文档中的其他元素。也正因为如此，内联式样式表通常用在需要特殊格式的某个网页对象上。本案例就一个应用内联式样式表的一个网页实例，在这个实例中，各段文字都定义了自己的内联式样式表： 这段文字将显示为红色 这段文字的背景色为黄色 这段文字将以黑体显示,这段代

5、码中的第一个P元素中的样式表将文字用华文彩云显示。还有一个特殊的地方是第二个P元素中还嵌套了元素，从图中可以看见元素中的文字同样使用了P元素中的样式。这种性质通常称为继承性，也就是说子元素会继承父元素的样式。 在浏览器中如图11所示。 嵌入样式表 嵌入式样式表通常包含在HTML，文档的头部，即HEAD元素中，并且有一个专门的元素style来标记这种样式表。它的书写格式通常为：, 在这个格式中，style元素的type属性必须设为text/css，表示这定义的是一个层叠样式表。这样一来，当不支持层叠样式表的浏览器读到这个属性时，会自动忽略这个样式表。 另外，在STYLE元素中还添加了HTML的注

6、释符，这么做的好处是为了避免老版本的浏览器在网页上将这些样式以文字方式显示出来。,嵌入式样式表首先可以为某个HTML标记定义样式，定义好之后，整个网页中所有的这个标记都会采用这种样式来显示其中的网页对象。比如本例中对H1元素定义了嵌入式样式，所以网页中凡是包含在H1元素中的文字都将使用所定义的样式显示，如图41所示。 外部样式表,外部式样式表是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素，比如要将本例中的嵌入式样式定义到一个样式表文件mystyle.css中，这个样式表文件

7、的内容应该为嵌入式样式表中的所有样式，如下所示： h1 font-size: 36px; font-family: 隶书; font-weight: bold; color: #993366; 提示：在定义嵌入样式表时，标记必须放在和标记之间。,实例1-2 样式表的规则 一、要求与目的： 掌握样式表定义规则 掌握规则组合 二、过程与步骤： 1通过依次单击任务栏上的【开始】【程序】【附件】【记事本】菜单命令打开记事本。,2在记事本的编辑面板中输入以下代码，创建了使用样式的页面css2.htm： 在标记符中直接嵌套样式信息 , 一代人 黑夜给了我黑色的眼睛我却用它寻找光明 3将文件保存为css2.

8、htm。,运行结果如图12所示。,图12 css的规则示例,三、涵盖知识点： 1样式规则 在html标记符中直接指定样式信息显然没有发挥出样式表的主要优势简化格式设置和维护工作，因为每一个style属性都必须单独设置。如果能将相类似的样式都统一定义了。然后再具体应用于网页中的元素，那么就能体现出CSS的优越性了。实际上，这正是CSS应用于网页的最常用方式，即在HEAD标记符内使用STYLE标记符，然后在STYLE标记符中定义样式,定义样式的方式为： selectorproperty1:vaIue1;property2:value2; 其中，selector表示样式作用的对象（选择器）prope

9、rty和value则表示相应CSS属性和值。每一对属性和值用“分号”隔开。 如：h1font-family:楷体_gb2312;text-align:center，其中h1是选择器，font- family:楷体_gb2312;text-align:center”是声明。在声明中，font-family和text-align是属性，楷体_gb2312和center是相应的属性值。,2组合规则 在定义样式的时候，有很多不同的元素需要使用相同的样式。此时没有必要逐一定义样式规则，可以将他们组合，并用分号将各个声明隔开即可。如： h1,h2,p font-family:楷体_gb2312;text-

10、align:center 这样定义之后，在页面中所有使用h1、h2和p的对象都具有相同的显示方式。,实例1-3样式表中的选择器,一、要求与目的： 熟悉样式表定义规则 掌握五种选择器 能灵活使用各种样式来设计网页 二、过程与步骤： 1通过依次单击任务栏上的【开始】【程序】【附件】【记事本】菜单命令打开记事本 2在记事本的编辑面板中输入以下代码，创建了综合了五种选择器的页面css3.htm：, 选择器举例 标题1的使用。 测试上下选择器（没有上下文） 测试上下选择器（具有上下文）,这是黄河的水 这句话没有使用类“hello”的效果。 这句话才使用了类“hello”的效果。 这里危险。 测试链接的颜

11、色，使用了虚类，实际做的过程中读者自行体会。 3将文件保存为css3.htm。,4运行结果见图13所示。,图13 CSS选择器的综合使用,三、涵盖知识点： 1HTML标记符选择器 HTML标记符是最典型的选择器类型，网页设计者可以为某个或某些具体的HTML元素应用样式定义。对于不同的标记符选择器，我们可以采用编组的方式简化样式定义(对于其他选择器，也可以用类似的编组方法)。前面的实例已有介绍。此例中的标记选择器是标记，即： h1 font-size: 36px; font-family: 隶书; font-weight: bold; color: #993366; /*html标记选择器*/,

12、显示的结果从图13可以看到。规定所有的标题1都使用此样式。 2具有上下文关系的HTML标记符选择器 如果需要为位于某个标记符内的标记符设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记符。例如，如果只想使位于h2标记符内的b标记符具有特定的属性，则应使用以下格式： h2 bcolor:blue/*注意h2和b之间以空格分隔*/,这表示只有位于h2一标记符内的b元素具有指定样式，而其他b元素不具有该样式。实际上，这种嵌套关系可以有多层，不过通常仅用一层。本例中的结果见图43所示。 提示：在定义样式表项时可以添加注释,以便增强文挡的可读性。CSS的文字注释形式与C语言相似，都是将注

13、释语句放置在“/*”和“*/”之间，并且注释不能嵌套。 3用户定义的类选择器 可以使用类(class)来为单一HTML标记符创建多个样式。要想将一个类包括到样式定义中,可将一个句点和一个类名称添加到选择器后，如下所示： selector.classnameproperty:value:,可以使用任何名称命名类，但通常应使用有具体含义的名称。例如，如果需要在网页的三处使用H1标记符，每处的文本具有不同的颜色，此时可以定义以下类样式： H1.color_redcoler:red H1.color_yellowcoler:yellow H1.color_bluecoler:blue,然后在网页中需要

14、使用该类处用class属性引用这些类，如下所示： 此标题为红色 此标题为黄色 此标题为蓝色 此时如果使用了H1标记符但没有使用相应的class属性，则不应用所定义的样式。 实际上，不仅可以为某个或某些标记符定义类，还可以定义应用于所有标记符的类(称为通用类)，此时直接用句点后跟类名即可，如下所示： classnameproperty:value;,例如，可以定义一个类： .redcolor:red 然后在需要引用该类的任意标记符内使用class属性，以便所有引用该类的标记符都可以采用所定义的样式。在定义了以上的red类后，就可以用以下方式引用它： 本行文字为红色 本标题为红色 在本案例中，以下

15、代码是对类的定义： .water font-family:隶书; font-size:24px; text-align:right/*类选择器*/ h3.hello font-family:隶书; text-align:center; font-size:36px/*指定的类选择器*/ 应用的效果可以从图13中看到。这里就指出并不是所有的标记都可以使用“.hello”类的。它只为服务。,4用户定义的ID选择器 当网页设计者想在整个网页或几个页面上多处以相同样式显示标记符时，除了使用.classname的方式定义一个通用类样式以外，还可以使用ID定义样式。要将一个ID样式包括在样式定义中，应用一个井号(#)作为ID名称的前缀，如下所示： #IDnameproperty:value 定义了ID样式后，需要在引用该样式的标记符内使用id属性。例如，可以定义一个ID样式如下：,#redcolor:red 然后可以存若干不同的HTML标记符中使用该样式规则,如下所示： 本行文字为红色。 本标题红色。