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

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インスタンスを安全にシャットダウンする方法

この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安全か...

case when文のエラー問題の詳細な説明

序文MySQL データベースでは、if else のような判断演算を使用することがあります。では、M...

Linux で FastDFS ファイル サーバーを構築するための実装手順

目次1. ソフトウェアパッケージ2. gccをインストールする3. libfastcommonをイン...

初心者がHTMLタグを学ぶ（1）

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

Nginx ドメイン名の書き換えとワイルドカードドメイン名の解決を設定する方法

この記事では、ドメイン名の書き換えとワイルドカードドメイン名の解決を行うための Nginx の設定方...

W3C チュートリアル (5): W3C XML アクティビティ

XML は、データを記述、保存、送信、交換するために設計されています。 XML 1.0 は XML ...

CSSタグの表示モードの詳細な説明

ラベル表示モード（重要） divタグとspanタグ1. スタイルはまったく同じですが、ラベルが異なり...

CSS 画像アニメーション効果のサンプルコード（フォトフレーム）

この記事では、CSS 画像アニメーション効果（フォトフレーム）のサンプルコードを紹介し、皆さんと共有...

MySQL 圧縮版 zip のインストールに関する問題の解決策

本日、MySQLの圧縮版をインストールする際に問題が発生しました。サービスが起動できず、2、3時間苦...

InnoDB の主な機能 - 挿入キャッシュ、2 度書き込み、適応ハッシュ インデックスの詳細

InnoDB ストレージ エンジンの主な機能には、挿入バッファ、二重書き込み、適応ハッシュインデック...

海外のウェブページのカラーマッチング事例20選共有

この記事では、優れた Web ページのカラー マッチングの事例を 20 件集めて紹介します。これらの...

AIX マウント NFS の書き込み効率が低い場合の解決策

NFSが提供するサービスマウント: サーバー上で /usr/sbin/rpc.mountd サーボ ...

DockerコンテナにRedisをデプロイする手順の紹介

目次1 つの Redis 設定ファイル2 Dockerコマンドの開始3 docker-compose...

Linux環境でIPV6接続をサポートするようにmysql5.6を設定する方法

導入：この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...

HTML 中国語文字エンコード標準の概要

HTML では、Web ページで使用されるエンコーディングを指定する必要があります。一般的な指定方法...