Home > Article > Web Front-end > css folding style (2) - define style sheet

css folding style (2) - define style sheet

黄舟Original: 2016-12-28 16:01:001485browse

The first style sheet can be implemented in two ways: (1) embedded style sheet (2) imported style sheet.
I will put it in the form of code below Below:
(1) Embedded style sheet
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>

(2) Introduced style sheet
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>

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样式定义   */

The above is the css folding style (2)-defining the content of the style sheet. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css folding style (1) - three ways to use css styleNext article：css folding style (1) - three ways to use css style

See more

css folding style (2) - define style sheet

Related articles