CSS属性コードまとめ(1)_html/css_WEB-ITnose

1 つの CSS テキスト属性:

color : /*Text color*/

font-family : /*Text font*/

font-size : /*Text size + -height : 200%; /*行の高さを設定*/

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

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

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

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

text-decoration:underline; text-decoration:none; /*リンクの下線を削除*/

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

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

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

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

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

text-align:center ; /*テキストは中央に配置されます*/
text-align:justify; /*テキストは分散して配置されます*/
vertical-align property

vertical-align:top; /*垂直方向に配置します*/

vertical-align:bottom ; /*垂直方向を下に揃えます*/

vertical-align:middle; /*垂直方向を中央に揃えます*/
vertical-align:text-top; /*テキストを垂直方向に上に揃えます*/

vertical-align:text-bottom; /*テキストを垂直方向に下に配置します*/

2. CSS 境界線を空白のままにします*/

padding-right:10px;空白の右境界線*/

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

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

3. CSS シンボル属性:

list-style -type:none; /* 番号なし*/

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

list-style-type: lower-roman; /* 小文字のローマ数字*/

list-style -type:upper-roman ; /*大文字のローマ数字*/

list-style-type: lower-alpha; /*小文字の英字*/

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

list-style-type:disc; /*実線の円のシンボル*/

list-style-type:circle; /*中空の円のシンボル*/

list-style-type:square;シンボル*/

リストスタイルイメージ:url(/dot.gif); /*ピクチャスタイルシンボル*/

リストスタイル位置: 外側; /*凸行*/
リストスタイル位置:inside; /* インデント*/

4. CSS 背景スタイル:

background-color:#F5E2EC; /* 背景色*/

background-image: URL (/image/ bg.gif); /*背景画像*/

background-attachment : 固定; /*透かし固定背景*/

background-repeat : /*繰り返し配置 - Web ページのデフォルト*/

background-repeat : no-repeat; /*リピート配置なし*/

background-repeat :repeat-x; /*x 軸にリピート配置*/

background-repeat :repeat-y; y 軸上*/

背景の位置を指定します

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

background-position : /*上揃え*/

background-position : butt; / *下揃え*/

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

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

5. CSS 接続プロパティ:

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

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

a:visited /*表示されたリンクのテキスト形式*/

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

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

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

リンク指 CURSOR: hand

十字体カーソル:crosshair

Arrow下向きカーソル: s-resize

十字矢印カーソル:move

右向き矢印カーソル:move

プラス疑問符カーソル:help

左向き矢印カーソル:w-resize

上向き矢印カーソル:n-サイズ変更

上向き矢印 右上カーソル:ne-resize

左上向き矢印カーソル:nw-resize

テキストI型カーソル:text

右斜め下矢印カーソル:se-resize

左斜め下矢印カーソル:sw-resize

ファンネルカーソル: wait

カーソルパターン (IE6) p {cursor:url("カーソルファイル名.cur"),text;}

6. CSS ボーダーリスト:

border-top: 1px 実線 #6699cc; /*上枠線*/

border-bottom : 1px 実線 #6699cc; /*下枠線*/

border-left : 1px Solid #6699cc; /*左境界線*/

border-right : 1px Solid #6699cc; /*右境界線*/

上記は推奨の書き方ですが、従来の方法は以下の通りです:

border-top-color : #369 /*ボーダー上部の色を設定*/

border-top-width :1px /*ボーダー上部の幅を設定*/

border-top- style : Solid/ *トップフレームのトップスタイルを設定*/

その他のフレームスタイル

solid /*solid Frame*/

dotted /*dotted Frame*/

double /*double Frame*/

groove /*三次元内側凸フレーム*/

リッジ /*三次元レリーフフレーム*/

inset /*凹フレーム*/

outset /*凸フレーム*/

7. CSSフォーム適用:

テキスト正方形

ボタン

チェックボックス

選択ボタン

複数行テキストボックス

ドロップダウンメニューオプション 1 オプション 2

8. CSS 境界線スタイル:

margin-top:10px; /*上境界線*/

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

margin-bottom:10px; /*下マージン値*/

margin-left:10px;