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

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

coldplay.xixi
リリース: 2023-01-03 09:31:18
オリジナル
5962 人が閲覧しました

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

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

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

css属性类型有:

、html标签

  • ...
    文字格式化

  • ......
    列ブロックコンテナ

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

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

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

  • #フォントは斜体です入力したい単語

  • #フォントは下線付き単語

  • 中央揃え構文

    内容

  • ## を入力します。 # 左揃えの構文

    content

  • 右揃えの構文

    content

  • フォント取り消し線入力したい単語
  • フォント設定単語入力したい単語
  • #タイプライターフォント入力したい単語
  • 上付き単語< sup>入力したい単語
  • 下付き単語入力したい単語
  • 横線
  • 入力したい単語を改行で入力
    入力したい単語
  • ハイパーリンクリンクの名前
  • ここに表示したい単語を入力してくださいネットワークメールラベル
  • 画像
  • マーキー (ループ) 入力したい単語
  • 外部ファイルインポート形式タグ
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 フォーム アプリケーション:

  • テキスト ボックス

  • ##ボタン< input type="submit" value="submit" name="B1">
  • チェックボックス
  • ボタンを選択
  • Multi-行テキスト ボックス
  • ドロップダウン メニュー

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート