1.简介

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

2.入门程序

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

  1. p {
  2.     font-size: 30px;
  3. }
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <link rel="stylesheet" type="text/css" href="css/style.css"/>
  9.         <style>
  10.             p {
  11.                 color: blue;
  12.             }
  13.         </style>
  15.     </head>
  16.     <body>
  18.         <h3>登高</h3>
  19.         <p style="color: blue;">风急天高猿啸哀，</p>
  20.         <p>渚清沙白鸟飞回。</p>
  21.         <p>无边落木萧萧下，</p>
  22.         <p>不尽长江滚滚来。</p>
  24.     </body>
  25. </html>

3.css定义样式

  • 定义在标签的style属性中（内联样式）

    • 定义的样式只作用在本标签上
      1. style="css属性名:属性值;css属性名:属性值;..."

  • 定义在本html中style标签内（内部方式）

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

    1. css选择器 {
    2.   css属性名:属性值;
    3.   css属性名:属性值;
    4.   ...
    5. }

    3.1优先级

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

    4.css选择器

    4.1基本选择器

    ```html <!DOCTYPE html> 

    1.   <meta charset="utf-8">
    2.   <title></title>
    4.   <style>
    5.   /* 
    6.   选择器
    7.       1. 基本类型
    8.           1.1 标签选择器
    9.               p : 选择整个html中所有的p标签们
    10.                   定义的样式就会作用在这些标签上
    11.               标签名 {
    12.                   css属性：值;
    13.               }
    14.           1.2 类选择器（class选择器）
    15.               .class属性值 {
    16.                   css属性：值;
    17.               }
    18.               选择所有class属性值等于指定值的标签们
    19.           1.3 id选择器
    20.               #id属性值 {
    21.                   css属性：值;
    22.               }
    23.               选择所有id属性值等于指定值的标签们
    24.    */
    26.       p {
    27.           color: red;
    28.       }
    30.       div {
    31.           color: blue;
    32.       }
    34.       span {
    35.           color: yellow;
    36.       }
    38.       .pc {
    39.           font-size: 20px;
    40.       }
    42.       #hi {
    43.           color: #FFFF00;
    44.       }
    46.   </style>

    1.   <p>大江东去<span>浪</span>淘尽</p>
    3.   <div>天生我才必有用</div>
    5.   <p class="pc">千古风流人物</p>
    7.   <div class="pc">千金散去不复来</div>
  1.     <h2 id="hi">将进酒</h2>
  2.     <h3 id="hi">滚滚长江东市区</h3>
  3. </body>

  1. <a name="GGU1a"></a>
  2. ### 4.1.1标签选择器
  3. 语法：
  4. ```html
  5. 标签名 {
  6.     css属性：值;
  7. }

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

4.1.2类选择器

  1. .class属性值 {
  2.     css属性：值;
  3. }

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

4.1.3id选择器

  1. #id属性值 {
  2.     css属性：值;
  3. }

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

4.2组合选择器

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.             <style>
  7.                 /* 
  8.                 组合选择器
  9.                     1. 且
  10.                         选择器1选择器2...选择器n {
  11.                             css属性：值;
  12.                         }
  13.                         选择符合所有选择器条件的标签
  14.                             div.dc{
  16.                             }
  17.                             选择class属性等于dc的div标签
  18.                     2. 或
  19.                         选择器1,选择器2,...,选择器n {
  20.                             css属性：值;
  21.                         }
  22.                         选择符合任一选择器条件的标签
  23.                         div,.dc{
  25.                         }
  26.                         选择class属性等于dc标签或者div标签
  28.                     3. 后代选择器
  29.                         选择器1 选择器2 选择器3 ... {
  31.                         }
  32.                         在前面选择器中选择后面的选择器
  33.                         div p {
  35.                         }
  36.                         在div中p标签
  37.                     4. 子选择器
  38.                         选择器1>选择器2 {
  40.                         }
  41.                         父标签是选择器1的选择器2选择的标签
  42.                         div>p {
  44.                         }
  45.                         父标签是div的p标签
  46.                  */
  47.                 p,div{
  48.                     font-size: 30px;
  49.                 }
  50.                 p.cc{
  51.                     color: yellow;
  52.                 }
  53.                 div.cc{
  54.                     color: blueviolet;
  55.                 }
  56.                 div p{
  57.                     color: pink;
  58.                 }
  59.                 div>span{
  60.                     color: blue;
  61.                 }
  62.                 div>p>span{
  63.                     color: red;
  64.                 }
  65.             </style>
  66.         </head>
  67.         <body>
  68.         <!-- 所有的字体大小设置30像素 -->
  70.                 <!--
  71.                     第一句颜色设置为黄色
  72.                  -->
  73.                 <p class="cc">风急天高猿啸哀，</p>
  74.                 <p>渚清沙白鸟飞回。</p>
  75.                 <p>无边落木萧萧下，</p>
  76.                 <p>不尽长江滚滚来。</p>
  78.                 <hr >
  80.                 <!-- 
  81.                     第一句颜色设置为紫色
  82.                  -->
  83.                 <div class="cc">风急天高猿啸哀，</div>
  84.                 <div>渚清沙白鸟飞回。</div>
  85.                 <div>无边落木萧萧下，</div>
  86.                 <div>不尽长江滚滚来。</div>
  88.                 <hr >
  90.                 <!-- 
  91.                     颜色设置粉色（最开头的诗不为粉色）
  92.                  -->
  93.                 <div>
  94.                     <p>风急天高猿啸哀，</p>
  95.                     <p>渚清沙白鸟飞回。</p>
  96.                     <p>无边落木萧萧下，</p>
  97.                     <p>不尽长江滚滚来。</p>
  98.                 </div>
  100.                 <hr >
  102.                 <!-- 
  103.                     第一个span颜色设置蓝色
  104.                     第二个span颜色设置蓝色
  105.                  -->
  106.                 <div>
  107.                     <span>不尽长江滚滚来。</span>
  108.                     <p>
  109.                         <span>不尽长江滚滚来</span>
  110.                     </p>
  111.                 </div>
  112.     </body>
  113. </html>

4.2.1且

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

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

4.2.2或

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

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

4.2.3后代

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

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

4.2.3子代

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

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

4.3属性选择器

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <style>
  8.             /* 
  9.                 属性选择器
  10.                 [属性名]{
  11.                     css属性：值;
  12.                 }
  13.                 选择拥有该属性的标签
  15.              */
  16.             [mystyleheheda] {
  17.                 font-size: 20px;
  18.             }
  20.             [mystyleheheda='cc2'] {
  21.                 color: red;
  22.             }
  23.             [kkk]{
  24.                 color: #0000FF;
  25.             }
  27.         </style>
  28.     </head>
  29.     <body>
  31.         <p mystyleheheda="cc1">风急天高猿啸哀，</p>
  32.         <p>渚清沙白鸟飞回。</p>
  33.         <p mystyleheheda="cc2">无边落木萧萧下，</p>
  34.         <p kkk>不尽长江滚滚来。</p>
  35.     </body>
  36. </html>

5.css属性

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

5.1字体属性

image.png
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 ： 字体

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <style>
  8.             p {
  9.                 font-style: normal;            /* 字体样式 normal(默认)*/
  10.                 font-variant:small-caps;     /* 属性设置小型大写字母的字体显示文本  normal(默认)*/
  11.                 font-weight: 400;            /* 字体粗细  normal(默认)*/
  12.                 font-size: 20px;            /* 字体大小 */
  13.                 font-family: 楷体,宋体;        /* 字体 */
  15.             }
  16.             /* 
  17.                 font : font-style font-variant font-weight font-size/line-height font-family
  18.                         font-size,font-family是必须的，其他都可以默认
  19.             */
  20.             div {
  21.                 font: 20px 楷体;  
  22.             }
  24.             .dc {
  25.                 font: italic small-caps 900 40px 微软雅黑,楷体;
  26.             }
  28.         </style>
  30.     </head>
  31.     <body>
  33.         <p>天生我才必有用</p>
  34.         <p>AAAbbb</p>
  36.         <div>天生你才必有用</div>
  38.         <!-- 
  39.             斜体
  40.             小型大写字母转化
  41.             加粗（最粗）
  42.             40px
  43.             微软雅黑
  45.          -->
  46.         <div class="dc">千金散去还复来  Oyy</div>
  48.     </body>
  49. </html>

5.2文本属性

image.png

  • color : 颜色

  • text-align ： 文本位置

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8">
    5.       <title></title>
    7.       <style>
    8.           /* 
    9.               color : 文本颜色
    10.               text-align ： 文本位置  left  center right
    11.            */
    13.           table {
    14.               color: blue;
    15.               text-align: center;
    16.           }
    17.       </style>
    18.   </head>
    19.   <body>
    21.       <table border="1px" width="300px">
    22.           <tr>
    23.               <td>姓名</td>
    24.               <td>年龄</td>
    25.               <td>性别</td>
    26.           </tr>
    27.           <tr>
    28.               <td>马小云</td>
    29.               <td>18</td>
    30.               <td>男</td>
    31.           </tr>
    32.       </table>
    34.   </body>
    35. </html>

    5.3背景属性

    image.png

  • background-color 背景颜色

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

    1.   <meta charset="utf-8">
    2.   <title></title>
    3.   <style>
    4.   /* 
    5.       背景属性
    6.           background-color ： 背景颜色
    7.           background-image ： 背景图片
    8.    */
    10.       p.p1 {
    11.           background-color: #0000FF;
    12.       }
    14.       p.p2 {
    15.           background-image: url(img/bg.png);
    16.       }
    17.   </style>

    1.   <p class="p1">东临碣石以观沧海</p>
  1.     <p class="p2">水何澹澹山岛竦峙</p>
  4. </body>

  1. <a name="O2FGU"></a>
  2. ## 5.4尺寸属性
  3. ![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)
  5. - width        宽
  6. - height          高
  7. - display         展示形式
  8. ```html
  9. <!DOCTYPE html>
  10. <html>
  11.     <head>
  12.         <meta charset="utf-8">
  13.         <title></title>
  15.         <style type="text/css">
  16.         /* 
  17.             width : 宽度
  18.             height：高度
  19.             display: none;  隐藏
  20.          */
  22.             p.p1 {
  23.                 background-color: #FFC0CB;
  24.                 width: 300px;
  25.                 height: 100px;
  26.             }
  28.             p.p2 {
  29.                 display: none;
  30.             }
  31.         </style>
  33.     </head>
  34.     <body>
  36.         <p class="p1">水何澹澹山岛竦峙</p>
  38.         <p class="p2">呵呵哒</p>
  40.         <input type="text" />
  42.     </body>
  43. </html>

5.5浮动

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <style>
  8.             div.dc1 {
  9.                 background-color: #0000FF;
  10.                 width: 100px;
  11.                 height: 100px;
  12.             }
  14.             div.dc2 {
  15.                 background-color: red;
  16.                 width: 100px;
  17.                 height: 100px;
  18.             }
  20.             div.dc3 {
  21.                 background-color: yellow;
  22.                 width: 100px;
  23.                 height: 100px;
  24.             }
  26.             div {
  27.                 float: right;
  28.             }
  29.         </style>
  31.     </head>
  32.     <body>
  34.         <div class="dc1">d1</div>
  35.         <div class="dc2">d2</div>
  36.         <div class="dc3">d3</div>        
  37.     </body>
  38. </html>

5.6盒模型

image.png

5.6.1边框

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <!-- 
  8.             边框：border        同时设置四个方向的边框
  9.                 宽度，类型，颜色    
  10.          -->
  11.         <style type="text/css">
  12.             div {
  13.                 width : 200px;
  14.                 height: 200px;
  15.                 border: 10px solid red;
  16.             }
  17.         </style>
  19.     </head>
  20.     <body>
  22.         <!-- 边框 -->
  24.         <div>
  26.         </div>
  28.     </body>
  29. </html>

5.6.2内边距

image.png

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <!-- 
  8.             内边距：边框和标签内内容的距离
  9.                 padding:10px                    上下左右
  10.                 padding:5px 20px;                上下   左右
  11.                 padding:5px 20px 5px;           上  左右  下
  12.                 padding:50px 20px 5px 15px;        上右下左
  13.          -->
  14.         <style type="text/css">
  15.             div {
  16.                 width : 200px;
  17.                 height: 200px;
  18.                 border: 1px solid red;
  20.                 padding:5px 20px 5px;
  21.                 padding:50px 20px 5px 15px;
  23.                 </applet>;
  24.             }
  25.         </style>
  27.     </head>
  28.     <body>
  30.         <div>
  31.             你自横刀向天笑
  32.         </div>
  36.     </body>
  37. </html>

5.6.3外边距

image.png
居中方式：margin: 0 auto;

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <!-- 
  7.             外边距：margin
  8.             margin:10px                    上下左右
  9.             margin:5px 20px;                上下   左右
  10.             margin:5px 20px 5px;           上  左右  下
  11.             margin:50px 20px 5px 15px;        上右下左
  13.          -->
  14.         <style>
  15.             div.dc1 {
  16.                 width:300px;
  17.                 height:200px;
  18.                 border: 1px solid red;
  19.                 /* padding:10px; */
  20.             }
  22.             div.dc2 {
  23.                 width:100px;
  24.                 height:50px;
  25.                 border: 1px solid blue;
  28.                 margin:10px 10px 10px 10px;
  29.             }
  30.         </style>
  32.     </head>
  33.     <body>
  35.         <div class="dc1">
  37.             <div class="dc2"></div>
  39.         </div>
  41.     </body>
  42. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <!-- 
  7.             居中
  8.             margin: 0 auto;
  10.          -->
  11.         <style>
  12.             div.dc1 {
  13.                 width:300px;
  14.                 height:200px;
  15.                 border: 1px solid red;
  16.                 margin: 10px auto;
  17.             }
  19.             div.dc2 {
  20.                 width:100px;
  21.                 height:50px;
  22.                 border: 1px solid blue;
  25.                 margin: 10px auto;
  26.             }
  27.         </style>
  29.     </head>
  30.     <body>
  32.         <div class="dc1">
  34.             <div class="dc2"></div>
  36.         </div>
  39.     </body>
  40. </html>

5.7表格属性

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <style type="text/css">
  8.         /* 
  9.             表格属性
  10.                 border-collapse ： 是否合并边框
  11.                     collapse：合并
  12.          */
  13.             table {
  14.                 border-collapse:collapse;
  15.                 text-align:center;
  16.             }
  17.         </style>
  19.     </head>
  20.     <body>
  22.         <table border="1px" width="300px" align="center">
  23.             <tr>
  24.                 <td>姓名</td>
  25.                 <td>性别</td>
  26.                 <td>年龄</td>
  27.             </tr>
  29.             <tr>
  30.                 <td>jackma</td>
  31.                 <td>男</td>
  32.                 <td>57</td>
  33.             </tr>
  35.             <tr>
  36.                 <td>pony</td>
  37.                 <td>男</td>
  38.                 <td>50</td>
  39.             </tr>
  41.         </table>
  42.     </body>
  43. </html>