欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css样式

程序员文章站 2022-05-08 10:48:31
...

CSS样式的作用

  • html标签只是网页中的内容，但这些标签实现出来的效果往往比较难看，CSS就是美化标签的。就像word中打字后调整字体大小，颜色等。

CSS的三种用法

  1. 行内
    <h1 style="color:green">php.cn</h1>
  2. 页面内
      

    1.  <style>
      2. 

    2.      h1{
      3. 

    3.          color:red;
      4. 

    4.      }
      5. 

    5.  </style>
      6.
  3. 单独放在一个文件中,注意link标签
      

    1.    <head>
      2. 

    2.      <meta charset="UTF-8" />
      3. 

    3.      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      4. 

    4.      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      5. 

    5.      <title>Document</title>
      6. 

    6.      <link rel="stylesheet" href="css/style1.css" />
      7. 

    7.    </head>
      8.

CSS的选择器

  • 就是怎样选择标签元素

    属性选择器

      

    1.   <h2 title="hello!">item1</h2>
      2. 

    2.   <style>
      3. 

    3.       h2[title] {
      4. 

    4.           color: blue;
      5. 

    5.         }
      6. 

    6.   </style>
      7.

    如果是类和id属性，可以分别用.和#简写

      

    1. <h2 class="abc">hello css!</h2>
      2. 

    2. <h2 id="abcd">hello css!</h2>
      3. 

    3. <style>
      4. 

    4.   h2.abc {
      5. 

    5.   color: cyan;
      6. 

    6.   }
      7. 

    7.   h2#abcd {
      8. 

    8.   color: red;
      9. 

    9.   }
      10. 

    10. </style>
      11.

    群组选择器，用逗号分开

      

    1. h2.abc, h2#abcd {
      2. 

    2.       background-color: yellow;
      3. 

    3.     }
      4.

    提权用！important

      

    1.   <div>
      2. 

    2.     <p>abc</p>
      3. 

    3.   </div>
      4. 

      5. 

    5.   <p>
      6. 

    6.     <span>abcd</span>
      7. 

    7.   </p>
      8. 

      9. 

    9.   <style>
      10. 

    10.     div p {
      11. 

    11.       color: blue;
      12. 

    12.     }
      13. 

    13.     p {
      14. 

    14.       color: red !important;
      15. 

    15.     }
      16. 

    16.   </style>
      17.

    后代元素，子元素，兄弟元素

      

    1.   <ul class="list">
      2. 

    2.     <li class="item">item1</li>
      3. 

    3.     <li class="item second">item2</li>
      4. 

    4.     <li class="item">
      5. 

    5.       item3
      6. 

    6.       <ul class="inner">
      7. 

    7.         <li>item3-1</li>
      8. 

    8.         <li>item3-2</li>
      9. 

    9.         <li>item3-3</li>
      10. 

    10.         <p>123</p>
      11. 

    11.       </ul>
      12. 

    12.     </li>
      13. 

    13.     <li class="item">item4</li>
      14. 

    14.     <li class="item">item5</li>
      15. 

    15.     <li class="item">item6</li>
      16. 

    16.     <li class="item">item7</li>
      17. 

    17.     <li class="item">item8</li>
      18. 

    18.   </ul>
      19. 

      20. 

    20.       <style>
      21. 

    21.     /* 后代元素用空格 */
      22. 

    22.     .list li {
      23. 

    23.       border: 1px solid red;
      24. 

    24.     }
      25. 

    25.     /* 子元素用> */
      26. 

    26.     .list > li {
      27. 

    27.       border: 1px solid blue;
      28. 

    28.     }
      29. 

    29.     /* 相邻兄弟用加号 下面例子找到的是第3个li标签[item3那个] */
      30. 

    30.     .item.second + li {
      31. 

    31.       color: red;
      32. 

    32.       background-color: blue;
      33. 

    33.     }
      34. 

    34.   </style>
      35.

    后面的所有元素~,下面的例子中演示：要满足标签是p

      

    1. <ul class="list">
      2. 

    2.     <li class="item">item1</li>
      3. 

    3.     <li class="item second">item2</li>
      4. 

    4.     <li class="item">
      5. 

    5.       item3
      6. 

    6.       <ul class="inner">
      7. 

    7.         <li>item3-1</li>
      8. 

    8.         <li>item3-2</li>
      9. 

    9.         <li>item3-3</li>
      10. 

    10.         <p>123</p>
      11. 

    11.       </ul>
      12. 

    12.     </li>
      13. 

    13.     <li class="item">item4</li>
      14. 

    14.     <li class="item">item5</li>
      15. 

    15.     <li class="item">item6</li>
      16. 

    16.     <li class="item">item7</li>
      17. 

    17.     <li class="item">item8</li>
      18. 

    18.     <p>asdf</p>
      19. 

    19.   </ul>
      20. 

      21. 

    21.   <style>
      22. 

    22.         .item.second ~ p {
      23. 

    23.       color: red;
      24. 

    24.       background-color: lightcyan;
      25. 

    25.     }
      26. 

    26.   </style>
      27.
  • 把p换成li选的就是里标签。
    css样式

选择器优先级的权重 重点

为什么显示的颜色是绿色？因为body h1的权重是（0 0 2），比（0 0 1）大

    

  1.     <h1>Hello</h1>
    2. 

  2.     <style>
    3. 

  3.       body h1 {
    4. 

  4.         color: green;
    5. 

  5.       }
    6. 

  6.       h1 {
    7. 

  7.         color: darkorange;
    8. 

  8.       }
    9. 

  9.     </style>
    10.

css样式
权重的三个数字表示：id数量 class数量 标签数量。组成的值越大越优先。
不推荐用id，因为权重太高。建议用class，class可以任意命名
bootstrap，element ui都是很好的框架，如果想改其中的特征，就通过自定义class 使优先级增高，从而完成想要自定义的功能

上一篇： css中em是相对于父元素还是当前元素的大小？（代码示例）

下一篇： markdown使用方法

推荐阅读