怎样使用网页技术美化网页（知识点3）

三．CSS基础选择器

（1）标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签制定统一的CSS样式，其基本的语法格式如下。

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

在该语法中，所有的标签名都可以作为标签选择器，例如body、h1、p、strong等。用标签选择其定义的样式对该页面中该类型的所有标签都有效。

例如，可以使用p选择器定义HTML页面中所有段落的样式，示例代码如下。

P{font-size:12px;color:red;font-family:”微软雅黑”}

*注意：标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化。

（2）类选择器

  类选择器使用”.”(英文点号)进行标识，后面紧跟类名，其基本的语法格式如下。

   .类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

*注意：类名即位HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独的样式。

下面做一个案例来演示一下类选择器的使用方法，如图1.

图1

保存好刷新页面如图2

图2

*注意：类名的第一个字符不能使用数字，并且严格区分大小写，一般采用小写的英文字符。

（3）id选择器

id选择器用“#“来标识，后面紧跟id名，其基本语法格式如下。

#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

*注意：id名即位HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id是唯一的，只能对应文档中某一个具体的元素。

下面通过一个案例来演示如何使用id选择器，编写代码如图3.

图3

保存并刷新如图4

图4

*注意：如果类名不唯一，会报错，而且id选择器不能像类选择器一样可以有多个标签，如果出现超过一个id选择器的标签会报错，如图5

图5

（4）通配符选择器

通配符选择器用”*”表示，它在所有的选择其中作用范围最广，能匹配到页面中的所有元素，其基本语法格式如下。

*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

例如：*{margin:0;  /*定义外边距*/

padding:0;  /*定义内边距*/

} 

注意：虽然它很好，但在实际的网页中不建议使用通配符选择器，因为通配符选择器设置的样式对HTML中所有的标签都生效，不管该标签是否需要该样式，这样反而降低了代码的执行速度，有点像生活中某一些人是中央空调，对谁都好。

（5）这期怎样使用网页技术美化网页（知识点3）就讲完了，下期我们讲谷歌页面文字Logo是怎样实现的案例，下期再见。