HTML5&CSS3--がページ絵の美しさを作る(5)

3.CSSのスタイル

1 )フォントスタイル

カラーフォントの色#FFF ...

フォントファミリーフォント姿勢(マイクロソフトエレガントな黒「マイクロソフトでYaHei」のTimes New Roman セリフ...

フォントスタイルのフォントがイタリックになっている(通常斜体

font-weight フォントの太さ(シンノーマル太字大胆な100〜900

フォントサイズフォントサイズ(デフォルトのブラウザに16px )(100pxに2EM ...

 

WebFontのフォント姿勢:

ネットワークパケットのフォント(フォントパッケージローカルリンク)で適切なリンク、検索 CSSの宣言を

@フォント面{

フォントファミリ:「カスタム名」。

SRC:URL( 'リンクアドレス');

}

そして、スタイルとフォントファミリ:「カスタム名」; へ。

 

WebFont フォントのアイコン:

以下のよう iconfontはアイテムを追加したサイトのアイコンを選択し、選択フォントクラスでコード生成を<リンク> ラベルにCSSの(を補ったファイルHTTPS:)、一般的に<i>はにアイコンクラス名タグのフルネームを書きます基準(例えばIconFontアイコン-XXX )(またはでローカルにダウンロード<IMG> 参照タグ)。

または選択したUnicode コード生成を、する@ font-faceは、適切なリンクを書き、フォントファミリはあるIconFont 、アイコン名(生成されたUnicodeの書面)をラベルで参照することができます。

 

2 )テキストスタイル

フォントのテキスト整列配置センター右...

テキスト変換フォントの変更なし大文字小文字を...

テキストの装飾のテキストの装飾なし下線上線ラインスルー...

テキストシャドウテキストの影 [影-H] [V-シャドウ] [ぼかし] [カラー] 5pxの3px 4PX #ededed ...

カーソルの形状場合、リンク上のカーソルサスペンションカーソル

ボックスのリンクの周りのアウトライン

 

3 )リストスタイル

リストスタイルのタイプ設定リスト項目フラグタイプサークルスクエア...

リストスタイルの位置アイテムのロゴのリストの設定位置が表示されますインサイド

リストスタイル画像カスタム設定のリスト項目フラグ URL「/ ...」)

リストスタイルリストスタイル速記言い回し [タイプ] [画像] [位置] URL外側の円'/ ...' ...

行の高さの行の高さ

 

4 )ボックスのスタイル

背景色背景#FFF ...

背景画像、背景画像 URL '/ ...')

背景クリップの背景カバレッジ(作物背景)(

ボーダーボックス境界内、パディングボックスのパディング内で、コンテンツ・ボックスコンテンツエリア

背景原点背景開始点

ボーダーボックスフレーム部の起源、パディングボックスのパディング部起源、コンテンツ・ボックスコンテンツ領域部分の起源

背景位置の初期位置の背景画像トップ10pxの20ピクセル...

背景リピート背景画像は、モードを繰り返します

繰り返し背景の全範囲をカバーするために、背景画像は、刃先の文脈において、可能な限り繰り返される(クリッピング)全範囲を使用してバックグラウンドへの最後の画像。

空間できるだけ分離ブランク画像と背景画像は、切断を使用することなく、画面全体を埋める(クリッピング)

ラウンド画像は切断を使用することなく、圧縮又は背景の全範囲に適合するように拡張されます

何のリピートが繰り返されることはありません

背景取付背景画像の固定点

固定ビューポート上に固定され、スクロール要素自体に、固定されたローカルコンテンツ自体に固定要素を

背景サイズ、背景のサイズカバー...

背景速記文言設定の背景 [添付ファイル] [クリップ] [カラー] [画像] [位置] [REPEAT] 固定ボーダーブルーボックスURL '/ ...'左-NO REPEAT ...

 

幅幅

高さの高さ

 

マージントップ上余白

マージン右、右マージン

マージン下下の余白

マージン左左マージン

マージンマージン

マージン:10pxの; 左と右下の上

マージン:0 10pxの; まで 0 10pxの

マージン:0 5pxの10pxの; 上の 0 は約5pxの10pxの

マージン:0 5pxの10pxの15ピクセル、左右の下で

トップマージン、パディングトップ

パディング右、右マージン

パディング下パディング底

左マージン、パディング、左

パディングパディング

パディング:10pxの; 左と右下の上

パディング:0 10pxの; まで 0 10pxの

パディング:0 5pxの10pxの; 上の 0 は約5pxの10pxの

パディング:0 5pxの10pxの15ピクセル、左右の下で

 

境界半径フィレット半径

 

border-top-スタイルトップボーダーラインタイプ

border-top-幅トップ境界線の幅

トップのborder-top-色の境界線の色

トップ境界線のborder-top

 

右のborder-right-スタイルの境界線の種類

右のborder-right-幅境界線の幅

右のborder-right-色の境界線の色

border-right右側

 

border-bottom-スタイル下の境界線の種類

border-bottom-幅下の境界線の幅

下のborder-bottom-色の境界線の色

border-bottom下の境界

 

ボーダー左スタイル左の境界線の種類

左のborder-left-幅境界線の幅

左のborder-left-色の境界線の色

ボーダー、左サイドのボーダー

 

ボーダースタイルの境界線の種類

ボーダー色の境界線の色

ボーダー幅ボーダーの幅

(国境:1pxの固体#ededed ...

 

シャドーボックスシャドウボックス(#CCCの5pxのを5pxのの10pxの、3px 0 0水色からのインセット ...

 

ボックスの構成は次のとおりです。

マージン   マージン

ボーダーボーダー

パディングパディング

コンテンツ 子要素やコンテンツの格納領域

ボックスの計算

ボックスのサイズ変更:コンテンツ・ボックス; - コンテンツボックス(デフォルト

幅= コンテンツ幅

高さ= 高いコンテンツ

占有幅  =ボーダー+パディング+幅

高のシェア  =ボーダー+パディング+高さ

 

ボックスサイズ:ボーダー・ボックス; - フレームボックス

幅= 境界内およびすべての

幅=ボーダー+パディング+  コンテンツ幅

高さ= 境界内およびすべての

高さ=ボーダー+パディング+  コンテンツの高

 

5 )表スタイル

背景には、テーブルの背景色を追加します

テーブルレイアウト指定された表示ボックステーブル、行、列アルゴリズム

自動:(デフォルト値)セル幅は、そこに含まれる内容に依存します。

固定された表の各列の幅に応じて、最初の線幅が設定され、列の幅です。

国境崩壊指定したテーブルの枠線は、合併または分離されています

セパレートモードへ):(デフォルト値は、2つの隣接するグリッドは、独自の境界を有している表します。

崩壊:マージモードは、隣接する2つの格子共有枠を表し

キャプション側が指定キャプションがテーブル上のどの位置に配置されているトップボトム

 

[単位追加情報:

カラー

#333に相当#333333

#ededed

RGB(0,0,0)#000000に相当します

RGBA(0,0,0,0.3)0.3 透明に

グラデーション ...

長さ

絶対単位

PXピクセル

相対単位

EM 現在の要素のフォントサイズのなど、:

フォントサイズ:12ピクセル;

1EM = 12ピクセル。

2EM = 24ピクセル。

REM

HTML {フォントサイズ:14px}

1rem = 14px;

親要素に対する相対

境界半径現在の要素に対して

...

おすすめ

転載: www.cnblogs.com/wodeqiyuan/p/11291222.html