本文详细介绍了CSS的基础知识，包括CSS的作用、语法规范、代码风格、基础选择器、字体属性、文本属性、引入方式、Chrome调试工具的使用、Emmet语法、复合选择器、元素显示模式、背景属性以及CSS的三大特性。通过对CSS的理解和实践，能够更好地掌握网页布局和美化。
CSS简介
CSS作用
1.主要使用场景：美化网页，布局页面
2.CSS：层叠样式表的简称，也称为CSS样式表或级联样式表，是一种标记语言
3.CSS主要用于设置HTML页面的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
CSS语法规范
1.CSS规则由两个主要部分构成：选择器及一条或多条声明
2.选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
3.属性和属性值以“键值对”的形式出现
4.属性是对指定的对象设置的样式属性，如字体大小等
5.属性和属性值之间用英文“:”分开
6.多个“键值对”之间要用英文“;”区分
7.CSS的相关内容要写在<style></style>里(<style>标签写在<head>中）
CSS代码风格
样式格式书写
- 紧凑格式
h3 {color: deeppink;font-size: 20px;}
- 展开格式✓
h3 {
color:pink;
font-size:20px;
}
样式大小写风格
- h3 {
color:pink;
}✓
- H3 {
COLOR:PINK;
}
样式空格风格
- h3 {
color: pink;
}
- 注意
1.属性值前面，冒号后面，保留一个空格
2.选择器（标签）和大括号中间保留空格
CSS基础选择器
CSS选择器的作用
根据不同需求把不同的标签选出来
1.找到所有标签
2.设置标签样式
选择器分类
基础选择器
基础选择器是由单个选择器组成的
- 标签选择器
1.标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
2.结构
标签名 {
属性1： 属性值1；
...
}
3.作用
标签选择器可把某一类标签全部选择出来
4.优点
能快速为页面中同类型的标签统一设置样式
5.缺点
不能设计差异化样式，只能选择全部的当前标签
- 类选择器
1.差异化选择不同的标签，单独选一个或某几个标签
2.结构
.类名 {
属性1：属性值1；
...
}（<style>中写）
结构需要用class属性来调用class类的意思
<div class='red'>变红色</div>（在某个标签中加）
3.口诀
样式点定义 结构类（class）调用 一个或多个 开发最常用
4.注意
1）类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，自己命名，但不能用标签名）
2）可理解为给这个标签起了一个名字
3）长名称或词组可以使用中横线来为选择器命名
4）不要使用纯数字、中文等命名，尽量使用英文字母表示，命名要有意义
5.多类名
可以给一个标签指定多个类名，从而达到更多的选择目的
1）多类名使用方式
<div class=“red font20”>亚瑟</div>
在标签class属性中写多个类名
多个类名之间必须用空格分开
2）多类名开发中使用场景
可以把一些标签元素相同的样式（共同的部分）放到一个类里面
这些标签都可以调用这个公共的类，然后再调用自己独有的类
- id选择器
1.id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义,用id调用
2.结构
#id名 {
属性：属性值1；
...
}
3.口诀
样式#定义，结构id调用，只能调用一次，别人切勿使用
4.id选择器与类选择器的区别
1）类选择器（class）好比人的名字，一个人可有多个名字，一个名字可被多个人使用
2）id选择器好比人的身份证号码，不得重复
3）最大区别在于使用次数上
4）类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，与JS搭配使用
- 通配符选择器
1.通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）
2.结构
* {
属性1：属性值1；
...
}
3.注意
1）通配符选择器不需要调用，自动给所有元素使用样式
2）特殊情况才使用
CSS字体属性
字体属性用于定义字体系列、大小、粗细和文字样式
字体系列
1.用font-family属性定义文本的字体系列
2.结构
标签名 { font-family:“Microsoft Yahei”；}
3.注意
1）各个字体之间必须使用英文状态下的逗号隔开
2）一般情况下，如果有空格隔开的多个单词组成的字体，加引号
3）尽量使用默认字体
4）常见字体：body {font-family:Microsoft Yahei，tahoma，arial，Hiragino Sans GB；}
字号大小
1.font-size属性定义字体大小
2.结构
p {
font-size: 20px;
}
3.注意
1）px（像素）大小是网页最常用的单位
2）谷歌浏览器默认的文字大小是16px
3)一般要明确字体大小
4）可以给body指定整个页面文字的大小
字体粗细
1.font -weight属性设置文本字体的粗细
2.font-weight:
normal，（400）;bold（700）;bolder;lighter;number（100、200
~900）（数字后不加单位）.
3.用“class”调用
字体样式
1.使用font-style属性设置文本风格
2.结构
p {
font-style: normal;
}
3.一般是将斜体标签（em,i）改为不倾斜字体
字体复合属性
1.格式：
body {
font: font-style font-weight font-size/line-height font-family;
}
2.注意
1）使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，且各个属性之间以空格隔开
2）不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用
CSS文本属性
文本颜色
1.color属性用于定义文本颜色
2.结构
div {
color: red;
}
文本对齐
1.text-align属性用于设置元素内文本内容的水平对齐方式
2.结构
div {
text-align: center;
}
文本装饰
1.text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等
2.div {
text-decoration: underline;
}
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
