[学習ノート CSS+DIV] CSS text_html/css_WEB-ITnose
リリース: 2016-06-24 12:32:35
CSSデザイン徹底学習5.1節 注意事項
属性 | 意味 | 備考 |
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 Line-height | は、テキストの 2 行のベースライン間の距離を表します (下線の位置がテキストのベースラインです)。 | | 注: フォント: サイズ/行の高さのフォントの 3 つの属性の混合。
| 背景色
背景色 | | | font-weight
太字 | |太字 通常 | | フォントスタイル
テキストの傾き | normal| oblique|italic | | text-decoration
テキストエフェクト | none|underline|overline|line-through (blink, IE not support) | 注:適用時複数のエフェクトを同時に使用するには、スペースで区切ります。 ... 垂直配置 |
表のセル内のオブジェクトを垂直方向に配置する場合にのみ使用できます | text-indent | 段落インデント |
例: テキスト- indent:2em; (2 文字インデント) ヒント: | 1. ドロップキャップを設定します .firstLetter{ | font-size:3em; line-height:3em; |
float:left; } 2 .段落の垂直方向の中央揃え | (1) 方法 1: line-height を高さと同じ値に設定する 欠点: 複数行のテキストの場合は、テキストの長さを増やすか、ブラウザ ウィンドウを長くします。が狭くなるため、文字を折り曲げて表示する必要があり、この方法は無効です。 | (2) 方法 2: 改善方法: multi-vertical.htm HTML コード | <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>
ログイン後にコピー
|
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31