ホームページ  >  記事  >  ウェブフロントエンド  >  一般的な CSS フォント プロパティ:background-origin と background-clip の概要

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

高洛峰
高洛峰オリジナル
2017-03-14 15:45:261933ブラウズ

(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(ボーダーの外端から表示)

padding-box(ボーダーの内端から表示) ) content-box (テキスト内容から表示され、表示領域外の背景画像や背景色は切り取られて表示されません) background-origin

: 配置開始点 border-box (外側から開始)境界線の端)padding-box(境界線の内端から開始)content-box(テキストコンテンツ領域から開始)

background-size:背景画像 サイズには通常、幅と高さの2つの属性があります。属性値は 1 つだけで、デフォルトは幅と高さが同じ割合でスケーリングされます

_ure (親コンテナの幅と高さの割合)]

以上が一般的な CSS フォント プロパティ:background-origin と background-clip の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。