2020-12-18 17:07:56 +08:00
|
|
|
|
# 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 选择器
|
|
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
| 选择器名称 | 选择的内容 | 示例 |
|
|
|
|
|
|
| ------------------------ | ------------------------------------------------ | ------------------------------------------------------- |
|
|
|
|
|
|
| 标签选择器（元素选择器） | 所有是这个标签的HTML元素 | p 选择整个文件中的所有p 标签 |
|
|
|
|
|
|
| id选择器 | 具有特定id 的html元素 | #my 选择标签内id为‘my’的元素 |
|
|
|
|
|
|
| 类选择器 | 带有class=''特定类的元素 | .nav 选择标签内class="nav"的元素 |
|
|
|
|
|
|
| 属性选择器 | 拥有特定属性的元素 | img[src=‘../a.jpg’] 选择<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 |
|
2020-12-18 17:07:56 +08:00
|
|
|
|
|
|
|
|
|
|
#### css 伪类
|
|
|
|
|
|
|
|
|
|
|
|
| 选择器 | 含义 |
|
|
|
|
|
|
| ------------- | ------------------------- |
|
|
|
|
|
|
| E:first-child | 匹配父元素的第一个子元素 |
|
|
|
|
|
|
| E:hover | 鼠标悬停 |
|
|
|
|
|
|
| E:focus | 获得焦点 |
|
|
|
|
|
|
| E:active | 鼠标按下还没释放的元素 |
|
|
|
|
|
|
| E:before | 在E元素之前插入生成的内容 |
|
|
|
|
|
|
| E:after | 在E元素之后插入生成的内容 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
p :hover{
|
|
|
|
|
|
|
|
|
|
|
|
color:red;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
