CSS样式代码基础教程.ppt

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： 样式表举例 ,这段文字将显示为红色 这段文字的背景色为黄色 这段文字将以黑体显示 今天学习样式表的相关知识。 ,3将文件保存到确定目录下，文件名为css1.htm。 4运行结果见图11所示。,图11样式表示例,三、涵盖知识点： 1什么是CSS CSS(Cascading Style Sheet,层叠样式表)技术上一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。 上面所举的例子只是层叠样式表中的一种应用。从中也可以看出层叠样式表最大的优点就在于把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式。层叠样式表,把内容和格式分离开来，使得能够用一种统一的方式来管理各种不同的显示格式。层叠样式表因为是较晚才提出的一个标准，所以只有4.0及其更高版本的IE浏览器才对CSS有较好的支持。 2CSS的优先级 层叠样式表中“层叠”的意思是指在同一个HTML文档中可以有多层样式表存在，不同层次的样式表根据其所在的位置拥有不同的优先级，优先级越高，在显示时就被越后采用。换句话说，一个网页对象(文本、图片或者表格等)可以被多层的样式表所修饰，但是最终它会以优先级最高的样式表所定义的格式来显示。,3CSS的分类 一般情况下，层叠样式表可以分为三种：内联式样式表、嵌入式样式表和外部样式表。下面我们就分别来看看这三种样式表。 内联式样式表 嵌入样式表 外部样式表,内联式样式表 内联式样式表是在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些控制信息的标记中，比如下面的例子： 内联式样式表 这种样式表只会对使用它的元素起作用，而不会影响HTML文档中的其他元素。也正因为如此，内联式样式表通常用在需要特殊格式的某个网页对象上。本案例就一个应用内联式样式表的一个网页实例，在这个实例中，各段文字都定义了自己的内联式样式表： 这段文字将显示为红色 这段文字的背景色为黄色 这段文字将以黑体显示,这段代码中的第一个P元素中的样式表将文字用华文彩云显示。还有一个特殊的地方是第二个P元素中还嵌套了元素，从图中可以看见元素中的文字同样使用了P元素中的样式。这种性质通常称为继承性，也就是说子元素会继承父元素的样式。 在浏览器中如图11所示。 嵌入样式表 嵌入式样式表通常包含在HTML，文档的头部，即HEAD元素中，并且有一个专门的元素style来标记这种样式表。它的书写格式通常为：, 在这个格式中，style元素的type属性必须设为“text/css“，表示这定义的是一个层叠样式表。这样一来，当不支持层叠样式表的浏览器读到这个属性时，会自动忽略这个样式表。 另外，在STYLE元素中还添加了HTML的注释符“，这么做的好处是为了避免老版本的浏览器在网页上将这些样式以文字方式显示出来。,嵌入式样式表首先可以为某个HTML标记定义样式，定义好之后，整个网页中所有的这个标记都会采用这种样式来显示其中的网页对象。比如本例中对H1元素定义了嵌入式样式，所以网页中凡是包含在H1元素中的文字都将使用所定义的样式显示，如图41所示。 外部样式表,外部式样式表是指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。样式在样式表文件中定义和在嵌入式样式表中的定义是一样的，只是不再需要style元素，比如要将本例中的嵌入式样式定义到一个样式表文件mystyle.css中，这个样式表文件的内容应该为嵌入式样式表中的所有样式，如下所示： h1 font-size: 36px; font-family: “隶书“; font-weight: bold; color: #993366; 提示：在定义嵌入样式表时，标记必须放在和标记之间。,实例1-2 样式表的规则 一、要求与目的： 掌握样式表定义规则 掌握规则组合 二、过程与步骤： 1通过依次单击任务栏上的【开始】【程序】【附件】【记事本】菜单命令打开记事本。,2在记事本的编辑面板中输入以下代码，创建了使用样式的页面css2.htm： 在标记符中直接嵌套样式信息 , 一代人 黑夜给了我黑色的眼睛我却用它寻找光明 3将文件保存为css2.htm。,运行结果如图12所示。,图12 css的规则示例,三、涵盖知识点： 1样式规则 在html标记符中直接指定样式信息显然没有发挥出样式表的主要优势简化格式设置和维护工作，因为每一个style属性都必须单独设置。如果能将相类似的样式都统一定义了。然后再具体应用于网页中的元素，那么就能体现出CSS的优越性了。实际上，这正是CSS应用于网页的最常用方式，即在HEAD标记符内使用STYLE标记符，然后在STYLE标记符中定义样式,定义样式的方式为： selectorproperty1:vaIue1;property2:value2; 其中，selector表示样式作用的对象（选择器）property和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-align:center 这样定义之后，在页面中所有使用h1、h2和p的对象都具有相同的显示方式。,实例1-3样式表中的选择器,一、要求与目的： 熟悉样式表定义规则 掌握五种选择器 能灵活使用各种样式来设计网页 二、过程与步骤： 1通过依次单击任务栏上的【开始】【程序】【附件】【记事本】菜单命令打开记事本 2在记事本的编辑面板中输入以下代码，创建了综合了五种选择器的页面css3.htm：, 选择器举例 ,/*html标记选择器*/ h2 b 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 /*鼠标指针移到上面链接的颜色*/ 标题1的使用。 测试上下选择器（没有上下文） 测试上下选择器（具有上下文）,这是黄河的水 这句话没有使用类“hello”的效果。 这句话才使用了类“hello”的效果。 这里危险。 测试链接的颜色，使用了虚类，实际做的过程中读者自行体会。 3将文件保存为css3.htm。,4运行结果见图13所示。,图13 CSS选择器的综合使用,三、涵盖知识点： 1HTML标记符选择器 HTML标记符是最典型的选择器类型，网页设计者可以为某个或某些具体的HTML元素应用样式定义。对于不同的标记符选择器，我们可以采用编组的方式简化样式定义(对于其他选择器，也可以用类似的编组方法)。前面的实例已有介绍。此例中的标记选择器是标记，即： h1 font-size: 36px; font-family: “隶书“; font-weight: bold; color: #993366; /*html标记选择器*/,显示的结果从图13可以看到。规定所有的标题1都使用此样式。 2具有上下文关系的HTML标记符选择器 如果需要为位于某个标记符内的标记符设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记符。例如，如果只想使位于h2标记符内的b标记符具有特定的属性，则应使用以下格式： h2 bcolor:blue/*注意h2和b之间以空格分隔*/,这表示只有位于h2一标记符内的b元素具有指定样式，而其他b元素不具有该样式。实际上，这种嵌套关系可以有多层，不过通常仅用一层。本例中的结果见图43所示。 提示：在定义样式表项时可以添加注释,以便增强文挡的可读性。CSS的文字注释形式与C语言相似，都是将注释语句放置在“/*”和“*/”之间，并且注释不能嵌套。 3用户定义的类选择器 可以使用类(class)来为单一HTML标记符创建多个样式。要想将一个类包括到样式定义中,可将一个句点和一个类名称添加到选择器后，如下所示： selector.classnameproperty:value:,可以使用任何名称命名类，但通常应使用有具体含义的名称。例如，如果需要在网页的三处使用H1标记符，每处的文本具有不同的颜色，此时可以定义以下类样式： H1.color_redcoler:red H1.color_yellowcoler:yellow H1.color_bluecoler:blue,然后在网页中需要使用该类处用class属性引用这些类，如下所示： 此标题为红色 此标题为黄色 此标题为蓝色 此时如果使用了H1标记符但没有使用相应的class属性，则不应用所定义的样式。 实际上，不仅可以为某个或某些标记符定义类，还可以定义应用于所有标记符的类(称为通用类)，此时直接用句点后跟类名即可，如下所示： classnameproperty:value;,例如，可以定义一个类： .redcolor:red 然后在需要引用该类的任意标记符内使用class属性，以便所有引用该类的标记符都可以采用所定义的样式。在定义了以上的red类后，就可以用以下方式引用它： 本行文字为红色 本标题为红色 在本案例中，以下代码是对类的定义： .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标记符中使用该样式规则,如下所示： 本行文字为红色。 本标题红色。 在本例中也使用了ID选择器： #danger color:#990000; font-family:“华文彩云“; font-size:24px/*ID选择器*/ 提示：使用.classname和使用#IDname这两种方式在效果上并没有区别，但最好只使用其中之一，以免造成混淆。 5虚类选择器,对于a标记符,可以用虚类的方式设置不同类型链接的显示方式，所谓不同类型超链接，是指访问过的、未访问过的、激活的以及鼠标指钍悬停于其上的这4种状态的超链接。 可以通过指定下列选择器之一设置超链接样式： a:link或:link当超链接没被访问过时，所设置的样式应用于超链接。 a:visited或:visited当超链接已被访问过时，所设置的样式应用于超链接。 a:active或:active当超链接当前为被选中状态时，所设置的样式应用于超链接。 a:hover或:hover当鼠标指针移动到超链接之上时，所设置的样式应用于超链接。,例如本例中，以下一组样式定义可以使网页中的超链接文字在未访问过时以红色显示，访问过和被选中时以蓝色显示，鼠标悬停其上时以紫色显示，除了鼠标悬停时有下划线，其他状态均没有下划线。 /*以下是虚类的定义*/ a:link color:red/*未访问的链接*/ a:visited color:blue/*已访问的链接*/ a:active color:yellow/*活动链接*/ a:hover color:#990000; text-decoration:underline /*鼠标指针移到上面链接的颜色*/ 提示：如果要是所有的超链接都具有特定的效果，只需为a标记指定特定的样式即可。另外，虚类选选择器也可以与类选择器联合使用，例如： a:hover.greencolor:green 表示只有class属性为green的超链接悬停时才显示为绿色文字。,1.2 样式表的引用 实例导入CSS文件 一、要求与目的： 熟悉如何定义外部样式表 掌握导入外部样式表的两种方法 掌握样式表的就近原则 掌握样式表属性设置 二、过程与步骤： 1通过依次单击任务栏上的【开始】【程序】【附件】【记事本】菜单命令打开记事本 2在记事本的编辑面板中输入以下代码，创建了外外部样式表sheet1.css、sheet2.htm和页面文件css4.htm。,以下代码是sheet1.css CSS Document */ h1 font-size: 36px; font-family: “隶书“; font-weight: bold; color: #993366; h2 b color:blue .water font-family:“隶书“; font-size:24px; text-align:right/*类选择器*/ h3.hello font-family:“隶书“; text-align:center; font-size:36px/*指定的类选择器*/,以下代码是heet2.css /* CSS Document */ #danger color:#990000; font-family:“华文彩云“; font-size:24px/*ID选择器*/ /*以下是虚类的定义*/ a:link color:red; text-decoration: none; /*未访问的链接*/ a:visited color:blue; text-decoration: none; /*已访问的链接*/ a:active,color:yellow; text-decoration: none; /*活动链接*/ a:hover color:#990000;text-decoration:underline/*鼠标指针移到上面链接的颜色*/ h2 b color:green/*重新定义了上下文选择器*/ 以下代码是ss4.htm 导入外部样式表 , 标题1的使用。 测试上下选择器（没有上下文） 测试上下选择器（具有上下文） 这是黄河的水 这句话没有使用类“hello”的效果。 这句话才使用了类“hello”的效果。 这里危险。 测试链接的颜色，使用了虚类，实际做的过程中读者自行体会。 ,3将文件保存到相同的目录下，文件名为sheet1.css、sheet2.css和css4.htm。 4运行结果见图14所示。 三、涵盖知识点： 1链接外部样式表 在STYLE标记符中定义样式对于单独网页的格式设置和维护很有效，但如果在一个大网站中，为每个页面都定义类似的样式,显然叉是效率不高的，这时最好的办法就是将重复在多个网页中使用的样式放在外部样式文件中(不具有重复使用特点的样式仍旧放在单独网页的STYLE标记符中)，然后通过链接的方式引用其中的样式。链接式样式的优点很明显，网页设计者可以在一个链接的CSS文件上做修改，然后所有引用它的网页都会自动更新。 链接引用外部样式表的方法为：在HEAD标记符内使用LINK标记符，通过指定相应属性链接到外部样式表。,图14样式表的导入示例,当链接处部样式表时，LINK标记符的用法如下： 其中，rel属性规定了被链接文件的关系，在链接样式表文件(.css文件)的情况下，取值永远是“stylesheet“;type属性规定了链接文件的MIME类型,它的值永远是“text/css“；href属性指定了要链接的样式表文件。 创建样式表文件的方式非常简单，只要将STYLE标记符之间的样式定义一起放置到一个空白的文本文件中，然后将文件保存为.css扩展名即可，操作方法与用“记事本”保存.htm文件类似。 在本例中创建了两个样式表文件sheet1.css和sheet2.css。其中sheet2.css就是使用的链接的方式导入到html文件中的。样式效果从图14可以看到。具体实际应用见我们本书的第七章实例中的main.css。首先它是一个样式表文件，使用链接方式导入到html文档中，里面定义了大量的格式，来美化我们的页面，其中，就属类选择器使用的多。读者可以前后对照学习。,2导入外部样式表 导入外部样式表的方法与链接到外部样式表，稍有区别，其语法结构是： import url(样式表文件); 在本例中，我们把sheet1.css，就是用这种方法导入到html文档中的。 运行的效果见图14所示。 3同时使用多层样式表 很可能的情况是在一个网页中既定义了内联式样式表和嵌入式样式表又链接了外部样式表，这时网页会变得怎么样昵？其实前面也已说过，这三种样式表具有不同的优先级，其中内联式样式表的优先级大于嵌入式样式表的优先级，嵌入式样式表的优先级又大于外部式样式表的优先级，所以某个元素在挑选多层样式表时，会首先选择优先级最高的样式，即就近原则。这个网页的显示如图44所示。 从这个图中可以看出，h2元素同时使用了sheet1.css,和sheet2.css里面定义的样式，但是sheet2.css是最后导入到html文档中，所以它里面的文字按照sheet2.css文件所设定的格式显示为绿色。 4在样式表中设置属性 可以在样式表中设置各种属性。表15显示了样式表可以使用的各种属性。,表15样式表可以设置的属性,实际上，使用CSS样式不但能简化格式设置工作，增强网页的可维护能力，而且可以大大加强网页的表现力。因为相比HTML标记符而言，CSS样式属性提供了更多的格式设置功能。 例如，可以通过CSS样式定义使网页中的超链接去掉下划线，或者为列表指定图像作为项目符号，甚至可以为文字添加阴影效果等。,