Blogger Information
Blog 13
fans 0
comment 0
visits 10414
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS样式来源方式以及优先级冲突的解决方案
微光
Original
579 people have browsed it

CSS 元素样式来源的方式

  • css 元素样式来源主要有三种方式可以选择,下面将用 h1 标签中的文字颜色设置成红色进行举例:

  • 1、 行内样式(内联样式)

    1. <h1 style="color: red;">行内样式</h1>
  • 2、内部样式
    内部样式放在 head 内部,统一管理
    1. <html>
    2. <head>
    3. <title>内部样式</title>
    4. <style type="text/css">
    5. h1{
    6. color: red;
    7. }
    8. </style>
    9. </head>
    10. <body>
    11. <h1>内部样式</h1>
    12. </body>
    13. </html>
  • 3、外部样式
    外部样式同样放在head中,通常使用link标签来引用到html中,href中是外部css文件的地址。
    1. <html>
    2. <head>
    3. <title>外部样式</title>
    4. <link rel="stylesheet" type="text/css" href="">
    5. </head>
    6. <body>
    7. <h1>外部样式</h1>
    8. </body>
    9. </html>

    css样式优先级冲突的解决方案

    在css中,样式的优先级会按照“id数< class数 < 标签数”的规则进行样式渲染
案例 id class 标签 优先级
div span h1 0 0 3 0 0 3
div .class .head 0 2 0 0 2 0
#logo 1 0 0 1 0 0
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