日 - TML/CSS - プロジェクト ILUGC(Web ページ)

HTML:

• HTML は Hyper Text Markup Language の略です
• HTML は Web ページを作成するための標準マークアップ言語です
• HTML は Web ページの構造を記述します
• HTML は一連の要素で構成されます
• HTML 要素はブラウザにコンテンツの表示方法を指示します
• HTML 要素は、「これは見出しです」、「これは段落です」、「これはリンクです」などのコンテンツにラベルを付けます。

参照 - https://www.w3schools.com/Html/html_intro.asp

CSS:

• カスケード スタイル シート (CSS) は、HTML で書かれたドキュメントのプレゼンテーションを記述するために使用されるスタイルシート言語です。
• CSS は、画面上、紙上、音声、またはその他のメディア上で要素をどのようにレンダリングするかを記述します。

参照- https://developer.mozilla.org/en-US/docs/Web/CSS

HTML/CSS と Javascript の違い。

-->HTML/CSS - 静的ページ - 手動で更新しない限り、コンテンツはロードされるたびに同じままになります。
-->JavaScript - 動的ページ - ページは、ボタンのクリック、フォームの送信、マウスの移動などのユーザーのアクションに応答できます。

HTML 構文:

<title>Page Title</title>


   <h1 id="My-First-Heading">My First Heading</h1>
   <p>My first paragraph.</p>

--> ファイルを拡張子 (.html) で保存し、ダブルクリックしてプログラムを実行します。

HTML 要素:
HTML では通常、要素は開始タグと終了タグを使用して囲まれ、開始タグと終了タグが定義されます。
-->開始タグ : HTML 要素の始まりをマークします。
-->終了タグ : 要素名の前にスラッシュを付けて HTML 要素の終わりを示します。
例:

Hello,World!

スタンドアロン タグ: HTML のスタンドアロン タグ (自己終了タグとも呼ばれる) は、開始タグと終了タグの間にコンテンツがないため、終了タグを必要としない要素です。タグ。
例-
- ブレーク: 改行を挿入するために使用されます

プロジェクト：

ILUGC Web ページのレイアウトを準備しています:(https://ilugc.in/)

    <title>ILUGC</title>

。容器{
    境界線:1 ピクセルの実線;
    高さ:200%;
    幅:85%;
    マージン:自動;
}
.header h4{
    テキスト変換: 大文字;
    色:#e22d30;
    ボーダートップ:1px ソリッドグリーン;
    幅: コンテンツに合わせて;
    パディングトップ:10px;
}
。ヘッダ{

    マージン:25px;
}
スタイル>


   <div>



<p>出力:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Day - TML/CSS - Project ILUGC(web page)"></p>
<p><strong>説明:</strong></p>

<ol>
<li>
: HTML ドキュメントのルート要素。</li>
<li>
: ドキュメントのメタデータとリソースが含まれます。</li>
<li>
<title>: ブラウザのタブに表示される Web ページのタイトルを設定します。</title>
</li>
<li>
<style>: HTML ドキュメントのスタイルを設定するための CSS を埋め込みます。</style>
</li>
</ol>

<ul>
<li><p>.container: コンテナー div:<br> のスタイルを設定します。
a) border: 1px Solid;: 1 ピクセルの実線の境界線を追加します。<br>
b) height: 200%;: 高さをビューポートの高さの 2 倍に設定します。<br>
c) width: 85%;: 幅をビューポート幅の 85% に設定します。<br>
d) margin: auto;: コンテナを水平方向の中央に配置します。</p></li>
<li>
<p>.header h4: </p>
<h4> のスタイルを設定します。 .header クラス内の要素:<br>
a) text-transform: uppercase;: テキストを大文字に変換します。<br>
b) color: #e22d30;: テキストの色を赤の特定の色合いに設定します。<br>
c) border-top: 1px Solid green;: 緑色の上境界線を追加します。<br>
d) width: fit-content;: コンテンツに合わせて要素の幅を縮小します。<br>
e) padding-top: 10px;: テキストの上に 10 ピクセルのパディングを追加します。</h4>
</li>
<li><p>.header: ヘッダー div:<br> のスタイルを設定します。
a) margin: 25px;: ヘッダーの周囲に 25 ピクセルのマージンを追加します。</p></li>
</ul>

<ol>
<li>
: Web ページに表示されるすべてのコンテンツが含まれます。</li>
<li>
<div>: コンテンツをグループ化してスタイル設定するためのコンテナ要素。
<li>
<h1 id="Web-ページのメイン見出しを表します">: Web ページのメイン見出しを表します。</h1>
</li>
<li>
<h4>: <h1 id="よりも重要度の低い小見出しを表します"> よりも重要度の低い小見出しを表します。</h1>
</h4>
</li>


<p><strong>属性:</strong><br>
属性は、HTML 要素に関する追加情報を、通常は名前と値のペアの形式で提供します。<br>
例: `</p>
<div>

<p><strong>パディング:</strong><br>
パディングは、要素のコンテンツとその境界線の間のスペースです。コンテンツの周囲に内部マージンを作成し、コンテンツを要素の端から遠ざけます。</p>

<p><strong>マージン:</strong><br>
マージンは、要素の境界線の外側にある要素を他の要素から分離するスペースです。要素間の外部空間を定義し、要素の周囲に距離を作成します。</p>

<p><strong>クラスセレクターと要素セレクター:</strong></p>

<ul>
<li>クラス セレクターは、ピリオド (.) に続いてクラス名を使用して、特定のクラス属性を持つ HTML 要素をターゲットにします。</li>
<li>要素セレクターは、タグ名によって HTML 要素を直接ターゲットにします</li>
</ul>


          </div>

            
        </div>
</li>
</ol>
</div>

以上が日 - TML/CSS - プロジェクト ILUGC(Web ページ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。