2021-07-19学习CSS

一、CSS简介

CSS的主要使用场景就是美化网页，布局页面的

1、HTML的局限性

虽然可以做简单的样式，但是带来的是无尽的臃肿和繁琐

2、CSS-网页的美容师（层叠样式表的简称）

CSS也是一种标记语言，主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式；让网页更加丰富多彩，布局更加灵活自如

总结：01.HTML主要做结构，显示元素内容
	 02.CSS美化HTML，布局网页
     03.CSS最大的价值是由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离

3、CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明
即：选择器 {样式}/给谁改样式 {改什么样式}

总结：01.选择器是用于制定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
     02.属性和属性值以“键值对”的形式出现
     03.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
     04.属性和属性值之间用英文“:”分开

二、CSS基础选择器

1、CSS选择器的作用

根据不同需求把不同的标签选出来

2、选择器分类

（1）基础选择器（由单个选择器组成）

01.标签选择器：指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

标签名{
			属性1：属性值1；
			属性2：属性值2；					
			属性3：属性值3；
			...
		}

02.类选择器：如果想要差异化选择不同的标签，单独选一个或者几个标签

.类名（自己起的类名）{
			属性1：属性值1；
			...
		}

结构需要用class属性来调用class类的意思，即`<div class='red（即自己起的类名）'>变红色</div>`

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

例子：利用类画三个颜色的盒子：


001.类选择器特殊使用-多类名：可以给一个标签指定多个类名，从而达到更多的选择目的；这个类名都可以选出这个标签

<div class="red font20">亚瑟</div>

总结：0001.在标签class属性中写多个类名
     0002.多个类名中间必须用空格分开

03.id选择器：可以为标有特定id的HTML元素指定特定的样式

#id名 {
				属性1：属性值1；
				...
			}

例如：将id为nav元素中的内容设置为红色
			#nav {
				color:red；
			}

id选择器口诀:样式#定义， 结构id调用，只能调用一次，别人切勿使用

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

04.通配符选择器：在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）

* {
				属性1：属性值1；
				...
			}

基础选择器总结：

（2）复合选择器

三、CSS字体属性

1、字体系列

CSS使用font-family属性定义文本的字体系列

p {font-family：“微软雅黑”}

div {font-family：Arial,“Microsoft YaHei”,"微软雅黑"；}

总结：01.各种字体之间必须使用英文状态下的逗号隔开
     02.一般情况下，如果有空格隔开的多个单词组成的字体，加引号  

2、字体大小

CSS使用font-size属性定义字体大小

p {
	      font-size：20px;
	}

总结：01.px（像素）大小是我们网页的常用的单位
     02.不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
     03.可以给body指定整个页面文字的大小

3、字体粗细

CSS使用font-weight属性设置文本字体的粗细

p {
	      font-weight：bold;
	}

4、文字样式

CSS使用font-style属性设置文本的风格

p {
	      font-style：normal;
	}

5、字体复合属性

把以上文字样式综合来写，更节约代码

body {
	      font：font-style font-weight font-size/line-height font-family;
	}

总结：01.使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
02.不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

6、字体属性总结

四、CSS文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

1、文本颜色

color属性用于定义文本的颜色

div {
	      color：red;
	}

开发中最常用的是十六进制

2、对齐文本

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

div {
	      text-align：center;
	}

3、装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

div {
	      text-decoration：underline;
	}

重点记住如何添加与删除下划线

4、文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

div {
	      text-indent：10px;
	}

div {
	      text-indent：2em;
	}（em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小）

5、行间距

line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离

p {
	      line-height：26px;
	}

6、文本属性总结