[学習ノート CSS+DIV] CSS text_html/css_WEB-ITnose

CSSデザイン徹底学習5.1節 注意事項

line-height注: フォント: サイズ/行の高さのフォントの 3 つの属性の混合。 背景色font-weightフォントスタイルtext-decoration注：適用時複数のエフェクトを同時に使用するには、スペースで区切ります。 ... 例: テキスト- indent:2em; (2 文字インデント)float:left;

                  <p class="sycode">                      <!     DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"     >          <     html      xmlns     ="http://www.w3.org/1999/xhtml"     >          <     head     >           <     title     >     Universal vertical center with CSS     </     title     >           <     style     >     #outer      {     height     :      100px     ;      overflow     :      hidden     ;      position     :      relative     ;     }     #outer[id]      {     display     :      table     ;      position     :      static     ;     }     #middle      {     position     :      absolute     ;      top     :      50%     ;     }           /*      for explorer only     */     #middle[id]      {     display     :      table-cell     ;      vertical-align     :      middle     ;      position     :      static     ;     }     #inner      {     position     :      relative     ;      top     :      -50%     }           /*      for explorer only      */          /*      optional: #inner[id] {position: static;}      */      .withBorder     {      border     :     1px green solid     ;          }          </     style     >          </     head     >          <     body     >          <     div      id     ="outer"      class     ="withBorder"     >           <     div      id     ="middle"     >           <     div      id     ="inner"     >      any text any height any content, everything is vertically centered.      </     div     >           </     div     >          </     div     ></     body     >          </     html     >                  </p>

属性	意味	備考
font-family	Font	複数のタイプを宣言できます同時にカンマで区切られたフォント。例: font-family: Arial、”Times New Roman”;
font-size	テキストサイズ	長さの単位
Relアクティブユニット	(1) px: 1 ピクセルの比率に応じて、1px は 1 ピクセルに相当します。 (2) em: 1em で表される長さは、親要素内の文字 m の標準幅です。 (3) 例: 1ex文字 x 標準の高さを表します。 (4)%
絶対単位	(1) pt: ポイント、印刷されるポイントの数、一般的なモニターでは 1pt は 1/72 インチを基準とします。 (2)in: インチ、インチ; (3) cm: センチメートル、センチメートル; (5) pc: ピカ、1pc=12pt。
Line-height	は、テキストの 2 行のベースライン間の距離を表します (下線の位置がテキストのベースラインです)。
背景色
太字	|太字 通常
テキストの傾き	normal| oblique|italic
テキストエフェクト	none|underline|overline|line-through (blink, IE not support)	垂直配置
表のセル内のオブジェクトを垂直方向に配置する場合にのみ使用できます	text-indent	段落インデント
ヒント:	1. ドロップキャップを設定します .firstLetter{	font-size:3em; line-height:3em;
} 2 .段落の垂直方向の中央揃え	(1) 方法 1: line-height を高さと同じ値に設定する 欠点: 複数行のテキストの場合は、テキストの長さを増やすか、ブラウザ ウィンドウを長くします。が狭くなるため、文字を折り曲げて表示する必要があり、この方法は無効です。	(2) 方法 2: 改善方法: multi-vertical.htm HTML コード