157 lines
5.1 KiB
Markdown
157 lines
5.1 KiB
Markdown
|
# css 基础
|
|||
|
|
|
|||
|
|
## 定义
|
|||
|
|
|
|||
|
|
css(层级样式表， Cascading Style Sheets) 是一种样式表语言，用来描述HTML或XML 文档的呈现，他和html一样都不是编程语言，他甚至不是标记语言，他是一门样式表语言 。我们用来给html的元素选择性的添加样式
|
|||
|
|
|
|||
|
|
## 在页面中使用css
|
|||
|
|
|
|||
|
|
方式1（行内样式）：
|
|||
|
|
|
|||
|
|
在html标签中 用style属性 给选中元素写入css样式
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body style="background:blue">
|
|||
|
|
<p>hello world</p>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
效果如下：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
方式2（内部样式表）：
|
|||
|
|
|
|||
|
|
在head 标签中写入 style标签，然后从style标签内写css的内容
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
<style>
|
|||
|
|
body{
|
|||
|
|
background:blue
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<p>hello world</p>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
效果如下：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
方式3 （外部样式表）
|
|||
|
|
|
|||
|
|
从head标签中 通过link 标签引入外部的css文件 从而建立html文件和css文件之间的连接
|
|||
|
|
|
|||
|
|
> <link rel="stylesheet" href="./css/index.css">
|
|||
|
|
>
|
|||
|
|
> link 标签中的rel=“stylesheet”必须加上
|
|||
|
|
>
|
|||
|
|
> href 为url地址
|
|||
|
|
>
|
|||
|
|
> type 链接文件的格式 可省略 省略的部分为：type="text/css"
|
|||
|
|
>
|
|||
|
|
> rel属性规定当前文档与被连接文档之间的关系，但是只有值为stylesheet的时候，能够得到浏览器的支持
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
<link rel="stylesheet" href="./css/index.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<p>hello world</p>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
效果同上：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## css 语法
|
|||
|
|
|
|||
|
|
那让我们解读一下刚才写的css代码
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
body{
|
|||
|
|
background:blue
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
其中 body 叫选择器，可以选中一个或多个需要添加此样式的元素，这个例子中是body 如果要给不同的元素添加样式，只需要更改选择器部分就可以了
|
|||
|
|
|
|||
|
|
{} 内部的内容为规则集，css中除了选择器部分，样式相关的所有内容全部要包括在成对的大括号里（{}）
|
|||
|
|
|
|||
|
|
{} 中的一行为一个声明，声明由 属性:属性值 组成，用来指定添加样式元素的属性 如本例的background:blue
|
|||
|
|
|
|||
|
|
声明中冒号左边的部分为属性，冒号右边的部分为属性值
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
重要的语法归纳：
|
|||
|
|
|
|||
|
|
- 除了选择器的部分都应该包含在成对的大括号里，即{} 里面
|
|||
|
|
- 每个声明中要用 : 将属性名和属性值分割开
|
|||
|
|
- 每个规则集中，要用 ; 把各个声明分割开
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## css选择器
|
|||
|
|
|
|||
|
|
基本选择器：
|
|||
|
|
|
|||
|
|
| 选择器名称 | 选中的内容 | 示例 |
|
|||
|
|
| ----------------------- | -------------------------- | ------------------------------------------------------------ |
|
|||
|
|
| 标签选择器 | 页面上所有该标签的html元素 | p 选中页面上所有的p标签 |
|
|||
|
|
| id选择器 | 具有特定id的html元素 | #name 选中页面上所有<p id="name ">或<span id=“name"> ...这种id为name 的元素 |
|
|||
|
|
| 类选择器 | 具有特定类的元素 | .box 选中页面上所有<p class="box">或<span class=“box">... 这种class 为box的元素 |
|
|||
|
|
| 属性选择器 | 具有特定属性的元素 | a[title] 选中页面上所有存在title属性的<a>元素 并且可以通过a[title='xxx']来匹配特定的属性值 |
|
|||
|
|
| 通配符 | 所有元素 | * |
|
|||
|
|
| 多个元素 | 不同选择器用 , 连接 | div,span 同时匹配到页面中所有的div和span元素 |
|
|||
|
|
| 选择后代元素 | 用空格连接 A B | div span 匹配所有div中的所有span元素 |
|
|||
|
|
| 伪类 ：hover | a:hover | 匹配所有鼠标移入状态下的a标签 |
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## css 优先级
|
|||
|
|
|
|||
|
|
优先级是分配给指定css声明的一个权重，只有多个样式规则赋给同一个元素而且定义的属性有冲突的时候，优先级才有意义
|
|||
|
|
|
|||
|
|
1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
|
|||
|
|
2. 作为style属性写在元素内的样式
|
|||
|
|
3. id选择器
|
|||
|
|
4. 类选择器
|
|||
|
|
5. 标签选择器
|
|||
|
|
6. 通配符选择器
|
|||
|
|
7. 浏览器自定义或继承
|
|||
|
|
|
|||
|
|
**总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**
|