Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css样式
Blogger Information
Blog 18
fans 0
comment 2
visits 10467
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css样式
go0
Original
407 people have browsed it

CSS样式的作用

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

CSS的三种用法

  1. 行内
    <h1 style="color:green">php.cn</h1>
  2. 页面内
    1.  <style>
    2.      h1{
    3.          color:red;
    4.      }
    5.  </style>
  3. 单独放在一个文件中,注意link标签
    1.    <head>
    2.      <meta charset="UTF-8" />
    3.      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    4.      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5.      <title>Document</title>
    6.      <link rel="stylesheet" href="css/style1.css" />
    7.    </head>

CSS的选择器

  • 就是怎样选择标签元素

    属性选择器

    1.   <h2 title="hello!">item1</h2>
    2.   <style>
    3.       h2[title] {
    4.           color: blue;
    5.         }
    6.   </style>

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

    1. <h2 class="abc">hello css!</h2>
    2. <h2 id="abcd">hello css!</h2>
    3. <style>
    4.   h2.abc {
    5.   color: cyan;
    6.   }
    7.   h2#abcd {
    8.   color: red;
    9.   }
    10. </style>

    群组选择器，用逗号分开

    1. h2.abc, h2#abcd {
    2.       background-color: yellow;
    3.     }

    提权用！important

    1.   <div>
    2.     <p>abc</p>
    3.   </div>
    5.   <p>
    6.     <span>abcd</span>
    7.   </p>
    9.   <style>
    10.     div p {
    11.       color: blue;
    12.     }
    13.     p {
    14.       color: red !important;
    15.     }
    16.   </style>

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

    1.   <ul class="list">
    2.     <li class="item">item1</li>
    3.     <li class="item second">item2</li>
    4.     <li class="item">
    5.       item3
    6.       <ul class="inner">
    7.         <li>item3-1</li>
    8.         <li>item3-2</li>
    9.         <li>item3-3</li>
    10.         <p>123</p>
    11.       </ul>
    12.     </li>
    13.     <li class="item">item4</li>
    14.     <li class="item">item5</li>
    15.     <li class="item">item6</li>
    16.     <li class="item">item7</li>
    17.     <li class="item">item8</li>
    18.   </ul>
    20.       <style>
    21.     /* 后代元素用空格 */
    22.     .list li {
    23.       border: 1px solid red;
    24.     }
    25.     /* 子元素用> */
    26.     .list > li {
    27.       border: 1px solid blue;
    28.     }
    29.     /* 相邻兄弟用加号 下面例子找到的是第3个li标签[item3那个] */
    30.     .item.second + li {
    31.       color: red;
    32.       background-color: blue;
    33.     }
    34.   </style>

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

    1. <ul class="list">
    2.     <li class="item">item1</li>
    3.     <li class="item second">item2</li>
    4.     <li class="item">
    5.       item3
    6.       <ul class="inner">
    7.         <li>item3-1</li>
    8.         <li>item3-2</li>
    9.         <li>item3-3</li>
    10.         <p>123</p>
    11.       </ul>
    12.     </li>
    13.     <li class="item">item4</li>
    14.     <li class="item">item5</li>
    15.     <li class="item">item6</li>
    16.     <li class="item">item7</li>
    17.     <li class="item">item8</li>
    18.     <p>asdf</p>
    19.   </ul>
    21.   <style>
    22.         .item.second ~ p {
    23.       color: red;
    24.       background-color: lightcyan;
    25.     }
    26.   </style>
  • 把p换成li选的就是里标签。

选择器优先级的权重 重点

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

  1.     <h1>Hello</h1>
  2.     <style>
  3.       body h1 {
  4.         color: green;
  5.       }
  6.       h1 {
  7.         color: darkorange;
  8.       }
  9.     </style>


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

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post