一.CSS学习(一)
一、CSS简介
1、什么是CSS
- CSS：Cascading Style Sheet 层叠样式表
- 是一组样式设置的规则，用于控制页面的外观样式
2、为什么使用CSS
- 实现内容与样式的分离，便于团队开发
- 样式复用，便于网站的后期维护
- 页面的精确控制，让页面更精美
3、CSS作用
- 页面外观美化
- 布局和定位
二.CSS语法及特性
1.CSS语法规范
- 选择器：要修饰的对象（东西）
- 属性名：修饰对象的哪一个属性（样式）
- 属性值：样式的取值
<head><style>选择器{属性名：属性值;属性名：属性值;}</style>
</head>
2.CSS应用方式
1. 内部样式
也称为内嵌样式，在页面头部通过style标签定义
对当前页面中所有符合样式选择器的标签都起作用
2. 行内样式
也称为嵌入样式，使用HTML标签的style属性定义
只对设置style属性的标签起作用
3. 外部样式
使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入
实例:
link标签引入
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
@import指令 引入
<style>@import "CSS样式文件路径";@import url(CSS样式文件路径);
</style>
3.CSS 选择器
选择器分为基础选择器和复合选择器两个大类(本文先讲基础选择器)
基础选择器是由单个选择器组成的，包括：标签选择器、类选择器、id 选择器和通配符选择器
1. 标签选择器
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。
标签名{属性1: 属性值1; 属性2: 属性值2; ...
}
2. 类选择器
想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器，类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。
在标签class 属性中可以写多个类名，多个类名中间必须用空格分开。
.类名 {属性1: 属性值1; ...
}
3.id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
注意：id 属性只能在每个 HTML 文档中出现一次。
#id名 {属性1: 属性值1; ...
}
4.通配符选择器
在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。
* {属性1: 属性值1; ...
}
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
| 标签选择器 | 可以选出所有相同的标签比如p | 不能差异化选择 | 较多 | p { color: red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color:red; } |
| id选择器 | 一次只能选择1个标签 | ID属性只能在每个 HTML文档中出现一次 | 一般和js搭使用 | #nav {color: red;} |
| 通配符选择甜 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * {color: red;} |
三.CSS 字体属性
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。
| 属性 | 含义 | 说明 |
|---|---|---|
| font-size | 大小、尺寸 | 我们通常用的单位是px 像素，一定要跟上单位 |
| font-weight | 粗细 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-style | 样式 | 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal |
| font | 简写 |
使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开,不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
四.文本属性
CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
五.背景属性
1. background-color
取值：transparent 透明
2. background-image
- 必须使用url()方式指定图片的路径
- 如果是在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件
3. background-repeat
取值：repeat(默认)，repeat-x，repeat-y,no-repeat
4. background-position
默认背景图显示在左上角
取值：
- 关键字：top、bottom、left、right、center
- 坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向
CSS雪碧图，即CSS Sprites,也称为CSS精灵,一种CSS图像合并技术
含 义：将网页中许多非常小的图标/图片整合到一张大图中，当访问面面时只需要下载一次，可以减少访问服务器的次数，提高性能
原理：使用background-position进行背景定位，使用坐标精确地定位出背景图片的位置
5. background-attachment
取值：scroll(默认)、fixed固定不动
6. background
简写属性：background:background-color|background-image|background-repeat|background-position以空格隔开，书写顺序没有要求
六.列表属性
1. list-style-type
取值：none、disc、circle、square、decimal
此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了
2. list-style
简写属性：list-style:list-style-type|list-style-image|list-style-position
书写顺序没有要求
