CSS スタイル分類入門（基礎知識）

CSSスタイルの分類

1. 内部スタイル ---- インラインスタイル

スタイルタグの使用

<スタイル タイプ="text/css">
/* スタイル */
</スタイル>

もう1つのコツを学びましょう。ページの共通スタイル（多くない場合）をスタイルタグに記述します。

2. インラインスタイル

タグのスタイル属性に直接記述する

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

もう1つのトリックを学びましょう: 通常、バックエンドプログラマーがページを変更するために使用します

3. 外観スタイル

新しいCSSファイルを作成し、それをHTMLページに関連付けます

a) タグの関連付けを使用する

<!-- HTML の head タグ内 -->
<link rel="stylesheet" type="text/css" href="cssファイルパス">

b) 使用説明書の関連付け

<スタイル タイプ="text/css">
/* スタイルタグ内 */
    @import url("css ファイルパス")
</スタイル>

もう1つのコツ: プロジェクトで最もよく使われる外部スタイルとリンクタグ

3つのスタイルシートの概要

知識ポイント補足: CSS スタイル分類

CSSスタイルは、インラインスタイル、内部スタイルシート、外部スタイルシートの3つのカテゴリに分けられます。

1. インラインスタイル (スタイルは HTML タグ内に記述され、タグの内容に対してのみ機能します)

「こんにちは世界」

2. 内部スタイル（スタイルは HTML のヘッドタグの間に記述され、HTML のコンテンツにのみ適用されます）

<html>
    <ヘッド>  
    <タイトル></タイトル>
    <スタイル タイプ="text/css">
    本文{フォントサイズ:12px}    
    </スタイル>
    </head>
    <本文></本文>
</html>

3. 外部スタイル（スタイル参照はヘッドタグの間に記述され、CSSファイルを参照するWebページで機能します）

<html>
    <ヘッド>  
    <タイトル></タイトル>
    <link href="common.css" rel="スタイルシート" type="text/css"> 
    </head>
    <本文></本文>
</html>

CSSスタイルでは、#はIDセレクターを表し、.はクラスセレクターを表します。

<div class="font"></div>

<div id="top"></div> HTML では、 id を繰り返すことはできません。

要約する

CSSスタイルの分類紹介（基礎知識）の記事はこれで終わりです。CSSスタイルの分類に関するより詳しい内容は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: VueはOpenLayersを使用してTiandi MapとAmapを読み込み

>>: vue プロジェクトのデプロイと Nginx でのプロキシ設定の問題の分析

MySQL の一時テーブルと派生テーブルについての簡単な説明

ブログ

Docker 経由で Redis 6.x クラスターをデプロイする方法

ブログ

Vue プロジェクトで mock を使用する方法をご存知ですか?

ブログ

MySQL 構成 SSL マスタースレーブレプリケーション

ブログ

スタイルを書く際の背景色宣言の重要性

ブログ

jQueryで大画面スクロール再生効果を実現

ブログ

Vue 3.0 カスタムディレクティブの使い方

ブログ

MySQL で null を置き換える IFNULL() および COALESCE() 関数の詳細な説明

ブログ

WindowsシステムでPhPStudy MySQLの起動に失敗する問題を解決する

ブログ

Docker nginxは1つのホストを実装して複数のサイトを展開します

ブログ

CSS スタイル分類入門（基礎知識）

MySQL の一時テーブルと派生テーブルについての簡単な説明

Docker 経由で Redis 6.x クラスターをデプロイする方法

Vue プロジェクトで mock を使用する方法をご存知ですか?

MySQL 構成 SSL マスタースレーブレプリケーション

スタイルを書く際の背景色宣言の重要性

jQueryで大画面スクロール再生効果を実現

Vue 3.0 カスタムディレクティブの使い方

MySQL で null を置き換える IFNULL() および COALESCE() 関数の詳細な説明

WindowsシステムでPhPStudy MySQLの起動に失敗する問題を解決する

Docker nginxは1つのホストを実装して複数のサイトを展開します

推薦する

Reactはtodolistの追加、削除、変更、クエリを実装します

MySQL 最適化戦略 (推奨)

Vue でのキープアライブコンポーネントの使用例

Tomcat で server.xml と content.xml を変更した後の自動復元の問題の解決方法

MySQL ジョイントインデックス（複合インデックス）の実装

CSS3はシームレスなスクロールと手ぶれ防止を実現します

JavaScript プロトタイプのデータ共有とメソッド共有の実装を調べる

JavaScript Alert関数の実行順序の詳細な説明

CSS flex 複数列レイアウト

Vueはダイアログのカプセル化を実装します

MySql5.7.18 の文字セット構成の詳細なグラフィック説明

スクロールバーの美化効果を実現するための CSS3 のサンプルコード

IDEA で mysql8.0.3 と mybatis-generator を使用する際に発生するバグ

document.getElementBy系メソッドがオブジェクトを取得できない問題を解決する

Linux システムで Centos7 を使って ElasticSearch ミドルウェアと共通インターフェースを構築するデモ