English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 基礎チュートリアル

CSS 盒子モデル

CSS3基礎教程

CSS 参考マニュアル

CSS @規則(RULES)

CSS Text(文本)

CSSのテキスト属性を使うと、非常に効果的に簡単にいくつかのテキストスタイルを定義できます。例えば、色、アライメント、スペース、装飾、変換など。

CSSでテキストをフォーマットする

CSSにはテキストのスタイルを定義するためのいくつかの属性があります。これらの属性を使って、正確にコントロールできます文字スペース単語段落などの視覚的な外観。

要素の以下のテキスト属性を設定できます:

文字の色

テキストの色はCSSで color属性の定義です。colorについてもっと詳しく知りたいです。

h1 {
    color: #ff0000;
}
p {
    color: green;
}
テストを試してみる‹/›

注意:テキストの色はCSSのテキストの一部のように見えるが、実際にはCSS内の独立した属性です。

文字对齐

このtext-align属性用于设置文本的水平对齐方式。

此属性可能的值有:left,right,center,justify,和inherit。

h1 {
    text-align: center;
}
p {
    text-align: justify;
}
テストを試してみる‹/›

注意:当将text-align设置成justify时,可以将内容分散对齐,但是此属性只能对齐非最后一行的内容。。

文字修饰

このtext-decoration属性用于设置或删除文本装饰。

此属性的可能值有:none,underline,overline,line-through,blink和inherit。您应避免在非链接的下划线文本,否则可能会使访问者感到困惑。

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}
テストを試してみる‹/›

警告:大多数浏览器都不支持blinkCSS text-decoration属性的值。您应该避免使用此值。

删除链接默认下划线

このtext-decoration属性通常用于从超链接中删除默认下划线。完全删除下划线可能会使访问者感到困惑。除非您提供其他视觉提示以使其脱颖而出,同时还要设计链接的样式。

例如,您可以使用点而不是实线在链接下划线。

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}
テストを試してみる‹/›

注意:创建HTML链接时,内置在样式表中的浏览器会自动在其下划线,以便读者可以看到可单击的文本。

文字変換

このtext-transform属性はテキストの大文字と小文字を設定するために使用されます。

これを使用して、要素のテキスト内容を大文字または小文字に設定したり、各単語の最初の文字を大文字に設定できます。-transform属性には:none、capitalize、uppercase、lowercase、およびinheritがあります。

p.up {
    text-transform: uppercase;
}
p.cap {
    text-transform: lowercase;
}
p.low {
    text-transform: lowercase;
}
テストを試してみる‹/›

文字インデント

このtext-indent属性は、要素の第一行テキストのインデントを設定するために使用されます。-indent属性の可能値は:パーセント(%),長さ(指定インデントスペース)またはinherit。

以下の例では、段落の第一行をインデントする方法を示しています。

p {
    text-indent: 100px;
}
テストを試してみる‹/›

注意:テキストが左側から右側にインデントされるかどうかはCSSに依存しています direction属性は、定義された要素内のテキストの方向を定義します。

単語間隔

word-spacingは、単語間のスペースを設定する属性です。

  • 字間隔はテキストのアライメント方法によって影響を受ける可能性があります。以下を確認してくださいtext-align属性。

  • 空白を保持する場合、すべてのスペース文字は単語間のスペースに影響されます。CSSを参照してください white-space属性。

このword-spacing属性の可能な値は:length(単語間に追加するスペースを指定)normalおよびinherit。

p.one {
    word-spacing: 20px;
}
p.two {
    word-spacing: 20px;
    text-align: justify;
}
p.three {
    word-spacing: 20px;
    white-space: pre;
}
テストを試してみる‹/›

文字間隔

このletter-spacing属性は、テキストの文字間に追加する余分なスペースを設定するために使用されます。

この属性の可能な値は:length(デフォルトの文字間のスペースnormalおよび文字間に追加する余分なスペースを指定)およびinherit。

h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}
テストを試してみる‹/›

行間隔

このline-height属性は、一行のテキストの高さを定義します(「height」とも呼ばれますLead)。

この属性の可能な値は:パーセント(%),長さ、normalおよびinherit。

p {
    line-height: 1.2;
}
テストを試してみる‹/›

数値の場合、要素のフォントサイズを数値で乗算して行高を計算します。一方、パーセンテージは要素のフォントサイズに対して相対的です。

注意:この属性の負値は許可されていません。この属性はまたフォントショートハンド属性の構成部分。

line-height属性の値が大きい場合font-size要素の値があれば、この差分(「size」と呼ばれます「リード」)を二分割します(「リード」と呼ばれます「半リード」),そして、inの先頭と末尾の行フレームに均等に分布されます。

p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}
テストを試してみる‹/›

テキストスタイルに関する情報をさらに詳しく知りたい場合は、以下を参照してくださいフォントおよびテキスト関連属性。