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

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

Mar 14, 2017 pm 03:45 PM
css

(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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップの日付を表示する方法 ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答:ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順:ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

See all articles