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 の学習はまだ続きます...
。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
