前端学习笔记——CSS基础语言的学习（一）

作者简介：大家好，本人刚专升本上岸，是个前端小菜鸟。每日都会虚心的学习。有什么写的不好的，大家都可以帮我提出来。我跟着pink老师学的！！！强烈推荐：https://www.bilibili.com/video/BV14J4114768p=1&vd_source=38cea56ff3dcca4556d2d0f0f2c18c0c

---

CSS基础语言学习

选择器

1.CSS语法规范：选择器{样式}，在head中添加styble,font-size表示像素

2.CSS选择器就是选择标签用的

3.选择器分为基础选择器和复合选择器两大类。

4.标签选择器：写上标签名。选出某一大类，整体修改

5.类标签选择器：可以单独选一个或者某几个标签。

结构需要用class属性来调用

类选择器口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用

6.类选择器：多类名使用

7.id选择器：使用方式与类选择器相似

注意！！id选择器只能被调用一次，他是惟一的。

8.通配符选择器：把全部的标签都改为同一个属性

9.字体系列：使用font-family属性定义文本的字体系列。

注意！！！' '中最好用英语。

字体样式

10.字体大小：使用font-size属性定义字体大小。

11.字体粗细：使用 font-weight属性定义字体粗细

12.字体样式（正体还是斜体）：使用font-style属性设置文字样式

13.字体复合属性（注意！！！不能颠倒他们的顺序且font-size和font-family不能省略）

文本属性

14.文本颜色：使用color属性定义文本的颜色

15.对齐文本：text-align属性用于设置元素内文本内容的水平对其方式。

16.装饰文本：text-decoration属性可以给文本添加下划线，删除线，上划线或者默认

17.文本缩进：使用text-indent属性，通常是段落的首行缩进。em是相对单位，1em为一个字的距离

18.行间距：line-height属性用于设置行间的距离。

样式表

19.内部样式表（嵌入式样式表）：吧所有的CSS代码抽取出来，单独放到一个<style>标签中。（练习使用）

20，行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式（不怎么使用）

21，外部样式表（最多使用）

1.需要新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。

2.在HTML页面中，使用<link>标签引入这个文件

hr标签

22.<hr>水平线标签

Emmet语法

23.Emmet语法：可以快速生成html结构语法

1.生成标签直接输入标签名，按tab键即可，比如div，按下tab键，生成<div></div>

2.想要生成多个相同标签加上号，比如div*3就可以快速生成3个div

3.如果有父子关系的标签，比如ul ，li，就可以ul > li。

4.兄弟关系 用+号，比如 div + p

5.生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了

6.生成div类名要有顺序的，可以用自增符号$

7.如果想要在生成的标签内部写文字可以用{}表示。

元素选择器

24.后代选择器又称包含选择器，可以选择父元素里面的子元素

25.子元素选择器，只能选择作为某元素的最近一级子元素，符号使用>号

26.并集选择器，可以选择多组标签，同时为他们定义相同的样式。通过英文逗号（，）连接而成

27.链接伪类选择器，对于链接使用

注意！！！1.不能更改顺序，必须是lvha(记忆法：lv好)

2.实际开发中的写法

28.focus伪类选择器：选取获得光标的表单元素，一般只有input才能获取。

元素显示模式

29.元素显示模式

元素显示模式转换

30.元素显示模式转换

转换成块元素：display：block；

转换成行内元素：display：inline；

转换成行内块：display：inline—block；