日 - TML/CSS - プロジェクト ILUGC(Web ページ)-CSSチュートリアル-php.cn

よりも重要度の低い小見出しを表します。

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Patricia Arquette

Jan 04, 2025 am 07:11 AM

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

Day - TML/CSS - Project ILUGC(web page)

HTML/CSS と Javascript の違い。

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

HTML 構文:

<html>
<head>
<title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

ログイン後にコピー

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

Day - TML/CSS - Project ILUGC(web page)

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

Hello,World!

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

プロジェクト：

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


    <title>ILUGC</title>

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

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

   <div>



<p>出力:</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg" class="lazy" alt="Day - TML/CSS - Project ILUGC(web page)"></p>
<p><strong>説明:</strong></p>

<ol>
<li>
<html>: HTML ドキュメントのルート要素。</li>
<li>
<head>: ドキュメントのメタデータとリソースが含まれます。</li>
<li>
<title>: ブラウザのタブに表示される Web ページのタイトルを設定します。</li>
<li>
<style>: HTML ドキュメントのスタイルを設定するための CSS を埋め込みます。</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: <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 ピクセルのパディングを追加します。</p></li>
<li><p>.header: ヘッダー div:<br> のスタイルを設定します。
a) margin: 25px;: ヘッダーの周囲に 25 ピクセルのマージンを追加します。</p></li>
</ul>

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

<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>

ログイン後にコピー

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。