CSS标签选择器(二)_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS标签选择器(二)_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:46 AM

一、CSS选择器概述

1.1、CSS功能

CSS语言具有两个基本功能：匹配和渲染

当浏览器在解析CSS样式时，首先应该确定哪些元素需要渲染，即匹配哪些HTML元素，这个操作由CSS样式中的选择器负责标识。

只有匹配到具体的对象之后，浏览器才能根据CSS样式声明，决定渲染的效果，并及时呈现在页面中。

1.2、CSS选择类型

标签选择器

ID选择器

类选择器

特殊选择器

1.3、CSS基本语法

二、标签选择器

2.1标签选择器概述

以文档对象类型的元素作为选择器，如p、div，span等。

最常用的选择器是标签选择器。标签选择器可以用来寻找特定类型的元素，如段落、超链接或者标题元素，只需要指定希望应用样式的元素的名称。

标签选择器有时候也称为元素选择器或者简单选择器。

如：

/*段落字体颜色为黑色*/p{    color:black;}/*超链接显示下划线*/a{    text-decoration:underline;}/*一级标题显示为粗体效果*/h1{    font-weight:bold;}

2.2、使用标签选择器的优缺点：

优点:能够快速为页面中同类型的标签统一样式。

缺点：不能设计差异化样式，有时候会相互干扰

例如：如果在网页样式表中定义如下样式，把所有div元素对象定义为宽度为774px

/*所有div元素对象定义为宽度为774px*/div{      width:774px;       }

那么当用div进行布局时，就需要重新为页面中每个div对象定义宽度，因为在页面中并不是每个div元素对象的宽度都显示为774px，否则是件非常麻烦的事情774。

2.3、那么在什么情况下选用标签选择器？

如果希望标签定义默认样式时，可以使用标签选择器。例如，使用ul元素时，它会自动缩进，并自带列表符号，有时这种样式会给列表布局带来麻烦，此时就可以选择ul元素作为标签选择器，并清除预定义样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>标签选择器</title><link type="text/css" rel="stylesheet" href="css/test2.css" /></head><body><h1 id="标签选择器">标签选择器</h1><p>段落设置字体为蓝色</p><a href="#">超链接没有下划线</a><ul><li><a href="#">列表1</a></li><li><a href="#">列表2</a></li><li><a href="#">列表3</a></li></ul><img src="/static/imghwm/default1.png"  data-src="images/003.jpg"  class="lazy"  alt="狗粮" /><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/408330.jpg"  class="lazy"  alt="小狗" /></a><table><tr><td>姓名：</td><td><input type="text" name="username" /></td></tr><tr><td>密码 ：</td><td><input type="password" name="password" /></td></tr><tr><td><input type="submit" value="提交" /></td><td><input type="reset"  value="重置" /></td></tr></table></body></html>

@charset "utf-8";/* CSS Document *//*统一文档字体大小，行高，字体*/body{    font:12px Arial, Helvetica, sans-serif;    color:#000000;}/*段落字体颜色为蓝色*/p{    color:#0000FF;}/*一级标题显示为粗体效果*/h1{    font-weight:bold;}/*设置a标签的下划线为没有*/a{    text-decoration:none;}/*清除预定义样式*/ul{    margin:0px;    list-style:none;    }/*设置图像的边框为0*/img{    border:0px;}/*统一表格字体和行高*/table{    border:solid 5px #000000; /*边框实线，宽度为5px，颜色为黑色*/    font-size:12px;        /*字体大小为12px*/            color:#666;            /*字体颜色为中灰*/    line-height:200%;    /*行主为默认值的2倍*/}/*设置input标签的边框为实线，1个像素，颜色为浅灰*/input{    border:solid 1px #ddd;}

/*清除预定义样式*/ul{    margin:0px;    list-style:none;    }

如果希望统一文档标签中的样式，也可以使用标签选择器。

例如统一文档字体大小，行高，字体，通过table标签选择器统一表格格的字体样式，通过a标签选择器清除所有超链接的下划下，通过img标签选择器清除网页图像的边框，当图像嵌入a元素中，即作为超链接对象时会出现边框，通过input标签选择器，统一输入表单边框为浅灰色的实现等。

/*统一文档字体大小，行高，字体*/body{    font:12px Arial, Helvetica, sans-serif;}/*统一表格字体和行高*/table{    font-size:12px;        /*字体大小为12px*/            color:#666;            /*字体颜色为中灰*/    line-height:200%;    /*行主为默认值的2倍*/}/*设置a标签的下划线为没有*/a{    text-decoration:none;}/*设置图像的边框为0*/img{    border:0px;}/*设置input标签的边框为实线，1个像素，颜色为浅灰*/input{    border:solid 1px #ddd;}

对于div、span等通用结构元素，不建议使用标签选择器，因为通用结构元素的应用范围广泛，使用标签选择器会相互干扰

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles