HTML+CSS基礎知識簡易版

1. HTMLの概要

HTML: ハイパーテキストマークアップ言語。実際には Web ページの開発に使用される言語です。
CSS: カスケードスタイルシート。Web ページのレンダリング、Web ページの美化、Web ページの作成に使用できます。

1. HTML の概要

HTML: ハイパーテキストマークアップ言語

ハイパーテキスト: 単なるテキストではないハイパーテキスト。HTML には
テキストだけでなく、画像、オーディオ、ビデオなどのさまざまな形式のファイルも含めることができます。
タグ: タグ、要素。<div>、<img>、<h1>、</h1>などの山かっこで囲まれた一連のコンテンツを指します</div>。
実際、これは Web ページの開発に使用される言語です。

HTMLについて:

HTML で開発された Web ドキュメントには、通常、接尾辞 .htm または .html が付いています。
HTML で開発された Web ドキュメントは、ブラウザーを通じて開いて表示できます (ブラウザーは HTML パーサーです)。
HTML は本質的にはドキュメントです。

2. HTMLの構造

<!-- 用于声明当前文档是一个html格式的网页,并且版本是html5.0版本 -->
<!DOCTYPE html>
<!-- 根标签,所有的HTML内容都应该放在根标签内部 -->
<html>
	<!-- 头部分,用于存放网页的基本属性信息(例如网页标题,网页编码,引入的css样式,js文件等) -->
	<head>
		<!-- 通知浏览器当前使用的编码,若不指定可能会出现乱码现象 -->
		<meta charset="utf-8">
		<!-- 用于指定网页标签的标题 -->
		<title>我的第一个测试网页</title>
	</head>
	<!-- 体部分,用于存放网页的可视化内容 -->
	<body>
		<!-- h1、h2等用于指定网页内容的标题 -->
		<h1 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h1>
		<h2 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h2>
		<h3 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h3>
		<h4 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h4>
		<h5 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h5>
		<h6 align="center" style="color: crimson;">欲戴王冠,必承其重<br>One who wants to wear the crown,bears the crown</h6>
		<!-- 生成一条水平线，边框为5px实线红色 -->
		<hr style="border: 5px solid red;"/>
		
	</body>
</html>

3. HTML 構文

<head>ラベル、マーク、要素: 、<body>、<h1>、など、山括弧 (< <img>> ) で囲まれたコンテンツのグループです。<a>タグは開始タグ () と終了タグ () で構成され、開始タグと終了タグの間に他のコンテンツを含めることができます。
自己終了タグ: 一部のタグは内部にコンテンツを書き込む必要がなく、通常は自己終了タグとして記述できます。例:
<br/>、<hr/>、<input/>、<img/>など<meta/>。
属性:
<input type="text" id="username" class="xxx"/>
- 属性はラベル上で宣言する必要があり、独立して存在することはできません
- 複数の属性を宣言でき、複数の属性をスペースで区切ることができます。
- 属性値は二重引用符または一重引用符で囲むことができます。
  <input type="text" id="username"/>
  <input type='text' id='username'/>
  <img src="xx" id="xx" name="xx"/>
  <img src='xx' id='xx' name='xx'/>
コメント形式:
コメント機能: (1) コードに説明を追加します。 (2) 一時的に実行する必要のないコードをコメントします。
スペースと改行
HTML では、複数の連続する空白文字 (スペース/改行/タブ) が 1 つのスペースに解析されて表示されます。
- 複数のスペースを実装したい場合は、 または&emsp;
- 行を折り返す場合は、<br/>ラベルを使用できます。

2. HTMLタグ

1.画像タグ

img タグは、Web ページに画像を挿入できます。例:
その中で<img src="img/meinv01.jpg" width="40%"/>
、 src 属性: 画像のパス (相対パス、ネットワークパス) を指すために使用されます。

width 属性: 画像の幅を指定します。
height 属性: 画像の高さを指定します

パスの問題について:

ドライブレター付きの絶対パスを記述することは、将来リリース環境を変更した場合にこのパスが間違ってしまう可能性が高いため、推奨しません。
<img src="D:/JavaDevelop/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg" width="40%"/>
相対パスの記述を推奨します。 /
: 現在のファイルの場所を示します。省略可能
.../ : 現在のファイルが存在するディレクトリの上位ディレクトリを示します。

<img src="./img/meinv01.jpg" width="40%"/>
これは、現在のファイル (html) が配置されているディレクトリで img ディレクトリを見つけ、そのディレクトリで meinv01.jpg ファイルを見つけることを意味します。

2. ハイパーリンクタグ

a タグは、Web ページにハイパーリンクを実装するために使用されます。
ハイパーリンクをクリックすると、別の場所 (Web ページ、画像、ダウンロードアドレスなど) にジャンプします。例
:<a href="http://www.baidu.com" target="_blank">百度一下,你就不知道</a>

href 属性は、ジャンプ先の URL アドレスを指すために使用されます。
target 属性は、ハイパーリンクを開く方法を示すために使用されます。
- self: 現在のウィンドウでハイパーリンクを開きます
- 空白: ハイパーリンクを新しいウィンドウで開きます

3. テーブルラベル

table: テーブルを定義するために使用されます。tr タグを含めることができます。
tr(テーブル行): テーブル内の行を定義するために使用され、tr には td/th を含めることができます。
td/th(テーブルデータセル): テーブル内のセルを定義するために使用されます。
th(テーブルヘッダーセル): テーブルヘッダーのセルを定義するために使用されます。デフォルトでは、テキストが太字で中央揃えになります。
Colspan 属性: セルがまたがる列数を設定します。例:
<td colspan="2">11</td>
Colspan="2": 現在のセルを 2 列にまたがるように設定します
rowspan 属性: セルが垂直にまたがる行数を設定します
<td rowspan="2">21</td>
rowspan="2": 現在のセルを垂直に 2 行にまたがるように設定します

4. フォームタグ

4.1. フォームの役割

フォームの役割: サーバーにデータを送信するために使用されます。
サーバーにデータを送信するには 2 つの方法があります:
1) フォームを使用してサーバーにデータを送信します。
多くの場合、フォーム項目ラベル (ユーザー名、パスワード、ニックネーム) が存在します。、電子メール、確認コードなど）をフォームの項目に入力し、フォームを送信すると、入力されたデータが対応するサーバーに送信されます。
2) ハイパーリンクを使用してデータをサーバーに送信することもできます。URL アドレス
の後に http://www.baidu.com?user=张三&age=20&like=篮球
アドレスを入力してサーバーにアクセスすると、アドレスの後に接続されたパラメータをサーバーに持ち込むことができます。

4.2.フォームタグ

<form action="http://www.baidu.com" method="GET|POST"> ... </form>
action 属性: は、フォーム内のデータの送信先アドレスを指定するために使用されます。
例: action 属性は Baidu サーバーの URL を指します。これは、フォーム内のすべてのデータが Baidu サーバーに送信されることを意味します。
Method 属性: 送信メソッドを指定します。一般的に使用される送信メソッドは GET と POST (違いについては後で説明します) です
。メソッドが指定されていない場合、デフォルトは GET 送信です。

5. フォーム項目のラベル

1) テキスト入力ボックス (ユーザー名/認証コード/メールアドレス/ニックネーム)
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="text" name="nickname"/>
2) パスワード入力ボックス (パスワード/パスワードの確認)
<input type="password" name="psw"/>
<input type="password" name="repsw"/>

3) 単一選択ボックス (性別/単一選択肢の質問選択肢)
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
4) 多肢選択ボックス/チェックボックス (多肢選択質問の選択肢/役職/趣味)
<input type="checkbox" name="like"/>篮球

5) ドロップダウン選択ボックス (県/市/都市の選択)
<select name="prov"> <option>北京市</option> <option>上海市</option> <option>广东省</option> ... </select>

6)複数行のテキスト入力ボックス
<textarea name="desc"></textarea>

7) ボタン/送信ボタン
<input type="button" value="换一张"/>
通常のボタン自体には機能がありませんが、jsを通じてボタンに機能を追加することができます(クリック後に画像を変更するなど)

<input type="submit" value="提交/登录/注册"/>
送信ボタンは、フォームを送信し、アクション属性が指すサーバーにフォーム内のデータを送信するために使用されます。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>欢迎注册</title>
		<!-- style标签内部用于书写css样式、css注释 -->
		<style>
			*{
     
     /* 选中所有元素 */
				font-family: "微软雅黑";
			}
			table,td,th{
     
     /* 设置边框 */
				border: 2px solid red;
				border-collapse: collapse;
			}
			table{
     
     /* 设置位置 */
				/* 设置背景 */
				background-color: lightgray;
				/* 设置左右外边距自适应(始终保持相等) */
				margin-left: auto;
				margin-right: auto;
			}
			td,th{
     
     
				/* 设置内边距(元素边框和内容之间的距离) */
				padding: 5px;
			}
			h1{
     
     
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h1>欢迎注册</h1>
		<table>
			<tr>
				<td>用户名:</td>
				<td><input type="text"/></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password"/></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>
					<input type="radio" value="boy" checked name="sex"/>男
					<input type="radio" value="girl" name="sex"/>女
				</td>
			</tr>
			<tr>
				<td>爱好:</td>
				<td>
					<input type="checkbox" value="basketball" name="hobby" />篮球
					<input type="checkbox" value="basketball" checked name="hobby" />足球
					<input type="checkbox" value="basketball" name="hobby" />排球
				</td>
			</tr>
			<tr>
				<td>城市</td>
				<td>
					<select>
						<option value="beijing">北京</option>
						<option value="guangzhou" selected="">广州</option>
						<option value="shenzhen">深圳</option>
						<option value="shanghai">上海</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>自我描述:</td>
				<td>
					<textarea name="desc" cols="30" rows="5" placeholder="请输入描述信息...">
					</textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: center;">
						<input type="submit" value="提交" />
				</td>
			</tr>
		</table>
	</body>
</html>

6. フォームの詳細

1. フォームを送信するときに、フォーム内のデータが送信されないのはなぜですか?

フォーム内のフォームアイテムラベルについては、データをサーバーに送信する必要がある限り、フォームアイテムに name 属性を追加する必要があります。フォームアイテムラベルに name 属性がない場合、そのアイテムは無視されます。フォームが送信されます。例えば：

<input type="text" name="username"/>
<input type="password" name="psw"/>

2. 複数のラジオボタンボックスのうち 1 つだけを選択するにはどうすればよいですか?

複数のラジオボタンボックスの name 属性値が同じである必要があります。複数のラジオボタンボックスの name 属性値が同じである場合、それらはグループのコンテンツであることを意味します。グループ内のラジオボタンボックスは、そのうちの 1 つを選択してください!

<td>性别:</td>
<td>
    <input type="radio" name="gender"/>男
    <input type="radio" name="gender"/>女
</td>

3. ラジオボタンとチェックボックスで項目を選択すると、送信された値がオンになるのはなぜですか?

ラジオボタンやチェックボックスは選択のみなので、ユーザー名やパスワードの入力ボックスとは異なり、内容を入力することができます。

したがって、ラジオボタンまたはチェックボックスに送信された値を value 属性を通じて設定する必要があります (設定されていない場合、デフォルト値はオンになります)。次に例を示します。

<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女

4. 特定の項目をデフォルトで選択するようにラジオボタンまたはチェックボックスを設定するにはどうすればよいですか?

ラジオボタンまたはチェックボックスのラベルにchecked="checked" 属性を追加して、現在のラジオボタンまたはチェックボックスをデフォルトで選択することができます。例えば：

<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球

5. デフォルトで項目を選択するようにドロップダウンボックスを設定するにはどうすればよいですか?

selected="selected" 属性をオプションタグに追加して、現在のオプションがデフォルトで選択されるようにします。次に例を示します。

<select name="city">
    <option>北京</option>
    <option>上海</option>
    <option selected="selected">广州</option>
    <option>深圳</option>
</select>

6. ドロップダウン選択ボックスのオプションの value 属性の役割は何ですか?

<select name="city">
	<option value="beijing">北京</option>
	<option value="shanghai">上海</option>
	<option selected="selected">广州</option>
	<option>深圳</option>
</select>

オプションが選択され、そのオプションに value 属性が追加されている場合、フォームの送信時に value 属性の値が送信されます。

オプションが選択され、そのオプションに value 属性が追加されていない場合、フォームの送信時にタグ内のコンテンツが送信されます。

7. その他のタグ

HTML5 が登場する前は、ほとんどのオーディオとビデオはプラグイン (Flash など) を通じて再生されていましたが、HTML5 では、audio 要素と video 要素を通じてオーディオとビデオを含める標準的な方法が指定されています。

1.オーディオタグ(html5)

audio タグは、次のようなサウンドファイルまたはオーディオストリームを再生できます。

<audio controls src="audio/沙漠骆驼_展展与罗罗.mp3"></audio>

その中で、audio タグの属性は次のとおりです。

src属性：用于指定要播放的音频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：音频在就绪后马上播放（自动播放）
loop="loop"：当音频完成播放后，再次开始播放（循环播放）
width、height：设置音频播放器的宽度和高度

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的

<audio controls src="audio/沙漠骆驼_展展与罗罗.mp3">
	如果您可以看到此内容，说明您的浏览器不支持此标签!
</audio>

2.ビデオタグ（html5）

video タグはビデオストリームを再生でき、現在 MPEG4、Ogg、WebM の 3 つのビデオ形式をサポートしています。

<video controls src="video/小芳_李荣浩版.mp4"  width="50%"></video>

その中で、video タグの属性は次のとおりです。

src属性：用于指定要播放的视频的URL地址
controls="controls"：为用户显示播放控件，比如播放、暂停和音量控制等
autoplay="autoplay"：视频在就绪后马上播放（自动播放）
loop="loop"：当视频完成播放后，再次开始播放（循环播放）
width、height：设置视频播放器的宽度和高度

<video> 与 </video> 之间插入的内容是供不支持 audio 元素的浏览器显示的(例はここでは省略します)

3. div、span、pタグ

div、span、および p 要素は非常に一般的ですが、よく使用されるタグです。これらはすべて、他の要素またはテキストをラップするために使用できるコンテナタグです。これらの要素にスタイルを追加することで、それらの要素に含まれるコンテンツを設定できます。

div、p: ブロック要素。デフォルトで 1 行を占め、幅と高さを設定できます (div 要素は通常レイアウトに使用され、p 要素は通常段落の定義に使用されます)。

スパン: インライン要素。インライン要素は同じ行に表示できますが、幅と高さは設定できません (スパンは、テキストを含めたり、統一されたスタイルを容易にするためにインライン要素を結合したりするために使用されます)

4. ヘッダータグとフッタータグ（html5）

<header>タグは、ドキュメントのヘッダー (紹介情報) またはページのヘッダーセクションを定義します。

<footer>タグはドキュメントまたはセクションのフッターを定義します。フッターには通常、ドキュメントの作成者、著作権情報、利用規約へのリンク、連絡先情報などが含まれます。

3.CSSの概要

1.CSSとは

CSS: カスケードスタイルシート、Web ページの変更とレンダリングに使用されるテクノロジ

CSS スタイルを使用して Web ページを変更すると、スタイルを設定する CSS コードとデータを表示する HTML コードを分離できるため、Web ページの表示機能が強化されます。

2. htmlにCSSを導入する方法

2.1.ラベルの style 属性内に CSS スタイルを追加します`

これはディビジョンです…

` この方法は、CSS スタイルをタグの style 属性内に直接記述することですが、これは現在のタグに対してのみ有効であり、コードの再利用が実現できず、ページ構造内で混乱を引き起こしやすいため、後の拡張や展開には役立ちません。メンテナンス。したがって、大量に使用することはお勧めできません。

2.2. head タグの style タグ内に css スタイルを追加する
<style type="text/css"> span{ border:2px solid green; /* 设置字体大小 */ font-size:30px; /* 设置字体粗细 */ font-weight:bolder; } </style>
この方法は、タグに css コードを記述することなく、style タグ内ですべての css スタイルを管理するため、ページ構造が混乱せず、実装することができます。コードの再利用

2.3. リンクタグを介して外部CSSファイルを導入する
 <link rel="stylesheet" href="demo.css"/>
この方法では、すべてのCSSコードを1つのCSSファイルに記述して一元管理し、HTMLコードとCSSコードの分離を実現します。ページ構造を混乱させることなくコードを再利用できます。
このアプローチは推奨されます (特にエンタープライズ開発の場合)

4.CSSセレクター

いわゆるセレクターは、HTML で変更する要素を選択するのに役立つテクノロジーです。

1. タグ名セレクター

指定した名前のタグを要素名（またはタグ名）ですべて選択します

形式:要素名/タグ名 { css スタイル... }

/* ----- 1.标签名选择器练习 ----- 
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{
    
     /* 选中所有的span元素 */
	background-color:#efbdef; 
	font-size: 22px;
	font-weight: bolder;
}

2. クラスセレクター

一般属性 (クラス) を要素に追加できます。クラス属性を使用して、要素が属するグループを設定します。同じクラス値を持つ要素はグループ化されます。クラス値を使用してこのグループ内の要素を選択し、要素にスタイルを追加できます。

形式: .class value { css スタイル… }

例：

/* ----- 2.类选择器练习 ----- 
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e；*/
.s1{
    
     /* 选中所有class值为s1的元素 */
	background: #faf77b;
	border: 2px solid cyan;
}
.s2{
    
     /* 选中所有class值为s2的元素 */
	background: #5eff1e;
	color: #ec0e7e;
}

さらに、要素には複数のクラス値を設定することもできます。複数のクラス値はスペースで区切られます。例:

<span class="s1 s2" >span111</span>

現在の要素が同時に複数のグループに属し、複数のグループに設定されているスタイルも同時に現在の要素に適用されることを示します。

複数のグループが同じスタイルを設定している (ただし値が異なる) 場合、スタイルは競合し、後で作成されたスタイルが前のスタイルを上書きします。

内容補足: セレクターの優先順位:

(1) 同じタイプのセレクターで、同時にいくつかの要素にスタイルが設定されている場合、スタイルが競合した場合、後で作成したスタイルが前のスタイルをオーバーライドします。

(2) 異なるセレクタの場合、設定スタイルの優先順位は、IDセレクタ(100)＞クラスセレクタ(10)＞要素名セレクタ(1)となります。

3.IDセレクター

ラベルの共通属性 ID を通じて、ラベルに一意の番号を設定でき (ID 値は一意である必要があります)、要素は ID 値を通じて一意に選択できます。

形式: #id 値 {css スタイル}

/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
#p1{
    
     /* 选中id值为p1的元素 */
	font-size:24px;
	color: #a06649;
	text-indent: 20px;
}

<p id="p1">这是一个p元素!!!</p>

4. 子孫セレクター

指定された要素内の指定された子孫要素を選択します

形式: Ancestor Descendants { css スタイル… }

/* ----- 4.后代选择器练习 ----- 
为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{
    
     /* 匹配所有p元素内部的所有span元素 */
	font-size:18px;
	color: red;
	background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */

<p id="p1">
	这是一个p元素!!!
	<span>这是一个span元素!!!</span>
</p>

5. 属性セレクター

セレクターで選択した要素を元に、要素の属性条件に応じて要素をフィルタリング/フィルタリングします

形式: セレクター[属性条件1][属性条件2]...{css スタイル}

/* ----- 5.属性选择器 ----- 
为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
input[type='text']{
    
     /* 匹配所有的input并且type值为text的元素 */
	background: #FF7CCC;
	font-size: 22px;
	text-indent: 15px;
}
input[type='text'][name='email']{
    
     
	/* 选中所有的input并且type值为text、并且name为email的元素 */
	background : yellow;
}

5. 共通属性のまとめ

1. テキスト属性

1. text-align: 要素内のテキストの水平方向の配置を設定します。一般的な値は次のとおりです。

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2. text-decoration: テキストの下線スタイルを設定します。一般的な値は次のとおりです。

underline: 有下划线
none: 没有下划线

3. text-indent:テキストの最初の行のインデントを設定します。単位: ピクセル/パーセンテージ

4. letter-spacing: 文字の間隔/間隔を設定します。一般的な値は次のとおりです。

normal
像素值

5. text-shadow: フォントの影を設定します。その値は次のとおりです。

像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色

2. フォントの属性

font-size：フォントサイズを設定します

font-weight：フォントの太さを標準、太字、太字に設定 100/200/300…/900

font-family: Microsoft YaHei、HeiTi、KaiTi などのフォントを設定します。

color：文字色を設定します

3. 背景属性

background-color:背景色の設定

background-image:背景画像を設定します, url('画像パス');

background-repeat: オブジェクトの背景画像を配置するかどうか、および配置する方法を設定または取得します。一般的に使用される値:

repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)

background-position: オブジェクトの背景画像の位置を設定または取得します

background: 背景色、背景画像、背景画像が背景画像の位置を繰り返すかどうか

4. ボーダー

border:2px Solid red; – 要素の境界線を設定します (境界線の幅、スタイル、色を同時に設定できます)

border プロパティは次の設定に分割できます。

border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色

このうち、border-width、border-style、border-color は上下左右の方向に分割することもできます。

border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

5. その他の属性

width: 要素の幅を設定します。

height: 要素の高さを設定します。

margin: 要素のマージンを設定します

margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;

6. 補足: カラー設定

カラー値を取得するには、次の 3 つの一般的な方法があります。

方法 1: 色の名前を設定します。例:

red、green、blue、yellow、cyan、pink、white、black等

方法 2: # に 6 桁の 16 進数値を加えた値を設定します

#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等

方法 3: RGB カラー値を設定する (休憩: 14:46-15:06)

rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
（red） （green） （blue） （yellow） （cyan）

7. 表示属性

display は、要素のタイプ、一般的に使用される値を設定するために使用されます。

block：块级元素的默认值
    默认情况下独占一行
    可以设置宽高
inline：行内元素的默认值
    默认情况下多个行内元素可以处在同一行
    一般不能设置宽高
inline-block：行内块元素
    多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素

8. 要素の種類（理解）

div/span/p はすべて、他のコンテンツをラップするために使用されるコンテナタグです (これらの要素自体にはあまりスタイルがありません!)

p: ブロックレベルの要素。デフォルトで 1 行を占め、テキストの一部を囲むために使用されます (記事を書くときは、p タグを使用して各コンテンツを囲みます)。

div: デフォルトで 1 行を占めるブロックレベルの要素で、他のコンテンツをラップするために使用されます。div にスタイルを設定すると、div のコンテンツに影響を与える可能性があります。

スパン: インライン要素。デフォルトで他の要素と同じ行に表示できます。

(1) ブロックレベルの要素（ブロック）

デフォルトでは、ブロックレベル要素は独自の行を占有します

幅と高さを設定でき、設定すると設定した幅と高さになります。

幅と高さが設定されていない場合、幅はデフォルトで親要素を埋め、高さはコンテンツによって決まります（コンテンツによってサポートされます）。

例: div/p/h1~h6/form/table およびその他の要素はブロックレベルの要素です。

(2) インライン要素（インライン）

デフォルトでは、複数のインライン要素を同じ行に置くことができます

幅と高さを設定できません

例:span/input/img/i/b およびその他の要素はすべてインライン要素です

(3) インラインブロック要素（inline-block）

インライン要素（並列表示可能）とブロックレベル要素（幅と高さを設定可能）の両方の特徴を持ちます。

9. 拡張

1.CSSセレクターの分類

グローバルセレクター (ワイルドカード *)
タグセレクター (body、div、p、ul、li)
クラスセレクター(.)
IDセレクター(#)
結合されたセレクター (.head .head_loge、2 つのセレクターをスペースで区切ります)
子孫セレクター (#head .nav li ul、親から子孫セットへのセレクター)
子セレクター (div>p)
グループセレクター (div、span、img{color: red;}、つまり、同じスタイルのラベルをグループ化します)
セレクターを継承します (div p、2 つのセレクターをスペースバーで区切ります)
疑似クラスセレクター (リンクスタイル要素の疑似クラス: :link (訪問していない)、:visited (訪問済み)、:active (選択済み)、:hover (マウスがリンク上にあるとき))
文字列一致のための属性セレクター (^ (開始)、$ (中間)、* (終了))
CSS 隣接兄弟セレクター (h1+p など)

2. CSSセレクターの優先順位

さまざまなレベル:! important (style 属性の後に「;」を追加しないでください。! important の後にセミコロンを追加します)>インラインスタイル>ID セレクター>クラスセレクター>ラベル>ワイルドカード

同じレベル：

(1) 同じレベル内で後から書かれたスタイルは、最初に書かれたスタイルを上書きします
(2) セレクタの削減