liguofeng29’s blog

個人勉強用ブログだっす。

CSS3.0 - CSSの４つの適用方法サンプル

CSS3.0 
<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC" />
   <title> CSS </title>
   <!-- 1. outer1.css導入 -->
   <link href="outer1.css" rel="stylesheet" type="text/css" />
   
   <!-- 2. outer2.css導入 -->
   <style type="text/css">
        @import "outer2.css";
    </style>
   
   <!-- 3. 内部CSS -->
   <style type="text/css">
        #td3 {
            font-size: 30pt;
        }
    </style>
   
</head>
<body>
<table>
    <tr>
        <td id="td1">linkタグで外部CSS導入</td>
    </tr>
    <tr>
        <td id="td2">sytleタグの@importで外部CSS導入</td>
    </tr>
    <tr>
        <td id="td3">内部CSS</td>
    </tr>
    <tr>
    <!-- 4. 内部CSS -->
        <td id="td4" style="font-size: 40pt;">タグ内CSS</td>
    </tr>
</table>
</body>
</html>

/*outer1.css*/
#td1 {
    font-size: 10pt;
}

/*outer2.css*/
#td2 {
    font-size: 20pt;
}

f:id:liguofeng29:20160126213707p:plain