ホームページ > 記事 > ウェブフロントエンド > CSSプロパティにはどのような種類がありますか?
css属性类型有:1、html标签;2、CSS文字属性;3、CSS符号属性;4、CSS背景样式;5、CSS表单运用;6、CSS边界样式。
本教程操作环境:windows7系统、css3版,DELL G3电脑。
css属性类型有:
一、html标签
e03b848252eb9375d56be284e690e873...bc5574f69a0cba105bc93bd3dc13c4ec文字格式化
dc6dce4a544fdca2df29d5ac0ea9906b......16b28748ea4df4d9c2150843fecfba68列ブロックコンテナ
フォントサイズの変更6204e19e0330f923081a4c16d4055266入力したい単語e6e38b3c62e8df885fe2e3986461aa63
フォントの色f3a4c98eff4f3c6be42a23567f866410入力したい単語e6e38b3c62e8df885fe2e3986461aa63
フォントが太字になりますa4b561c25d9afb9ac8dc4d70affff419入力したい単語3c9992cba9ab99b740e64d7a414e35b3入力したい単語72ac96585ae54b6ae11f849d2649d9e6
<link rel="stylesheet" type="text/css" href="/css.css" />直接参照:
<style type="text/css"> <!-- id{...} --> </style>javascript - 外部 .js 独立ファイルの読み込み:
<script type="text/javascript" src="/script.js"></script>
2. CSS テキスト属性:
color : #999999; /*テキストの色*/
font-family : 宋体,sans-serif; /*テキストのフォント*/font-size : 9pt; /*文字サイズ*/font-style:itelic; /*斜体文字*/font-variant:small-caps; /* 小さいフォント*/letter-spacing: 1pt; /*単語間の距離*/line-height: 200%; /*行の高さを設定*/font -weight :bold; /*太字のテキスト*/vertical-align:sub; /*下付き文字*/vertical-align:super; /*上付き文字*/ テキスト-decoration:line-through; /*取り消し線を追加*/text-decoration:overline; /*先頭行を追加*/text-decoration:underline; /*下線を追加*/ 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 属性vertical-align:top; /*垂直上向きの配置*/vertical-align:bottom; / *配置垂直下方向*/vertical-align:middle; /*垂直方向の中央に配置*/vertical-align:text-top; /*テキストを垂直方向の上方向に配置*/vertical-align:text-bottom; /*テキストを垂直方向に下に揃えます*/ 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; /*黒四角記号*/
list-style-image:url( /dot.gif); /*図記号*/
list-style-position:outside; /*凸行*/
list-style-position :inside; /*インデント* /
4. CSS 背景スタイル:
background-color:#F5E2EC; /*背景色 */
background:transparent; /*遠近感のある背景*/background-position : 90% 90%; /*背景画像の x 軸と y 軸の位置*/ 背景位置 : 上; /*上に整列*/background-image : url(/image/bg.gif); /*背景画像*/
background-attachment :fixed; /*透かし固定背景*/
background-repeat :repeat; /*配置の繰り返し - Web ページのデフォルト*/
background-repeat : no-repeat; / *配置を繰り返しません*/
background-repeat :repeat-x; /*x 軸で配置を繰り返します*/
background-repeat :repeat-y; /*y 軸で配置を繰り返します*/
背景の位置を指定します
背景位置 : 底; /*下に整列*/
背景位置 : 左; /*整列left*/
background-position : right; /*右揃え*/
background-position : center; /*中央揃え*/
5、CSS接続プロパティ:
a /*すべてのハイパーリンク*/
a:link /*ハイパーリンクのテキスト形式*/
a:visited /*表示されたリンクのテキスト形式*/
a:active /*押されたリンクの形式*/
a:hover /*マウスでリンク*/
マウス カーソルのスタイル:
リンク指カーソル:手
クロスボディカーソル:crosshair
下矢印カーソル:s-resize
十字矢印カーソル:move
矢印へ右カーソル:move
疑問符の追加 カーソル:help
左カーソルへの矢印:w-resize
上カーソルへの矢印:n-resize
矢印は右上のカーソルを指します:ne-resize
矢印は左上のカーソルを指します:nw-resize
Text I-type カーソル: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 ソリッド #6699cc; /* 左の境界線*/
border-right : 1px Solid #6699cc; /*右枠線*/
上記は推奨の書き方ですが、従来の方法でも構いません。 follow:
border-top-color : #369 /*上の境界線の上の色を設定します*/
border-top-width:1px /*上の幅を設定します上の境界線の*/
border-top-style :solid/*上の境界線のスタイルを設定します*/
その他の境界線のスタイル
solid /*実線枠*/
点線 /*点線枠*/
double /*二重枠*/
溝 /*立体凸枠*/
ridge /*三次元レリーフフレーム*/
inset /*凹型フレーム*/
outset /*凸型フレーム*/
# # 7. CSS フォーム アプリケーション:
5a07473c87748fb1bf73f23d45547ab8オプション 24afa15d3069109ac30911f04c56f333818bb6ffaf0152bbe49cd8a3620346341
margin-top:10px; /*上境界線*/
margin-right:10px; /*右境界線の値*/
margin-bottom:10px; /*下マージン値*/
margin-left:10px; /*左マージン値*/
9 、CSS 境界線を空白にする:
padding-top:10px; /*上部境界線を空白のままにしておく*/
padding-right:10px; /*右側を空白のままにするborder* /padding-bottom:10px; /*下の境界線を空白のままにしておく*/padding-left:10px; /*左の境界線を空白のままにする*/関連チュートリアルの推奨事項:
以上がCSSプロパティにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。