一、通配符选择器
1.通配符选择器常用 ‘*’号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。
2.基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}
例1：使用该选择器定义样式，清除所有HTML标记的默认边距。
*{
margin：0； /*定义外边距*/
padding：0； /*定义内边距*/
}
说明:实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，降低了代码的执行速度。
二、标签选择器
1.标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。
2.基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}
3.所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。
4.标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。
例2:使用h1选择器定义HTML页面中所有段落的样式
。
h1{ font-size: 22px; color: #ffff17; font-family:"微软雅黑"; }
三、类选择器
1.类选择器使用‘.’(英文点号)进行标识，后面紧跟类名。
2.基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}
3.该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。
4.类选择器最大的优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。同时，一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开。
例3
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>类选择器</title>
6 <style type="text/css">
7 .red{
color: red;
}
8 .green{
color:green;
}
9 .beam{
font-size:22px;
}
10 p{
text-decoration:underline; font- family:"微软雅黑";
}
11 </style>
12 </head>
13 <body>
14 <h2 class="red">我是一个二级标题</h2>
15 <p class-"green beam">段落文本内容一</p>
16 <p class="red beam">我是段落文本二</p>
17 <p>段落文本内容三</p>
18 </body>
19 </html>
注意：类名的第一个字符不能使用数字，并且严格区分大小写。一般采用小写的英文字符。
四、id选择器
1.id选择器使用 # 进行标识，后面紧跟id名。
2.基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}
3.该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
例4
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>id选择器</title>
6 <style type="text/css">
7 #bold{font -weight:bold; }
8 #font24 {font-size:24px; }
9 </style>
10 </head>
11 <body>
12 <pidf"bold">段落1: id="bold",设置粗体文字。</p>
13 <p id="font24">段落2: id="font24", 设置字号为24px。</p>
14 <p id="font24">段落3: id="font24", 设置字号为24px。</p>
15 <pid="bold font24">段落4: id="bold font24",同时设置粗体和字号24px。</p>
16 </body>
17 </html>
最低0.47元/天 解锁文章
1200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
