ホームページ ウェブフロントエンド htmlチュートリアル CSS の仕組み (スタイルが繰り返されるタグの場合、ブラウザはどのスタイルを選択するか)_html/css_WEB-ITnose

CSS の仕組み (スタイルが繰り返されるタグの場合、ブラウザはどのスタイルを選択するか)_html/css_WEB-ITnose

Jun 24, 2016 am 11:57 AM
原理 仕事 ラベル スタイル 選ぶ

たとえば、タグ P には、埋め込みスタイル シートと外部スタイル シートで複数回設定された関連する属性値 (color: red;/color: blue など) が含まれる場合があります。では、ブラウザはどの値を使用するのでしょうか。 Pのスタイルを表示しますか? ? ?これが CSS の仕組みです。 (中でも、特異性がより重要です)

CSS には 3 つの動作メカニズムがあります: 1. 継承 2. カスケード 3. 仕様 (カスケードの原則は継承と特異性に基づいています)

1. 継承: cssの要素は、その子孫に 1 つのこと、つまり CSS プロパティの値を渡します。 body はすべての要素の祖先です。 body{color:red;} を指定すると、ドキュメント内のすべての要素がこのスタイルを継承します。これが、メモ帳プログラムでテキスト行を作成した後、その名前を xxx.html に変更する理由です。各ブラウザには独自の事前定義されたスタイル テーブルがあるため、別のブラウザで開くと異なるフォント効果が表示されます。本文には font 属性が含まれており、ブラウザで HTML を開くと、この属性が継承されます。

もちろん、すべての属性を継承できるわけではありません。継承できる属性のほとんどは、色、フォント、フォント サイズなど、テキストに関連しています。一部の属性は、要素の位置、マージン、パディング、境界線、その他の属性に関係するものなど、継承しても意味がないか、継承するとページのレイアウトに影響します。

2. カスケード: これは CSS の C (カスケード) で、主にスタイルのソースと詳細に従ってカスケードします。

a) スタイル ソース: 以下は、ブラウザが各ソースからスタイルをカスケードする順序です:

  1. ブラウザのデフォルト スタイル シート
  2. ユーザー スタイル シート (たとえば、視覚障害のあるユーザーの場合は、本文を追加します{ font-size :200%})
  3. 開発者用外部スタイル シート (ページに導入される順序)
  4. 開発者埋め込みスタイル シート
  5. 開発者インライン スタイル シート
  6. 注: 3 と 4 の順序は次のとおりです。


    は黄色です

    如果是这个顺序,style标签在前,link在后
    ログイン後にコピー

    demo.css

    div #li1{

    color: yellow;}

    例子3:选择特指度高的(如按顺序,应该选择link的黄色,但是style中的特指度高 1-0-2 大于 1-0-1,所以选特指度高的红色),后面读取的特指度低的就不会覆盖前面特指度高的。<style>    body div #li1{color: red;}</style><link rel="stylesheet" href="demo.css"></head><body>    <div id="div1">        <ul class="ul1">            <li id="li1" class="li1">列表项1</li>
    ログイン後にコピー

    为红色
    ログイン後にコピー

    例子4:行内style有最高优先级,前面的代码不变,只在p中加了style blue,列表项立马变成蓝色虽然行内的有最高优先级,但是行内style本身就不常用(不方便移植,增加网页大小)<li id="li1" class="li1" style="color:blue;">列表项1</li>
    ログイン後にコピー

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

壁紙エンジンを家族間で共有できますか? 壁紙エンジンを家族間で共有できますか? Mar 18, 2024 pm 07:28 PM

壁紙はファミリー共有をサポートしていますか? 残念ながら、サポートされていません。それでも、解決策はあります。たとえば、小さいアカウントで購入したり、最初に大きいアカウントでソフトウェアや壁紙をダウンロードしてから小さいアカウントに変更したりすることができます。ソフトウェアを起動するだけでまったく問題ありません。壁紙エンジンはファミリー共有できますか? 回答: 現在、壁紙はファミリー共有機能をサポートしていません。 1.WallpaperEngine は家族共有環境には適していないようです。 2. この問題を解決するには、新しいアカウントの購入を検討することをお勧めします; 3. または、最初にメインアカウントで必要なソフトウェアと壁紙をダウンロードしてから、他のアカウントに切り替えることをお勧めします。 4. 軽くクリックしてソフトウェアを開くだけで問題ありません。 5. 上記の Web ページでプロパティを表示できます。」

壁紙エンジンでロック画面の壁紙を設定するにはどうすればよいですか?壁紙エンジンの使い方 壁紙エンジンでロック画面の壁紙を設定するにはどうすればよいですか?壁紙エンジンの使い方 Mar 13, 2024 pm 08:07 PM

WallpaperEngine は、デスクトップの壁紙を設定するためによく使用されるソフトウェアです。ユーザーは、WallpaperEngine でお気に入りの写真を検索して、デスクトップの壁紙を生成できます。また、コンピュータから写真を WallpaperEngine に追加して、コンピュータの壁紙として設定することもできます。壁紙エンジンがロック画面の壁紙を設定する方法を見てみましょう。壁紙エンジン設定ロック画面の壁紙チュートリアル 1. まずソフトウェアに入り、インストール済みを選択し、「壁紙オプションの設定」をクリックします。 2. 別の設定で壁紙を選択した後、右下の「OK」をクリックする必要があります。 3. 次に、上の設定とプレビューをクリックします。 4. 次へ

壁紙エンジンの映画を見るとウイルスに感染することがありますか? 壁紙エンジンの映画を見るとウイルスに感染することがありますか? Mar 18, 2024 pm 07:28 PM

WallpaperEngine を使用すると、さまざまな壁紙をダウンロードでき、ダイナミック壁紙も使用できます。WallpaperEngine で動画を視聴するときにウイルスに感染しているかどうかわからないユーザーも多くいますが、動画ファイルがウイルスとして使用されることはありません。壁紙エンジンで映画を見るときにウイルスはありますか? 答え: いいえ。 1. 動画ファイルだけではウイルスとして利用できません。 2. ウイルス感染のリスクを避けるために、信頼できるソースからビデオをダウンロードし、コンピュータのセキュリティ対策を維持するようにしてください。 3. アプリケーションの壁紙は apk 形式であり、apk にはトロイの木馬ウイルスが含まれている可能性があります。 4.WallpaperEngine自体にはウイルスはありませんが、クリエイティブワークショップの一部のアプリケーション壁紙にはウイルスが感染している可能性があります。

壁紙エンジンの壁紙はどのフォルダにありますか? 壁紙エンジンの壁紙はどのフォルダにありますか? Mar 19, 2024 am 08:16 AM

壁紙を利用する場合、ユーザーは自分の好みの壁紙をダウンロードして利用することができますが、その壁紙がどの​​フォルダーにあるのか分からないユーザーも多くいます。壁紙はどのフォルダにありますか? 答え: コンテンツ フォルダです。 1. ファイルエクスプローラーを開きます。 2. 左側の「このPC」をクリックします。 3.「STEAM」フォルダーを見つけます。 4.「steamapps」を選択します。 5.「ワークショップ」をクリックします。 6. 「コンテンツ」フォルダーを見つけます。

nohupの機能と原理の解析 nohupの機能と原理の解析 Mar 25, 2024 pm 03:24 PM

nohup の役割と原理の分析 Unix および Unix 系オペレーティング システムでは、nohup はバックグラウンドでコマンドを実行するためによく使用されるコマンドです。ユーザーが現在のセッションを終了したり、ターミナル ウィンドウを閉じたりしても、コマンドはまだ実行され続けています。この記事では、nohup コマンドの機能と原理を詳しく分析します。 1. nohup の役割: バックグラウンドでのコマンドの実行: nohup コマンドを使用すると、ターミナル セッションを終了するユーザーの影響を受けることなく、長時間実行されるコマンドをバックグラウンドで実行し続けることができます。これは実行する必要があります

Microsoft Edge ブラウザーでフォント サイズを変更する方法 - Microsoft Edge ブラウザーでフォント サイズを変更する方法 Microsoft Edge ブラウザーでフォント サイズを変更する方法 - Microsoft Edge ブラウザーでフォント サイズを変更する方法 Mar 04, 2024 pm 05:58 PM

Microsoft Edge ブラウザに馴染みがないと思いますが、Microsoft Edge ブラウザのフォント サイズを変更する方法をご存知ですか? Microsoft Edge ブラウザのフォント サイズを変更する方法については、次の記事で説明していますので、一緒に勉強してみましょう。まず、Microsoft Edge ブラウザを見つけてダブルクリックして開きます。 Microsoft Edge ブラウザーはデスクトップのショートカット、スタート メニュー、またはタスクバーにあり、ダブルクリックして開きます。次に、[設定] インターフェイスを開いてこのブラウザ インターフェイスに入り、左上隅にある [...] ロゴをクリックし、[設定] をダブルクリックして設定インターフェイスを開きます。もう一度、[外観]インターフェイスを見つけて開き、マウスで下にスクロールします。

壁紙エンジンは多くの電力を消費しますか? 壁紙エンジンは多くの電力を消費しますか? Mar 18, 2024 pm 08:30 PM

ユーザーは、WallpaperEngine を使用するときに自分のコンピュータの壁紙を変更できます。多くのユーザーは、WallpaperEngine が大量の電力を消費することを知りません。動的壁紙は静的壁紙よりも若干多くの電力を消費しますが、それほど多くはありません。壁紙エンジンは多くの電力を消費しますか? 回答: それほど多くはありません。 1. 動的壁紙は静的壁紙よりも若干多くの電力を消費しますが、それほど多くはありません。 2. ダイナミック壁紙をオンにすると、コンピュータの電力消費量が増加し、少量のメモリ使用量が奪われます。 3. ユーザーは、ダイナミック壁紙の深刻な電力消費を心配する必要はありません。

デジモンニューエイジ5作品の中からどれを選べばいいですか? デジモンニューエイジ5作品の中からどれを選べばいいですか? Mar 15, 2024 pm 03:58 PM

「デジモン ニュー エイジ」は、3 年の歳月をかけて丁寧に磨き上げた新作です。このゲームには、皆さんの幼少期の思い出が詰まっています。計画は調整され、近日中に発売されます。5 つのデジモン ニュー エイジの中からどれを選ぶべきですか?デジモンニューエイジのおすすめペット5選を紹介します。デジモン新世紀ファイブ:アースグレイモン、シーライオンモン、レオモン、フェアリーモン、サンフラワーモンのどれを選ぶべきですか?グレイモンとレオモンを選択することをお勧めします。彼らはチーム化に適しており、序盤と後半の両方で良いペットです。イベントの場所: 1. QQ を開いてゲームセンターに行き、デジモン新世紀 QQ 限定予約イベントを見つけます; 2. イベントをクリックして入り口を見つけ、イベントに参加してお気に入りのパートナーを選択してください。

See all articles