ホームページ ウェブフロントエンド CSSチュートリアル DIV CSS でよく使用される属性、パラメータ、説明 - エクスペリエンス交換

DIV CSS でよく使用される属性、パラメータ、説明 - エクスペリエンス交換

May 16, 2016 pm 12:04 PM
css div パラメータ 属性

一般クラス
overflow:hidden; レイヤーとテーブルの範囲が拡大しないように余分なコンテンツを自動的に非表示にします
!重要
スタイル ルールの適用優先​​度を指定します
テキスト クラスの色: #FF0000;テキストの色のフォント-family: "Arial"、"Helvetica"、"sans-serif"; font-size: 9px; フォント サイズ text-align: center; center (左は左を意味し、右は右を意味します) line-height: 28px; 高 (利用可能) 150% 値) font-style: イタリック; イタリック (斜め) font-weight: ボールド; サービスボールド (ボールド極太、400 ボールド値) font-variant: small-caps; small caps text- 変換: 大文字; text-装飾: 下線、上線、ラインスルー ブリンク; 下線、上線、取り消し線、ブリンク text-indent: 2em; テキスト インデント 2 フォント高さ (または 15px、つまり 15 ピクセル)
バックグラウンド クラス background-attachment: 固定; 固定位置(スクロール) 背景: #0066CC; 背景色 (透明) 背景: url(/image/more2.gif); 背景画像 background-repeat:repeat;repeat (repeat-x は水平方向に繰り返し、repeat-y は垂直方向に繰り返します) background-position : 中央上; 水平中央 垂直上 (左中央 水平中央 左垂直中央) 背景: url(/image/dtbg.gif) #FEFEFE
リピートなし
右下 (2px 5px);
背景画像、
背景色、画像は繰り返されません。背景画像は右下隅から始まります (画像は左から 2 ピクセル、上から 5 ピクセルです)
フレーム位置クラス
クリア: 両方。両側の浮遊物を拒否します (左は浮遊物を拒否し、右は浮遊物を拒否します)
フロート: 左; 浮遊物は左側に配置されます (右、最新の列車時刻表は右側にあります)
位置 :相対;相対位置、通常は上位フレームに最適なタイムテーブルを設定します
位置: 絶対; 絶対位置、上位フレームの設定と連動してこのレベル フレームの上部と左の値を設定します
上部: 5px; ページの絶対位置、またはフレームの上部を基準とした相対位置
Left: 10px; ページの絶対位置、フレームの左側を基準とした絶対位置、または相対位置
幅: 100px; 幅 100px
高さ: 200px; 高さ 200px (自動および 100% 値が利用可能))
マージン 上海電車時刻表: 10px 20px 10px 20px;
上下左右のマージン (値が同じ場合、 margin:10pxは省略可)
margin-topを別途指定: 10px; (margin-right, margin-bottom, margin-left)
Padding: 20px 10px 10px 20p;
上端と上端の間の距離境界線から右、下、左のコンテンツ (同じ値でパディング: 10px を省略できます)
個別に指定する場合はパディングを使用します top: 10px; (padding-right、padding-bottompadding-left)
境界線: #ccc 1px実線成都鉄道時刻表;
枠線4色、線幅、実線(一点鎖線、一点鎖線、二重二重線、尾根(尾根))
別途border-top: #ccc 1px Solid; border -right: #ccc 1px ソリッド
お待ちください
アイテムリストクラス list-style-position:Outside; Position 外側(内側)の場合 list-style-image: url(/yh/image/more04.gif); 箇条書き画像 Linke timetable list-style-type: disc; 箇条書きは点 (丸丸、四角)
拡張クラス カーソル: e-resize; マウス スタイル フィルター: Blur(Add=4 , Direction=8, Strength =4); フィルタ filter: FlipH; 水平反転 (FlipV gprs 通信料垂直反転)
リンクは別途設定してください
#bottool a:link{color:#fff}; 未訪問の色
#bottool a: Visited{color:#fff};訪問したカラーフローソフトウェア
#bottool a:hover{color:#ff0};マウスはリンク上にあります
定義項目は非常に多く、実際によく使われるのは次のとおりですカテゴリ: 幅と高さの値を指定します width, height; 背景を指定します: 背景; 位置を指定します: float、特に位置に上と左を組み合わせた位置を使用します; フレームのマージンを設定します: margin; コンテナの内フレーム距離を設定します : いくつかの項目をパディングします。このうち、オーバーフロー、クリア、!重要プログラムの定義項目がスタイル定義で解除されてしまいました。 1. 実験を繰り返した結果、この定義項目はコンテナの高さを超えるコンテンツのみを非表示にできますが、幅を超えるコンテンツを非表示にすることはできないため、overflow:hidden をキャンセルします。必要なのは、コンテナの幅を超えるコンテンツを自動的に非表示にできることですが、場合によっては、コンテンツの量に応じてコンテナの高さを拡張する必要があります。 2. 明確な定義を解除した理由は、実際のアプリケーションではコンテナ間の配置関係が正確に把握されており、フレームやコンテナの位置は float、position、top、left などを使用して正確に配置されているためです。 3. !重要
スタイルルールの適用優先​​度を指定します。これは主に IE と他のブラウザの表示効果を区別するために使用されますが、私の Web サイトでは表示効果を修正したいだけなので、優先順位はありません。
DIV CSSについては現在も研究中ですので、不適切な点があれば投稿して修正していただき、改善点があれば投稿して改善していただければと思います。 DIV CSS を使用して Web サイトをレイアウトするときに最も重要なことはレイアウトのアイデアだと思いますが、デザインプランが異なれば、伝統的なデザインと簡素化されたデザインは大きく異なります。私はフレームワークまたはコンテナーの普遍性に焦点を当て、FS4 のラベル スタイルと同様にいくつかのコンテナー スタイルを設計し、必要に応じてこのスタイルを呼び出して、特異性ではなく普遍性を実現します。今日はこれらについて説明しましょう。このレイアウト設計のアイデアについては後ほど具体的に説明します。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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)

要素のSCSS変数をオーバーライドすることにより、カスタムテーマを実装する方法は? 要素のSCSS変数をオーバーライドすることにより、カスタムテーマを実装する方法は? Apr 05, 2025 pm 01:45 PM

要素のSCSS変数をオーバーライドすることにより、カスタムテーマを実装する方法は?要素を使用...

Webページにローカルにインストールされている「Jingnan Mai Round Body」を使用して、ディスプレイの問題を解決する方法は? Webページにローカルにインストールされている「Jingnan Mai Round Body」を使用して、ディスプレイの問題を解決する方法は? Apr 05, 2025 pm 02:06 PM

Web開発のWebページにローカルにインストールされたフォントファイルを使用する方法ユーザーは、コンピューターにインストールされている特定のフォントを使用してネットワークを強化することをお勧めします...

CSSを使用して、左から右へのバックグラウンドカラートランジションの勾配効果を達成し、徐々に上から下に軽くなりますか? CSSを使用して、左から右へのバックグラウンドカラートランジションの勾配効果を達成し、徐々に上から下に軽くなりますか? Apr 05, 2025 pm 12:57 PM

CSSグラデーションカラー効果の実装:Webデザインの上から下へのグラデーションの背景色、検索ボックスで左から右に移行する方法、およびカルーセル画像の下の背景色...

CSSを介してサイズのシンボルをカスタマイズして、背景色に合わせてカスタマイズする方法は? CSSを介してサイズのシンボルをカスタマイズして、背景色に合わせてカスタマイズする方法は? Apr 05, 2025 pm 02:09 PM

背景色に合わせてCSSでサイズのシンボルをカスタマイズする方法は? Webデザインでは、ユーザーエクスペリエンスの詳細により、全体的な効果が大幅に改善される可能性があります。例えば...

固定幅レイアウトの下で、フォントサイズと文字幅との関係は何ですか? 固定幅レイアウトの下で、フォントサイズと文字幅との関係は何ですか? Apr 05, 2025 pm 12:51 PM

固定幅レイアウト、フォントサイズとレター幅との微妙な関係Webページを設計する際の微妙な関係では、固定幅のコンテナに並ぶ必要があることがよくあります...

CSSを使用したさまざまなフォントサイズとフォントのテキストボトムの完全なアラインメントを実現するにはどうすればよいですか? CSSを使用したさまざまなフォントサイズとフォントのテキストボトムの完全なアラインメントを実現するにはどうすればよいですか? Apr 05, 2025 pm 01:48 PM

CSSテキストの下部でのアライメントの問題:CSSスタイルのデザインのさまざまなフォントサイズとフォントの垂直方向の配置では、さまざまなフォントサイズと...

リング効果とマウスの迅速な情報を備えたフロントエンドの進行状況バーを実装する方法は? リング効果とマウスの迅速な情報を備えたフロントエンドの進行状況バーを実装する方法は? Apr 05, 2025 pm 01:54 PM

フロントエンドの進行状況バーの実装方法に関する議論フロントエンド開発、進行状況バーの実装は簡単に思えますが、デザインドラフトの正確な要件を満たすために、...

Angular Appで:ホバリングしてアイコンの色を変更する方法は? Angular Appで:ホバリングしてアイコンの色を変更する方法は? Apr 05, 2025 pm 02:15 PM

Angularアプリでは、マウスがその上にホバリングされたときにアイコンの色を変更する方法は?多くの開発者は、Angularを使用してアプリケーションを構築する際にニーズに遭遇します...

See all articles