CSS - div

2683 ワード

text-align名前にはtextが含まれていますが、すべてのinline elementに作用します.たとえばdivに

があり、設定すると

div {
text-align
: center;
}

中の

も真ん中です.
もう1つ、text-alignはblock elementでしか使用できません.inline element()に直接使用すると、何の効果もありません.
Descendant Selectors
次のフォーマットを使用すると、h 2がdirect childであるかgrandchildであるかにかかわらず、divの下のすべてのh 2にスタイルが適用されます.h 2が

にネストされている場合は、このスタイルが適用されます.
div h2 { }

direct childのみを選択する場合は、
div > h2 { }

line-heightプロパティ:
emまたは%を使用すると、line-heightは最も基本的なfontサイズを見つけ、次のように計算します.
body {
font-size
: 12px;
}

div
{
line-height
: 1em;
}

divの各要素のline-heightはいずれも12 pxである.
divの各要素のline-heightが各要素のフォントサイズを基準にしている場合は、次のような数字を直接使用します.
div {
line-height
: 1;
}

paddingまたはmarginを簡単に定義します.
元の方法:
padding-top: 0px;
padding-right: 20px;
padding-left: 30px;
padding-bottom: 10px;

簡単な方法:
padding: 0px 20px 30px 10px;

左右が同じ場合(前面top&bottom、背面left&right):
padding: 20px 40px

すべてが同じなら
padding: 20px;

 
borderは、元のものと同じように簡単に書くことができます.
border-width: thin;
border-style: solid;
border-color: #007e7e;

簡潔で、borderはソートする必要はありません.好きなように書くことができます.
border: thin solid #007e7e;

backgroundと同様に簡単に書くことができます(background-color,background-image,background-repeat)
background: white url(images/cocktail.gif) repeat-x;

font:font:font-style font-variant font-weight font-size/line-height font-family
続きます...