选择器(重点)

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。

CSS基础选择器

标签选择器(元素选择器)

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

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

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

标签选择器 可以把某一类标签全部选择出来 div span

类选择器

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

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
 标签调用的时候用 class=“类名”  即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。

​ 输入的时候少按一个shift键;
 浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
 能良好区分JavaScript变量命名(JS变量命名是用“_”)

3.不要纯数字、中文等命名, 尽量使用英文字母来表示。

类选择器小案例

CSS——标签选择器,类选择器_CSS

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*div {  div 标签选择器 吧所有的div 选择 改为红色
		color: red;
	}*/
	/*上面点声明 ,下面class调用*/
	.leixuanzeqi{
		color: blue;
	}
	</style>
</head>
<body>
	<div class="leixuanzeqi">我是类选择器</div>
	<div>我是类选择器</div>
	<div>我是类选择器</div>
	<div>我是类选择器</div>
	<div>我是类选择器</div>
	<div class="leixuanzeqi">我是类选择器</div>
</body>
</html>

小案例 制作一个简易Google图标

CSS——标签选择器,类选择器_CSS_02

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style> /*千万别忘了它*/
		span {  /*标签选择器 让所有的span 都变成 150 */
			font-size: 150px;
		}
		.g { 
			color: blue;
		}
		.o {
			color: red;
		}
		.o2 {
			color: orange;
		}
		.l {
			color: green;
		}
	/* 类选择器  可以选择 一个 或者 多个 标签*/
	</style>
</head>
<body>
	<span class="g">G</span>
	<span class="o">o</span>
	<span class="o2">o</span>
	<span class="g">g</span>
	<span class="l">l</span>
	<span class="o">e</span>
	<div class="nav"></div>  <!-- 导航 我们习惯性的约定 -->
	<div class="banner"></div>  <!-- 导航 我们习惯性的约定 -->
</body>
</html>