CSS基础选择器、字体、文本、引入方式

1.标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：
标签选择器可以把某一类标签全部选择出来，比如所有的

标签和所有的 标签。
优点：
能快速为页面中的同类型标签统一设置样式。
缺点：
不能设计差异化样式，只能选择当前全部标签。
语法：
标签名{
属性1：属性值1；
属性1：属性值1；
…
}
2.类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点".“号显示
注意：1）类选择器使用”."(英文点号)进行标识，后面紧跟类名（自定义，自己命名）
2）可以理解为给这个标签起了一个名字
3)长名称或词组可以使用中横线来为选择器命名
4）不要使用纯数字、中文等命名，尽量使用英文字母表示
5）命名要有意义，一眼即可看懂
6）遵守web命名规范
口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用
语法：
.类名{
属性1：属性值1；
…
}
例： .red{
width: 100px;
height: 100px;
background-color: red;
}
.green{
width: 100px;
height: 100px;
background-color: green;
}
2.1 多类名使用方式
1）在标签class中属性可以写多个类名
2）多个类名中间必须用空格隔开
3）这标签就可以拥有这些类的样式
2.2 多类名开发使用场景
1）可以把一些标签元素相同的样式（共同的部分）放到一个类里面
2）这些标签都可以调用这个公共的类，然后再调用自己独有的类
3）从而节省CSS代码，统一修改非常方便
3.id选择器
id选择器可以标有特定的id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以"#“来定义
id选择器一般用于页面唯一性元素的使用，使用次数相比于类选择器较少
语法：
#id名{
属性1：属性值1；
…
}
#red{
width: 100px;
background-color: green;
}
4.通配符选择器
在CSS中，通配符选择器使用”*“来定义，它表示选取页面中所有元素（标签）
语法：
*{
属性1：属性值1；
…
}
1.font-family
CSS使用font-family属性纯属定义文本字体系列
各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，需要加上引号
一般使用系统自带的字体
例：
p{font-family:‘微软雅黑’}
2.字体大小
CSS使用font-size属性定义文字的大小
PX（像素）是网页最常用的单位
谷歌浏览器的文字大小默认为16px
可以给body指定整个页面的大小
例：p{
font-size: 20px;
}
3.字体粗细
CSS使用font-weight属性定义文字的粗细
实际开中，提倡使用数字来表示加粗或变细。
属性值 描述
normal 默认值（不加粗的）
bold 定义粗体（加粗的）
100-900 400等同于normal，而700等同于bold 注意这个数字后面不跟单位
例：
P{
font-weight:100px;
}
4.字体样式
CSS中使用font-style属性设置文本的风格
属性值 描述
normal 默认值，浏览器会显示标准字体样式 fongt-style:normal;
italic 浏览器会显示斜体字体样式
例：
P{
fongt-style:normal;
}
5.字体复合属性
CSS中font（字体）属性用于定义字体系列、大小、粗细、和字体样式（如斜体）
使用font属性时，必须按照上面的语法格式中的书写顺序写，不能更换顺序，并且各个属性之间以空格隔开
例：body{
font:font-style font-fweight font-size/line-height font-family
}
1.文本颜色
color属性用于定义文本颜色
le表示 属性值
预定义颜色 red等
十六进制 #FF0000
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
例：
div{
color:red;
}
2.对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
属性值 解释
left 左对齐
righ 右对齐
cente 居中对齐
例：div{
text-align:center;
}
3.装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加上划线、下划线、删除线等。
属性值 描述
none 默认。没有装饰线（最常用）
underline 下划线。链接a自带下划线（常用）
overline 上划线（几乎不用）
line-through 删除线（不常用）
例：
div{
text-decoration：underline；
}
4.文本缩进
text-indent属性用于指定问本第一行的缩进，通常是段落首行缩进
通常设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
例：
div{
text-indent:10px;
}
p{
text-indent:2em;
}
em是一个相对的单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
5.行间距
line-height属性用于设置行间的距离（行高）,可以控制文字行与行之间的距离
例：
P{
line-height:16px;
}
1.内部样式表(内嵌式)
内部样式表（内部嵌样表）是写到HTML页面内部，是将所有CSS代码抽取出来，单独放到一个
2.行内样式表（行内式）
行内样式表（内联样式表）在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。
例：

知行合一

3.外部样式表(外链式或链接式引入)
核心：在外部写一个CSS样式表，然后链接放到HTML文件中
引入分两步：
1）新建一个后缀名为。CSS的样式文件，把所有的CSS代码都放到此文件中
2）在HTML页面中，使用标签引入这个文件。
属性 作用
rel 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet”，表示被链接的文档是一个样式表文件。
href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径
例：