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 でのプロキシ設定の問題の分析

推薦する

Vue における $router と $route の違いの詳細な説明

通常、vue プロジェクトではルーティングを使用します。vue-router は vue.js の公...

CSSフロートの特性についての簡単な説明

この記事では、CSS フロートの特徴を紹介します。皆さんと共有し、自分用のメモとして残したいと思いま...

Windows 10 での MySQL 5.7.19 インストール チュートリアル MySQL のルート パスワードを忘れた場合の変更方法

MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...

進捗バー効果を実現するJavaScript

この記事では、プログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

sqlite を mysql スクリプトに移行する方法

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 パーレル # # https:/...

Vue は better-scroll を使用して水平スクロール方法の例を実現します

1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...

MySQLとOracleの違いのまとめ（機能性能の比較、選択、使用時のSQLなど）

1. 同時実行性同時実行性は OLTP データベースの最も重要な機能ですが、同時実行性にはリソース...

ポートマッピング後に Docker コンテナが突然接続に失敗する問題のトラブルシューティング プロセス

1. 背景通常、外部サービスを提供する必要がある Docker コンテナの場合、起動時に -p コマ...

Vue命令の実装原理の分析

目次1. 基本的な使い方2. 指示の動作原理2.1. 初期化2.2 テンプレートのコンパイル2.3....

Vue echarts は水平棒グラフを実現します

この記事では、水平棒グラフを実現するためのvue echartsの具体的なコードを参考までに共有しま...

nginx での listen ディレクティブの例の分析

プロットレビュー前回の記事では、ロケーション命令の解析プロセスを分析しました。この内容を簡単に確認し...

VMware 仮想マシンの 3 つの接続方法の例の分析

NATこのようにして、仮想マシンのネットワーク カードはホストの VMnet8 に接続されます。この...

マウスの尾行効果を実現する JavaScript

マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...

中国のウェブサイトユーザーエクスペリエンスランキング

<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...

更新SQL文に基づくMySQLロックの理解

序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...