CSS の一般的に使用されるいくつかのプロパティの詳細な説明

一般的に使用される CSS プロパティ

☛ CSS プロパティについては、詳細と利便性について個人的にマニュアルを読むことをお勧めします。ここではいくつかの一般的なプロパティを分類し、単にいくつかの一般的なプロパティ値を取り上げます。フロントエンドを学び始めたばかりの私。入門として使用します。

1. フォント スタイル

フォントの略語、表記は font:font-style||font-weight||font-size||/ line-height||font-family 、必ず順番に書いてください

♣斜体フォント (font-style): 通常 || 一般的に使用される斜体斜体 || 斜体変数なしの特殊フォント斜体

♣小さな大文字 t (font-varian): 通常 ||スモールキャップ

♣ フォントの太さ: 標準 || 一般的に使用される太字 太字 || 数値で直接表現されます (値 100-900)

♣ フォント サイズ (font-size):表現できるいくつかのルート単位 (px、em、rem) のみを導入します

♣フォントの行の高さ (line-height): 長さの px| を使用できます (フォントの高さのサイズに基づきます) ||行の高さを数値 (倍率) で指定します

♣フォントファミリー (font-family): 特定のフォントまたはフォントシーケンスを使用するテキストを指定します。値は一重引用符で囲まれ、デフォルトは宋朝です。

demo: body{font-family:helvetica,verdana,sans-serif;}

/*注意事項*/: 優先順位順。カンマで区切ります。上記のフォント定義に示されているように、コンピュータに Helvetica フォントはなく Verdana があると仮定すると、テキストは Verdana で表示されます。

❤@font-face 埋め込みフォント (課外拡張)

@font-face はサーバー側のフォント ファイルをロードして、ユーザーのコンピューターにインストールされていないフォントをブラウザーで表示できるようにします。

構文:

@font-face {

font-family: カスタムフォント名;

src: URL (サーバー上のフォントファイルへの相対パスまたは絶対パス) 形式 (フォントタイプ);

}

例:

@font-face {/*この書き込み方法はすべてのブラウザと互換性があります*/

font-family: bgg;

src: url('fonts/fontawesome-webfont.eot'), /* IE9+ * /

url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('fonts/fontawesome-webfont.woff') format( 'woff'), /* クロム、Firefox */

url('fonts/fontawesome-webfont.ttf') format('truetype'), /* クロム、Firefox、Opera、Safari、Android、iOS 4.2+*/

url('fonts/fontawesome-webfont.svg') format('svg'); /* iOS 4.1+ */

}

p{ font-family: bgg }

★他のフォントはあまり使用されませんスタイル:

♣caption: キャプション (ボタン、メニューなど) を持つシステム コントロールのテキスト フォントを使用します (CSS2)

♣icon: アイコン ラベルのフォントを使用します (CSS2)

♣menu: を使用しますメニューのフォント (CSS2)

♣message-box: メッセージ ダイアログ ボックスのテキスト フォントを使用します (CSS2)

♣small-caption: 小さなコントロールのフォントを使用します (CSS2)

♣status-bar : ウィンドウステータスバーのフォント(CSS2)を使用します

2. 文字スタイル

♦文字の色カラー

●色の名前基本色はアクア、ブラック、ブルー、グレー、グリーン、ライム、マルーン、ネイビー、オリーブ、パープル、レッド、シルバー、ティールホワイト、イエロー

●16 進数 (hex) カラーコントロール (6 桁)、その形式は #336699 です。特定の 16 進値のショートカット カウント方法をサポートします。たとえば、#336699 を #369 と呼ぶこともできます。

●RGB値 RGB値の範囲は0～255で、Rは赤、Gは緑、Bは青を表します。デモ: { color: rgb(51,204,0) }

♦Text-indent、値は em の値で、1em は 1 つの単語の幅に等しいです。

♦テキストの水平配置 text-align: left( left -aligned) || center (中央揃え) || right (右揃え)垂直方向の配置 テキストの上付き文字) || 他のマニュアルもあります

♦ 文字間隔、値は標準であり、値は px です

♦ テキストの折り返し: 通常 (コンテンツを開くかオーバーフローすることができます) || -word (コンテンツは境界線内で折り返されます。必要に応じて単語内で改行が許可されます)

♦ 下線コントロールのテキスト装飾: なし (下線なし、デフォルト)、下線 (下線)、点滅、上線 (上線) )、line-スルー (取り消し線)

♦テキストの大文字化 text-transform: 大文字に変換 || 小文字に変換

3. リストスタイル list-style ▶list-style-image: url(/dot.gif); ピクチャスタイルシンボル、リスト項目のガイドシンボルとして画像を選択

▶list-style-position: リストシンボルの位置

♥外側 (デフォルト値、リストとシンボルは に近い)相互)

♥内 (リストはインデントされ、記号から分離されています)

▶list-style-type: 記号の種類 (日本語のフラット、休日、カタカケなどが必要な場合は、一般的に使用される記号のタイプがいくつかあります)マニュアルを確認できます)

♥なし(なし) ♥アラビア数字(10進数) ♥実線丸(円盤) ♥中空円(丸) ♥実線正方形(正方形)

♥小文字の英字(下位アルファ) ♥大文字の英字(上位アルファ) ) ♥小文字のローマ数字(下ローマ字) ♥大文字のローマ数字(上ローマ字)

背景スタイルの略称は {background-color||background-image| background-repeat||background-attachment||background-position;}

background: 背景色、背景画像、背景のタイリング方法、背景の位置は順序どおりである必要があります。 背景の例: #F00 url(header_bg.gif) no-繰り返し固定左上;♠背景色

♠遠近背景backgroung:transparent;

♠背景画像backgroung-image:url(画像ファイルパス);

♠背景のタイリングメソッドbackgroung-repeat:repeat(all tiled ,デフォルト) || no-repeat (タイルなし) ||repeat-x (水平タイル) ||repeat-y (垂直タイル)

round (コンテナ全体に収まるまで自動的に拡大縮小) (背景画像は同じ間隔で並べられ、コンテナ全体または特定の方向を埋めます)

♠背景画像のスクロールbackground-attachment:scroll デフォルト値。ページの残りの部分がスクロールすると、背景画像が移動します。

修正済み ページの残りの部分がスクロールしても背景画像が動かない。 ||inherit は、background-attachment プロパティの設定を親要素から継承することを指定します。

♠背景の配置background-position: 左と右の配置 (left||center||) 上下の配置 (top||bottom);

配置を数値 (またはパーセンテージ %) として記述することもできます。左の数値(%) 上の値(%)

♠背景のサイズですbackground-size

background-size: auto; デフォルトは自動的に画像サイズ

background-size: pxまたはパーセントです。 1 つの値が設定されると、2 番目の値は「auto」に設定されます。

background-size: cover; 背景画像がコンテナを完全に覆うように比例的に拡大縮小します。

background-size: contain; 画像の幅と高さがコンテンツ領域に完全に収まるように、画像を最大サイズまで拡大します。ただしコンテナを超えないようにしてください

background-size: 100px 100%; 幅と高さの比率を変更します

♠背景の開始位置background-origin

背景の後ろから{background-origin:padding-boxの書き込みを開始しますborder (デフォルト)||border -box 背景画像はボーダーから始まります||content-box 背景はコンテンツから始まります}

5. ボーダースタイルのボーダー

ボーダーラインの略称: {border:border- width border-style border-color;}

デモ: 4 つの境界線は同じです: {border:1px Solid #00F}; 別の面が必要な場合は、希望する方向を選択します: {border-[left] || right||top||bottom]:border -width border-style border-color;}

♜境界線のスタイル border-style: none (境界線なし、デフォルト) || hidden (非表示の境界線) ||点線 (点線) || 破線 (線状の点線、一般的に使用されます)

実線 (二重実線) ||明るい実線) || インセット (左上、濃い、右下、明るい実線) || アウトセット (左上が明るく、右下が濃い実線)

♜境界線の幅-width、値は px 単位の値です。

♜境界線の色です。 border-color、値は、色の英単語または 16 進数です。

♜inherit: 境界線の設定を指定します。属性は親要素から継承する必要があります。

以上がCSS の一般的に使用されるいくつかのプロパティの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。