感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

とりあえずやってみる

スポンサーリンク

HTML&スタイルシート トレーニングブック CSS3増補版がひと通り読み終わったので、もうちょっと発展形の勉強をすべく、以下の本を購入した。

標準Webデザイン講座 CSS & JavaScript

標準Webデザイン講座 CSS & JavaScript

標準Webデザイン講座の勉強を始めた。
この本は、解説もなかなか良いが、サンプルのHTMLを読み込むことが勉強になったりする。
まずは1章の勉強から。
★★
・HTMLからCSSを読み込むにはlink要素を使う。
・link要素は必ずheadの範囲内に配置する。

<head>
<link rel="stylesheet" type="text/css" href="hoge.css">
</head>

の範囲内に配置する。

・CSSファイルの中で日本語を使う場合は文字コードを指定する。

@charset "Shift_JIS";

スタイルをどの部分に適用するか→セレクタ
セレクタに続く{}の中に具体的なスタイルを記述する。

セレクタ{ プロパティ : 値}

・特定の要素にCSSを適用するサンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title> TEST </title>
<link rel="stylesheet" type="text/css" href="test1.css" media="screen,print">
</head>
<body>

<ul>
	<li><p>リスト1</p></li>
	<li><p>リスト2</p></li>
	<li><p>リスト3</p></li>
</ul>

<p class="test">p要素のclass属性がtestのものだけデザイン変更する</p>
<p class="hoge">p要素のclass属性がhogeのものだけデザイン変更する</p>
<p class="fuga">p要素のclass属性がfugaのものだけデザイン変更する</p>

</body>
</html>

CSS

.test { color: #0000ff }
.fuga { background : #ffff00 }

セレクタの例

*  すべての要素
.クラス  指定したclass属性の値を持つ要素
#ID      指定したid属性の値を持つ要素
:link    まだ見ていないリンク
:visited すでに見たリンク
:hover   カーソルが指定した要素の上にある状態
:active  指定した要素がアクティブにされた状態