집 > 기사 > 웹 프론트엔드 > CSS 접는 스타일(2) - 스타일 시트 정의

CSS 접는 스타일(2) - 스타일 시트 정의

黄舟원래의: 2016-12-28 16:01:001528검색

첫 번째 스타일 시트는 (1) 내장 스타일 시트 (2) 가져온 스타일 시트
아래 코드 형태로 넣어보겠습니다. :
(1) 내장된 스타일시트
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) 스타일시트 도입
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样式定义   */

위는 CSS 접기 스타일입니다. (2) - 스타일 시트의 내용을 정의하면 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요. !

성명：

이전 기사：CSS 접기 스타일(1) - CSS 스타일을 사용하는 세 가지 방법다음 기사：CSS 접기 스타일(1) - CSS 스타일을 사용하는 세 가지 방법

CSS 접는 스타일(2) - 스타일 시트 정의

관련 기사