style de pliage CSS (2) - définir la feuille de style-tutoriel CSS-php.cn

style de pliage CSS (2) - définir la feuille de style

黄舟

Libérer： 2016-12-28 16:01:00

original

1551 Les gens l'ont consulté

style de pliage CSS (2) - définir la feuille de style

La première feuille de style peut être implémentée de deux manières : (1) feuille de style intégrée (2) feuille de style importée
Je la mettrai sous forme de code ci-dessous. :
(1) Feuille de style intégrée
demo.html

<!doctype html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>CSS样式使用</title>  
    <style type="text/css">  
  
        div{background:red;font-size:20px} <!--HTML标记定义 -->  
        .div1{background-color:green;font-size:20px;}  <!--class定义样式 -->  
        #divid{background-color:blue;font-size:20px;}  <!--id定义样式 -->    
  
        <!---组合选择器不能与其他选择器共存-->  
        p,h1,h2,.p1,#pid {color:red;font-size:20px;} <!--组合定义样式 -->  
      
        a:link { color:red; }         
        a:hover { color:green; }  
        a:active { color:yellow; }  
        a:visited { color:blue; }  
          
    </style>  
</head>  
      
<body>  
    <div class="div1" id="divid">css定义样式</div>  
      
    <h1>这是定义样式1</h1>  
    <h2>这是定义样式2</h2>  
    <p>这是定义样式3</p>  
    <p class="p1">这是定义样式4</p>  
    <p id="pid">这是定义样式5</p>  
      
      
    <a href="http://www.baidu.com/1" target="_blank">百度1</a>  
    <a href="http://www.baidu.com/2" target="_blank">百度2</a>  
    <a href="http://www.baidu.com/3" target="_blank">百度3</a>  
    <a href="http://www.baidu.com/4" target="_blank">百度4</a>  
    <a href="http://www.baidu.com/5" target="_blank">百度5</a>  
</body>  
  
</html>

Copier après la connexion

(2) Feuille de style introduite
demo.html

<!doctype html>  
<html>  
<head>  
    <title>Css样式使用</title>  
    <meta charset="utf-8">  
    <link rel="stylesheet" type="text/css" href="style.css">  
</head>  
<body>  
    <h1>css样式使用</h1>  
    <a href="http://www.baidu.com/1" target="_blank">百度1</a>  
    <a href="http://www.baidu.com/2" target="_blank">百度2</a>  
    <a href="http://www.baidu.com/3" target="_blank">百度3</a>  
    <a href="http://www.baidu.com/4" target="_blank">百度4</a>  
    <a href="http://www.baidu.com/5" target="_blank">百度5</a>  
    <br>  
    <h1>这是定义样式1</h1>  
    <h2>这是定义样式2</h2>  
    <p>这是定义样式3</p>  
    <p class="p1">这是定义样式4</p>  
    <p id="pid">这是定义样式5</p>  
    <div>css的html定义样式</div>  
    <div class="div1">css的class定义样式</div>  
    <div id="divid">css的id定义样式</div>  
    <div class="div1" id="divid">css定义样式的优先级：id > class >HTML 样式</div>  
</body>  
  
</html>

Copier après la connexion

style.css

body{  
    background-color:yellow;  
    color:#fff    
}  
  
p,h1,h2,.p1,#pid {color:red;font-size:20px;}  /* 组合样式定义*/  
  
a:link { color:red; }   /* 显示红色*/  
a:hover { color:green; } /* 鼠标移动至该处变绿色*/  
a:active { color:yellow; } /* 鼠标点击该处时变黄色*/  
a:visited { color:blue; } /* 鼠标点击该处后变蓝色*/  
  
div{background:red;font-size:20px}  /* HTML样式定义   */  
.div1{background-color:green;font-size:20px;}  /* class样式定义   */  
#divid{background-color:blue;font-size:20px;}  /* id样式定义   */

Copier après la connexion

Ce qui précède est le style de pliage CSS (2) définissant le contenu de la feuille de style. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com). !