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

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

Mar 25, 2021 pm 04:22 PM
cssプロパティ

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

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について Angular コンポーネントとその表示プロパティ: 非ブロックのデフォルト値について Mar 15, 2024 pm 04:51 PM

Angular フレームワークのコンポーネントのデフォルトの表示動作は、ブロックレベルの要素ではありません。この設計の選択により、コンポーネント スタイルのカプセル化が促進され、開発者が各コンポーネントの表示方法を意識的に定義することが促進されます。 CSS プロパティの表示を明示的に設定することで、Angular コンポーネントの表示を完全に制御して、目的のレイアウトと応答性を実現できます。

動的な背景効果の作成: CSS プロパティの柔軟な使用 動的な背景効果の作成: CSS プロパティの柔軟な使用 Nov 18, 2023 pm 03:56 PM

動的な背景効果を作成する: Web デザインにおける CSS 属性の柔軟な使用、背景効果は非常に重要な部分であり、Web サイトに鮮やかな雰囲気を追加し、ユーザー エクスペリエンスを向上させることができます。 Web ページのスタイル デザインの主要な言語として、CSS は柔軟性と多様性を最大限に発揮し、さまざまな動的な背景効果を作成するための豊富な属性とテクニックを提供します。この記事では、特定のコード例を使用して、いくつかの一般的な CSS プロパティを柔軟に使用して、素晴らしい動的な背景効果を実現する方法を紹介します。 1. グラデーション背景 グラデーション背景は Web ページに魅力を加え、Web ページをより魅力的にします。

CSS での溝は何を意味しますか CSS での溝は何を意味しますか Apr 28, 2024 pm 04:12 PM

CSS では、groove は溝のような効果を生み出す境界線のスタイルを表します。具体的なアプリケーションは次のとおりです。 CSS プロパティの border-style:groove を使用します。溝の形をした境界線には、凹状の内側のエッジ、盛り上がった外側のエッジ、および影の効果があります。

HTMLの点線枠を設定する方法 HTMLの点線枠を設定する方法 Apr 05, 2024 am 09:36 AM

HTML では、CSS border-style 属性を使用して境界線を点線に設定できます。点線の境界線を設定する要素を決定します。たとえば、段落を表すには p 要素を使用します。点線のスタイルを設定するには、border-style 属性を使用します。たとえば、dotted は点線を表し、dashed は短い破線を表します。 border-width、border-color、border-position などの他の境界プロパティを設定して、境界の幅、色、位置を制御します。

Lauiuiで背景画像を設定する方法 Lauiuiで背景画像を設定する方法 Apr 26, 2024 am 02:45 AM

layui で背景画像を設定するには 2 つの方法があります。CSS スタイルを使用する: body {background-image: url("path/to/image.jpg") }layui API を使用する:layui.use('element', function() ) { element.addStyle('.layui-body{background-image: url("path/to/image.jpg");}') });

CSS3 プロパティを使用して Web ページのテキストの折り返し効果を実現するにはどうすればよいですか? CSS3 プロパティを使用して Web ページのテキストの折り返し効果を実現するにはどうすればよいですか? Sep 08, 2023 am 10:30 AM

CSS3 プロパティを使用して Web ページのテキストの折り返し効果を実現するにはどうすればよいですか?最新の Web デザインでは、テキストの折り返し効果は一般的で興味深いプレゼンテーション方法です。 CSS3 プロパティを使用すると、Web テキストの折り返し効果を簡単に実現できます。この記事では、一般的に使用されるいくつかの CSS3 プロパティと、テキストの折り返し効果を実現する際のそのアプリケーションを紹介します。 1. Float 属性 float 属性は、CSS で要素の float を設定するために使用される属性です。クリア属性と組み合わせると、画像の周囲にテキストが回り込むような効果を得ることができます。以下に例を示します:&

WordPress Webサイトのヘッダーがずれている問題を解決するにはどうすればよいですか? WordPress Webサイトのヘッダーがずれている問題を解決するにはどうすればよいですか? Mar 01, 2024 am 09:54 AM

WordPress Webサイトのヘッダーがずれている問題を解決するにはどうすればよいですか? WordPress サイトでヘッドの位置がずれている問題が発生すると、混乱してイライラすることがあります。この問題は、CSS スタイルのエラー、JavaScript の競合、プラグインの問題など、さまざまな理由によって発生する可能性があります。この記事では、WordPress のヘッダーのずれの問題を解決する方法について説明し、具体的なコード例を示します。 1. CSS スタイルを確認する まず、テーマの CSS スタイル シートにエラーや競合がないか確認します。

クールなスクロール効果を実現するための CSS プロパティ テクニック クールなスクロール効果を実現するための CSS プロパティ テクニック Nov 18, 2023 am 09:08 AM

クールなスクロール効果を実現する CSS プロパティ テクニックには、特定のコード サンプルが必要です。CSS は Web デザインに不可欠な部分です。CSS を通じてさまざまな効果を実現し、Web ページのインタラクティブなエクスペリエンスを向上させることができます。その中でも、スクロール効果は非常に一般的で非常にクールな効果であり、滑らかなアニメーション効果で Web ページ要素を指定した位置までスクロールさせることができます。この記事では、クールなスクロール効果を実現するための CSS プロパティ テクニックをいくつか紹介し、具体的なコード例を示します。 1. CSS プロパティのscroll-behaviorを使用してスムーズなスクロールを実現します。

See all articles