6—CSS基础选择器（标签选择器、类选择器、id选择器）

css简介

css是层叠样式表的简称，css主要用于设置html的文本内容、图像的外形以及版式的布局和外观显示样式。css让我们的网页更加丰富多彩，布局更加灵活自如。

css语法规范

css规则由两个主要部分构成：选择器以及一条或多条声明

h1 { color:red; font-size:25px; }

选择器声明1 声明2

选择器是用来指定css样式的html标签，花括号内是该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如文字大小、文本颜色等
属性和属性值之间用英文“;”分开

空格规范

1.属性值前面，冒号后面，保留一个空格

2.选择器（标签）和大括号中间保留空格

基础选择器-标签选择器

标签选择器是指用html标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的css的样式

作用：标签选择器可以把某一类标签全部选择出来，能快速为页面中同类型的标签统一设置样式，但不能设计差异化样式，只能选择全部的当前标签

<style>p {color: red;font-size: 12px;}div {color: blueviolet;}</style>
<body><p>张小梦很厉害</p><p>呵呵哈哈哈</p><div>嘻嘻嘻嘻</div><div>嘻嘻嘻嘻</div>
</body>

p 标签选择器选择p标签里面的全部内容 div标签选择器选择div标签里面的全部内容变换样式

基础选择器-类选择器

如果想要差异化选择不同的标签，单独选择一个或者某几个标签，可以使用类选择器

结构需要class属性来调用

<style>.red {color: red;font-size: 20px;}</style>
<body><p class="red">张小梦很厉害</p><p>呵呵哈哈哈</p><div class="red">嘻嘻嘻嘻</div><div>嘻嘻嘻嘻</div>
</body>

类选择器能够让想变样式的标签变换样式用class="类名"来调用类选择器

用类选择器制作一个盒子

<style>.red {width: 100px;height: 100px;background-color: red;}.green {width: 100px;height: 100px;background-color: aqua;}</style>
<body><div class="red"></div><div class="green"></div><div class="red"></div>
</body>

类选择器-多类名

多类名使用方式

<style>.red {background-color: red;}.green {background-color: aqua;}.box {width: 100px;height: 100px;}</style>
<body><div class="red box"></div><div class="green box"></div><div class="red box"></div>
</body>

效果和上面的盒子一样只是变换了类选择器让公共的样式在一个类选择器里面，其他的背景单独放一个类选择器（这些标签都可以调用这个公共的类，然后再调用自己独有的类）

基础选择器-id选择器

id选择器可以为特定id的html元素指定特定的样式

html元素以id属性来设置id选择器，css中id选择器以“#”来定义

注意： id属性只能在每个html文档中出现一次

<style>#red {color: red;}</style>
<body><p id="red">哈哈哈哈</p><p>嘻嘻嘻</p>
</body>

基础选择器-通配符选择器

在css中，通配符选择器使用“*”定义，它表示选取页面中所有元素

通配符选择器不需要调用，自动就给所有的元素使用样式

特殊情况如清除所有的元素标签的内外边距会使用

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	p { color: red; }
类选择器	可以选出一个或多个标签 class调用	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择一个标签 id调用	id属性只能在每个html文档中出现一次	一般和js一起使用	#zmy { color: red; }
通配符选择器	选择所有的标签	选择的太多，部分不需要	特殊情况使用	* { color: red; }