CSS样式代码基础教程解析

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．在记事本的编辑面板中输入以下代码，创建了使用样式的页面css1.htm：htmlheadtitle样式表举例/titlestyletype=text/css!--h1{font-size:36px;font-family:隶书;font-weight:bold;color:#993366;}--/style/headbodypstyle=color:#ff0000这段文字将显示为红色/ppstyle=color:#000000;background-color:yellow;这段文字的背景色为I黄色/I/ppstyle=font-family:'华文彩云';font-size:24px这段文字将以黑体显示/pph1align=center今天学习样式表的相关知识。/h1/p/body/html3．将文件保存到确定目录下，文件名为css1.htm。4．运行结果见图1－1所示。图1－1样式表示例三、涵盖知识点：1．什么是CSSCSS(CascadingStyleSheet,层叠样式表)技术上一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。上面所举的例子只是层叠样式表中的一种应用。从中也可以看出层叠样式表最大的优点就在于把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式。层叠样式表把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式。层叠样式表因为是较晚才提出的一个标准，所以只有4.0及其更高版本的IE浏览器才对CSS有较好的支持。2．CSS的优先级层叠样式表中“层叠”的意思是指在同一个HTML文档中可以有多层样式表存在，不同层次的样式表根据其所在的位置拥有不同的优先级，优先级越高，在显示时就被越后采用。换句话说，一个网页对象(文本、图片或者表格等)可以被多层的样式表所修饰，但是最终它会以优先级最高的样式表所定义的格式来显示。3．CSS的分类一般情况下，层叠样式表可以分为三种：内联式样式表、嵌入式样式表和外部样式表。下面我们就分别来看看这三种样式表。内联式样式表嵌入样式表外部样式表内联式样式表内联式样式表是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中，比如下面的例子：pstyle=color：#ff0000内联式样式表/p这种样式表只会对使用它的元素起作用，而不会影响HTML文档中的其他元素。也正因为如此，内联式样式表通常用在需要特殊格式的某个网页对象上。本案例就一个应用内联式样式表的一个网页实例，在这个实例中，各段文字都定义了自己的内联式样式表：pstyle=color:#ff0000这段文字将显示为红色/ppstyle=color:#000000;background-color:yellow;这段文字的背景色为I黄色/I/ppstyle=font-family:'华文彩云';font-size:24px这段文字将以黑体显示/p这段代码中的第一个P元素中的样式表将文字用华文彩云显示。还有一个特殊的地方是第二个P元素中还嵌套了I元素，从图中可以看见I元素中的文字同样使用了P元素中的样式。这种性质通常称为继承性，也就是说子元素会继承父元素的样式。在浏览器中如图1－1所示。嵌入样式表嵌入式样式表通常包含在HTML，文档的头部，即HEAD元素中，并且有一个专门的元素style来标记这种样式表。它的书写格式通常为：styletype=text/css!--p{color:red;font-weight:bold}/style在这个格式中，style元素的type属性必须设为text/css，表示这定义的是一个层叠样式表。这样一来，当不支持层叠样式表的浏览器读到这个属性时，会自动忽略这个样式表。另外，在STYLE元素中还添加了HTML的注释符!--和--，这么做的好处是为了避免老版本的浏览器在网页上将这些样式以文字方式显示出来。嵌入式样式表首先可以为某个HTML标记定义样式，定义好之后，整个网页中所有的这个标记都会采用这种样式来显示其中的网页对象。比如本例中对H1元素定义了嵌入式样式，所以网页中凡是包含在H1元素中的文字都将使用所定义的样式显示，如图4－1所示。外部样式表外部式样式表是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素，比如要将本例中的嵌入式样式定义到一个样式表文件mystyle.css中，这个样式表文件的内容应该为嵌入式样式表中的所有样式，如下所示：h1{font-size:36px;font-family:隶书;font-weight:bold;color:#993366;}提示：在定义嵌入样式表时，style标记必须放在head和/head标记之间。实例1-2样式表的规则一、要求与目的：掌握样式表定义规则掌握规则组合二、过程与步骤：1．通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本。2．在记事本的编辑面板中输入以下代码，创建了使用样式的页面css2.htm：htmlheadtitle在标记符中直接嵌套样式信息/titlestyle!--p{font-size:24px;text-align:center}h1{font-family:楷体_gb2312;text-align:center)--/style/headbodyh1一代人/h1p黑夜给了我黑色的眼睛br我却用它寻找光明/p/body/html3．将文件保存为css2.htm。运行结果如图1－2所示。图1－2css的规则示例三、涵盖知识点：1．样式规则在html标记符中直接指定样式信息显然没有发挥出样式表的主要优势——简化格式设置和维护工作，因为每一个style属性都必须单独设置。如果能将相类似的样式都统一定义了。然后再具体应用于网页中的元素，那么就能体现出CSS的优越性了。实际上，这正是CSS应用于网页的最常用方式，即在HEAD标记符内使用STYLE标记符，然后在STYLE标记符中定义样式定义样式的方式为：selector{property1:vaIue1;property2:value2;……}其中，selector表示样式作用的对象（选择器）property和value则表示相应CSS属性和值。每一对属性和值用“分号”隔开。如：h1{font-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-align:center}这样定义之后，在页面中所有使用h1、h2和p的对象都具有相同的显示方式。实例1-3样式表中的选择器一、要求与目的：熟悉样式表定义规则掌握五种选择器能灵活使用各种样式来设计网页二、过程与步骤：1．通过依次单击任务栏上的【开始】→【程序】→【附件】→【记事本】菜单命令打开记事本2．在记事本的编辑面板中输入以下代码，创建了综合了五种选择器的页面css3.htm：htmlheadtitle选择器举例/titlestyletype=text/css!--h1{font-size:36px;font-family:隶书;font-weight:bold;color:#993366;}/*html标记选择器*/h2b{color:#0000FF}/*具有上下文关系的html标记选择器*/.water{font-family:隶书;font-size:24px;text-align:right}/*类选择器*/h3.hello{font-family:隶书;text-align:center;font-size:36px}/*指定的类选择器*/#danger{color:#990000;font-family:华文彩云;font-size:24px}/*ID选择器*//*以下是虚类的定义*/a:link{color:red}/*未访问的链接*/a:visited{color:blue}/*已访问的链接*/a:active{color:yellow}/*活动链接*/a:hover{color:#990000;text-decoration:underline}/*鼠标指针移到上面链接的颜色*/--/style/headbodyh1标题1的使用。/h1b测试上下选择器（没有上下文）/bbrh2b测试上下选择器（具有上下文）/b/h2pclass=water这是黄河的水/ppclass=hello这句话没有使用类“hello”的效果。/ph3class=hello这句话才使用了类“hello”的效果。/h3pid=danger这里危险。/pahref=css2.htm测试链接的颜色，使用了虚类，实际做的过程中读者自行体会。/a/body/html3．将文件保存为css3.htm。4．运行结果见图1－3所示。图1－3CSS选择器的综合使用三、涵盖知识点：1．HTML标记符选择器HTML标记符是最典型的选择器类型，网页设计者可以为某个或某些具体的HTML元素应用样式定义。对于不同的标记符选择器，我们可以采用编组的方式简化样式定义(对于其他选择器，也可以用类似的编组方法)。前面的实例已有介绍。此例中的标记选择器是h1标记，即：h1{font-size:36px;font-family:隶书;font-weight:bold;color:#993366;}/*html标记选择器*/显示的结果从图1－3可以看到。规定所有的标题1都使用此样式。2．具有上下文关系的HTML标记符选择器如果需要为位于某个标记符内的标记符设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记符。例如，如果只想使位于h2标记符内的b标记符具有特定的属性，则应使用以下格式：h2b{color:blue}/*注意h2和b之间以空格分隔*/这表示只有位于h2一标记符内的b元素具有指定样式，而其他b元素不具有该样式。实际上，这种嵌套关系可以有多层，不过通常仅用一层。本例中的结果见图4－3所示。提示：在定义样式表项时可以添加注释,以便增强文挡的可读性。CSS的文字注释形式与C语言相似，都是将注释语句放置在“/*”和“*/”之间，并且注释不能嵌套。3．用户定义的类选择器可以使用类(clas