ホームページ > 記事 > ウェブフロントエンド > CSSの外観プロパティとは何ですか? CSS の外観プロパティの概要

CSSの外観プロパティとは何ですか? CSS の外観プロパティの概要

不言オリジナル: 2018-08-18 16:19:374271ブラウズ

この記事では、CSS の外観属性とは何ですか? CSS の外観属性の紹介は、必要な場合に参考にしていただければ幸いです。

CSS 外観属性

color: テキストの色

color 属性は、値を取得する 3 つの方法があります:

赤、緑、青などの事前定義された色の値。
#FF0000、#FF6600、#29D794 などの 16 進数。実際には、16 進数が色を定義する最も一般的な方法です。
赤などの RGB コードは、rgb(255,0,0) または rgb(100%,0%,0%) として表すことができます。

RGBコードのパーセントカラー値を使用する場合、値が0の場合パーセント記号は省略できず、0%と記述する必要があることに注意してください。

line-height: 行間隔

line-height 属性は、行間の距離、つまり文字の垂直方向の間隔である行間隔を設定するために使用され、一般に行の高さと呼ばれます。 line-height によく使用される属性値の単位は、ピクセル px、相対値 em、パーセント % の 3 つです。実際の作業で最もよく使用される単位はピクセル px です。

通常、行間隔はフォントサイズより約 7.8 ピクセル大きくなります。

text-align: 水平方向の配置

text-align 属性は、テキストコンテンツの水平方向の配置を設定するために使用されます。これは、HTML の align 配置属性に相当します。利用可能な属性値は次のとおりです:

left: 左揃え (デフォルト値)

right: 右揃え

center: 中央揃え

text-indent: 1 行目のインデント

text-indent 属性は次の目的で使用されます。テキストの最初の行のインデントを設定するには、その属性値をさまざまな単位の値、em 文字幅の倍数、またはブラウザウィンドウの幅に対する割合で指定することをお勧めします。 em を設定単位として使用します。

1em は、漢字の段落の文字の幅です。

p {    line-height: 25px;/*行间距*/
    text-indent: 2em;/*首行缩进*/
    }
h3 {    
    text-align: center;/*水平对齐*/
    }

letter-spacing: 文字間隔

letter-spacing 属性は、文字の間隔を定義するために使用されます。いわゆる文字間隔は、文字間の距離です。その属性値はさまざまな単位の数値にすることができ、負の値が許可され、デフォルトは通常です。

word-spacing: 単語間隔

word-spacing 属性は、英語の単語間の間隔を定義するために使用され、中国語の文字には無効です。文字間隔と同様に、その属性値はさまざまな単位の値にすることができ、負の値が許可され、デフォルトは標準です。

英語では単語間隔と文字間隔の両方を設定できます。違いは、letter-spacing は文字間の間隔を定義するのに対し、word-spacing は英語の単語間の間隔を定義することです。

p {
    letter-spacing: 2px;/*字间距*/
    }
p {
    word-spacing: 5px;/*单词间距 针对英文 中文无效*/
    }

ワードブレイク: 自動改行

通常は、ブラウザのデフォルトの改行ルールを使用します。

break-all を使用すると、単語内で改行が可能になります。

keep-all は、半角スペースまたはハイフンでのみ行を折り返すことができます。

色の半透明(CSS3)

文字の色 css3では半透明形式を採用することができます。

color:rgba(r,g,b,a) a是alpha 透明的意思 取值范围 0~1之间 color:raba(0,0,0,0.3)

テキストシャドウ(CSS3)

テキストシャドウシャドウ

text-overflow:水平位置 垂直位置 模糊距离 阴影颜色；

値	説明
h-shadow	必須。水平方向の影の位置。負の値も許可されます。
v-shadow	必須。垂直影の位置。負の値も許可されます。
ぼかし	オプション。ぼやけた距離。
カラー	はオプションです。影の色。 CSS カラー値を参照してください。

最初の 2 つの項目は必須で、最後の 2 つの項目はオプションです。