ElementsパネルとCSSスタイルを適用する3つの方法

22397 ワード
WeCode テキストリンク
コースの目標
1.Elementsパネルでは、Webページの構成およびコンポーネントのスタイルを表示できます.
2.Consoleパネルでは、ブラウザでJavaScriptコードをすぐに実行できます.
3.Networkパネルでは、ネットワーク上のデータ交換を表示できます.
4.Applicationパネルでは、ブラウザ・リポジトリのデータを表示できます.
📚 開発者ツールは何ですか?
1. Elements panel
  • HTMLコードを分析およびリアルタイムで修正するためのツールパネル.
  • 開発プロセスでは、開発者ツールでこの属性がどこに属するかを決定することもできます.
    • [プロパティ](Properties)パネルの機能は?
  • HTMLコード解析およびリアルタイム修正ツールパネル
    (高さはこれらすべて修正可能)
  • DOM(Webページの構成を表示できます!)CSSを自由に操作してサイトのレイアウト設計をテストできます.
  • (console対象)Googleで知っているJSなどを見たい場合は、VSCを使わずに開発者ツールを使って確認学習を行いましょう.
  • 使用する画像やビデオなどの方法で情報を取得することもできます.
    • このページには何個のセッションが含まれていますか.

    ✅Instargram種子の横長は?

    ┑Styles部分の順序は何を意味しますか?
  • スタイルは、複数のcssファイルで1つの要素
    • に適用できます.
  • cssファイルの優先度(具体>>抽象)に基づいて上部から
  • CSS Specificity - inline style > id > class > tag
    • 🤔 inline styleはなぜ最も具体的なのですか?考えているうちにinlineという単語の中でPositionと関係がありますか?考えているだけそこでチームメンバーと対話を行い、資料を調べて「CSSスタイルの3つの適用方法」を知りました.
  • 行内スタイル、内部スタイルシート、および外部スタイルシートは、スタイルシートの内容がどこにあるかによって分類されます.

    • -行内スタイル

  • 特定のラベルにのみスタイルを指定します.
    (表示スタイルがタグに含まれています!)
    <body>
 <p style="font-size:25pt;color:pink;">난 핑크야!</p>
</body>
  • 特定のラベルに独自のスタイルを指定する必要がある場合は、すべてのラベルに適用可能な汎用属性であるため、ラベルのスタイル属性を使用します.
  • 「属性:値」に指定する属性をセミコロンでリストします.
  • Htmlが混在して大量のライン内スタイルを作成する場合、どこにあるかを特定するのは難しいので、使用しないようにしてください.
  • 属性は上から下へ継承されます.
    ハーモニーを見て!
    • 
<html>
<head>
     <meta charset="utf-8">
     <title>CSS</title>
     <link rel="stylesheet" href="extstyle.css">
     <style>
         body { font-size:20pt; }
         div {font-size:60px;color:purple;}
         p {font-size:18pt; font-weight: bold; }
         a { font-size:40pt;color:green; }
     </style>
</head>

<body>
     <h2>Cascading Style Sheet</h2>
     <p>나는 스타일시트의 속성을 그대로 따른다.</p>
     <p style="font-style:italic;">나는 기울임체로 표시된다.</p>
     <p style="font-weight:bold;color:red">나는 빨간색 굵은 글꼴을 사용한다.</p>
     <div>디브디브딥
     <img src="대만사진.png" alt="대만폭포사진" width="300px">
     </div>
     <h1>속성은 위에서부터 아래로 상속된다.</h1>
     <h3>폭포처럼 말이야!</h3>
     <a href="">나는 링크야!</a>
    </body>
</html>


    -内部スタイルシート

  • HTMLドキュメントの内部上部に<Style>タグを使用してスタイルを個別に定義します.
  • id定義のセレクタ使用#シンボル
  • Class定義のセレクタ使用.シンボル
  • HTMLドキュメントに一意のCSSコンテンツがある場合に使用します.
    • <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>
<style>
   .test {
       color:steelblue;
       font-size: 30px;
   }
   .test2{
       font-weight: bold;
   }
</style>
<body>
    <div class="test">나는 Internal Style Sheet</div>
    <div class="test2">style태그를 사용하지.</div>
</body>

    -外部スタイルシート(内部スタイルシート)

  • HTMLドキュメントに加えて、CSSという拡張子のファイルを生成し、HTMLドキュメントの上部に<link>タグをロードしてスタイルを適用します.
  • <link>ラベルを使用して外部CSSファイルを読み込みます.
  • relプロパティ:現在のドキュメントとの関係.
  • typeプロパティ:CSSドキュメントタイプ.HMTL 5は省略可能です.
  • href属性:CSSファイルアドレス.
  • 複数のHTMLページに1つのスタイルで適用できます.
  • 1つのスタイルページを変更するだけでリンクされたHTMLページ全体を変更でき、メンテナンスが容易になります.
    • <!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="test">나는 External Style Sheet</div>
    <div class="test2"> link 태그로 불러오지</div>
</body>
</html>
 
    body{
    background-color: cadetblue;
}

.test {
    color: cornsilk;
    font-size: 20px;
}

.test2{
    font-size: 40px;
    font-style: inherit;
}

    何ですか.
  • は、ブラウザのデフォルトのスタイル値を表します.ブラウザによってスタイルの既定値が異なります.
  • Chrome、Safari、IEなどのブラウザタイプのデフォルト属性値が異なるため、開発開始段階user agent stylesheetまたはreset.cssファイルですべてのデフォルトスタイル値を初期化し、操作を開始します.>>ブラウザの種類にかかわらず、同じ画面
    • を出力できます.
    g++のコンパイルとリンクの初歩的な分析
    Linux共通コマンドログの表示