ノートを書き殴った感満載です
selectorで指定する部分は、htmlのタブ
htmlは木構造となっており、これをDOMという
cssはブロック毎にセレクタを指定して色やフォントを
決める事が出来る
ただし、htmlの構造や仕組みそのものは変更出来ない
例：
body {
background-color: black;
}
ul olで、箇条書きにする
classは複数作成できるが、idは複製できない
ブラウザ、OS、プラットフォームによって、HTMLのスタイルは幾許か違う
ので、cssなんかでスタイルを変更する事が出来る
また、reset.cssなんかで、スタイルをリセットし、
ブラウザやOSなどによるスタイルの違いをある程度解消する事が出来る
(ブラウザ依存のみ。ユーザー依存は解消されない)
text-align: テキストの開始場所の指定
list-style: 箇条書きの書き方の指定
border: border部分に線をつけるかどうか(e.g. solidで実線)
外周から、margin border padding
.homuで、クラス属性のエレメントを呼び出す
#homuで、id属性のエレメントを呼び出す
div#homu {
display: block;
}
block 見出しと本文
inline aタグなんかの部分(block要素の中にだけ存在できる)
block要素の中にblock要素は作れるが、inline要素の中にblock要素は作れない
display:
block inline incline-box none(非表示：HTML上から消しとぶ、Googleからすらも検索出来ない)
visibility: hidden visible(可視不可視：目には見えないが存在する。
Googleから検索も可能で、伏せ字なんかに有効)スタイルも崩れない
(反転したら文字が見えるわけではない)
e.g.
div#homu u1 {
display: block;
background-color: #fff;
}
HTMLを見て、要素を確認する。
CSS3の新仕様
e.g. クラスの3番目の要素にアクセスしてスタイルを書き替え
div.layout:nth-child(3) u1 {
}
e.g. クラスの最後の要素にアクセス
div.layout:last-child u1 {
}
CSSを書くときにHTMLを弄る必要はないが、
絶対HTMLを弄ってはいけないという事はない。
グラデーションも可(gradient)
margin: 0, auto;
左右のマージンをautoにすると、センタリングされる
border-radius: で角っこが丸くなる
box-shadow:で、ボーダーに影がつく((insetつきか)影の大きさ、グラデーション、色の順で
プロパティの設定も可能)
色の指定
#ffffffとか、
色の名前
rgb(0, 255, 255)とかで色を指定できる
rgba(0, 0, 0, 0)の4番目で、透明度(alpha値)を表す
(角をまるくしたやつと、ぼかしは、スマホ用ページなんかで有効…か？)
適当なアルファブレンド
background: だけで、alpha値、url(画像の場所)、パディングなど、色々設定
できたりする
text-shadow: も、box-shadowと同じような使い方で設定できます。
float 分割
width 幅の指定(パディングとかとは関係ない)
background-colorだと、グラデーションは入らないが、
background-imageだと、グラデーションが入る
border-top, border-rightとかは、
線の太さ、種類、色を指定できる。
transition: jsっぽくサイズを変更できる(cssのアニメーション機能炸裂)
transition: width time(s) linear; くわしくは css transition でググれ
