学习前端的第三天，今天第一天学习CSS

1、CSS

基础：

CSS和HTML一样都是一种标记语言，中文名字叫层叠样式表

CSS主要是美化网页，布局网页。能够设置文本的字体、大小、对齐方式；图片的宽高、边框、边距；版面的布局。

CSS 专注做样式，HTML 专注做结构 。

语法规范：

CSS是由选择器（该谁的样式）和样式声明（改成什么样式）两个部分组成。

CSS通常写在HTML中上方的位置。写在style标签中

CSS的语法格式：

选择器 {

属性：值；

}

使用 {} 包含一个或多个样式声明；

每条样式声明以键值对形式出现：属性：值；。

属性和值之间使用 : 分隔；

属性之间使用 ; 分隔，最后一行的分号可以省略。

代码风格：

CSS书写时可分为紧凑格式和展开格式，更推荐展开格式，因为更直观，更易于阅读和维护。

书写时大小写字母都可以，但更推荐用小写字母。

选择器和开始花括号之间保留一个空格，: 后面保留一个空格。

2、选择器

CSS选择器的作用是选择标签—根据不同的需求，把对应的选择标签选择出来。

CSS选择器分两大类：基础选择器和复合选择器。

基础选择器由单个选择器组成；如标签、类、id、通配符。

复合选择器由多个选择器组成；（还没学）

标签选择器：就是使用HTML标签名称作为选择器。

使用的结过：把某一类标签选择出来，统一修改样式；

优点：快速、统一设置同类型标签的样式；

缺点：没有差异化。

类选择器

如果想要差异化选择不同的标签，单独一个或某几个标签

使用类选择器。

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点”.”(英文的)显示

注意：

1 类选择器可以使用”.”（英文）进行标识，后面紧跟类名（自定义，我们自己命名的）

2 可以理解为给这个标签起了一个名字，来表示

3 长名称或词组可以使用中横线来为选择器命名

4 不要使用纯数字、中文等命名，尽量使用用英文字母来表示

5 命名一定有意义，尽量是使别人一眼就知道这个类名的目的

多类名使用方式

1 在标签class属性中写多个类名

2 多个类名中间必须用空格分开

3 标签就可以分别具有这些类名的样式

多类名的应用场景

把元素相同的样式放在同一个公共类中，个性的样式放在单独的类中，既可以节省 CSS 代码，又方便统一修改。

id选择器

id选择器的前缀是“#”，专门定义 HTML 中某个特定元素的样式，因为 id是唯一的。

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

1、类选择器（class）好比人的名字一个人可以有多个名字，同一个名字也可以被多个人使用

2、id选择器好比人的身份证号码，全国使唯一的，不能重复

3 、id选择器和类选择器最大的不同在于使用次数上，di只能被调用一次，class可以被调用多次

类选择器和id选择器最大的区别在于类选择器可以调用多次，id选择器只能调用一次

通配符选择器

通配符使用“*”定义，选取页面中所有元素，是不需要调用的。

基础选择器	作用	特点	使用频率
标签选择器	选出相同标签	不能差异化选择	较多
类选择器(.)	按需选择标签	根据需求选择选择	非常多
id选择器(#)	选中唯一标签	针对唯一选择	通常与javaScript联用
统配符选择器(*)	选中所有标签	选择的太多，有部分不需要	特殊情况使用

字体属性可以定义字体系列（如微软雅黑）、字体大小、字体粗细、文字样式（如斜体）等。

字体系列：font-family。

字体要尽量使用系统默认自带字体，可以保证在任何用户的浏览中都能正确显示。

字号大小：font—size。

字号大小的单位是px像素，必须要写；不同浏览器的默认显示的文字大小不一致开发时要尽量给一个明确的值。

字体粗细：font-weight.

字体的粗细可以同数字来设置；数字的取值范围是100~900（按100递增）；normal和bold也可以设置字体；normal是正常粗细，与400等值，bold是加粗与700等值；字体粗细数字取值后面没有单位。

字体样式：font—style。

italic是倾斜，不常用；normal是正常，用于把em、i默认的斜体改成不斜体显示。

fnot复合属性写法。

复合属性的编写顺序是font: font-style font-weight font-size/line-height font-family ；不能随意调整顺序；可以少些，但至少保留font-size和font-family属性，否则设置无效。

4、文本属性

文本属性可以定义如颜色、对齐方式、装饰文本、文本缩进、行间距等。

文本颜色：color

文本颜色有三种定义方式：

①预定义的颜色名：red、green、blue；

②十六进制：#ffffff，可以缩写为#fff但是三组都必须是两两相同的，如#ff0012就不可以缩写成#f012；这种是在开发中最常用的；

③RGB代码：rgb（255.0.0）或rgba（255.0.0.0.5）。

文本对齐：text-align

文本对齐可以设置水平方项上的对其方式，三种对齐方式分别是：left左对齐（默认）、right右对齐、center居中对齐；

文本对齐的本质是让盒子内部的文本按照盒子边界对齐 ，是不可以给不是独占一行的元素设置文本对齐。

文本装饰：text-decoration

text-decoration有四个属性值分别是：none默认，没有装饰线，最常用 ，underline下划线，常用，line-throu删除线，不常用，overline上划线，几乎不用；a标签默认的下划线可以用text-decoration：none取消。

文本缩进：text-indent

text-indent的作用是设置文本段落的首行缩进 ，仅对独占一行的元素生效。单位有两个一个是px，一个是em；em是当前元素1个文字的大小。

行间距：line-height

link-height控制文本行与行之间的距离，也可以在盒子中垂直居中；行间距有上间距、文本高度和下间距组成；测量可以从一段文字的下边线测量到相邻一行的下边线 。

5、CSS的三种引入方式

①行内样式表

写在元素的 style 属性中；

适合于简单、快速、临时修改样式；

在 style 属性中，使用键值对设置样式，不需要 {}；

写在哪个元素就控制哪个元素，对其他元素没有效果。

②内部样式表

理论上可以放在 HTML 的任何位置；

推荐放在 head 标签中，要忘记还有一个 style 标签。

③外部样式表

最常用的的引入方式，实现了HTML和CSS的分离（结构与表现的分离）。需要用link标签引入到HTML中。