よく使用される CSS コードの包括的なコレクション (仕事に必須)

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 に相当します。パラメータ

normalnormal

prereserved

nowrap 改行なし

7. 表示スタイル

display: パラメータ

パラメータ選択 値の範囲:

block: ブロックレベルの要素、オブジェクトの前後に改行あり

inline: オブジェクトの前後に改行なし

list -item: オブジェクトの前後に改行、箇条書きを追加

none: 表示なし

5、Box

1、高さheight

2、幅 width

3. パディング内部マージン

#4. マージン外部マージン

##5: ブロック レベルの要素を配置できます。水平メニューなどの行に表示されます。

6. クリアクリアフロート

6. 境界線

1. 境界線のスタイルパラメータ

境界線スタイルのパラメータ: none: 境界線なし

dotted: 境界線が点線

dashed: 境界線が長短線

solid : 境界線は実線です Line

double: 境界線は二重線です

#2、width

境界幅パラメータ

3、color

border 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 サイトの他の関連記事を参照してください。