要想将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.不要纯数字、中文等命名, 尽量使用英文字母来表示。
类选择器小案例
<!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图标
<!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>