【图文】DIV+CSS网页样式与布局_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
DIV+CSS网页样式与布局
上传于||暂无简介
大小：817.50KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢您当前所在位置： >
> Web前端开发
基本CSS选择器相关教程
选择器(selector)是CSS中很重要的概念，所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。下文介绍了基本ＣＳＳ选择器相关知识。
为了理解选择器的概念，可以用&地图&作为类比。在地图上都可以看到一些&图例&，比如河流用蓝色的线表示，某公路用红色的线表示，省会城市用黑色圆点表示，等等。本质上，这就是一种&内容&与&表现形式&对应关系。在网页上，也同样存在着这样的对应关系，例如h1标题用蓝色文字表示，h2标题用红色文字表示。因此为了使CSS规则与HTML元素对应起来.就必须定义一套完整的规则，实现CSS对HTML的&选择&。这就是叫做&选择器&的原因。
在CSS中，有几种不同类型的选择，本节先来介绍&基本&选择器。所谓&基本&，是相对于下一节中要介绍的&复合&选择器而言的。也就是说&复合&选择器是通过对基本选择器进行组合而构成的的。
基本选择器有标记选择器，类别选择器和ID选择器3种，下面详细介绍。
一、标记选择器
一个HTML页面由很多不同的标记组成，CSS标记选择器用来声明哪些标记采用哪种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。例如，p选择器就是用于声明页面中所有
标记的样式风格。同样可以通过h1选择器来声明页面中所有的
标记的CSS风格，如下所示：
以上这段CSS代码声明了HTML页而巾所有的
标记。文字的颜色都采用红色，大小都为24px。每-个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记声明多种样式风格，如上示例所示。
如果希望所有
标记不再采用红色，而是蓝色，这时仅仅需要将属性color的值修改为blue即可全部生效。
注意：CSS语言对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中不存在，或者某个属性的值不符合该属性的要求，都不能使CSS语句失效。下面是一些典型的错误语句：
对于上面提到的这些错误，通常情况下可以直接利用CSS编辑器(如Dreamweaver或Expression　Web)的语法提示功能避免，但某些时候还需要查阅CSS手册，或者直接登录W3C的官方网站来查阅CSS的详细规格说明。
二、类别选择器
在上一小节中提到的标记选择器一旦声明，那么页面中所有的该标记都会相应地产生变化。例如当声明了
标记为红色时，页面中所有的
标记都将显示为红色。但是如果希望其中的某一个
标记不是红色，而是蓝色，仅依靠标记选择器是不够的，还需要引入类别(　class)选择器。
例如，当页面中同时出现3个
标记时，如果想让它们的颜色各不相同，就可以通过设置不同的class选择器来实现。一个完整的案例如下所示，实例文件位于网页学习网CSS教程资源的&第1章\示例5.htm&。
其显示效果如图1所示。从图中可以看到两个
标记分别呈现出了不同的颜色和字体大小，而且任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性声明即可，例如
标记同样使用了.green这个类别。
图1　类别选择器示例
首先通过标记选择器定义
标记的全局显示方案，然后再通过一个class选择器对需要突出的
标记进行单独设置，这样大大提高了代码的编写效率，其显示效果如图2所示。
图2　两种选择器配合
在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。这在实际制作网站时往往会很有用，可以适当减少代码的长度，如下例所示，示例文件位于网页学习网CSS教程中&第1章\07，htm&。
显示效果如图3所示，可以看到使用第1种class的第2行显示为蓝色，而第3行则仍为黑色，但由于使用了.two，因此字体变大。第4行通过&class=&ne　two&&将两个样式同时加入，得到蓝色大字体。第1行和第5行没有使用任何样式，仅作为对比时的参考。
图3　同时使用两种CSS风格
三、ID选择器
ID选择器的使用方法与class选择器基本相同;不同之处在于ID选择器只能HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器。
下面举一个实际案例，示例文件位于网页学习网CSS教程资源中&第1章\08.htm&。
显示效果如图4所示，第2行与第3行都显示了CSS的方案。可以看出，在很多浏览器下，ID选择器可以用于多个标记，即每个标记定义的id不只是CSS可以调用，JavaScript等其他脚本语言同样也可以调用。因为这个特性，所以不要将ID选择器用于多个标记.否则会出现意想不到的错误。如果一个HTML中有两个相同id的标记，那么将会导致JavaScript在查找id时出错，例如函数getElementByld()。
图4　ID选择器示例
正因为JavaScript等脚本语言也能凋用HTML中设置的id.所以ID选择器一直被广泛地使用。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多其能赋予一个HTML标记。
另外从图4中还可以看到，最后一行没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使朋，类似&id=&one
以上就是精品学习提供的关于基本ＣＳＳ选择器的内容，希望能够带给您帮助。
上一篇：下一篇：
本文相关阅读
高校查询分数线
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
地区批次线查询
考生所在地
北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
科目理科文科综合其他
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
<option value="
院校所在地北京天津辽宁吉林黑龙江上海江苏浙江安徽福建山东湖北湖南广东重庆四川陕西甘肃河北山西内蒙古河南海南广西贵州云南西藏青海宁夏新疆江西香港澳门台湾
其它中央部委
类型工科农业师范民族
层次本科高职(专科)
高考志愿③部曲
频道热门推荐
栏目最新更新503 Service Temporarily Unavailable
503 Service Temporarily Unavailable
nginx/0.8.54DIV+CSS教程
用css3选择器给你要的第几个元素添加不同样式方法
所属栏目：　时间：　来源：　作者：yecha　点击：
很多时候,我们写网页样式时候会遇到如下面图这种的, 第4个li下面有一行虚线什么的,这样循环,那么,如何很方便的用css实现呢!我们写的html代码 实例如下:&ul&class=&list&&
&&&&&li&&a&href=&#&&１·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&２·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&３·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&４·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&５·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&６·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&７·这里是一流资源网信息标题&/a&&/li&
&&&&&li&&a&href=&#&&８·这里是一流资源网信息标题&/a&&/li&
&/ul&效果如图:下面我们来了解一下css选择器里面的几个:only-childp:only-child选择属于其父元素的唯一子元素的每个 &p& 元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 &p& 元素。3:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 &p& 元素的每个 &p& 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。3:last-childp:last-child选择属于其父元素最后一个子元素每个 &p& 元素。3:first-childp:first-child选择属于父元素的第一个子元素的每个 &p& 元素。我们可以使用&:nth-child(n) &来自动判断第4个css代码如下&style&
.list&li:nth-child(4n){&border-bottom:1px&dashed&#}&/*4n就是4的倍数都加这个样式*/
&/style&则效果如图!当然,上面我介绍了一堆选择器,使用方法都差不多,例如 要给第一句加样式,则可以这样&style&
.list&li:first-child{&border-bottom:1px&dashed&#}&/*first-child就是第一个元素*/
&/style&其他用法也是一样的! 大家需要的就学习一下吧 下面给大家个演示!
请站长喝杯咖啡？
站长一直坚持白天工作、晚上熬夜更新素材，付出了巨大的精力和时间，其中的辛酸难以言述。坚持免积分、免登录、无任何限制下载！如果本站素材对你有用，不妨考虑请站长喝杯咖啡鼓励一下！
你应该也喜欢这些吧
给个评价吧
学习最多的
最近更新的
2014全新改版上线
2013全新改版上线}