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

css简介

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

css语法规范

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

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

选择器     声明1    声明2

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

空格规范

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

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

基础选择器-标签选择器

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

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

    
张小梦很厉害
    
呵呵哈哈哈
    
嘻嘻嘻嘻
    
嘻嘻嘻嘻

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

基础选择器-类选择器

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

 

 结构需要class属性来调用

    
张小梦很厉害
    
呵呵哈哈哈
    
嘻嘻嘻嘻
    
嘻嘻嘻嘻

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

 用类选择器制作一个盒子

 类选择器-多类名

多类名使用方式

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

基础选择器-id选择器

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

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

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

    
哈哈哈哈
    
嘻嘻嘻

 

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

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

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

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

基础选择器总结

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