ＣＳＳの基本
1.CASCADING STYLE SHEET
2.文書の見栄えを表す
3.CSS言語
CSS 150種類くらいある
htmlのheadの中にCSSの参照を書く
タイトルタグの後
<link href=”style.css” rel=”stylesheet”>
これがスタイルシートには必須 これは覚える
ブレース
{}
セレクター プロパティー 値
h1{color:red;}
cssでコメントを打つと便利
メモ書き無視してくれる
/*********** ここから色編集 ***********/
/* タイトルカラー */
h1{color:#ffff00;}
/* ×××× */
×ところにコメントを打つ。
背景色
background-color
bodyをセレクタにして、background-color背景色を設定すると頁全体の色が指定できる。
CSSでは、同じセレクタでは下に書いてあるものが優先される
バランスを崩さず明るくしたい白が一番明るい
緑 ＃００ff００
＃７７ff７７
コーディングは分かりやすくする。
このようにするとわかりやすい
p{
background-color:#efe;
color:#0f0;
}
<div id=”first”>
</div>
div#first{××:××;}
字下げの時にemを良く使う。
emちょうど一文字分なので
letter-spacing:20px;
文字と文字の間の間隔
アラインは見栄えなので必ずCSSに入れる。
見栄えに関してはCSSに入れる
html5ではデザインはhtmlであらわさないので、デザインはすべてcssであらわすように推奨されている。
css
ht,td[]カンマで区切ると同じ指定を両方に出来る
cssは
background-image等
カンマで区切るといくつでも指定できる。
これすごい
p#pan{text-align:right;}
<p style=”text-align:right;”>これは試しなら良いと思う。
上記のように記載するとcssより優先されてしまい、後での編集が難しくなるので、基本的にcssに記載するようにする。
imgはインライン要素なので単独では使わないとHTMLでは使用に書いてある。
単独でインライン要素は使わない
strongは重要な語句の時に使う
ただ見栄えで太くしたいとかであればspanを使う。
リンクの色を変えたい、
リンクの下線を無くしたい場合
cssで
セレクタはaで指定する{}
background-color:”f00;
background-image:url(img/tsukushi.jpg);
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
ht,td[]カンマで区切ると同じ指定を両方に出来る
background-image等
カンマで区切るといくつでも指定できる。
これすごい
bodyにidやクラスなどを設定して子孫セレクタを使うと良い。
overflowhiddenの親要素とULとLiどちらにCSSを設定する。
親要素というのは単純に上にあるものではなくて、包んでいるもの。
div.footerの親要素はwrapper。
luとli等親子関係であるものは、利くが、liとaなど親子関係でないものの場合は利かない。
親要素にかけても子要素にかけても利くが、親子関係でないliとaなどは
利かない。
imgにfloatかけると段々になる。
overLayerに対して
top:50%;縦方向で常に中心に配置する
legt:50%;横方向で常に中心に配置する
floatの場合は横のマージンが相殺されない
スタイルシートの優先順位 直接、ヘッダーの中、外部
インラインブロックインライン要素とブロック要素の良いとこ取り
cssで
display:inline-block;
インラインは幅と高さがなくなっちゃう
cssを記入する場合の注意
下が優先の他に
cssでは階層が深いほうが優先になる
こっちが優先div#container>#container
コメントフィード
トラックバックURL: http://yasu-design.raku-toku.com/wp/wp-trackback.php?p=37