细数CSS语言中的选择器(全).doc

细数CSS语言中的选择器 网络管理中心 佟禺明 摘要：网页的编辑过程中，我们使用CSS语言进行网页的美化工作。需要解决的首要问题是：如何在网页中准确定位每一个需要美化的元素？CSS语言提供了种类繁多，功能各异的选择器。掌握CSS语言中的各种选择器就能对每一元素做出精准的定位！ 关键词：CSS，选择器，类选择器，ID选择器，高级选择器 作者简介：佟禺明（1982.02-）男，籍贯：内蒙古赤峰市，毕业于西安邮电大学，就职于内蒙古交通职业技术学院网络中心，助教，研究方向：计算机网络 网页的编辑过程中，我们使用CSS语言进行网页的美化工作。CSS语言的构成依靠的是样式，每一个样式由选择器和声明块构成。其中，声明块中的声明包含了属性和值两个部分。我们来看下面这段简单的CSS语言： body { background-color: #CDE6FF; padding-top: 100px; background-image: url(images/bg_body.png); background-repeat: repeat-x; } 其中，“body”是选择器，“{}”和其中的内容共同构成了声明块，由4条声明组成，每一个“；”代表着一条声明的结束。每一条声明从冒号“：”处隔开，左边的是属性，右边的是属性的值。 显而易见，声明非常重要，它是网页到底以一种怎样的姿态出现的根本，直接控制着网页的外观。可事实上，选择器才是CSS语言更为重要的部分。无论网页需要达到什么样的视觉效果，首先要做的是在网页的编辑过程中确定你要控制那一部分，然后才是要让它达到怎样的效果！要说明这件事，我们得先了解一下CSS语言通过怎样的方式与HTML语言进行对接，并分工合作的！ 一、CSS语言的样式表 CSS语言的样式表分为：内部样式表和外部样式表。 内部样式表：由多个样式组成，，它是网页代码的一部分，总是出现在网页head中开始和关闭的HTMLstyle标签之间。这里有个范例： style type=”text/css” h1{ color:#FF7643; font-family:Arial; } p{ color:red; font-size:1.5em; } /style /head body !-- The rest of your page follow…-- 内部样式表容易被附到网页上，且在HTML中立即就能显示出来。但是，设计多页面时，不够灵活，即使相同的设置也必须逐一输入，工作量非常大且增加了网页代码。 外部样式表：内容与内部样式表相同，却需要单独建立一个“.css”文件，不附在网页里。这样的使用方式比内部样式表灵活得多！便于查找，管理和修改。而且对于接收端而言，有助于更快速地打开网页。这是因为网页本身只包含HTML，而且没有繁复的表格和大量的font标签。 比较了外部样式表和内部样式表的优劣后，可以知道的是在网页编辑的过程中，外部样式表是首选。基于这种认知和外部样式表的特点——使用单独的“.css”文件进行页面的美化——需要解决的首要问题是：如何在“.css”文件中准确定位多个网页中的每一个需要美化的部分？只有了解了CSS语言中的各种选择器和它们的适用范围才能做出精准的定位！ 二、CSS语言中的选择器 为了能够精确定位网页中的各个部分，CSS语言提供了诸多类型的选择器。这些选择器的功能和使用方式各不相同，下面来看看有哪些选择器供我们使用并能方便我们在编辑网页的过程中顺利定位！ 基础型 1、标签选择器：整体控制 标签选择器——有时也叫类型选择器，或者元素选择器——是非常有效的样式化工具，因为它们将应用到某个HTML标签在网页上的所有位置。我们可以毫不费力地利用它们对网页进行大规模的设计变更。下面是一个范例： h2{ font-family:”Century Gothic”, “Gill Sans”, sans-serif; color:#000000; margin-bottom:0; } 标签选择器影响着该标签在网页上的每一个位置，使用了上面的范例后，网页上所有的 h2标签都将展现相同的效果。 2、类选择器：精确控制 如果我们的目的是希望某一个或几个元素的外观与网页上其他的相关标签有所区别时——例如，让网页上的一两张图片有红色边框线，而大多数其他图片则没有设置样式——就可以使用类选择器。比如： .special{ color：#ff000000; font-family：”Montype Corsiva”; } /style … p class=”special”…/p h2 class=”special”…/h2 span class=”special”…/span 使用了类选择器后，所有类（class