recherche

Maison  >  Article  >  interface Web  >  Introduction détaillée aux poids de style CSS

Introduction détaillée aux poids de style CSS

高洛峰
高洛峰original
2017-03-28 10:34:501539parcourir

Style InLine>Feuille de style interne>Feuille de style externe
Exception : Mais si la feuille de style externe est placée à l'intérieur La feuille de style est citée ci-dessous, alors feuille de style externe > feuille de style interne 1, le poids de la feuille de style en ligne est de 1000 ;
2, le poids du sélecteur d'ID est de 100
3, Class class Le poids du sélecteur est de 10 ; le poids du sélecteur de balise HTML est de 1 ;

Le code spécifique est le suivant : 

<!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>CSS样式权值</title>  
        <style>  
            body{   
                font-size: 20px;   
                font-weight: 900;    
            }   
            h3{   
                color: yellow;   
            }   
            #redP p{   
                /*权值100+1=101*/   
                color: #f00;   
                /*红色*/   
            }   
            #redP p.red em{   
                /*权值100+1+10+1=112*/   
                color: #00f;   
                /*蓝色*/   
            }   
            #redP .red em{   
                /*权值100+10+1=111*/   
                color: #0ff;   
                /*亮蓝色*/   
            }   
      
      
            #redP p span em{   
                /*权值100+1+1+1=103*/   
                color: #ff0;   
                /*黄色*/   
            }   
        </style>  
        <link rel="stylesheet" href="style.css">  
    </head>  
    <body>  
        <h3>例外:外部样式表>内部样式表</h3>  
        <p id="redP">  
            <p class="red">  
                <span>  
                    <em>emred</em>  
                </span>  
            </p>  
            <p>red</p>  
        </p>  
    </body>  
    </html>


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction détaillée à l'utilisation de CSS3 pour améliorer les effets de styleArticle suivant：Introduction détaillée à l'utilisation de CSS3 pour améliorer les effets de style

Articles Liés

Voir plus