# 1.介绍
## 目录
- [1. 介绍](#1-介绍)
- [2. CSS语法](#2-CSS语法)
- [3. CSS注释](#3-CSS注释)
- [4. CSS中的颜色值](#4-CSS中的颜色值)
- [5. CSS长度单位](#5-CSS长度单位)
- [6. html引入CSS的三种方法](#6-html引入CSS的三种方法)
- [6.1 行内样式（内联样式）](#61-行内样式内联样式)
- [6.2 内嵌样式](#62--内嵌样式)
- [6.3 外部样式](#63-外部样式)
- [7 选择器](#7-选择器)
- [7.1 标签选择器](#71-标签选择器)
- [7.2 类选择器](#72-类选择器)
- [7.3 ID选择器](#73-ID选择器)
- [7.4 通配所有元素](#74-通配所有元素)
- [7.5 分组选择器](#75-分组选择器)
- [7.6 选择器的优先级](#76-选择器的优先级)
- [7.7 派生选择器](#77-派生选择器)
- [7.8选择器的权重](#78选择器的权重)
- [7.9 最⾼权重](#79-最权重)
- [7.10 css三⼤特性](#710-css三特性)
- [7.10.1 层叠性](#7101-层叠性)
- [7.10.2 继承性](#7102-继承性)
- [7.10.3 优先级](#7103-优先级)
#### 1. 介绍
- CSS是Cascading Style Sheets的英文缩写,即层叠样式表
- Html【Hyper Text Markup Language】
- CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
- CSS是用于布局与美化网页的
- CSS能实现内容与样式的分离，方便团队开发
- CSS是由W3C的CSS工作组产生和维护的
- 1996年W3C正式推出了CSS1
- 1998年W3C正式推出了CSS2
- 2007年W3C正式推出了CSS2.1
- 2011年W3C正式推出了CSS3,目前仍在持续完善中
#### 2. CSS语法
CSS 由选择器、属性、属性值组成
> 选择器{
> 样式属性名1：样式属性值1;
> 样式属性名2：样式属性值2;
> .....
> }
选择器通常是指需要改变样式的 HTML 元素
属性是指希望设置的样式属性
属性和值之间用冒分开，多个属性之间加分号隔开
CSS是大小写不敏感的,在CSS语法中推荐使用小写
```html
如：body{color:red；font-size:20px}
<!-- 设置了页面为字体颜色为红色，字体大小为20像素 -->
```
#### 3. CSS注释
CSS里面的注释使用C语言编程中一样的约定方法去指定，注释的内容会被浏览器忽略，可用于为样式表加注释及调试使用。
CSS注释格式如下：
```css
div{
/* 设置宽度为200px */
width:200px;
}
```
#### 4. CSS中的颜色值
1. 十六进制表示方式 #rrggbb
> 如:#ffcc00 十六进制 0-F
1. 简单十六进制表示方式；#rgb
> 如:#fc0
1. rgba表示方式； rgba(x,x,x,a) 其中x是一个0-255的整数值
> 如:rgb(255,204,0,)
1. 百分比实现rgb形式；rgb(x%,x%,x%) 其中x是一个0-100的整数值
> 如rgb(100%,80%,0%)
1. 颜色英文单词表示方式 如:red
#### 5. CSS长度单位
- 相对长度单位：
px 像素（Pixel）
% 百分比
em : Element meter 根据文档字体计算尺寸
rem :Root element meter 根据根文档（ body/html ）字体计算尺寸
ex : 文档字符“x”的高度
ch : 文档数字“0”的的宽度
vh : View height 可视范围高度
vw : View width 可视范围宽度
- 绝对长度单位：
in英寸（Inch）
pt 点（Point）
cm 厘米（Centimeter）
mm 毫米（Millimeter）
换算比例：1in = 2.54cm = 25.4 mm = 72pt
- calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度
calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-“, “ \*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；
calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度
calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-“, “ \*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；
calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小
案例一：使用vh和vw实现div占满整个页面
```html
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100vw;
height: 100vh;
background-color: aqua;
}
</style>
<div class="box"></div>
```
案例二：使用calc实现左侧固定，右侧自适应效果
```html
<style>
*{
margin: 0;
padding: 0;
}
.box{
overflow: hidden;
background-color: antiquewhite;
}
.left{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.right{
width: calc(100% - 200px);
height: 300px;
background-color: green;
float: left;
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
```
#### 6. html引入CSS的三种方法
引入方式
- 行内样式（内联样式）
- 内部样式（内嵌样式）
- 外部样式
#### 6.1 行内样式（内联样式）
```html
<h1 style="color:red">这是⾏内样式的使⽤⽅式</h1>
```
#### 6.2 内嵌样式
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.text{
color:red;
}
</style>
</head>
<body>
<h1 class="text">这是内部样式引⼊⽅式</h1>
</body>
</html>
```
#### 6.3 外部样式
通过 link 标签引⼊
```html
<link rel="stylesheet" href="url"/>
```
其中 href 属性是外部样式表⽂件的URL
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1 class="text">外部样式</h1>
</body>
</html>
```
通过@import引入
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import url('../css/demo.css');
</style>
</head>
<body>
<h1 class="text">外部样式</h1>
</body>
</html>
```
或者 在css文件中引入
```css
@import url('../css/demo.css');
div{
color:red;
}
```
注意：@import必须在css样式的第一行进行引入，否则不生效
7 选择器
css 选择器⽤于选择你想要的元素的样式的模式
要使⽤css对HTML⻚⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器
HTML⻚⾯中的元素就是通过CSS选择器进⾏控制的
7.1 标签选择器
选择器名称为html标签名称
```css
p { text-indent:3em; } /*当中的选择器是p*/
h1{ color:red; } /*当中的选择符h1*/
```
7.2 类选择器
选择器名称以 . 开始，后面再加上对应元素class属性值
```html
<style>
.dark-row{ background-color:#EAEAEA; }
</style>
<p class="dark-row">第一段</p>
```
7.3 ID选择器
选择器名称以#开始，后面再加上对应元素的id属性值
将对应元素的id属性值设为id选择器名称
```html
<style>
#main{ text-indent:3em; } /*ID名称main前加上一个#号*/
</style>
<p id="main">文本缩进3em</p>
```
7.4 通配所有元素
```css
*{font-size:12px;color:#888}
```
7.5 分组选择器
```css
h1, h2, p {
text-align: center;
color: red;
}
```
7.6 选择器的优先级
ID选择器 >类选择器>标签选择器>通配符选择器
7.7 派生选择器
- 后代选择器: 以空格分隔
- 子元素选择器: 以>分隔
- 相邻兄弟选择器:以+分隔
- 普通兄弟选择器:以\~分隔
```html
<style>
/*相邻兄弟选择器
选中和第一个元素相邻的第二个元素*/
p + b {
color: red;
}
/*普通兄弟选择器
匹配和第一个元素后面的所有同级元素；*/
p ~ b {
color: blue;
}
</style>
<ul class="wrapper">
<li>1
<b>这是粗体123</b>
<p>这是一段段落</p>
<span>12344555656</span>
<b>这是粗体</b>
<p>这是一段段落2</p>
</li>
<li>2
<p>这是一段段落</p>
<b>这是粗体</b>
<b>这是粗体2</b>
</li>
<li>3</li>
</ul>
```
7.8选择器的权重
权值等级划分， 一般来说是划分4个等级：
| 类型 | 权重 |
| -------------------------------------------------------------------------------- | ------------------------ |
| 内联样式 | 如: style=" "，权值为1000 |
| ID选择器 | 如：#name，权值为0100 |
| class类选择器，伪类和属性选择器 | 如.name，权值为0010 |
| 标签选择器和伪元素选择器 | 如div p，权值为0001 |
| 通用选择器（ \*）、子选择器（>）、相邻选择器（+）、同胞选择器（\~）、继承通用选择器（ \*）、子选择器（>）、相邻选择器（+）、同胞选择器（\~）、继承 | 如 \*，权值为0000如 \*，权值为0000 |
计算规则
| css选择器表达式 | 特指度计算结果 |
| ------------------------- | ------- |
| p | 1 |
| p.large | 11 |
| p#large | 101 |
| div p#large | 102 |
| div p#large ul.list | 113 |
| div p#large ul.li.list li | 114 |
7.9 最⾼权重
!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。
当 !important 规则被应⽤在⼀个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，⽆论它处在声明列表中的哪个位置。
- css选择规则的权值不同时，权值高的选择器优先
- css选择规则的权值相同时，后定义的选择器规则优先
- css属性后面加 !important 时，无条件绝对优先
总体来说： !important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器
注意：减少选择器的个数：“在css规则中尽可能的使用较少的选择器”。
7.10 css三⼤特性
7.10.1 层叠性
- 所谓层叠性是指多种CSS样式的叠加
- 层叠性是浏览器处理冲突的⼀个能⼒,如果⼀个属性通过两个相同选择器设置到同⼀个元素上，那么这个时候⼀个属性就会将另⼀个属性层叠掉（覆盖）
- 样式不冲突，不会层叠
- 样式冲突；就会层叠； 按照优先级，决定哪个样式⽣效
#### 7.10.2 继承性
- CSS 的继承特性指的是应⽤在⼀个标签上的⼀些 CSS 属性被传到其⼦标签上；就是被⼦标签继承
- 不是所有的样式都会被⼦标签继承， 字体类font- ; ⽂本类 text- ； 颜⾊color ； ⾏⾼line-height 等可以被继承
- a标签⽐较特殊，没有办法通过继承改变a标签的字体颜⾊
#### 7.10.3 优先级
- 权重的优先级，决定哪个样式最终⽣效
- 权重相同： 后者⽣效； 权重不同： 权重⾼者⽣效