HTML-CSS长度-颜色设置-选择器-盒子模型-基本属性（font）

CSS长度-颜色设置-选择器-盒子模型-基本属性（font）

1 CSS 基本语法

1.1 CSS 和 HTML 的关系

CSS 样式作用在 HTML 元素上。

1.2 HTML 中使用 CSS 的三种方式

① 行内式

<p style="样式..."></p>

② 内嵌式（内联式）

<style>
    CSS 样式设置...
</style>

③ 外链式

CSS 写在单独的 CSS 文件中，HTML 中使用 link 标签关联该 CSS 文件

<link rel="stylesheet" href="css文件的地址">

1.3 CSS 的基本语法结构

① 内嵌式和外链式

选择器 {
    CSS属性：值;
    CSS属性：值;
    CSS属性：值;
}

② 行内式

<标签 style="CSS属性:值;CSS属性:值；"></标签>

1.4 CSS 注释

/* CSS 注释 */

/*
	CSS 注释
	CSS 注释
*/

1.5 CSS 中的长度单位

① 像素 px

css 中最常用的长度单位。

② 百分比 %

设置元素的宽高使用百分比作为长度单位，参照父元素的宽高；

设置元素的字体大小使用百分比作为长度单位，参数元素默认的字体大小。

③ 字体大小的倍数 em

是本元素字体大小的多少倍。

1.6 CSS 中的颜色设置方式

① 使用颜色名

red:红色
orange: 橙色
yellow: 黄色
green: 绿色
cyan:  青色
blue: 蓝色
purple: 紫色

② rgb 方式

使用红、绿、蓝三原色来设置颜色。每种颜色的取值范围是 0 ~ 255 或者 0% ~ 100%

/* 使用 0 ~ 255 之间的数字*/
background-color: rgb(234, 198, 65);

/* 使用百分比 */
background-color: rgb(45%, 88%, 94%);

注意： 如果三原色的数值是一样的，生成的颜色是灰色，数值越大颜色越浅，如果数值大到 255 或者 100%，就成了白了。

③ 十六进制方式

十六进制方式设置颜色，原理与 rgb 方式相同，只有数值换成了十六进制；

十进制的 255 相当于 十六进制的 ff。

语法规则： # 后面写 6 个十六数字， 两个数字表示一个颜色。 如果表示一个颜色的两个十六进制数是相同的，可以简写。

/* 红：ab, 绿：cd, 蓝:ef*/
#abcdef;		

#ff9900;
#f90; /*简写*/

#cccccc;
#ccc; /*简写*/

#aaf866; /*不可以简写，每一组的数都要一直*/

#f00;	/*红色*/
#0f0;   /*绿色*/
#00f;	/*蓝色*/
#ff0;   /*黄色*/
#121212； /*某种灰色*/
#000;   /*黑色*/
#fff;   /*白色*/

2 CSS 基本选择器

2.1 四种基本选择器

① 标签名选择器

标签名 {
    
}

② 类名选择器

.类名 {
    
}

注意：

1. 多个元素可以具有相同的类名。
2. 一个元素可以有多个类名。

③ ID 名选择器

#ID名 {
    
}

注意： 元素的 ID 名必须是唯一的！

④ 全局选择器

* {
    
}

注意： 全局选择器可以选择到 HTML 文件中所有的元素。

2.2 基本选择器之间的优先级

ID 选择器 > 类名选择器 > 标签名选择器 > 全局选择器

注意事项：

1. 行内式的优先级比任何选择器都大。
2. 如果选择器的优先级相同，后面的样式覆盖前面的样式。

3 盒子模型

3.1 盒子模型显示模式

① 块级（block）元素

1. 能够独占一行的元素，称之为块级元素（block）。
2. 块级元素可以设置宽度和高度。

② 行内（inline）元素

1. 不能够独占一行的元素，称之为行内元素（inline）。
2. 行内元素无法设置宽度和高度。

③ 行内块（inline-block）元素

1. 具备行内元素和块级元素两者的特性，无能独占一行但是可以设置宽高，这样的元素称之为行内块元素（inline-block）
2. 行内块元素本质上还是行内元素。

3.2 HTML 元素的默认显示模式

① 行内元素

文本标签、超链接、label、span

em、strong、sub、sup、del、ins、a、label、span

② 块级元素

格式排版标签、列表标签、表格标签（除了单元格）、form

h1~h6、p、hr、br、pre、div、ul、li、ol、dl、dt、dd、table、caption、thead、tbody、tfoot、tr、form、option

③ 行内块元素

图片标签、表单控件、框架标签

img、td、th、input、textarea、button、select、iframe

3.3 修改元素的显示模式

通过设置 CSS 属性 display 可以修改元素的显示模式，display 属性的值如下：

inline			转为行内元素
block			转为块级元素
inline-block	转为行内块元素
none			元素隐藏不可见

4 常用 CSS 属性

4.1 字体属性

属性名	作用	属性值
font-family	设置字体族科	字体名称
font-size	设置字体大小	长度
font-weigth	设置字体粗细	nomal: 正常(默认) lighter: 细 bold: 粗 100 ~ 900 之间整百的数字： 100~300显示细体 ，400、500显示正常，600以及以上显示粗体。
font-style	设置字体风格（斜体）	normal: 正常（默认） italic: 斜体（推荐，利用字体本身的斜体） oblique: 斜体（强制变斜）
font	同时设置所有的字体样式	以上四个值的组合

① 字体族科 font-family

font-family: "宋体";
font-family: "翩翩体-简"; 
font-family: "Microsoft YaHei","黑体",sans-serif;

可以设置一个或多个字体族科，如果客户电脑上没有前面的字体，可以使用后面指定的字体，多个字体族科使用逗号隔开。

字体分为两大类：

衬线字体： serif 横竖笔画粗细不一， 如：宋体、楷体等

非衬线字体：sans-serif 横竖笔画粗细相当，如：微软雅黑、黑体、思源黑体、兰亭黑等

② font 复合属性

/*至少设置 字体大小和字体族科两个样式 英文逗号隔开*/
font: 30px '宋体';
font: 30px '宋体','楷体',serif;

/* 字体加粗 字体大小 字体族科*/
font: 700 30px '宋体','楷体',serif;

/*斜体，字体大小，字体族科*/
font: italic 30px '宋体','楷体',serif;

/* 粗体、斜体、字体大小、字体族科 */
font: 700 italic 30px '宋体','楷体',serif;

注意：

1. 使用 font 属性必须设置字体大小和字体族科
2. 字体粗细和斜体写在字体大小的前面，两者之间顺序无要求，可以两个都设置也可以只设置一个。

4.2 文字颜色

属性名	作用	属性值
color	设置文字的颜色	颜色值

4.3 文本属性

属性名	作用	属性值
letter-spacing	设置字母间距	长度
word-spacing	设置单词间距	长度
text-decoration	文本修饰	none: 默认值，无修饰 underline: 下划线 line-throuth: 删除线 overline: 上划线
text-indent	设置首行缩进的距离	长度
text-align	设置文本的水平对齐方式	left: 左对齐，默认值 right: 右对齐 center: 居中对齐
vertical-align	设置行内或行内块与同行文本的对齐方式	baseline: 基线对齐,默认 bottom: 底线对齐 top: 顶线对齐 middle: 中线对齐 设置长度：距离基线的距离（可以是负值）
line-height	设置行高	长度

vertical-align 的应用场景：

1. 设置行内或者行内块元素与同行文本的对齐方式。
2. 设置单元格中文字的垂直对齐方式，用于 td 或者 th 元素。

关于行高 line-height：

1. 一行文字的中线与下一行文字中间之间的距离，称之为行高。

2. 注意行高不是行距，但是设置行高会影响行距。

3. 如果元素中只有一行文字，设置行高与元素高度一致，该行文字可以在元素中垂直居中。

4. line-height 属性可以复合到 font 属性中，写到字体大小的后面，使用/ 隔开。

   /* 设置字体样式  行高可以复合到font属性中*/
   font: 700 16px/60px '微软雅黑';