TOP 
Web
３つの使い方 |
〆 スタイルシートには、３つの使い方があります
１．Inline Style Sheet（インライン・スタイルシート）
HTMLのタグにstyle属性を追加します
@sample.html
<html>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
|
<head> <title> CSS はじめ </title> </head> <body> <div style="color:green;"> Green </div> <div style="color:red;"> Red </div> </body> </html> |
|
CCS Sample２．Embedded Style Sheet（エンベッド・スタイルシート）
ヘッダーの中に書いてページ全体にスタイルを設定します
スタイルシートに対応していないブラウザのためにコメントアウトして使います。
@sample.html
<html> <head> <title> エスパニョ～ル </title> <style type="text/css"> <!-- h4{ color:blue; } h5{ color:orange; } --> </style> </head> <body> <h4> Blue </h4> <h5> Orange </h5> </body> </html> |
|
CCS Sample ３．External Style Sheet（エクスターナル・スタイルシート）
ヘッダーの中にCSSファイルを指定して、CSSを読み込ませます
１, ２と違い
データとデザインを分割管理できるので、これを使いましょう。
本ページでは、これをメインに説明します。
@sample.ccs
h4{ color:red }
h5{
color:blue;
}
@sample.html
<html> <head> <title> イタリア～ノ </title> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <h4> 青 </h4> <h5> 赤 </h5> </body> </html> |
|
CCS Sample ３-１．External Style Sheetの入れ子
ヘッダーの中にCSSファイルを指定して、CSSを読み込ませ、
そのファイルからまた別のCSSファイルを呼び出します。
@main.ccs
@import "base.css"; @import "head-area.css"; @import "foot-area.css";@base.css h4{
color:midnightblue;
}
h5{
color:deeppink;
}
@sample.html
<html> <head> <title> ポルトゥゲス(ポルトガル語) </title> <link rel="stylesheet" href="main.css" type="text/css"> </head> <body> <h4> おはようございます </h4> <h5> ありがとう </h5> </body> </html> |
|
The link to this site is free. /
Last Updated : 28.May.2012