css第三天

****一CSS的简介
CSS 的主要使用场景就是美化网页,布局页面的，CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言.
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。
CSS的语法规范：
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
 属性和属性值以“键值对”的形式出现
 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
 属性和属性值之间用英文“:”分开
 多个“键值对”之间用英文“;”进行区分
所有的样式，都包含在

h3 {
 color: pink;
 font-size: 20px;
}

h3 { color: deeppink;font-size: 20px;}

推荐第一种书写方式，更加专业。

二 CSS基础选择器
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。
选择器分为基础选择器和复合选择器两个大类
 基础选择器是由单个选择器组成的
 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

• 标签选择器:1.标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定
  统一的 CSS 样式.
  2.标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定
  统一的 CSS 样式
• 类选择器：如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

.类名 {
 属性1: 属性值1;
 ...
} 

例如，将所有拥有 red 类的 HTML 元素均为红色。

.red {
 color: red;
}

<div class=‘red’> 变红色 </div>

记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用。

1. 多类名使用方式

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

在标签class 属性中写 多个类名， 多个类名中间必须用空格分开，这个标签就可以分别具有这些类名的样式。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

• id选择器
  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

#id名 {
 属性1: 属性值1;
 ...
} 

例如，将 id 为 nav 元素中的内容设置为红色

#nav {
 color:red;
}

注意：id 属性只能在每个 HTML 文档中出现一次。口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用.

• 通配符选择器
  通配符选择器不需要调用， 自动就给所有的元素使用样式。

* {
 属性1: 属性值1;
 ...
}

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

p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开， 一般情况下,如果有空格隔开的多个单词组成的字体,加引号。尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。

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

p {
 font-size: 20px;
}

px（像素）大小是我们网页的最常用的单位（不要忘记带，提醒自己）

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

p {
 font-weight: bold;
}

normal默认值（不加粗）、bold（加粗）、100~900 400等同于normal，700等同于bold，实际情况，更喜欢用数字。

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

p {
 font-style: normal;
}

normal默认值，会显示标准的字体样式，italic字体倾斜，平时很少给字体变倾斜，反而要斜体标签（em，i）改为不倾斜字体。

• 字体复合属性

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

四 CSS文本属性

• color 属性用于定义文本的颜色。(一般使用十六进制 如#000000)
• text-align 属性用于设置元素内文本内容的水平对齐方式。（左对齐left，右对齐right ，居中对齐center。）
• text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。（none默认值，没有装饰线，underline下划线，overline上划线，line-through删除线）
• text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。（通常是2em，当前文字一个文字的大小）
• line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.（第一行字的底部到第二行字的底部就是这个行高）

五 CSS的三种样式表
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

1. 行内样式表（行内式）
2. 内部样式表（嵌入式）
3. 外部样式表（链接式）

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

<div style="color: red; font-size: 12px;">床前明月光，疑是地上霜</div>

外部样式表 ：实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入
到 HTML 页面中使用.
引入外部样式表分为两步：

1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用 标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

六 Chrome 调试工具
① Ctrl+滚轮 可以放大开发者工具代码大小。
② 左边是 HTML 元素结构，右边是 CSS 样式。
③ 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。
④ Ctrl + 0 复原浏览器大小。
⑤ 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
⑥ 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。