フロントエンド(E) - ページのCSSの美化

1.ページの造園理由

  • 効果的な配信ページ情報
  • ユーザーを引き付けるためには、かなり、ページをページを美しく
  • ページのテーマを強調
  • ユーザーエクスペリエンスを向上させます

2. spanタグ

  • 役割:のために集中単語に設定し、使用スパン
  • フォントサイズの値は、
    XX-小さな:最小の
    X-小:小さい
    小:小
    中:通常(デフォルト)、調整をフォントによる
    大:大
    X-大:大
    XX-大型:最大
    、特に望ましい長さを単位値
  • 例:
    ここに画像を挿入説明

3.フォントスタイル

  • フォントプロパティ

(1)フォントファミリー:セットのフォントの種類

(2)フォントサイズ:セットのフォントサイズ

  • フォントサイズの値であってもよい、絶対値または相対値
  • -sizeフォント:12ピクセル ;設定されたオブジェクトの特定のフォントサイズを12ピクセル
  • -sizeフォント:XX-小型 ;テキストサイズセットに最小
  • サイズフォント: ;テキストのフォントサイズを設定するには、ある小さな
  • -sizeフォント:X-ラージ ;提供されるオブジェクトのフォントサイズより大きい
  • -sizeフォント:大きい、オブジェクトサイズフォントセット
  • -sizeフォント:小さい親コンテナに対する相対フォントサイズが相対的に減少します
  • -sizeフォント:50% ; 親コンテナに対しては、フォントサイズに調整され、50%の大きさ
  • -sizeフォント:150% ; 親コンテナに対しては、フォントサイズを調整することが150%の大きさを

(3)フォントスタイル:セットのフォントスタイル

  • 通常:通常のテキスト表示
  • イタリック:イタリック体のテキスト
  • 斜め:テキストを斜体を表示します

(4)フォント重量:セットフォント重量

  • キーワード100〜900を指定9度太字フォント。太字は、これらのレベルを構築した場合、これらの数が所定のレベルに直接マッピングされ、100に対応する最小の(ライター)変換フォント900に対応する粗いが(大胆)を形質転換フォント400はに相当し、通常、および700に相当大胆

(5)カラー:設定フォントの色を

(6)フォント:文の中で設定したすべてのプロパティのフォント

  • サンプルコード
    ここに画像を挿入説明
  • 業績
    ここに画像を挿入説明

4.テキストスタイル

  • :RGBのワード0〜F.
    RGBA請求A:0〜1

  • ALIGN =左のテキスト水平配向、中央/左端/右端

  • インデントテキスト:2EM 段落のインデント最初の行(2文字)

  • 高さ:300ピクセルによってブロックの高さ

  • 高ライン:により300ピクセルテキスト高の行
    高さ及び高コンシステンシー行ブロックは、垂直にセンタリングすることができます

  • デコレーション・テキスト下線下線

  • デコレーション・テキスト:通じライン破線

  • テキスト装飾:上線をスクライブ

  • テキスト装飾:なし(中/上)削除スクライブ

  • 垂直整列:中央の水平配向(2つの要素B)

  • テキスト影:影の色、水平オフセット、垂直オフセット、シェーディング半径

  • サンプルコード
    ここに画像を挿入説明

  • 業績
    ここに画像を挿入説明

疑似クラスハイパーリンク

  • CSSの擬似クラスは、簡単に言えば、それはあなたがこのクラスを定義していないということですが、それは私たちの要素のための様々な効果を追加するために疑似クラスを使用して、クラスとして来ない、いくつかのセレクタに特殊効果を追加するために使用されています
  • 通常の状況下で、{}:ホバー{}このコードは、セレクタ効果のラベルを追加する場合には、タグに対するこの効果ホバーがトリガされます
  • サンプルコード
    ここに画像を挿入説明
  • 業績
    ここに画像を挿入説明

6.一覧

  • スタイル一覧
    なし削除原点
    円白丸
    小数
    広場広場
  • 背景画像:のURL(「... /画像/ r.gif」)は、背景画像を設定します
  • REPEAT-背景:NO-REPEATどのように背景画像の繰り返しを設定するには、NO-REPEATは一度だけ、背景画像を表します
  • 位置-背景:236px 2ピクセルセットの写真場所
  • サンプルコード
    ここに画像を挿入説明
  • 業績
    ここに画像を挿入説明

7.背景

  • 本部は、HTMLタグの1つである、divがあり、分割コンテンツの効果、DIVおよびCSSスタイルは、Webページは、様々なスタイルの効果を達成することを可能にする
    のdivタグは、前の置き換えテーブルのラベルのレイアウトは
    、通常、1つのペアは、任意のスタイルのdivを設定しなかったで別の行を
  • 背景画像の属性背景画像
    フォーマット:背景画像:URL(「画像パス」)
    背景要素は、パディングとボーダーを含む素子全体の大きさを占めるはなく、余白
    デフォルト背景画像が配置されています要素左上隅、及び水平方向と垂直方向に繰り返します
  • 背景リピート属性が定義タイルモード画像
    REPEATをデフォルト背景画像を水平および垂直方向の中で繰り返される
    REPEAT-X 背景画像に水平に繰り返される
    反復Y:背景画像に垂直に繰り返されていない
    無リピート:背景画像は一度だけ表示されます
  • サンプルコード
    ここに画像を挿入説明
  • 業績
    ここに画像を挿入説明

8.グラデーション

  • それはあなたが2色以上の指定の間のスムーズな移行を表示することができます
    ここに画像を挿入説明
    CSS3の定義グラデーション(グラデーション)の2種類:
    1)Aの直線勾配(リニアグラデーション) - 上/下/左/右/対角方向

    • 格式一:背景画像:直線勾配(方向、色ストップ1、色ストップ2、...)

    • 方向デフォルトのトップダウン直線勾配、左から右に表すために線形勾配を、下に左上から右下に開始する権利を表す直線勾配を

    • 格式二:背景画像:リニアグラジエント(角度、色ストップ1、色ストップ2)

    • 水平線と勾配との間の角度を指し反時計回りの方向算出。換言すれば、値は0degが作成され、下から勾配を90degが作成され、左から右への勾配を

    (2)半径方向の勾配(半径グラデーション) - それらの中心によって定義されます

  • コードの例(直線勾配)
    ここに画像を挿入説明

  • 業績
    ここに画像を挿入説明

9.ボックスモデル

(1)はじめに
ここに画像を挿入説明
マージン:余白、ページ要素のVVの要素との間の距離を設定
パディング:パディング、パディング及び分割線マージン、素子分離のための
境界:境界線を、コンテンツを制御しますそして、の国境間の距離

  • 計算ボックス:最後に、この要素どのくらい?
    マージン+ボーダー+パディング+コンテンツ幅

(2)ボーダー

  • プロパティ:境界線の太さ(幅)、境界線のスタイル(様式)、境界線の色(カラー)
  • サンプルコード
    ここに画像を挿入説明
  • 動作結果
    ここに画像を挿入説明
    (3)の内側と外側の余白
  • 余白(マージン)ボーナス:センタリング要素の
    マージン:オート0、自動的約0ダウン、その結果、
    中間

    マージン:0 1ピクセル2ピクセル3px; 時計方向(右、左下)
  • パディング(パディング)同様
  • ケースコード
    ここに画像を挿入説明
  • 動作結果
    ここに画像を挿入説明
    (4)角丸
  • 要素を追加する境界半径角丸は、四隅に配置されてもよい(無属性の継承を持たない)要素を丸め
  • などのパラメータ:トップは、右下の右上左下時計回りに左
  • 円:フィレット半径=
  • プレゼンテーション
    ここに画像を挿入説明
    (5)影
  • ボックスシャドウプロパティは、一つ以上のシャドウフレームを追加します
  • フォーマット:箱・シャドウ:H-V-影の色影のぼかしからはめ込みスプレッド
    H-シャドウ:必須。横シャドーの位置負の値は許可されている
    V-影:必須。影の垂直位置負の許可
    ブラーを:オプション。ファジィ距離
    の広がり:オプション。影のサイズ
    色:オプション。影の色。CSSの色の値を参照してください。
    インセットを:オプション。外側の影(OUTSET)内に影
  • 表示:この要素の意志の前と後に改行して、この要素はブロックレベル要素として表示されているブロック
  • ショー
    ここに画像を挿入説明
公開された62元の記事 ウォンの賞賛2 ビュー2745

おすすめ

転載: blog.csdn.net/nzzynl95_/article/details/103796278