CSSテキスト
上記の表の屬性を 1 つずつ説明することはしません。主に誰もが同時に學(xué)習(xí)し実踐できるように、一般的に使用されるいくつかの屬性のみを説明します。他のコンテンツを自分でテストしたり、w3c で各屬性の特定のコンテンツを表示したりすることもできます。
例 1 color color
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>查看顏色</p> <h1>標(biāo)題查看顏色</h1> </body> </html>
style.css
body{
color: aqua;
}実行結(jié)果:
ボディの色を設(shè)定していることがわかりますが、pタグ h1 と h1 のタグにもボディで設(shè)定されたフォントの色が表示され、2 つのタグがボディのフォントの色を継承していることがわかります。
例 2 text-align
text-align は、要素內(nèi)のテキスト行をどのように配置するかに影響を與える基本的な屬性です。最初の 3 つの値は非常に単純ですが、4 番目と 5 番目は少し複雑です。
値 left、right、center を指定すると、要素內(nèi)のテキストがそれぞれ左揃え、右揃え、中央揃えになります。
西洋言語は左から右に読まれ、すべての text-align のデフォルト値は左です。テキストは左の境界線で揃えられ、右の境界線ではギザギザになります (「左から右」テキストと呼ばれます)。 Index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>php中文網(wǎng)</p> </body> </html>
style.css
body{
color: red;
text-align: center;
}実行結(jié)果:
例 3 text-indent
Indent text Web ページの段落の最初の行をインデントします。一般的に使用されるテキスト書式設(shè)定効果。 CSS には、テキストのインデントを簡単に実裝できる text-indent プロパティが用意されています。 text-indent 屬性を使用すると、すべての要素の最初の行を指定の長さ (負(fù)の値でも) だけインデントできます。 この屬性の最も一般的な使用法は、段落の最初の行をインデントすることです。次のルールは、すべての段落の最初の行を 5 em ずつインデントします。
p {text-indent: 5em;}以下のindex.html のコードは次のとおりです。 CSS の変更は追加しないでください。表示される効果は次のとおりです。
style.css コードに次のインデントを追加して、「Lab Building」という 3 つの単語を 2 バイトでインデントします。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h3>PHP中文網(wǎng)</h3> <p>最好的自學(xué)網(wǎng)站</p> <p>最好的自學(xué)網(wǎng)站</p> <p>最好的自學(xué)網(wǎng)站</p> <p>最好的自學(xué)網(wǎng)站</p> </div> </body> </html>
実行結(jié)果:
単語間隔 word-spacing 屬性は、単語 (単語) 間の標(biāo)準(zhǔn)間隔を変更できます。デフォルト値の Normal は、0 に設(shè)定するのと同じです。
単語間隔屬性は、正または負(fù)の長さの値を受け入れます。正の長さの値を指定すると、単語間の間隔が広がります。単語間隔に負(fù)の値を設(shè)定すると、単語間隔が狹くなります:
h3{
text-indent: 5em;
}文字間隔
文字間隔屬性と単語間隔屬性の違いは、文字間隔は文字間または文字間のスペースを変更することです。
word-spacing 屬性と同様に、letter-spacing 屬性の可能な値にはすべての長さが含まれます。デフォルトのキーワードは Normal (letter-spacing:0 と同じ) です。入力された長さの値は、指定された量だけ文字間の間隔を増減します。
<html> <body> <h1 style="word-spacing:15px;">設(shè)置中文字符間距</h1> <h1 style="word-spacing:15px;">this is a test</h1> </body> </html>
Character Transform
text-transform プロパティは、テキストの大文字と小文字を処理します。この屬性には 4 つの値があります:
none
uppercase
lowercase
Capitalize
デフォルト値 none はテキストに変更を加えず、ソース內(nèi)の値を使用します。原稿原稿サイズ 書き込みます。名前が示すように、大文字と小文字はテキストをすべて大文字とすべて小文字に変換します。最後に、capitalize は各単語の最初の文字のみを大文字にします。
プロパティとしては、text-transform は重要ではないかもしれませんが、突然すべての h1 要素を大文字にすることに決めた場合には便利です。すべての h1 要素の內(nèi)容を個別に変更する代わりに、text-transform を使用するだけで変更できます。
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>
<body>
<h1>php中文網(wǎng)</h1>
<h4>php中文網(wǎng)</h4>
</body>
</html>text-transform を使用すると、2 つの利點があります。まず、h1 要素自體を変更せずにこの変更を?qū)g行するための簡単なルールを記述するだけです。次に、後ですべてのケースを元のケースに戻すことにした場合、変更を完了するのが簡単になります。
テキスト裝飾
次に、text-decoration 屬性について説明します。これは、多くの非常に興味深い動作を提供する非常に興味深い屬性です。
text-decorationには5つの値があります:
none
下線
上線
ラインスルー
點滅
予想どおり、下線は次のように下線を追加しますHTML の U 要素。 overline はまったく逆のことを行い、テキストの上部に上線を描畫します。値 line-through は、テキストの中央に通過線を描きます。これは、HTML の S 要素と Strike 要素に相當(dāng)します。 blink はテキストを點滅させます。これは、Netscape でサポートされている、非常に悪影響のあるblink タグと同様です。
none 値は、要素に元々適用されていたすべての裝飾をオフにします。通常、プレーン テキストがデフォルトの外観ですが、常にそうとは限りません。たとえば、リンクにはデフォルトで下線が付けられます。ハイパーリンクから下線を削除したい場合は、次の CSS を使用して削除できます:
h1 {text-transform: uppercase}注: このようなルールを明示的に使用してリンクの下線を削除する場合、アンカーと通常のテキストの視覚的な違いは色だけです (少なくともこれがデフォルトですが、完全な保証はありません)。色は間違いなく異なります）。
1 つのルールで複數(shù)の裝飾を組み合わせることもできます。すべてのハイパーリンクに下線と上線の両方を付けたい場合、ルールは次のようになります:
a {text-decoration: none;}ただし、2 つの異なる裝飾が同じ要素に一致する場合、優(yōu)先ルールの値がもう一方の値を完全に置き換えることに注意してください。次のルールを考えてみましょう:
a:link a:visited {text-decoration: underline overline;}指定されたルールでは、テキスト裝飾値は累積されるのではなく置き換えられるため、クラス stricken のすべての h2 要素にはスルーライン裝飾が 1 つだけあり、下線や上線はありません。
空白の処理
空白屬性は、ソース文書內(nèi)のスペース、改行、およびタブ文字のユーザーエージェントの処理に影響します。
この屬性を使用すると、ブラウザが単語間およびテキスト行間の空白を処理する方法に影響を與えることができます。デフォルトの XHTML 処理では、ある程度、すでに空白を処理しています。つまり、すべての空白文字が 1 つのスペースにマージされます。したがって、次のマークアップを Web ブラウザで表示すると、各単語の間にスペースが 1 つだけ表示され、要素內(nèi)の改行は無視されます:
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}このデフォルトの動作は、次の宣言で明示的に設(shè)定できます:
<p>This paragraph has many spaces in it.</p>
上記のルールは、ブラウザが通常行うこと、つまり余分な空白を破棄することを指示します。この値が指定されている場合、改行文字 (キャリッジ リターン) はスペースに変換され、行上の複數(shù)のスペースのシーケンスは 1 つのスペースに変換されます。
テキストの方向
英語の本を読む場合、これが英語の流れの方向です。ただし、これはすべての言語に當(dāng)てはまるわけではありません。古代中國語は右から左に読まれることはわかっていますし、もちろんヘブライ語やアラビア語も右から左に読まれます。 CSS2 では、方向性を記述するプロパティが導(dǎo)入されました。
direction 屬性は、ブロックレベル要素のテキストの書き込み方向、表の列レイアウトの方向、コンテンツが要素ボックスを水平方向に埋める方向、および両端揃え要素の最終行の位置に影響します。
注: インライン要素の場合、direction 屬性は、u??nicode-bidi 屬性が embed または bidi-override に設(shè)定されている場合にのみ適用されます。
方向?qū)傩预摔稀tr と rtl の 2 つの値があります。ほとんどの場合、デフォルトは ltr で、テキストが左から右に表示されます。右から左へのテキストを表示する場合は、値 rtl を使用する必要があります。
