CSS共通タグ

よく使われるCSSタグ

1 つの CSS テキスト プロパティ

色 : #999999; /*テキストの色*/

font-family: 宋体,sans-serif; /*テキストフォント*/

フォントサイズ : /*テキストサイズ*/

font-style:itelic; /*斜体テキスト*/

font-variant:small-caps; /*小さいフォント*/

文字間隔: 1pt; /*文字間のスペース*/

line-height : 200%; /*行の高さを設定*/

font-weight:bold /*太字のテキスト*/

vertical-align:sub; /*添え字*/

vertical-align:super; /*上付き文字*/

text-decoration:line-through; /*取り消し線を追加*/

text-decoration: overline; /*先頭行を追加*/

テキスト装飾:下線; /*下線*/

text-decoration:none; /*装飾線なし*/

text-transform: Capitalize; /*最初の単語を大文字にします*/

text-transform: uppercase; /*英語の大文字*/

text-transform : 小文字; /*英語の小文字*/

text-align:right; /*テキストを右揃え*/

text-align:left; /*テキストを左揃え*/

text-align:center; /*テキストを中央に揃えます*/

text-align:justify /*テキストの配置*/

vertical-align:top; /*要素の行内で最大の要素の上部を垂直に揃えます/

vertical-align:bottom; /*要素の行内の最大の要素の下部を垂直方向に揃えます*/

vertical-align:middle; /*垂直方向の中央揃え*/

vertical-align:text-top; /*親要素の上部を垂直に揃えます*/

vertical-align:text-bottom; /*親要素の下端を垂直に揃えます*/

top、bottom、text-top、text-bottom の違い:

2. CSS 境界線を空白

padding-top:10px; /*上の境界線は空白のままにしておきます*/

padding-right:10px; /*右側の境界線を空白のままにしておきます*/

padding-bottom:10px; /*下の境界線は空白のままにしておきます*/

padding-left:10px; /*左の境界線は空白のままにしておきます

3. CSS シンボルのプロパティ

list-style-type:none; /*マークなし*/

list-style-type:10進数; /*アラビア数字マーク*/

list-style-type: lower-roman; /*i、ii、iii、iv、v などの小文字のローマ数字*/

list-style-type:upper-roman; /*I、II、III、IV、V などの大文字のローマ数字*/

list-style-type: lower-alpha; /*英小文字マーク*/

list-style-type:upper-alpha; /*大文字の英字マーク*/

list-style-type:disc; /*黒丸マーク*/

list-style-type:circle; /*白丸マーク*/

list-style-type:square; /*実線の四角マーク*/

list-style-image:url(/dot.gif) /*カスタマイズされた画像タグ*/

list-style-position: 外側; /*凸行*/

リストスタイルの位置:内側; /*インデント*/

4. CSS 背景スタイル

/*背景色*/

background:transparent /*遠近感のある背景*/

背景画像: url(/image/bg.gif) /*背景画像*/

background-attachment : 固定; /*ウォーターマーク固定背景*/

background-repeat :repeat; /*リピート配置-Webページのデフォルト*/

background-repeat : no-repeat; /*繰り返し配置なし*/

background-repeat :repeat-x; /*x 軸で繰り返します*/

background-repeat :repeat-y; /*y 軸で繰り返します*/

背景の位置を指定する

background-position : x% y%; /*背景画像の x 軸と y 軸の位置*/

background-position : top; /*上に整列*/

background-position : butt; /*下に揃えます*/

background-position : left; /*左揃え*/

background-position : right /*右揃え*/

background-position : center; /*中央揃え*/

5. CSS 接続プロパティ

a /*すべてのハイパーリンク*/

a:link /*ハイパーリンクのテキスト形式*/

a:visited /*訪問済みリンクのテキスト形式*/

a:active /*押されたリンクの形式*/

a:hover /*マウスでリンク*/

マウスカーソルのスタイル:

禁止されたカーソル: 許可されていません;

リンク指カーソル: ポインタ

カーソル:十字線

ヘルプカーソル (疑問符が表示されます) カーソル:ヘルプ

十字矢印カーソル:移動

テキスト T 字型カーソル:テキスト

バックグラウンドプログラム実行型カーソル:進行状況

ファンネルカーソル:待機

右向き矢印または右カーソル:w-resize またはカーソル:e-resize

上または下を指す矢印 カーソル:n-resize または カーソル:s-resize

/*これら 4 つの値は、それぞれ南東、北西、北西の英語文字の最初の文字に対応します*/

矢印は右上または右下のcursor:ne-resizeまたはcursor:se-resizeを指します

矢印は左上または左下のcursor:nw-resizeまたはcursor:sw-resizeを指します

/*これら4つの値の最初の文字は北または南の最初の文字です*/

カスタム カーソル p {cursor:url("カーソル ファイル名.ico"),text;}

/*カスタマイズされたカーソルは非互換性の問題が発生しやすいため、デフォルトのカーソル タイプを追加する必要があります*/

6. CSSフレームのリスト

border-top : 1px ソリッド #6699cc /*上の境界線*/

;

border-bottom : 1px ソリッド #6699cc /*下の境界線*/

;

border-left : 1px ソリッド #6699cc /*左ボーダー*/

border-right : 1px ソリッド #6699cc /*右ボーダー*/

上記は推奨の書き方ですが、以下のように従来の書き方も可能です。

border-top-color : #369 /*境界線の上部の色を設定します*/

border-top-width:1px /*上枠の上の幅を設定*/

border-top-style:solid/*境界線の上部のスタイルを設定します*/

その他のボーダースタイル

ソリッド /*ソリッドフレーム*/

点線 /*点線ボックス*/

ダブル /*ダブルフレーム*/

溝/*立体内凸フレーム*/

ridge /*立体レリーフフレーム*/

インセット /*凹型フレーム*/

アウトセット /*凸フレーム*/

7.CSSボーダースタイル

margin-top:10px; /*上枠*/

margin-right:10px; /*右マージン値*/

margin-bottom:10px; /*下側の境界線の値*/

margin-left:10px; /*左マージンの値*/

8. よく使われるCSSの組み合わせ

Mycss1 {表示: ブロック; マージン: 0px; ホワイトスパイ: プレラップ; #ddd; 50; フォント-サイズ:30px;}