ホームページ > 記事 > ウェブフロントエンド > 2021年CSSよく使われるコード集
一般的に使用される CSS コードの完全なリスト
html CSS は Web ページのレイアウトに非常に便利で、大幅な削減も可能です不要なコードの。
#1. テキスト設定 #1. font-size: フォント サイズ パラメータ
2. font-style: フォント形式
3. font-weight: フォントの太さ
4. カラー属性
カラー: パラメータ
ウェブセーフカラーを使用してください
2.スーパーリンク設定text-decoration: パラメータ
の主な目的は、ブラウザがテキスト リンクを表示するときに下線を変更することです。
パラメータ値の範囲:
underline: テキストに下線を付ける
overline: テキストに下線を付ける
line-through: テキストに下線を付ける 取り消し線
blink: テキストを点滅させます
none: 上記の効果を表示しません
3. 背景1.背景色
背景色: パラメータ
2.背景画像背景画像: url(URL)
URL は背景画像の保存パスです。none はなしを意味します。
3. 背景画像の繰り返しbackground-repeat: パラメータ
パラメータ値の範囲:
no-repeat: 繰り返しなしタイル背景画像
repeat-x: 画像を水平方向のみにタイル化します
repeat-y: 画像を垂直方向のみにタイル化します
If If背景画像の繰り返し属性が指定されていない場合、ブラウザのデフォルトでは、背景画像が水平および垂直に並べて表示されます。
4. 背景画像の固定
背景画像の固定は、Web ページのスクロールに合わせて背景画像もスクロールするかどうかを制御します。背景画像固定属性を設定しない場合、ブラウザのデフォルトの背景画像は Web ページのスクロールに合わせてスクロールします。派手すぎる背景画像がスクロール時に閲覧者の注意をそらさないようにするために、通常、背景画像は固定に設定されます。
background-attachment: パラメータ
パラメータ値の範囲:
fix: Web ページがスクロールされると、背景画像はブラウザ ウィンドウに対して固定されます。
#scroll: Web ページがスクロールされると、背景画像はブラウザ ウィンドウに対して相対的にスクロールされます4. ブロック
1. 単語の間隔
word-spacing: 間隔距離
2. 文字の間隔
letter-spacing: 文字間隔
3. テキストの配置
text-align: パラメータ
パラメータ値: left: 左揃え right: 右揃え center: 中央揃え justify: 相対的な左右揃え4. 垂直方向の配置
vertical-align: パラメータ
top: 上部の配置bottom: 下部の配置text -top : 相対的なテキストの上揃えtext-bottom: 相対的なテキストの下揃えbaseline: ベースラインの揃えmiddle: 中央揃えsub: 表示 を下付き文字の形式で表示します。を上付き文字の形式で表示します。 5. テキストのインデント
text-indent: インデントの距離
12px は、テキスト距離6
、スペース white-space: パラメータ
normal Normal に相当します。 事前予約済み行折り返しなしのnowrap7. 表示スタイル
display: パラメータ
パラメータ値の範囲: block: ブロックレベルの要素、オブジェクトの前後に改行あり inline: オブジェクトの前後に改行なし list-item: lineオブジェクトの前後に改行、箇条書きを追加#none: 表示なし
5. Box1、高さ height 2、幅 width
3. パディング内側マージン
4. マージン外側マージン
5. float: ブロック レベルの要素を行内に配置できます。水平メニュー。
6. クリアクリアフロート
6. ボーダー1. スタイル
ボーダースタイルパラメータ 境界線スタイルのパラメータ:
none: 境界線なし
dotted: 境界線が点線
dashed: 境界線が長短線
solid: 境界線は実線です。
double: 境界線は二重線です
2, width境界線幅パラメータ
3. Color境界線の色パラメータ
7. Listlist-style-type リストstyleブラウザごとにリストの文字が異なる場合があり、それが 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- サイズ変更" 左上の矢印型
style="cursor:w-resize" 左矢印形状
style="cursor:s-resize" 下矢印形状
style="cursor:se-resize" 右下矢印の形状
style="cursor:sw-resize" 左下の矢印の形状
お読みいただきありがとうございます。多くのメリットが得られることを願っています。
この記事は、https://blog.csdn.net/xijiuba/article/details/78926554
から転載されたものです。推奨チュートリアル: 「CSS チュートリアル 」
以上が2021年CSSよく使われるコード集の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。