（三）CSS学习笔记:CSS选择器、字体属性、文本属性、引入方式

本文仅用作学习记录，学习视频为B站的pink老师

CSS

CSS----层叠样式表，标记语言，用于设置文本内容、图片样式、版面布局和外观显示样式。

CSS选择器

选择器(选择符)就是根据不同需求把不同的标签选出来。简单来说就是选择标签用的。

基础选择器：

由单个选择器组成。包括标签选择器、类选择器、id选择器、通配符选择器。
（1）标签选择器：html的标签名作为选择器。
（2）类选择器：样式点定义、结构类(class)调用、一个或多个、开发最常用
注：

1. 不用使用标签名字作为类名；
2. 长名称或词组可以使用中横线来为选择器命名
3. 不要使用纯数字、中文
4. 命名要有意义

<style>
	.red {
    	color: red;
     }
</style>

<ul>
	<li class="red">1</li>
    <li>2</li>
    <li>3</li>
    <li class="red">4</li>
</ul>

可以为一个标签指定多个类名，从而达到更多的选择的目的。类名之间用空格隔开

<style>
	.red {
	   background-color: red;
    }
    .font35 {
       font-size: 35px;
    }
</style>

<div class="red font35">1</div>

（3）id选择器
为标有特定id的html元素指定特定的样式。
样式#调用，结构id调用，只能调用一次。

<style>
	#pink {
		color: pink;
	}
</style>

<div id="pink">1</div>

类选择器与id选择器的区别：

• 类选择器好比人的名字，同一个名字可以被多人使用。
• id选择器好比人的身份证，唯一的，不能重复使用。
• 类选择器在修改样式中使用最多，id选择器一般用于页面唯一性的元素上，经常和javascript搭配使用。

（4）通配符选择器
通常使用"*"定义，它表示选取页面中所有元素。
不需要调用，自动给所有元素使用样式。

<style>
	* {
		background-color: red;
	}
</style>

复合选择器

（1）后代选择器：

• 可以是任意基础选择器的组合
• 元素1 元素2 {样式声明}：表示元素1里面的所有元素2

（2）子选择器

• 可以是任意基础选择器的组合
• 元素1>元素2 {样式声明}：只能选择元素1里最近一级的元素2

（3）并集选择器

• 可以是任意形式的选择器的组合，基础选择器和复合选择器均可
• 选择多组标签，同时为他们定义相同的样式
• 元素1,元素2{样式声明}
• 约定的语法规范，并集选择器将每个选择器单独写一行

(4)伪类选择器

• 向某些选择器添加特殊的效果
• 链接伪类选择器

a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动链接(鼠标按下未弹起的链接) */

选择顺序为：:link,:visited,:hover,:active(LVHA)
因为a链接有默认样式，所以需要给链接单独指定样式

• focus伪类选择器
  用于选取获得焦点的表单元素，一般用于input

input:focus

CSS字体属性

/* 设置字体，多个字体用英文,号隔开 */
/* 设置多个字体是为了浏览器兼容，如果浏览器都不能兼容设置的字体，则选择默认字体*/
font-family:'Times New Roman', Times, serif;

/* 设置字体大小 */
/* 标题标签比较特殊，需要单独指定文字大小 */
font-size: 10px;

/* 设置字体粗细 */
/* 数字后不加单位，等价于bold，都是加粗效果 */
font-weight: normal/bold/bolder/lighter/100(number);

/* 设置文字样式 斜体、正常*/
font-style: italic/normal;

/* 综合 顺序不能颠倒 */
/* 不需要的属性可以省略，但是 font-size font-family不能省略 */
/* font：font-style font-weight font-size/line-height font-family; */
font: italic 100 10px 'Times New Roman';

CSS文本属性

/* 定义文本的颜色 三种形式 */
color: red;
color: #20b340;
color: rgb(20, 18, 193);

/* 用于设置元素内文本内容的“水平”对齐方式 */
/* 这个属性对图片没用，只能设置其父辈属性 */
text-align:left/center/right;

/* 规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线 */
text-decoration: none/underline/line-through/overline;

/* 用来指定第一行的文本缩进 */
/* em是一个相对单位，1em代表一个当前元素的大小 若当前元素没有设置大小，则按照父元素的大小执行*/
text-indent: 2em;

/* 行间距（行高），控制行与行之间的距离 */
/* 行间距=上间距+文本高度+下间距 */
line-height: 26px ;

CSS的引入方式

（1）内部样式表

1. 所有的样式放到标签<style></style>中，一般位于头部。
2. 结构清晰，但结构与样式没有完全分离。
3. 方便控制整个页面中的元素样式设置。

（2）行内样式表

1. 直接写在标签内部、控制当前标签样式
2. 适合修改样式比较少的情况
3. 结构与样式完全没有分离。

（3）外部样式表

1. 适合样式比较多的情况
2. 通过<link>引入外部.css文件。在.css文件中，只有样式，没有标签

<link rel="stylesheet" href="style1.css">

Emmet语法

提高html/css的编写速度，Vscode内部已经集成

1. 生成标签，直接输入标签名，按tab键即可。
2. 生成多个相同标签：div*3
3. 父子级关系：ul>li
4. 兄弟级关系：div+p
5. 如果生成带有类名或id名的，直接.div或#div即可
6. 如果生成的div类名或id名是有顺序的，带上自增符号$
7. 在生成的标签内写内容，用{}