ホームページ  >  記事  >  ウェブフロントエンド  >  CSSプロパティにはどのような種類がありますか?

CSSプロパティにはどのような種類がありますか?

coldplay.xixi
coldplay.xixiオリジナル
2021-03-25 16:22:315918ブラウズ

css属性类型有:1、html标签;2、CSS文字属性;3、CSS符号属性;4、CSS背景样式;5、CSS表单运用;6、CSS边界样式。

CSSプロパティにはどのような種類がありますか?

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css属性类型有:

、html标签

  • e03b848252eb9375d56be284e690e873...bc5574f69a0cba105bc93bd3dc13c4ec文字格式化

  • dc6dce4a544fdca2df29d5ac0ea9906b......16b28748ea4df4d9c2150843fecfba68列ブロックコンテナ

  • フォントサイズの変更6204e19e0330f923081a4c16d4055266入力したい単語e6e38b3c62e8df885fe2e3986461aa63

  • フォントの色f3a4c98eff4f3c6be42a23567f866410入力したい単語e6e38b3c62e8df885fe2e3986461aa63

  • フォントが太字になりますa4b561c25d9afb9ac8dc4d70affff419入力したい単語3c9992cba9ab99b740e64d7a414e35b3入力したい単語72ac96585ae54b6ae11f849d2649d9e6

  • #フォントは下線付き88f336217b3880082bb52d49b5de60a5単語04e11139013d3ca73accef66348e2e58

  • 中央揃え構文0511ef35f46864c22a06c599220d1c6f内容94b3e26ee717c64999d7867364b1b4a3

  • ## を入力します。 # 左揃えの構文 a90b68a47b1014b68a00d00a43397863content94b3e26ee717c64999d7867364b1b4a3
  • 右揃えの構文211e86be24691be96dcf6c7a347bafabcontent94b3e26ee717c64999d7867364b1b4a3
  • フォント取り消し線2e44d2d3284d23d932e1fd85f3d4cf3a入力したい単語6cf51b1709551acbf4a696702deda05f
  • フォント設定86292dcc0fdcb9b12c4bc6cb3a0b0a4b単語入力したい単語e6e38b3c62e8df885fe2e3986461aa63
  • #タイプライターフォント78f983dbc27872ba42409adefe5049d9入力したい単語d98ca7951c814b9263d12f482df06c69
  • 上付き単語f974961356fd506fbfd4be7462c35da7入力したい単語2eb235f530502820017cce1685312d59
  • 下付き単語b96cac025db4031319c29e1eb68f19d6入力したい単語270ea406e83044e5b95e23270c35ff95
  • 横線7066f81884652dc8592b2fa2a7556360
  • 入力したい単語を改行で入力0c6dc11e160d3b678d68754cc175188a入力したい単語
  • ハイパーリンクaf3486402721f9a4af2bdecc632e94b4リンクの名前5db79b134e9f6b82c0b36e0489ee08ed
  • 2708a363f5a82850e49439deb62a5f07ここに表示したい単語を入力してください5db79b134e9f6b82c0b36e0489ee08edネットワークメールラベル
  • 画像d185cf1b0026a50a63dbf3fe908e9115
  • マーキー (ループ) da20671a8901b7ec6dc89b4a4ef7a174入力したい単語7204e33a7a23f6efcc788532e245c31b
  • 外部ファイルインポート形式タグ
CSS 外部インポート形式:

<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-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 軸で配置を繰り返します*/

背景の位置を指定します

background-position : 90% 90%; /*背景画像の x 軸と 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 フォーム アプリケーション:

  • テキスト ボックス5fff7ce80311830102de72c4ea305677
  • チェックボックス7c8b303c90602896aec34faeab849271
  • ボタンを選択80c39afa6bec41a2ce86a548793fcc4a
  • Multi-行テキスト ボックス4f244da2bb64ec4a1c7a6c40fc01152d40587128eee8df8f03d0b607fe983014
  • ドロップダウン メニュー8e391191ff9f00f3fcdce9103c5ea6055a07473c87748fb1bf73f23d45547ab8オプション 14afa15d3069109ac30911f04c56f3338
  • 5a07473c87748fb1bf73f23d45547ab8オプション 24afa15d3069109ac30911f04c56f333818bb6ffaf0152bbe49cd8a3620346341

8. CSS 境界線スタイル:

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 ビデオ チュートリアル

以上がCSSプロパティにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。