02 - CSS

2.1 CSS 技术介绍

CSS 是【层叠样式表单】。适用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2.2 CSS 语法规则

选择器： 浏览器根据 “选择器” 决定受CSS样式影响的 HTML 元素（标签）。
属性： 是你要改变的样式名，并且每一个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明，例如：p{ color: blue}
多个声明： 如果要定义不止一个声明，则需要用分号讲每个声明分开。最然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾加上分号）
例如:

p{
	color: red;
	font-size: 30px;
}

注： 一般每行只描述一个属性
CSS注释：/* 注释内容 */

2.3 CSS 和 HTML 的结合方式

2.3.1 第一种

在标签的 style 属性上设置 “key: value value;” ，修改标签样式。

需求1：分别定义两个 div，span标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。

<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>

问题：这种方式的缺点

1. 如果标签多了，样式多了，代码量非常庞大。
2. 可读性非常差。
3. CSS 代码没什么复用性可言。

2.3.2 第二种

在 head 标签中，使用 style 标签来定义各种自己需要的 CSS 样式。

xxx {
	key: value value;
}

需求1：分别定义两个 div，span标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。

<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>

问题：这种方式的缺点

1. 只能在同一页面中内复用代码，不能在多个页面中复用 CSS 代码。
2. 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

2.3.3 第三种

把 CSS 样式写成一个单独的 CSS 文件，再通过 link 标签引入即可复用。
使用 HTML 的 <link rel="stylesheet" type="text/css" href="..."/>标签导入 CSS 样式文件。

① CSS 文件内容：

div {
	border: 1px solid yellow;
}
span {
	border: 1px solid red;
}

② HTML 文件代码：

2.4 CSS 选择器

2.4.1 标签名选择器

标签名选择器格式：

标签名 {
	属性: 值;
}

标签名选择器，可以决定哪些标签被动的使用这个样式。

<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>

需求1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素，边框为 1 像素黄色实线。
并且修改所有 span 标签的字体为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。

示例代码：

2.4.2 id 选择器

id 选择器的格式：

#id 属性值 {
	属性: 值;
}

id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。

需求1：分别定义 id 为 id001，然后根据 id 属性定义 CSS 样式。修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 CSS 样式。修改字体颜色为红色，字体大小 20 个像素。边框为 5 像素蓝色点线。

<div id="id001">div标签1</div>
<div id="id002">div标签2</div>

示例代码：

2.4.3 class 选择器（类选择器）

class 类选择器的格式：

.class 属性值 {
	属性: 值;
}

class 类选择器，可以 通过 class 属性有效的选择性的去使用这个样式。

需求1：修改 class 属性值为 class01 属性的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
需求2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素，边框为 1 像素红色实线。

<div class="class01">div标签class01</div>
<div class="class02">div标签class02</div>
<span class="class01">span标class01</span>
<span>span标签2</span>

示例代码：

2.4.4 组合选择器

组合选择器的格式：

选择器1, 选择器2, 选择器n {
	属性: 值;
}

组合选择器可以让多个选择器共同使用一个 CSS 样式代码。

<div class="class01">div标签class01</div> <br />
<span id="id01">span 标签</span> <br />
<div>div标签</div> <br />
<div>div标签id01</div> <br />

需求1：修改class= "class01"的 div 标签和 id= “ide1” 所有的 span 标签,字体颜色为蓝色，字体大小 20 个像素。边框为 1 像素黄色实线。

示例代码：

2.5 常用样式

1. 字体颜色
   color: red;
   颜色可以写颜色名如：black, blue, red, green 等
   颜色也可以写 rgb 值和 16 进制表示值：如 rgb(255,2,0)，#00F6DE，如果写 16 进制值必须加 #

2. 宽度
   width: 19px;
   宽度可以写像素值：19px;
   也可以写百分比值：20%;

3. 高度
   高度可以写像素值：19px;
   也可以写百分比值：20%;

4. 背景颜色
   background-color: #0F2D4C

5. 字体样式
   color: #FF0000; 字体颜色红色
   font-size: 20px; 字体大小

6. 红色 1 像素实线边框
   border: 1px solid red;

7. div 居中
   margin-left: auto;
   margin-right: auto;

8. 文本居中
   text-align: center;

9. 超链接去下划线
   text-decoration: none;

10. 表格细线

    table {
    	border: 1px solid balck; /*设置边框*/
    	border-collapse: collapse; /*将边框合并*/
    }
    td, th {
    	border: 1px solid black; /*设置边框*/
    }
    

11. 列表去除修饰

    ul {
    	list-style: none;
    }