199 lines
6.4 KiB
Markdown
199 lines
6.4 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选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**
|
||
|
||
|
||
|
||
### css 常用属性
|
||
|
||
width:数值 px （单位） 设置宽度
|
||
|
||
height:数值 px（单位） 设置高度
|
||
|
||
background: 英文颜色或者16进制颜色码（如\#ff0000）或者rgb颜色码（如rgb(255,0,0)）或者图片( url('文件路径') ) 设置背景颜色
|
||
|
||
color:英文颜色或者16进制颜色码（如\#ff0000）或者rgb颜色码（如rgb(255,0,0)） 设置字体颜色
|
||
|
||
border: 1px solid red 1px 是边框宽度 solid 是线条类型为直线 red 为边框颜色
|
||
|
||
border-radius：29px 边框圆角
|
||
|
||
font-size：13px 字体大小
|
||
|
||
font-weight:normal(正常默认) 或者 bold(加粗)
|
||
|
||
line-height:20px 设置行高
|
||
|
||
text-align:left( 左对齐) center (居中) right(右对齐) 文字对齐方式
|
||
|
||
overflow :auto（滚动条）/ hidden (隐藏) 横向和纵向内容溢出的表现
|
||
|
||
overflow-x:auto（滚动条）/ hidden (隐藏) 横向内容溢出的表现
|
||
|
||
overflow-y:auto（滚动条）/ hidden (隐藏) 纵向内容溢出的表现
|
||
|
||
verticle-align 设置元素的垂直对齐方式
|
||
属性值：
|
||
* baseline 默认值，元素放置在父元素的基线上
|
||
* text-top 元素顶端和父元素字体顶端对齐
|
||
* text-bottom 元素顶端和父元素字体底部对齐
|
||
* middle 元素位于父元素的中部
|
||
...
|
||
|
||
|
||
|