黑马Pink CSS笔记第一部分 简介、基础选择器、复合选择器、字体、文本、背景、显示方式、三大特性等

（一）CSS 简介与基础选择器

1. CSS 简介

1.1 HTML 的局限性

HTML 是网友的骨架，只关注内容的语义。例如

表示大标题，

表示段落。

早期的时候，HTML 只能做一些简单的样式，网页非常丑，而且使 HTML 代码臃肿。

1.2 CSS-网页的美容师

CSS 是 层叠样式表（Cascading Style Sheets）的简称。

CSS 也是一种标记语言。

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。·

HTML 呈现结构，CSS 决定样式，结构与样式分离。

1.2 CSS 语法规范

CSS 规则由两个部分组成：选择器和一条或多条声明。

1.3 CSS 代码风格

• 展开式
• 选择器，属性名，属性关键字全部小写
• 空格规范

2. CSS 基础选择器

2.1 选择器的作用

选择器就是根据不同需求把不同标签选择出来。

2.2 选择器分类

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

• 基础选择器由单个选择器组成
• 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器

2.3 标签选择器

直接用 HTML 标签名作为选择器，按标签名称分类，为页面某一类标签指定统一的 CSS 样式。

语法

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

优点
标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。

缺点
不能设置差异化样式，只能选择全部当前标签。

2.4 类选择器

差异化选择不同标签，单独选一个或者某个标签。

语法

使用 class 属性来调用 class 类，样式点定义，结构类调用，一个或多个，开发最常用。

类选择器用 . 号显示。

注意

1. 类选择器用 . 标识，紧跟类名。
2. 小写，使用 - 连接单词。
3. 不要用纯数字、中文。
4. 命名有意义。

2.4.1 类选择器-多类名

类名间用空格分开

2.5 id 选择器

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

HTML 元素以 id 属性来设置 id 选择器，用 # 来定义。

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

样式 # 定义，结构 id 调用，别人切勿使用。

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

1. 类选择器可以被多个元素调用。
2. id 选择器只能允许一个标签调用。
3. 类选择器使用的较多，id 选择器用于唯一特性的标签。

2.6 通配符选择器

语法

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

• 用 * 定义通配符选择器，选取页面中所有标签。
• 不需要调用，自动给所有标签。
• 特殊情况使用

* {
    margin: 0;
    padding: 0;
}

2.7 基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	选中所有相同标签	不能差异化选择	较多	p{color:red;}
类选择器	选出一个或多个标签	可以根据需求选择	较多	.nav {color: red;}
id 选择器	一次只能选出一个标签	一个 id 属性在页面中只能出现一次	一般配合 js 使用	#nav {color: red;}
通配符选择器	选择所有标签元素	选择的太多，有部分不需要	特殊情况使用	* {color: red; }

• 每个选择器都有自己的使用场景，都要掌握。
• 如果是修改样式，类选择器是使用最多的。

3. CSS 字体属性

3.1 字体系列

CSS 使用 font-family 属性定义文本字体系列。
尽量使用默认字体，保证不同浏览器的兼容性。

body {
  font-family: "微软雅黑", Arial, Helvetica, sans-serif;
}

3.2 字体大小

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

body {
  font-size: 16px;
}

• px 大小是我们网页常用单位
• 谷歌浏览器默认是 16px
• 可以给 body 指定整个页面文字大小

3.3 字体粗细

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

p {
  font-weight: 700;
}

实际开发中，更常用数字来表示加粗或变细。400为normal，700 为 bold。

属性值	描述
normal	默认值
bold	定义粗体
100-900	400 等价于 normal，700 等价于 bold，无单位

3.4 文字样式

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

p { font-style: italic; }

属性值	描述
normal	正常显示
italic	斜体

注意：平常很少给字体加斜体，而是给斜体标签（em,i）给位不倾斜字体。

3.5 字体复合属性写法

将各种字体属性写在同一选择器下，节约代码。

规则

严格遵守顺序，且 font-sieze 和 font-family 必须有。

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

3.6 字体属性总结

字体属性	表示	注意
font-size	字号	单位是 px
font-family	字体	按照团队约定来写
font-weight	字体粗细	400=normal，700=bold
font-style	字体样式	italic，normal，常用 normal
font	属性连写	顺序不能变，字体和字号属性必须有

4. CSS 文本属性

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

4.1 文本颜色

color 属性定义文本颜色。

div {
  color: red;
}

属性值

表示颜色	属性值
预定义的颜色值	red,green,pink
十六进制	#FF0000，#FF6600
RGB 代码	rgb(255,0,0)

实际开发中，最常用的是十六进制。

4.2 对齐文本

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

div {
  text-align: center;
}

属性值	解释
left	左对齐（默认）
right	右对齐
center	居中对齐

4.3 装饰文本

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

text-decoration: underline;

属性值	描述
none	默认，无装饰（最常用）
underline	下划线，a 标签自带（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

4.4 文本缩进

text-indent定义段落首行缩进。

p {
  text-indet: 5px;
}

em 是一个相对单位，1em 就是一个字符所占大小。当 text-indent=2em，则恰好缩进两个文字。

4.5 行间距

line-height 设置行间的距离，行间距=文本高度+上间距+下间距

4.6 文本属性总结

属性	表示	注意
color	文本颜色	通常十六进制缩写
text-align	文本对齐
text-indent	文本缩进	记住 text-indent: 2em;
text-decoration	文本装饰	记住下划线和去除下划线
line-height	行高

5. CSS 引用方式

按照 CSS 书写的位置不同，CSS 样式表可以分为三大类：

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

5.1 内部样式表

将 CSS 代码写在 HTML 页面内部，单独放在一个