一、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>标签选择器</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 alt="狗粮" src="images/003.jpg" /> <a href="#"><img alt="小狗" src="images/408330.jpg" /></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等通用结构元素，不建议使用标签选择器，因为通用结构元素的应用范围广泛，使用标签选择器会相互干扰
时间： 2024-11-11 06:30:10