HTMLの基礎覚え書き - Style Sheet
あと2回くらいでHTMLの覚え書きは終了したいと思いますが、今回はStyle Sheet(CSS)に関して、またもや、ここを参照してます
Style Sheet
構造化された文書を装飾する方法。CSSはCascading Style Sheetの略
Styleの定義場所
1. 外部file
<link rel="stylesheet" href="default.css" type="text/css" />
*default.cssという名称の外部fileに定義
2. head要素内
<head> <style type="text/css"> p {color: red} h1 {color: blue; font-size: 120%} </style> </head>
3. 個々のタグにstyle属性として
<p style="color: red">これは段落です</p>
*この場合、style属性にはtypeが指定できないのでmeta要素を使用してtypeを前もって指定しておく必要がある
<meta http-equiv="Content-Style-Type" content="text/css" />
styleの局所指定
1. class属性やid属性を要素に指定することにより、styleの適用箇所を限定することができる
<head> <style type="text/css"> p.hot {color: red} .cool {color: blue} </style> <head> <body> <p class="hot">ここは赤</p> <p>ここは普通</p> </body>
hot classはp要素のclassとして限定されるが、cool classは全要素タイプを対象にしている
<li>んで<span class="cool">ここは青</span></li>
2. 同じclass属性を持つ要素は複数存在できるが、id属性は一意である必要がある。つまり、あるidセレクタの属性を持つ要素は一つに限定される
p#hot {color: red}
<p id="hot">ここだけが赤</p>
3. ある要素内に現れる時のみあるstyleを適用したい場合は親要素の後に空白を入れて定義する
<!-- これでli要素内のem要素のみに上記styleが適用される -->
li em {color: red}
