一般的な CSS フォントプロパティ:background-origin と background-clip の概要-CSSチュートリアル-php.cn

一般的な CSS フォントプロパティ:background-origin と background-clip の概要

高洛峰

リリース： 2017-03-14 15:45:26

オリジナル

1955 人が閲覧しました

(1)よく使われるフォントattributes:

font-weight:属性値 100-900 400は通常、700は太字、値が大きいほど太字になります

font-size:フォントサイズ、単位pxまたは%

です。 will 文字は小さな文字に変換されます注: すべての属性は、フォントの 1 つの属性を通じて記述することもできます。例:

Font:italic 太字 75%/1.8 'Microsoft Yahei',sans-serif、順序書き方: font-style font-variant font-weight font-size

line-height

font-famiyl、複数のスタイルはスペースで区切られ、この順序で書かれなければなりません、font-size と line-height は / で区切られなければなりません ( 2) フォントの色: color: 属性値は英語で記述することができます。例: red or rgb(0-255,0-255,0-255);

or rgba(0- 255,0-255,0 -255,0-1); 0 は透明、1 は不透明を意味します

不透明度:0-1 も透明を意味します。 rgba() との違いは、この属性は子孫タグに作用しますが、rgba() は作用しません (3) 行間隔、配置 Line-height (行の高さ): ピクセル単位、48px など b. px なしの場合は、通常の行の高さ c の倍数です。パーセンテージは b と同じです (

コントロール

中国語のテキストを縦方向に中央揃えにする方法を調整します。コントロールの高さ = コントロールの行の高さ)

text-align

(配置): ブロックレベルの要素中国語単語の水平方向の配置

left

center

right

letter-spacing (文字間隔): 単語間の距離

ダクトセス’ -スルーオーバーラインなし ( ハイパーリンクの下線を削除できます) オーバーフロー: 範囲外のテキストの表示モードを制御します。自動はテキストの量に基づいてスクロールバーを自動的に表示します。スクロールは常にスクロールバーを表示します。スクロールバーは常に表示されます。 -range text Hidden、

overflow-x

, overflow-y

text-overflow: 冗長テキストの表示方法を設定、clipcrop out、ellipsis、 (強調、テキストの余分な各行に省略記号を表示させます。a.white-spacing:nowrap b.overflow:hiddern text-overflow:ellipsis)

text-shadow

: (4 つの属性値: 水平方向の影の距離垂直方向の影の距離ブラー距離影色) 文字の影については、最初の 2 つの属性値は省略できません。水平方向の影の距離が大きいほど、影は右に移動します。垂直方向の影の距離が大きくなると、影は下に移動します。影のぼかし距離。値が大きいほど、影がぼやけます。デフォルトは 0、ぼかしなしです。影の色、オプション、デフォルトは黒です text-indent: 最初の行のインデント、ピクセル値でインデントのサイズを調整できます Text-ストローク: ストロークの太さ、ストロークの色

white-space:nowarp Set最後に連続して表示される中国語の行 (中国語のデフォルトは自動行折り返しですが、英語は自動的に折り返しず、スペースに応じて自動的に折り返します)

単語区切り

: ブラウザはデフォルトでスペースで改行します。単語の長さが範囲を超えた場合、行が連続して表示されるようになり、ブレークオールにより単語内での改行が可能になります (5) 背景スタイル:

background (略称)

Figure 背景色をカバーします

background-repeat

(背景画像リピートモード): no-repeat (タイルなし)repeat-x (水平タイル)repeat-y(垂直タイル)repeatタイル (デフォルト)

background-position (位置座標、オフセット、2 つの属性値: 水平と垂直): 位置を指定: 左/中央/右、ピクセルまたはパーセンテージを書き込むことができ、属性値は 1 つだけ書きます (デフォルト)は水平方向、一方向はデフォルトで垂直方向の中央に配置されます (注: ピクセルを使用する場合、画像の左上隅が各方向に移動する実際の距離です。パーセンテージを使用する場合は、負の数値を使用しないことをお勧めします。画像を削除した後の残りの空白距離の配分比率、例: 背景 -位置:30% 画像を水平方向に削除した後、残った領域は 3:7 ポイントになります)

top/center/bottom

属性値を1つだけ記述した場合、デフォルトではもう一方が中央に配置されます

background-clip

:border-box（ボーダーの外端から表示）