|
| ■ style要素 |
| この指定は、<head>〜</head>内に記述します。 |
 基本ソース |
<html>
<head>
<meta http-equiv="content-style-type" content="text/css">
<title></title>
<style type="text/css">
<!--
div { color : red ; font-weight : bold ; }
-->
</style>
</head>
<body>
<div>HTML,CSS講座</div>
<div>VALUE NEXT</div>
</body>
</html>
|
| div要素に囲まれたテキスト色がすべて赤色、太字になります。 |
上記のソースでは、
- div を 『 セレクタ 』
- color : red を 『 宣言 』
- color を 『 プロパティ 』
- red を 『 値 』
と言い、これらの構成を、『 ルールセット 』と言います。
|
| プロパティと値は、コロン( : )で区切り、スタイルを複数指定する場合は、セミコロン( ; )で区切ります。 |
| また、宣言( プロパティ : 値 )は、中括弧 { } で囲み、中括弧で囲われた宣言を、宣言ブロックと言います。 |
| style要素には、type属性でMIMEタイプを指定し、CSSに未対応のブラウザの為に、<!-- --> でコメントアウトしておきます。 |
|
 MIMEタイプ…インターネット上のファイル規格。 |
| ■ link要素 |
| スタイルシートの定義部を他のファイルから読み込む事ができ、複数の文書でスタイルシートを共有することができます。 |
| ソース |
| <link rel="stylesheet" type="text/css" href="style2.css"> |
| link要素の rel="stylesheet" は、外部スタイルシートを参照する事を示し、type属性に、CSSファイルの MIME タイプを記述し、href属性で、外部スタイルシートファイルへのリンク先を指定します。 |
| 上記ソースの記述場所は、head要素内の、文字コードをセットしている meta要素より下に記述します。title要素の上か下に記述するのが一般的なようです。 |
| ■ 外部スタイルシートの作成 |
| セレクタ { プロパティ ; 値 ; } だけを記述し、拡張子をcssで保存します。 |
 |
|
|
|
|
|
|
|
スタイルシート( CSS ) 概要と適用方法
表 示