共通の CSS プロパティ

CSS の一般的に使用される属性

☛ CSS 属性については、詳細と便宜のためにマニュアルを読むことをお勧めします。ここではいくつかの一般的な属性を分類し、単にいくつかの一般的な属性値を取り上げます。スターターとしてフロントエンドを学習します。

1. フォント スタイル

フォントの略語は、font:font-style|| font-variant ||font-weight||font-size||/ line-height||font-family として記述されなければなりません。 be

♣ を順番に書きます。 || 一般的に使用される斜体斜体 || 斜体変数なしの特殊なフォントです

♣ 小さな大文字 t (font-varian): 通常の小さな大文字

♣ フォント-weight: 通常使用 || 極太 太字 || 数値で直接表現 (値 100-900)

♣: ここでは、使用できるいくつかのルート単位のみを紹介します。表現 (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 || 中央揃え (中央揃え) || right (右揃え) text) || 他のマニュアルもあります

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

♦ テキストの折り返しワードラップ: 通常 (コンテンツを開くかオーバーフローすることができます) ||必要に応じて、単語内で改行が許可されます)

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

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

3. リスト形式 list-style

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

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

♥外側 (デフォルト値、リストはシンボルの近くにあります)

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

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

♥ 番号なし(なし) ♥ アラビア数字(10進数) ♥ 黒丸(円盤) ♥ 中空円(circle) ♥ 黒四角(square)

♥英小文字（アルファ下） ♥英大文字（アルファ大） ♥ローマ数字小文字（ローマ小） ♥ローマ数字大文字（ローマ大）

4. 背景スタイルの背景

背景スタイル略語は {background-color||background-image||background-repeat||background-attachment||background-position;} です

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

♠背景色

♠遠近感のある背景backgroung:transparent;

♠背景画像backgroung-image:url(画像ファイルパス);背景のタイリング方法、background-repeat:repeat (すべてのタイル、デフォルト) || no-repeat (タイルなし) ||repeat-x (水平タイル)

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

♠背景画像のスクロール バックグラウンド添付ファイル: スクロール デフォルト値。ページの残りの部分がスクロールすると、背景画像が移動します。

修正済み ページの残りの部分がスクロールしても背景画像が動かない。 ||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: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 (隠し境界線) || || 点線 (点線) || 破線 (線の形状、点線、一般的に使用)

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

♜境界線の幅、値はピクセル単位の値

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

♜inherit: border属性の設定を親要素から継承することを指定します。

一般的な CSS プロパティに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。