1.简介

css：样式表，美化html，为html添加样式

2.入门程序

在项目路径下，创建文件夹css
在css文件夹下创建style.css文件

p {
    font-size: 30px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <style>
            p {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h3>登高</h3>
        <p style="color: blue;">风急天高猿啸哀，</p>
        <p>渚清沙白鸟飞回。</p>
        <p>无边落木萧萧下，</p>
        <p>不尽长江滚滚来。</p>
    </body>
</html>

3.css定义样式

定义在标签的style属性中（内联样式）
- 定义的样式只作用在本标签上
```
style="css属性名:属性值;css属性名:属性值;..."
```
定义在本html中style标签内（内部方式）

定义在css文件中，引入该文件（外部方式）

css选择器 {
  css属性名:属性值;
  css属性名:属性值;
  ...
}

3.1优先级

三种定义css的样式，定义同一个标签相同的css属性，就有优先级
内联样式>内部方式>外部方式
ID选择器>类选择器>标签选择器
如果三种方法定义的是不同css属性的样式，那么三种形式都会起作用

4.css选择器

4.1基本选择器

```html <!DOCTYPE html>

  <meta charset="utf-8">
  <title></title>
  <style>
  /* 
  选择器
      1. 基本类型
          1.1 标签选择器
              p : 选择整个html中所有的p标签们
                  定义的样式就会作用在这些标签上
              标签名 {
                  css属性：值;
              }
          1.2 类选择器（class选择器）
              .class属性值 {
                  css属性：值;
              }
              选择所有class属性值等于指定值的标签们
          1.3 id选择器
              #id属性值 {
                  css属性：值;
              }
              选择所有id属性值等于指定值的标签们
   */
      p {
          color: red;
      }
      div {
          color: blue;
      }
      span {
          color: yellow;
      }
      .pc {
          font-size: 20px;
      }
      #hi {
          color: #FFFF00;
      }
  </style>

  <p>大江东去<span>浪</span>淘尽</p>
  <div>天生我才必有用</div>
  <p class="pc">千古风流人物</p>
  <div class="pc">千金散去不复来</div>

    <h2 id="hi">将进酒</h2>
    <h3 id="hi">滚滚长江东市区</h3>
</body>

<a name="GGU1a"></a>
### 4.1.1标签选择器
语法：
```html
标签名 {
    css属性：值;
}

选择整个html中该标签名的标签

4.1.2类选择器

.class属性值 {
    css属性：值;
}

选择所有class属性值等于指定值的标签们

4.1.3id选择器

#id属性值 {
    css属性：值;
}

选择所有id属性值等于指定值的标签们

4.2组合选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
            <style>
                /* 
                组合选择器
                    1. 且
                        选择器1选择器2...选择器n {
                            css属性：值;
                        }
                        选择符合所有选择器条件的标签
                            div.dc{
                            }
                            选择class属性等于dc的div标签
                    2. 或
                        选择器1,选择器2,...,选择器n {
                            css属性：值;
                        }
                        选择符合任一选择器条件的标签
                        div,.dc{
                        }
                        选择class属性等于dc标签或者div标签
                    3. 后代选择器
                        选择器1 选择器2 选择器3 ... {
                        }
                        在前面选择器中选择后面的选择器
                        div p {
                        }
                        在div中p标签
                    4. 子选择器
                        选择器1>选择器2 {
                        }
                        父标签是选择器1的选择器2选择的标签
                        div>p {
                        }
                        父标签是div的p标签
                 */
                p,div{
                    font-size: 30px;
                }
                p.cc{
                    color: yellow;
                }
                div.cc{
                    color: blueviolet;
                }
                div p{
                    color: pink;
                }
                div>span{
                    color: blue;
                }
                div>p>span{
                    color: red;
                }
            </style>
        </head>
        <body>
        <!-- 所有的字体大小设置30像素 -->
                <!--
                    第一句颜色设置为黄色
                 -->
                <p class="cc">风急天高猿啸哀，</p>
                <p>渚清沙白鸟飞回。</p>
                <p>无边落木萧萧下，</p>
                <p>不尽长江滚滚来。</p>
                <hr >
                <!-- 
                    第一句颜色设置为紫色
                 -->
                <div class="cc">风急天高猿啸哀，</div>
                <div>渚清沙白鸟飞回。</div>
                <div>无边落木萧萧下，</div>
                <div>不尽长江滚滚来。</div>
                <hr >
                <!-- 
                    颜色设置粉色（最开头的诗不为粉色）
                 -->
                <div>
                    <p>风急天高猿啸哀，</p>
                    <p>渚清沙白鸟飞回。</p>
                    <p>无边落木萧萧下，</p>
                    <p>不尽长江滚滚来。</p>
                </div>
                <hr >
                <!-- 
                    第一个span颜色设置蓝色
                    第二个span颜色设置蓝色
                 -->
                <div>
                    <span>不尽长江滚滚来。</span>
                    <p>
                        <span>不尽长江滚滚来</span>
                    </p>
                </div>
    </body>
</html>

4.2.1且

选择器1选择器2...选择器n {
    css属性：值;
}

选择符合所有选择器条件的标签

4.2.2或

选择器1,选择器2,...,选择器n {
    css属性：值;
}

选择符合任一选择器条件的标签

4.2.3后代

选择器1 选择器2 选择器3 ... {
    css属性：值;                    
}

在前面选择器中选择后面的选择器

4.2.3子代

选择器1>选择器2 {
    css属性：值;                        
}

父标签是选择器1的选择器2选择的标签

4.3属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 
                属性选择器
                [属性名]{
                    css属性：值;
                }
                选择拥有该属性的标签
             */
            [mystyleheheda] {
                font-size: 20px;
            }
            [mystyleheheda='cc2'] {
                color: red;
            }
            [kkk]{
                color: #0000FF;
            }
        </style>
    </head>
    <body>
        <p mystyleheheda="cc1">风急天高猿啸哀，</p>
        <p>渚清沙白鸟飞回。</p>
        <p mystyleheheda="cc2">无边落木萧萧下，</p>
        <p kkk>不尽长江滚滚来。</p>
    </body>
</html>

5.css属性

学习过程中，参照菜鸟教程网址：https://www.runoob.com/

5.1字体属性

font ： font-style font-variant font-weight font-size/line-height font-family
font-style : 规定文本的字体样式
font-variant :设置小型大写字母的字体显示文本
font-weight :字体粗细
font-size/line-height :字体大小
font-family ：字体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p {
                font-style: normal;            /* 字体样式 normal(默认)*/
                font-variant:small-caps;     /* 属性设置小型大写字母的字体显示文本  normal(默认)*/
                font-weight: 400;            /* 字体粗细  normal(默认)*/
                font-size: 20px;            /* 字体大小 */
                font-family: 楷体,宋体;        /* 字体 */
            }
            /* 
                font : font-style font-variant font-weight font-size/line-height font-family
                        font-size,font-family是必须的，其他都可以默认
            */
            div {
                font: 20px 楷体;  
            }
            .dc {
                font: italic small-caps 900 40px 微软雅黑,楷体;
            }
        </style>
    </head>
    <body>
        <p>天生我才必有用</p>
        <p>AAAbbb</p>
        <div>天生你才必有用</div>
        <!-- 
            斜体
            小型大写字母转化
            加粗（最粗）
            40px
            微软雅黑
         -->
        <div class="dc">千金散去还复来  Oyy</div>
    </body>
</html>

5.2文本属性

color : 颜色

text-align ：文本位置

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title></title>
      <style>
          /* 
              color : 文本颜色
              text-align ： 文本位置  left  center right
           */
          table {
              color: blue;
              text-align: center;
          }
      </style>
  </head>
  <body>
      <table border="1px" width="300px">
          <tr>
              <td>姓名</td>
              <td>年龄</td>
              <td>性别</td>
          </tr>
          <tr>
              <td>马小云</td>
              <td>18</td>
              <td>男</td>
          </tr>
      </table>
  </body>
</html>

5.3背景属性

background-color 背景颜色

background-image 背景图片 ```html <!DOCTYPE html>

  <meta charset="utf-8">
  <title></title>
  <style>
  /* 
      背景属性
          background-color ： 背景颜色
          background-image ： 背景图片
   */
      p.p1 {
          background-color: #0000FF;
      }
      p.p2 {
          background-image: url(img/bg.png);
      }
  </style>

  <p class="p1">东临碣石以观沧海</p>

    <p class="p2">水何澹澹山岛竦峙</p>
</body>

<a name="O2FGU"></a>
## 5.4尺寸属性
![image.png](https://cdn.nlark.com/yuque/0/2022/png/27062448/1657023466890-b4a92b47-25c5-4212-aeef-cefa77d8bb6e.png#clientId=u8e456c46-84ec-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=433&id=ue139d959&margin=%5Bobject%20Object%5D&name=image.png&originHeight=541&originWidth=1259&originalType=binary&ratio=1&rotation=0&showTitle=false&size=168303&status=done&style=none&taskId=u96715404-a713-422e-ac97-ce99b01c1f9&title=&width=1007.2)
- width        宽
- height          高
- display         展示形式
```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        /* 
            width : 宽度
            height：高度
            display: none;  隐藏
         */
            p.p1 {
                background-color: #FFC0CB;
                width: 300px;
                height: 100px;
            }
            p.p2 {
                display: none;
            }
        </style>
    </head>
    <body>
        <p class="p1">水何澹澹山岛竦峙</p>
        <p class="p2">呵呵哒</p>
        <input type="text" />
    </body>
</html>

5.5浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div.dc1 {
                background-color: #0000FF;
                width: 100px;
                height: 100px;
            }
            div.dc2 {
                background-color: red;
                width: 100px;
                height: 100px;
            }
            div.dc3 {
                background-color: yellow;
                width: 100px;
                height: 100px;
            }
            div {
                float: right;
            }
        </style>
    </head>
    <body>
        <div class="dc1">d1</div>
        <div class="dc2">d2</div>
        <div class="dc3">d3</div>        
    </body>
</html>

5.6盒模型

5.6.1边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 
            边框：border        同时设置四个方向的边框
                宽度，类型，颜色    
         -->
        <style type="text/css">
            div {
                width : 200px;
                height: 200px;
                border: 10px solid red;
            }
        </style>
    </head>
    <body>
        <!-- 边框 -->
        <div>
        </div>
    </body>
</html>

5.6.2内边距

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 
            内边距：边框和标签内内容的距离
                padding:10px                    上下左右
                padding:5px 20px;                上下   左右
                padding:5px 20px 5px;           上  左右  下
                padding:50px 20px 5px 15px;        上右下左
         -->
        <style type="text/css">
            div {
                width : 200px;
                height: 200px;
                border: 1px solid red;
                padding:5px 20px 5px;
                padding:50px 20px 5px 15px;
                </applet>;
            }
        </style>
    </head>
    <body>
        <div>
            你自横刀向天笑
        </div>
    </body>
</html>

5.6.3外边距

居中方式：margin: 0 auto;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 
            外边距：margin
            margin:10px                    上下左右
            margin:5px 20px;                上下   左右
            margin:5px 20px 5px;           上  左右  下
            margin:50px 20px 5px 15px;        上右下左
         -->
        <style>
            div.dc1 {
                width:300px;
                height:200px;
                border: 1px solid red;
                /* padding:10px; */
            }
            div.dc2 {
                width:100px;
                height:50px;
                border: 1px solid blue;
                margin:10px 10px 10px 10px;
            }
        </style>
    </head>
    <body>
        <div class="dc1">
            <div class="dc2"></div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 
            居中
            margin: 0 auto;
         -->
        <style>
            div.dc1 {
                width:300px;
                height:200px;
                border: 1px solid red;
                margin: 10px auto;
            }
            div.dc2 {
                width:100px;
                height:50px;
                border: 1px solid blue;
                margin: 10px auto;
            }
        </style>
    </head>
    <body>
        <div class="dc1">
            <div class="dc2"></div>
        </div>
    </body>
</html>

5.7表格属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        /* 
            表格属性
                border-collapse ： 是否合并边框
                    collapse：合并
         */
            table {
                border-collapse:collapse;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <table border="1px" width="300px" align="center">
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
            <tr>
                <td>jackma</td>
                <td>男</td>
                <td>57</td>
            </tr>
            <tr>
                <td>pony</td>
                <td>男</td>
                <td>50</td>
            </tr>
        </table>
    </body>
</html>

第二阶段

第二章，css