CSSの記述形式、モバイルページの基本構造の詳細な説明

1. CSSの記述形式

1. インラインスタイル

CSSコードを開始タグに直接記述することができます

<div style="color:red">私はdivです</div>

2. インラインスタイル

ヘッドタグのペアにスタイルタグをまとめて記述し、スタイルタグにCSSコードを記述することができます。

<ヘッド>
    <スタイル>
        div{
            色：赤;
        }
</スタイル>
</head>

3. 外部リンクスタイル

別の CSS ファイルを作成し、このファイルに CSS コードを記述してから、HTML ファイル内のリンクタグを通じてこのファイルを HTML ファイルに関連付けます。

これはHTMLファイルです

<ヘッド>
    <link rel="スタイルシート" href="194_Css.css">
</head>
 これはCSSファイルdiv{
            色：赤;
}

4. スタイルをインポートする

3番目の方法と似ていますが、インポート方法が異なります

<ヘッド>
    <スタイル>
        @import "194_Css.css";
    </スタイル>
</head>

注: ほとんどのエンタープライズ開発では、構造とスタイルを分離する外部リンクスタイルが使用されます。では、インポートスタイルを使用しないのはなぜでしょうか?

外部リンクスタイルはリンクタグを通じて関連付けられ、インポートされたスタイルは@importを通じて関連付けられます。 @import は CSS2.1 以降に導入されたため、互換性の問題が発生する可能性があります。インターフェイスを表示する場合、外部リンクスタイルは最初に CSS スタイルをロードし、次に構造をロードします。したがって、ユーザーがインターフェイスを表示できない場合は、スタイルが設定されている必要があります。インターフェイスを表示する場合、インポートされたスタイルは最初に構造をロードし、次にスタイルをロードします。したがって、ユーザーがインターフェイスを表示する場合、完全なインターフェイスが表示されない可能性があります。

2. 0から1までのウェブサイトを構築する

1. ウェブサイトを書くときに最初にやるべきこと

サイトフォルダーを作成し、CSS フォルダー、js フォルダー、画像フォルダー、index.html などのサブフォルダーとサブファイルを作成します。

注意: サイトフォルダーを作成するときに中国語の名前を使用できますが、サイトフォルダー内のサブフォルダーとサブファイルには中国語の文字は使用できません。

2. すべてのデフォルトスタイルをリセットし、いくつかのグローバルスタイルを設定し、スタイルを設定するCSSファイルを対応するインターフェースに関連付けます。

3. Nubiaのウェブサイトを作成する

(1) まず構造ディレクトリを見てみましょう

（２）科目内容コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <link rel="スタイルシート" href="CSS/base.css">
    <link rel="スタイルシート" href="CSS/index.css">
</head>
<本文>
<!--上部エリア-->
<div class="top"></div>
<!--広告エリア-->
<div class="banner"></div>
<!--コンテンツエリア-->
<div class="content"></div>
<!--下部領域-->
<div class="フッター"></div>
</本文>
</html>

（３）CSSスタイルコード

/*上部エリア*/
。トップ{
    高さ:60px;
    width:100%;/*親要素と同じ幅です。ここでは、拡大または縮小してもウェブページが変形しないように、パーセンテージ形式を使用しています*/
    背景色: 赤;

}
/*広告エリア*/
。バナー{
    高さ: 800ピクセル;
    幅: 100%;
    背景色: 緑;
}
/*コンテンツエリア*/
。コンテンツ{
    高さ: 1883px;
    幅: 100%;
    背景色: 青;
}
/*下部領域*/
.フッター{
}

3. ソースコード:

D194_CSSWritingFormat.html

プロジェクト: ヌビア

住所：

https://github.com/ruigege66/HTML_learning/blob/master/D194_CSSWritingFormat.html

https://github.com/ruigege66/HTML_learning/tree/master/ヌビア

要約する

CSS の記述形式とモバイルページの基本構造の詳細な説明についてはこれで終わりです。CSS の記述形式に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: ボタントリガーイベントを使用して背景色の点滅効果を実現します

>>: MySQL シリーズ 7 MySQL ストレージエンジン