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

WBOY
リリース: 2016-06-24 12:32:35
オリジナル
959 人が閲覧しました

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 コード

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート