TOP 
Web
書き方 |
〆 スタイルシートの書き方を紹介します
１．セレクタにスタイルを設定します
セレクタ名｛ プロパティ：値； プロパティ：値； ･･･｝
@sample.ccs
p{
color: #990033;
background-color: #ffcc00;
}
@sample.html
<html>
<head>
<title> ～ </title>
<link rel="stylesheet"
href="sample.css" type="text/css">
</head>
<body>
<p> Happy </p>
</body>
</html>
|
|
CCS Sample ２．複数のセレクタに同じスタイルを設定します。カンマで区切ります。
セレクタ名，セレクタ名｛ プロパティ：値； ｝
@sample.css
/* pとh4に設定するスタイル */
p, h4{
color: #666600;
background-color: #ccff00;
}
@sample.html<body> <p> ポレポレ<p> <h4>レアレア <h4> </body> |
|
CCS Sample ３．条件付きセレクタにスタイルを設定します。スペースで区切ります。
セレクタ名 セレクタ名｛ プロパティ：値； ｝
@sample.css
/* h4かつiのセレクタに設定するスタイル */
h4 i{
color: #990033;
background-color: #ff9999;
}
@sample.html
<body>
<h4> 言語の正しい
<i> 使い方 </i>
</h4>
</body>
|
|
CCS Sample ４．クラスを用いてスタイルを設定します。
.クラス名｛ プロパティ：値； ｝ または、
要素.クラス名｛ プロパティ：値； ｝
これを使うとイチバンきれいです
@sample.css
.test1{ color: #000099; background-color: #ccffff; } .test2{ color: #666633; background-color: #ccff99; } span.test3{ color: #ff0033; background-color: #ffcc66; }@sample.html
<body>
<i class="test1"> エールフランス </i>
<i class="test2"> アリタリア </i>
<span class="test3">
イベリアスペイン
</span>
</body>
|
|
CCS Sample ５．IDを用いてスタイルを設定します。
#id名｛ プロパティ：値； ｝ または、
要素.#id名｛ プロパティ：値； ｝
※一つのHTMLファイル内で同じクラス名は複数箇所に指定可能ですが、
ID名は一ヶ所にしか指定できないので利用する際には注意が必要です。
※このidとfloatを私は使いこなせる！と自身を持っていえるなら あなたは、CSSが理解できています。idなんて使わなくてもclassがあるから 大丈夫！なんて思っているあなたは、まだまだ勉強不足です。
@sample.css
#myid01{ color: #000099; background-color: #ccffff; } #myid02{ color: #666633; background-color: #ccff99; } span#myid03{ color: #ff0033; background-color: #ffcc66; } span#myid04{ color: #ff5555; background-color: #ffff80; }@sample.html
<body>
<i id="myid01"> 森伊蔵 </i>
<i id="myid02"> 村尾 </i>
<span id="myid03"> 伊佐美 </span>
<span id="myid04"> 魔王 </span>
</body>
|
|
The link to this site is free. /
Last Updated : 28.May.2012