# 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>
```

效果如下：
![image-20201230160237854](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201230160237854.png)





方式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>
```

效果如下：

![image-20201230160237854](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201230160237854.png)



方式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>
```

效果同上：

![image-20201230160447459](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201230160447459.png)



## 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  元素位于父元素的中部
  ...
  
   

