Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS样式层叠和优先级
Blogger Information
Blog 8
fans 0
comment 0
visits 7592
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样式层叠和优先级
杨向贤
Original
1243 people have browsed it

CSS样式层叠

Css是用来干嘛的？

  • 美化静态HTML页面
  • 实现表现和内容分离
  • 便于页面风格的统一和修改（样式重用，提高开发效率）

HTML中使用CSS的方法

  1. 行内样式：混合在HTML标签里面，对每个元素单独定义样式

    <a href="#" style="background-color: blue">行内样式</a>

  2. 页面的内部样式：在<head>与</head>之间添加样式（重用性差，容易冗余）

    1. <head>
    2.  <meta charset="UTF-8" />
    3.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    4.  <!-- 引入外部资源 -->
    5.  <link rel="stylesheet" href="style.css" />
    6.  <title>实例</title>
    7.  <style>
    8.      .nav{
    9.          background-color: yellow;
    10.      }
    11. </style>
  3. 链接外部样式资源：使用Link标签，只需要把公共的CSS单独保存为一个文件，其他页面就可以分别调用自身的CSS文件，如果要改变网站风格，修改公共的CSS文件就可以了，是开发常用的HTML+CSS使用方式
    1. <head>
    2.  <meta charset="UTF-8" />
    3.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    4.  <!-- 引入外部资源 -->
    5.  <link rel="stylesheet" href="style.css" /><!--link方式-->
    6.  <title>实例</title>
    7.  <style>
    8.      @import url("style.css");/**import方式**/
    9.  </style>
    10. </head>

  4. 导入外部样式：import方式导入CSS样式表，和链接外部样式资源类似

    四种样式也有优先级，按照就近原则：行内样式 > 页面内部样式 > 链接外部样式资源 > 导入外部样式

样式引入实例

  1.   <head>
  2.     <meta charset="UTF-8" />
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  4.     <title>样式引人</title>
  6.     <!-- link方式加载样式 -->
  7.     <link rel="stylesheet" href="sytle1.css" />
  9.     <style>
  10.       /* 导入外部样式 */
  11.       /* @import url("sytle.css"); */
  13.       /* 页面内部样式 */
  14.       .title {
  15.         color: teal;
  16.         background-color: wheat;
  17.         text-align: center;
  18.         margin: auto;
  19.         width: 20em;
  20.         height: 5em;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <head class="nav">
  26.       <h1 class="title">标题</h1>
  28.       <table class="girad">
  29.         <tr>
  30.           <!-- 行内样式 -->
  31.           <td style="background-color: blue">1</td>
  32.           <td>2</td>
  33.           <td>3</td>
  34.           <td>4</td>
  35.         </tr>
  36.       </table>
  37.     </head>
  38.   </body>

CSS优先级和继承

CSS的冲突，就是优先级

CSS优先级规则

  1. CSS层叠样式表引入方法的优先级：内联式>内嵌式>链接式>导入式
  2. 在多个外部样式中，后出现的样式的优先级高于先出现的样式，也就是覆盖
  3. 选择器的优先级：ID样式>class样式>标记样式
  4. !important,这个样式的优先级就会默认提升到顶级，就像root权限一样

离代码越近，优先级越高

实例

  1.  <body>
  2.     <table class="gridtable" cellpadding="15" cellspacing="2">
  4.       <!-- 同时有ID和class ,id权重高 -->
  5.       <tr class="row1" id="test">
  6.         <td rowspan="2"><a href="#">酒店</a></td>
  7.         <td><a href="#">海外酒店</a></td>
  8.         <td><a href="#">团购</a></td>
  9.       </tr>
  10.       <tr class="row1">
  11.         <td><a href="#">特价酒店</a></td>
  12.         <td><a href="#">民宿</a></td>
  13.       </tr>
  14.       <tr class="row2">
  15.         <td rowspan="2"><a href="#">机票</a></td>
  16.         <td><a href="#">火车票</a></td>
  17.         <td><a href="#">汽车票</a></td>
  18.       </tr>
  19.       <tr class="row2">
  20.         <td><a href="#">特价机票</a></td>
  21.         <td><a href="#">专车.出租车</a></td>
  22.       </tr>
  23.       <tr class="row3">
  24.         <td rowspan="2"><a href="#">旅游</a></td>
  25.         <td><a href="#">目的地攻略</a></td>
  26.         <td><a href="#">游轮</a></td>
  27.       </tr>
  28.       <tr class="row3">
  29.         <td><a href="#">周边游</a></td>
  30.         <td><a href="#">定制旅行</a></td>
  31.       </tr>
  32.       <tr class="row4">
  33.         <td><a href="#">景点.玩乐</a></td>
  34.         <td><a href="#">美食</a></td>
  35.         <td><a href="#">购物</a></td>
  36.       </tr>
  37.       <tr class="row4">
  38.         <td><a href="#">礼品卡</a></td>
  39.         <td><a href="#">WIFI电话卡</a></td>
  40.         <td><a href="#">签证</a></td>
  41.       </tr>
  42.     </table>
  43.   </body>
  1. /** CSS 代码片段 **/
  2. #test {
  3.   background-color: #e46766;
  4. }
  5. /* 0,1,0 */
  6. .gridtable {
  7.   width: 608px;
  8.   height: 57px;
  9.   margin: 0 auto;
  10.   text-align: center;
  11. }
  12. /* 0,1,1 */
  13. .gridtable a {
  14.   text-decoration: none;
  15.   color: #1f0c13;
  16. }
  18. .row1 {
  19.   background-color: #267bd9;
  20. }
  21. /* 0,1,1 */
  22. .row1 a {
  23.   color: #ffffff;
  24. }
  26. .row2 {
  27.   background-color: #267bd9;
  28. }
  30. .row3 {
  31.   background-color: #2e9415;
  32. }
  33. .row4 {
  34.   background-color: #e58a1a;
  35. }

Correcting teacher：天蓬老师天蓬老师

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