HTML CSS を使用すると、Web ページのレイアウトを非常に便利に実行できますが、すべての属性やコードを覚えておく必要はありません。最近、将来のレビューを容易にするために、CSS でよく使用されるコードをまとめました。時間 みんなと共有して、お役に立てば幸いです。
1. テキスト設定
1. font-size: フォント サイズパラメータ
##2. フォント スタイル: フォント形式 3. font-weight: フォントの太さ4. カラー属性カラー: パラメーターWeb セーフ カラーを使用してください2.スーパー リンク設定
text-decoration: パラメータ の主な目的は、ブラウザがテキスト リンクを表示するときに下線を変更することです。 パラメータ値の範囲: underline: テキストに下線を付ける overline: テキストに下線を付ける line-through: テキストに下線を付ける 取り消し線 blink: テキストを点滅させます none: 上記の効果を表示しません3. 背景
1.#background-color: パラメータ
2、背景画像
background-image: url(URL)
URL は背景画像の保存パスです。なし。なしを意味します。
3. 背景画像の繰り返し
background-repeat: パラメータ
パラメータ値の範囲:
no-repeat: タイル化された背景画像を繰り返しません
repeat-x: 画像を横方向のみタイル化する
repeat-y: 画像を縦方向のみタイル化する
背景画像のリピート属性が設定されていない場合を指定すると、ブラウザはデフォルトで背景画像を水平方向と垂直方向に並べて表示します。
4. 背景画像の固定
背景画像の固定は、Web ページのスクロールに合わせて背景画像もスクロールするかどうかを制御します。背景画像固定属性を設定しない場合、ブラウザのデフォルトの背景画像は Web ページのスクロールに合わせてスクロールします。派手すぎる背景画像がスクロール時に閲覧者の注意をそらさないようにするために、通常、背景画像は固定に設定されます。
background-attachment: パラメータ
パラメータ値の範囲:
fix: Web ページがスクロールされると、背景画像はブラウザ ウィンドウに対して固定されます。
#scroll: Web ページがスクロールされると、背景画像はブラウザ ウィンドウに対して相対的にスクロールされます4. ブロック
1. 単語間隔
単語間隔: 文字間隔 文字 - spacing: 文字間隔 3、テキスト配置 text-align: パラメーター パラメーターの値: left: 左揃えright: 右揃えcenter: 中央揃えjustify: 相対的な左右揃え4、垂直揃えvertical-align: パラメータtop:上揃えbottom:下揃えtext-top:相対的なテキストの上揃えtext-bottom:相対的なテキストの下揃え
baseline: ベースラインの配置middle: 中央揃えsub: 下付き文字の形式で表示super: 上付き文字の形式で表示5、テキスト インデント text-indent: インデント距離 12px は、テキスト距離 6、スペース white-space に相当します。パラメータ normalnormalprereservednowrap 改行なし7. 表示スタイル display: パラメータ パラメータ選択 値の範囲: block: ブロックレベルの要素、オブジェクトの前後に改行あり inline: オブジェクトの前後に改行なし list -item: オブジェクトの前後に改行、箇条書きを追加 none: 表示なし
5、Box
1、高さheight2、幅 width
3. パディング内部マージン #4. マージン外部マージン##5: ブロック レベルの要素を配置できます。水平メニューなどの行に表示されます。
6. クリアクリアフロート
6. 境界線1. 境界線のスタイルパラメータ
境界線スタイルのパラメータ: none: 境界線なし
dotted: 境界線が点線
dashed: 境界線が長短線
solid : 境界線は実線です Line
double: 境界線は二重線です
#2、width境界幅パラメータ3、colorborder color パラメータ7. List
list-style-type リスト スタイルリストの文字はブラウザによって異なる場合があります。 Web ページに影響を与える可能性があるため、Web ページ上のほとんどのリストは背景画像とともに表示されます。 ユーザー インターフェイスのスタイルを制御します8. マウス
カーソル: マウス形状パラメーター CSS マウス形状パラメーター テーブル: マウスの形状: CSSコードstyle="cursor:hand" 手の形状
style="cursor:crosshair" 十字の形状style= "cursor: text" テキストの形状 style="cursor:wait" 砂時計の形状 style="cursor:move" 十字矢印の形状: style="cursor: help" 疑問符 図形 style="cursor:e-resize" 右矢印図形 style="cursor:n-resize" 上矢印図形 style ="cursor:nw-resize" 左上矢印型style="cursor:w-resize" 左矢印型style="cursor:s-resize" 下矢印-形状 style="cursor:se-resize" 右下の矢印形状style="cursor:sw-resize" 左下の矢印の形
以上がよく使用される CSS コードの包括的なコレクション (仕事に必須)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。