CSS_html/css_WEB-ITnose の 6 つの一般的なテキスト スタイル

× 目次 [1] 1行目のインデント [2] 水平方向の配置 [3] 単語の間隔 [4] 文字の間隔 [5] テキストの変換 [6] テキストの変更

前の単語

CSSのテキストスタイルは相対的コンテンツのスタイル変更。カスケード関係では、コンテンツが背景よりも上位にあるためです。したがって、テキストのスタイルは比較的重要です。テキストとフォント スタイルの違いをよく理解していない人もいます。簡単に言えば、テキストはコンテンツであり、フォントはこのコンテンツを表示するために使用されます。この記事では、テキスト関連のスタイルを詳しく紹介します。

最初の行のインデント

定義

最初の行のインデントは、段落の最初の行をインデントすることであり、一般的に使用されるテキスト書式設定効果です。一般的に中国語で文章を書く場合、これと同じように最初に空白が2つ入ります。

[注意] この属性は負の値にすることもできます

text-indent

値: -block)

継承: はい

パーセンテージ: 含むブロックの幅に対する相対値です

適用

【吊り下げインデント】

div{    width: 200px;    border: 1px solid black;    text-indent: -1em;//关键代码 padding-left: 1em;//关键代码}

【ドロップキャップ】

div{    width: 200px;    border: 1px solid black;    text-indent: 0.5em;}div:first-letter{ font-size: 30px; float: left;} 

水平配置

定義ition

水平方向の配置は、テキスト内のテキストに影響を与える水平方向の配置です。要素。 text-align

値: left | center | right | edit

適用対象: left

継承: Yes

両端揃え

水平方向の配置が両端揃えになっている場合、テキストが行全体に正しく収まるように単語の間隔が調整されることがあります。文字間隔の長さの値を指定した場合、文字間隔の値が通常でない限り、文字間隔は両端に影響しません。

IE 互換

IE7 ブラウザの場合、text-align を使用すると、テキストの水平方向の配置が変更されるだけでなく、後続のブロックレベル要素の水平方向の配置も変更されます

.box{    width: 200px;    height: 200px;    background-color: pink;    border: 1px solid black;    text-align: right;}    .in{    height: 100px;    width: 100px;    background-color: lightgreen;}

<div class="box">    <div class="in">测试文字</div></div>

文字間隔

文字間隔とは、テキストまたは単語間の間隔を設定するために使用される単語間隔を指します。実際、「単語」は、何らかの種類の空白文字で囲まれた、空白以外の文字の文字列を表します

[注] 単語はスペースで区切られており、単語間の間隔 = 単語間隔 + スペース サイズ

[注]単語間隔は負の値にすることもできます

word-spacing

値: | 継承

初期値: 通常 (デフォルトは 0)

適用対象: すべての要素

継承: があります

文字間隔

文字間隔は文字間隔を指します

[注意] 文字間隔は負の値も可能です

letter-spacing

値: 継承

初期値:normal (デフォルトは0)

適用対象: すべての要素

継承: はい

テキスト変換

テキスト変換は英語の大文字と小文字の変換を処理するために使用されます

text-transform

値: uppercase(すべて大文字) | 小文字 (すべて小文字) | 継承

初期値: なし

継承: はい

定義

テキスト装飾はテキストに装飾線を付けるために使用されます

[注意] テキスト装飾線の色はテキストの色と同じです

text-decoration

値: none [underline (underline) || overline (overline) ) ) || ラインスルー(下線)] | 継承

初期値: none

適用対象: すべての要素

継承: none

inherit

テキスト変更属性は継承できないことを意味します要素は継承できません。 テキスト上の装飾線は親要素と同じ色になります。子要素のテキスト上の装飾線は実際には親要素に属しており、親要素を「通過」しているだけです。

[注] 競合しないテキスト変更行が複数出現する可能性があります