などのタグを使用することで、HTML の本来の目的は、「これはタイトルです」、「これは段落です」、「これは表です」などの情報を表現することでした。 。同時に、ドキュメントのレイアウトは、書式設定タグを使用せずにブラウザーによって完成されます。 すべての主要なブラウザはカスケード スタイル シートをサポートしています
div と scan について理解しています
div は HTML タグ、ブロックです。 -level 要素 (行のみを表示) は、単独で使用すると意味がなく、主にページ レイアウトに使用されます。 html タグ、内部の Linked 要素 (行を表示)、単独で使用しても意味がありません。主に囲まれたコンテンツのスタイルを変更するために CSS と組み合わせて使用する必要があります。
##クラス セレクター
クラス セレクターを使用する前に、クラス セレクターがその役割を果たすことができるように世紀ドキュメントをマークする必要があります。 <p></p>
.name{text-align:center}
スタイルに関連付けられた「class」属性を含め、事前定義されたスタイルの 1 つを「name」値として指定することにより、ドキュメントの後半でこのタグの特定のケースを明示的に選択します。使用するスタイル <p></p>
nbsp;html>
<meta>
<title>类选择器</title>
<style>
.sheen{font-size: large;color: salmon}
</style>
<div>
Sie sprechen gut Deutsch.
</div>
<div>
Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div>
Nein,ich studiere.
</div>
<p></p>
<p></p>
##ID セレクター
ID セレクターはクラス セレクターに似ており、ID セレクターの前に # が付きます。記号 - チェッカーボード番号またはポンド記号とも呼ばれます。クラス セレクターと同様に、ID セレクターではワイルドカード セレクターを無視できます。 ID は一意の識別子であり、使用できるのは 1 回だけです
nbsp;html>
<meta>
<title>ID选择器</title>
<style>
#sheen{font-size: x-large;color: rosybrown}
#star{font-size: large;color: #c0ffff}
#clotho{font-size: xx-large;color: darkgreen}
</style>
<div>
Sheen:Sie sprechen gut Deutsch.
</div>
<div>
Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div>
Clotho:Nein,ich studiere.
</div>
#タグ セレクター
<p></p>
nbsp;html>
<meta>
<title>标签选择器</title>
<style>
div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center}
</style>
<h3>使用CSS</h3>
<div>
类选择器
</div>
<div>ID选择器</div>
<div>标签选择器</div>
リンク スタイルの設定
リンク スタイル (色、フォントファミリーなど) を設定できる CSS プロパティが多数あります。 、背景など)。 リンクの特別な点は、リンクの状態に基づいてスタイルを設定できることです。 リンクの 4 つの状態:
a:link - 通常の未訪問のリンク a:visited - ユーザーが訪問したリンク a:hover - マウス ポインタがリンクの上にあるa :active - リンクがクリックされた瞬間
CSS スタイルの紹介:
インライン紹介:
2)。内部導入: head タグ内の style タグに記述されたスタイル;
3)。CSS スタイルを 現在の HTML ファイルにリンクされています。
3 つの導入方法の優先順位: 近接原則//CSS文件
div {
width: 80%;
margin: 0 auto;
padding: 0;
}
ul {
list-style-type: none
}
li {
display: inline-block;
width: 20%;
background: snow;
color: #333333;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: large;
text-transform: capitalize;
}
li:hover {
background: green;
color: snow;
}
a:hover {
color: snow;
}
<!--HTML文件-->
nbsp;html>
<meta>
<title>Title</title>
<style>
li {
background: red;
}
</style>
<link>
<div>
<ul>
<li>
<a>HTML</a>
</li>
<li>CSS</li>
<li>JS</li>
<li>python</li>
</ul>
</div>
# ##############################