CSSテキスト

QQ截图20161011145219.png

上記の表の属性を 1 つずつ説明することはしません。主に誰もが同時に学習し実践できるように、一般的に使用されるいくつかの属性のみを説明します。他のコンテンツを自分でテストしたり、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>标题查看颜色</h1>
    </body>
</html>

style.css

body{
   color: aqua;
}

実行結果:

QQ截图20161011145634.png

ボディの色を設定していることがわかりますが、pタグ h1 と h1 のタグにもボディで設定されたフォントの色が表示され、2 つのタグがボディのフォントの色を継承していることがわかります。

例 2 text-align

text-align は、要素内のテキスト行をどのように配置するかに影響を与える基本的な属性です。最初の 3 つの値は非常に単純ですが、4 番目と 5 番目は少し複雑です。

値 left、right、center を指定すると、要素内のテキストがそれぞれ左揃え、右揃え、中央揃えになります。

西洋言語は左から右に読まれ、すべての 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中文网</p>
    </body>
</html>

style.css

body{
   color: red;
   text-align: center;
}

実行結果:

QQ截图20161011145702.png

例 3 text-indent

Indent text Web ページの段落の最初の行をインデントします。一般的に使用されるテキスト書式設定効果。 CSS には、テキストのインデントを簡単に実装できる text-indent プロパティが用意されています。 text-indent 属性を使用すると、すべての要素の最初の行を指定の長さ (負の値でも) だけインデントできます。この属性の最も一般的な使用法は、段落の最初の行をインデントすることです。次のルールは、すべての段落の最初の行を 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中文网</h3>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
            <p>最好的自学网站</p>
         </div>
    </body>
</html>

実行結果:

QQ截图20161011145739.png

単語間隔 word-spacing 属性は、単語 (単語) 間の標準間隔を変更できます。デフォルト値の Normal は、0 に設定するのと同じです。

単語間隔属性は、正または負の長さの値を受け入れます。正の長さの値を指定すると、単語間の間隔が広がります。単語間隔に負の値を設定すると、単語間隔が狭くなります:

 h3{
   text-indent: 5em;
 }

文字間隔

文字間隔属性と単語間隔属性の違いは、文字間隔は文字間または文字間のスペースを変更することです。

word-spacing 属性と同様に、letter-spacing 属性の可能な値にはすべての長さが含まれます。デフォルトのキーワードは Normal (letter-spacing:0 と同じ) です。入力された長さの値は、指定された量だけ文字間の間隔を増減します。

<html>
<body>
		<h1 style="word-spacing:15px;">设置中文字符间距</h1>
		<h1 style="word-spacing:15px;">this is a test</h1>
	</body>
</html>

Character Transform

text-transform プロパティは、テキストの大文字と小文字を処理します。この属性には 4 つの値があります:

none
uppercase
lowercase
Capitalize

デフォルト値 none はテキストに変更を加えず、ソース内の値を使用します。原稿原稿サイズ書き込みます。名前が示すように、大文字と小文字はテキストをすべて大文字とすべて小文字に変換します。最後に、capitalize は各単語の最初の文字のみを大文字にします。

プロパティとしては、text-transform は重要ではないかもしれませんが、突然すべての h1 要素を大文字にすることに決めた場合には便利です。すべての h1 要素の内容を個別に変更する代わりに、text-transform を使用するだけで変更できます。

<html>
<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>
<body>
<h1>php中文网</h1>
<h4>php中文网</h4>
</body>
</html>

text-transform を使用すると、2 つの利点があります。まず、h1 要素自体を変更せずにこの変更を実行するための簡単なルールを記述するだけです。次に、後ですべてのケースを元のケースに戻すことにした場合、変更を完了するのが簡単になります。

テキスト装飾

次に、text-decoration 属性について説明します。これは、多くの非常に興味深い動作を提供する非常に興味深い属性です。

text-decorationには5つの値があります:

none
下線
上線
ラインスルー
点滅

予想どおり、下線は次のように下線を追加しますHTML の U 要素。 overline はまったく逆のことを行い、テキストの上部に上線を描画します。値 line-through は、テキストの中央に通過線を描きます。これは、HTML の S 要素と Strike 要素に相当します。 blink はテキストを点滅させます。これは、Netscape でサポートされている、非常に悪影響のあるblink タグと同様です。

none 値は、要素に元々適用されていたすべての装飾をオフにします。通常、プレーンテキストがデフォルトの外観ですが、常にそうとは限りません。たとえば、リンクにはデフォルトで下線が付けられます。ハイパーリンクから下線を削除したい場合は、次の CSS を使用して削除できます:

h1 {text-transform: uppercase}

注: このようなルールを明示的に使用してリンクの下線を削除する場合、アンカーと通常のテキストの視覚的な違いは色だけです (少なくともこれがデフォルトですが、完全な保証はありません)。色は間違いなく異なります）。

1 つのルールで複数の装飾を組み合わせることもできます。すべてのハイパーリンクに下線と上線の両方を付けたい場合、ルールは次のようになります:

a {text-decoration: none;}

ただし、2 つの異なる装飾が同じ要素に一致する場合、優先ルールの値がもう一方の値を完全に置き換えることに注意してください。次のルールを考えてみましょう:

a:link a:visited {text-decoration: underline overline;}

指定されたルールでは、テキスト装飾値は累積されるのではなく置き換えられるため、クラス stricken のすべての h2 要素にはスルーライン装飾が 1 つだけあり、下線や上線はありません。

空白の処理

空白属性は、ソース文書内のスペース、改行、およびタブ文字のユーザーエージェントの処理に影響します。

この属性を使用すると、ブラウザが単語間およびテキスト行間の空白を処理する方法に影響を与えることができます。デフォルトの XHTML 処理では、ある程度、すでに空白を処理しています。つまり、すべての空白文字が 1 つのスペースにマージされます。したがって、次のマークアップを Web ブラウザで表示すると、各単語の間にスペースが 1 つだけ表示され、要素内の改行は無視されます:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

このデフォルトの動作は、次の宣言で明示的に設定できます:

<p>This     paragraph has    many
    spaces           in it.</p>

上記のルールは、ブラウザが通常行うこと、つまり余分な空白を破棄することを指示します。この値が指定されている場合、改行文字 (キャリッジリターン) はスペースに変換され、行上の複数のスペースのシーケンスは 1 つのスペースに変換されます。

テキストの方向

英語の本を読む場合、これが英語の流れの方向です。ただし、これはすべての言語に当てはまるわけではありません。古代中国語は右から左に読まれることはわかっていますし、もちろんヘブライ語やアラビア語も右から左に読まれます。 CSS2 では、方向性を記述するプロパティが導入されました。

direction 属性は、ブロックレベル要素のテキストの書き込み方向、表の列レイアウトの方向、コンテンツが要素ボックスを水平方向に埋める方向、および両端揃え要素の最終行の位置に影響します。

注: インライン要素の場合、direction 属性は、unicode-bidi 属性が embed または bidi-override に設定されている場合にのみ適用されます。

方向属性には、ltr と rtl の 2 つの値があります。ほとんどの場合、デフォルトは ltr で、テキストが左から右に表示されます。右から左へのテキストを表示する場合は、値 rtl を使用する必要があります。

学び続ける

新しいファイル

<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h3>PHP中文网</h3> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> </div> </body> </html>

提出するリセットコード

自動運転