CSS+DIV Web ページのスタイルとレイアウトに精通している CSS_html/css_WEB-ITnose
CSS は英語ではカスケード スタイル シート、中国語ではカスケード スタイル シートと呼ばれ、Web コンテンツからスタイル情報を分離するために使用されるマークアップ言語です。ページレイアウト方法。従来のテーブルレイアウトによる配置方法とは異なり、Webページのコンテンツとプレゼンテーションの分離を実現できます。 DIV+CSS の組み合わせに関しては、XHTML から始める必要があります。 XHTML は、HTML (標準ユニバーサル マークアップ言語のサブセット) に基づいて最適化および改良された新しい言語であり、XML アプリケーションと強力なデータ変換機能に基づいて、将来のネットワーク アプリケーションのより多くのニーズに適応することを目的としています。 「DIV+CSS」という名前は実際には間違っており、標準の名前は XHTML+CSS である必要があります。 DIV と Table はどちらも XHTML または HTML 言語のマークであり、CSS は単なる表現形式だからです。
次に、エディターは、最も基本的な CSS.DIV Web ページのスタイルとレイアウトから始めて、ゆっくりと紹介し、少しずつ深く掘り下げてから、例を使用してゆっくりと分析して、すべての人に役立つことを願っています。通常、CSSを学ぶときは、他のWebサイトを参考にしてCSSを書くように努めるべきです。たとえば、Baidu や Google など、他の Web サイトの CSS コードを学習すると、ページ デザインの異なる感覚をすぐに得ることができ、簡単に始めることができます。私たちはこれを「巨人の肩の上に立つ」と呼んでいます。今日は、エディターが CSS の基本概念と CSS の基本構文を簡単に紹介します。まず、図を見てみましょう。図のコンテキストによって、CSS の基本的な知識が徐々に減っていきます。
CSS の初期探索
コンセプト: CSS (Cascading Style Sheet) は、中国語にカスケード スタイル シートとして翻訳され、Web ページのスタイルを制御し、Web ページのコンテンツからスタイル情報を分離するために使用されるマークアップ言語です。 。
CSS を使用してページを制御する: CSS を使用してページを制御するには、インライン スタイル、インライン スタイル、リンク スタイル、インポートされたスタイルの 4 つの方法があります。少し大きな Web ページの場合は、HTML と CSS を分離することで後のメンテナンスが容易になり、明確であるため、リンク スタイルを使用します。
基本構文CSS セレクター、つまり CSS スタイルを制御するために選択する HTML オブジェクトには、タグ セレクター、カテゴリ セレクター、ID セレクターの 3 つのタイプがあります。次に、エディターがこれら 3 つのセレクターについて説明します。詳細に。 マークセレクター:
コード例とその表示効果を見てみましょう:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Untitled Document</title><style type="text/css">h1{color:#0000FF;font-size:40px;}</style></head><body><h1>CSS选择器</h1><h1>CSS选择器</h1></body></html>効果は次のとおりです:
カテゴリセレクター:
カテゴリセレクターについての話の続き: .class とよく言います。
上 上記のマーク セレクターと比較すると、H1 が .class になっていることが簡単にわかります。変更はわかりません。次に、それをコードに適用する方法を見てみましょう。
<html><head><title>class选择器</title><style type="text/css"><!--.one{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */}.two{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */}.three{ color:cyan; /* 青色 */ font-size:22px; /* 文字大小 */}--></style> </head><body> <p class="one">class选择器1</p> <p class="two">class选择器2</p> <p class="three">class选择器3</p> <h3 class="two">h3同样适用</h3></body></html>
この h3 は .two と同じ効果を持つことがわかりますが、フォントが異なります。つまり、h3 のデフォルト フォントとクラスの違いです。クラスを使用する利点は、ユーザーが完全にカスタマイズできることと、このクラスを繰り返し使用できることです。これが、p マークと h3 マークで示されています。
ID セレクター
例のコードと表示効果を見てみましょう:
<html><head><title>ID选择器</title><style type="text/css"><!--#one{ font-weight:bold; /* 粗体 */}#two{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */}--></style> </head><body> <p id="one">ID选择器1</p> <p id="two">ID选择器2</p> <p id="two">ID选择器3</p> <p id="one two">ID选择器3</p></body></html>
CSS 宣言
CSS 宣言には、集合宣言、グローバル宣言、ネスト宣言の 3 種類があります。次の 2 つの例:
<html><head><title>集体声明</title><style type="text/css"><!--h1, h2, h3, h4, h5, p{ /* 集体声明 */ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */}h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */}--></style> </head><body> <h1>集体声明h1</h1> <h2 class="special">集体声明h2</h2> <h3>集体声明h3</h3> <h4>集体声明h4</h4> <h5>集体声明h5</h5> <p>集体声明p1</p> <p class="special">集体声明p2</p> <p id="one">集体声明p3</p></body></html>
次の例はネストされたステートメントであり、制御したい領域を非常に正確に見つけるのに役立ちます:
<html><head><title>CSS选择器的嵌套声明</title><style type="text/css"><!--p b{ /* 嵌套声明 */ color:maroon; /* 颜色 */ text-decoration:underline; /* 下划线 */}--></style> </head><body> <p>嵌套使<b>用CSS</b>标记的方法</p> 嵌套之外的<b>标记</b>不生效</body></html>
CSS 継承
をクリックして詳細を確認してください。例のコードとその操作の効果を見てみましょう:
<html><head> <title>父子关系</title> <base target="_blank"><style><!--h1{ color:red; /* 颜色 */ text-decoration:underline; /* 下划线 */}h1 em{ /* 嵌套选择器 */ color:#004400; /* 颜色 */ font-size:40px; /* 字体大小 */}--></style> </head><body> <h1>祖国的首都<em>北京</em></h1> <p>欢迎来到祖国的首都<em>北京</em>，这里是全国<strong>政治、<a href="economic.html"><em>经济</em></a>、文化</strong>的中心</p> <ul> <li>在这里，你可以： <ul> <li>感受大自然的美丽</li> <li>体验生活的节奏</li> <li>领略首都的激情与活力</li> </ul> </li> <li>你还可以： <ol> <li>去八达岭爬长城</li> <li>去香山看红叶</li> <li>去王府井逛夜市</li> </ol> </li> </ul> <p>如果您有任何问题，欢迎<a href="contactus">联系我们</a></p></body></html>
編集者からのメッセージ: このブログ投稿では、編集者が主に CSS の基礎知識を紹介します。一般に、その紹介は 2 つの部分に分かれています。1 つは CSS の予備的な説明で、もう 1 つは CSS の基本的な構文です。 CSS。CSS の予備調査には、概念と CSS を使用したページの制御が含まれます。CSS の基本構文には、CSS セレクター、CSS 宣言、CSS 継承の 3 つの側面が含まれます。 CSS を使用すると、インターフェイスが即座に生き生きとして動き、インターネットの世界がよりカラフルで無限に美しくなります。BS の学習はまだ続きます...
。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1385
52
84
11
28
99
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
