# css(层叠样式表)

### css 介绍	

层叠样式表（**C**ascading **S**tyle **S**heet，简称：CSS）是为网页添加样式的代码。

css 和html 类似，不是真正的编程语言，甚至不是标记语言，它是一门样式表语言，也就是说我们可以用它来选择性的为HTML元素添加样式

### css 使用

	##### 	在html 中使用css

- 行内样式

  在元素标签中写入<style> 属性，将样式写在属性中  

  格式为： style=" 属性1 : 值； 属性2 : 值；属性3 : 值；"多个属性用分号“ ; ”隔开。

- 内联样式
  在<head>标签中加入<style>标签将CSS样式表写到该标签中。值后跟分号。

  格式：

  ```
  .class{ 
  	属性1 : 值；
  	属性2ytu : 值；
  	属性3 : 值 ；
  }
  ```

- 外联样式

  在<head>标签中用<link>标签引入

  ```
    <link rel="stylesheet" type="text/css"  href="./css/layout.css" >
    <!--href中写css样式表存放的路径-->
  ```



####  css 语法

​	示例：

```
p{
	color:red
}
```

> p 是选择器，可以选择一个或多个html 元素
>
> color:red 整体是声明 。  一个单独的规则，用来指定添加样式元素的属性
>
> color 是属性（改 变HTML元素样式的途径），在等号左边 示例中的color 是p 元素的属性
>
> red 是属性值  在冒号右边 

规则：

> - 每个规则集，除了选择器部分，都应该包含在成对的大括号（{}）里
> - 每个声明里要用冒号（:）将属性和属性值分隔开
> - 每个规则集里 要用分号（;）将各个声明分隔开

修改多个属性：

```
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}
```



### css 选择器

| 选择器名称               | 选择的内容                                       | 示例                                         |
| ------------------------ | ------------------------------------------------ | -------------------------------------------- |
| 标签选择器（元素选择器） | 所有是这个标签的HTML元素                         | p   选择整个文件中的所有p 标签               |
| id选择器                 | 具有特定id 的html元素                            | #my  选择标签内id为‘my’的元素                |
| 类选择器                 | 带有class=''特定类的元素                         | .nav   选择标签内class="nav"的元素           |
| 属性选择器               | 拥有特定属性的元素                               | img[src] 选择<img src="xxx"/> 而不是 <img /> |
| 伪类选择器               | 特殊状态下的特殊元素                             | a:hover  鼠标悬停在链接上时的样式            |
| 通用选择器               | 所有元素                                         | *                                            |
| E,F                      | 同时匹配所有的E和F元素，E，F之间用逗号分隔       | div , p                                      |
| E F                      | 匹配所有属于E元素后代的F元素，E和F之间用空格分隔 | div p                                        |
| E>F                      | 匹配所有E元素的子元素F                           | div > p                                      |
| E+F                      | 匹配所有紧跟E元素之后的同级元素F                 | div+p                                        |

####  css 伪类

| 选择器        | 含义                      |
| ------------- | ------------------------- |
| E:first-child | 匹配父元素的第一个子元素  |
| E:hover       | 鼠标悬停                  |
| E:focus       | 获得焦点                  |
| E:active      | 鼠标按下还没释放的元素    |
| E:before      | 在E元素之前插入生成的内容 |
| E:after       | 在E元素之后插入生成的内容 |



