目录
CSS简介
css是层叠样式表的简称，是一种标记语言，用于设置HTML中的文本内容、图形的外形以及版面的布局和外观显示样式。
1、HTML主要做结构，显示元素内容。
2、CSS美化HTML，布局网页。
3、CSS最大价值，由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）、样式（CSS）分离。
CSS语法规范
CSS语法由两个主要部分构成：选择器以及一条或者多条声明。
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。用英文“:”分隔。
<style>
/* 选择器{样式} */
p {
color: brown;
}
</style>CSS代码风格
1、样式格式书写：展开格式。
2、样式大小写：小写字母。
3、空格规范：属性值前，冒号后面，保留一个空格。选择器（标签）和大括号中间保留空格。
CSS基础选择器
选择器的作用：根据不同的需求把不同的标签选出来。
选择器的分类：基础选择器（标签选择器、类选择器、id选择器、通配符选择器）和复合选择器
标签选择器
指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。
类选择器
语法需要用class属性来调用。
类选择器使用"."（英文点号）进行标识，后面紧跟类名（自定义），长名称或词组可以使用中横线来为选择器命名，不要使用纯数字、中文等命名，尽量使用英文字母来表示。
.类名{
属性1:属性值1;
属性2:属性值2;
...
}课堂案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验css语法规范</title>
<style>
.red {
background-color: red;
width: 100px;
height: 100px;
}
.green {
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>效果如下：
多类名使用方式：各个类名中间使用空格分开。节省了CSS代码，统一修改非常方便，降低耦合，增加代码复用性。
<div class="red font20">红色</div>id选择器
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。
id属性只能在每个HTML文档中出现一次，口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。
#id名 {
属性1：属性值1;
...
}id选择器和类选择器的区别：
1、类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多人使用，id好比身份证号码，全国唯一的，不得重复。
2、id选择器和类选择器最大的不同在于使用次数上。
3、类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。
通配符选择器
在css中，通配符选择器使用“*”定义，它表示选取页面所有的元素（标签），不需要调用。
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p {color：red} |
最低0.47元/天 解锁文章
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
