CSS セレクターDay01

開発 2023-10-03 04:29:17 訪問数: null

CSS の定義: カスケード スタイル シート (CSS) は、Web ページまたはドキュメントの外観とスタイルを定義するために使用されるマークアップ言語です。

CSS は、HTML ドキュメントのプレゼンテーション (コンテンツを美しくする) を記述するために使用されるスタイル シート言語です。これは、テキストのフォント、色、間隔、レイアウト、背景などのさまざまなスタイル属性を制御したり、HTML 要素を選択してセレクターを通じてスタイルを適用したりするために使用されます。

CSS の主な目的は、Web ページの構造と外観を独立して変更できるようにコンテンツとスタイルを分離し、それによって Web ページの保守性と柔軟性を高めることです。

CSS Day01

在CSS中，样式规则通常由选择器和一组属性-值对组成。

インポート –>CSSの記述位置：

HTML ドキュメントでは、次の場所に CSS スタイルを配置できます。

CSS的三种引入方式，分别是内联式、嵌入式和外部式。
  1. Inline style_(inline style, inline)style :スタイルはHTML 要素の属性で直接定義できます。このようなスタイルは、特定の要素にのみ適用されます。例えば：
<p style="color: blue;">这是一个蓝色的段落。</p>

JavaScript を通じて、要素の style 属性にアクセスし、その style 属性の値を変更または設定できます。これにより、ユーザー操作やその他の動的なイベントに応じて要素の外観をリアルタイムで変更できます。

<p style="color: blue; font-size: 16px;">这是一个行内样式的段落。</p>

  1. 内部スタイルシート_(埋め込み) :

     使用CSS代码写在 style 标签里面

HTML ドキュメント内のタグ<head>内でタグを使用して<style>、スタイルを定義できます。これらのスタイルはドキュメント全体に適用されます。例えば：

<head>
    <style>
        p {
      
      
            color: green;
        }
    </style>
</head>
<body>
    <p>这是一个绿色的段落。</p>
</body>

  1. 外部スタイルシート_(外部スタイル) :

     CSS 代码写在单独的 CSS 文件中 (.css)

.cssCSS スタイルは、通常は拡張子を付けて保存される別の外部スタイル シート ファイルで定義できます。次に、<link>要素を使用してそれを HTML ドキュメントにリンクします。これは、複数のページ間でスタイルを共有できるため、最も一般的な方法です。例えば：

HTML ドキュメントの<head>タグ内に次のコードを追加します。

<head>
    <link rel="stylesheet" href="目标地址"> /*rel关系--样式表，link引入*/
</head>

次に、次styles.cssの名前の外部スタイルシート ファイルでスタイル ルールを定義します。

p {
    
    
    color: purple;
}

このようにすると、すべての段落テキストが紫色に設定され、このスタイルを複数の HTML ファイルで再利用できます。

CSS を配置するどの方法を選択するかは、ニーズとプロジェクトの規模によって異なります。一般に、外部スタイル シートにはコンテンツとスタイルを分離できる利点があり、スタイル定義を複数のページ間で共有できるため、外部スタイル シートの方が適しています。

インポートテスト

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Css导入方式</title>
    <!-- link 引入外部样式表; rel: 关系，样式表 -->
    <link rel="stylesheet" href="./Day03_MyCss/my02_01.css">
  </head>
  <body>
    <p>这是 p 标签</p>
    <!-- 3.>行内样式: 配合 JavaScript 使用
CSS 写在标签的 style 属性值里 -->
    <div style="color: aqua; font-size: 45px;"> 这是 div 标签</div>
  </body>
</html>

ここに画像の説明を挿入します

CSS

/*02-01导入测试的CSS*/
p {
    
    
  color: red;
}

ここに画像の説明を挿入します
htmlとcssの関係
ここに画像の説明を挿入します

セレクタ

CSS セレクターの主な役割は、どの HTML 要素に特定のスタイル ルールを適用するかを定義することです。具体的には、セレクターは次の目的で使用されます。

  1. 要素の配置: セレクターを使用すると、HTML ドキュメント内で要素を正確に配置して、それらの要素のスタイルを定義できます。たとえば、セレクターを使用して、すべての段落要素または特定のクラスの要素を選択できます。

  2. スタイルの適用: セレクターが特定の HTML 要素と一致すると、色、フォント、境界線などの CSS ルールを通じてこれらの要素のスタイル プロパティを定義できます。こうすることで、ドキュメントの外観とレイアウトをより魅力的で一貫性のあるものにすることができます。

  3. レスポンシブ デザイン: セレクターはメディア クエリと組み合わせて使用​​でき、画面サイズ、デバイスの種類、その他の基準に基づいてさまざまなスタイルを適用することでレスポンシブ Web デザインを作成できます。

  4. 疑似クラスと疑似要素: セレクターを使用すると、マウスオーバーや要素の最初の子など、要素の特定の状態を選択することもできます。これを使用して、インタラクティブな効果を作成したり、テキストのスタイルを調整したりできます。

ポイント 4 で述べた疑似クラスと疑似要素セレクターの例は次のとおりです。

  1. :hover擬似クラス: この擬似クラス セレクターは、マウスが要素上にあるときにスタイルを適用するために使用されます。たとえば、リンク上にマウスを置いたときにリンクの色を変更するには、次のルールを使用できます。

        color: red;    }    ```

  2. :first-child擬似クラス: この擬似クラス セレクターは、要素の最初の子要素を選択します。たとえば、リスト内の最初のリスト項目に特別なスタイルを適用するには、次のルールを使用できます。

        font-weight: bold;    }    ```

  3. ::before擬似要素: この擬似要素セレクターは、要素のコンテンツの前に生成されたコンテンツを挿入するために使用されます。たとえば、段落の前に引用符を追加するには、次のルールを使用できます。

        content: "“";    }    ```

  4. :nth-child擬似クラス: この擬似クラス セレクターを使用すると、奇数または偶数の位置にある子要素など、要素の特定の位置を選択できます。次に、奇数番号のテーブル行を選択する例を示します。

        background-color: lightgray;    }    ```

これらの疑似クラスおよび疑似要素セレクターを使用すると、インタラクティブな効果を作成し、レイアウトを調整し、ページのさまざまな部分にさまざまなスタイルを適用することができるため、ユーザー エクスペリエンスと Web デザインの柔軟性が向上します。

要約すると、CSS セレクターは Web 開発における重要なツールであり、開発者はこれを使用してさまざまな HTML 要素のスタイルを選択的に定義し、魅力的なユーザー インターフェイスとユーザー エクスペリエンスを作成できます。

基本的なセレクター

基本セレクターは、HTML および CSS の要素を選択するための基本ツールです。以下に 4 つの一般的な基本セレクターを示します。

【1】区別できない

< 1 >. 要素セレクター (タグ セレクター):
	它使用元素的名称作为选择器，
	例如:p,h1,div,a,img......选择所有段落元素。

HTML 要素のタグ名をセレクターとして使用して、一致するすべての要素を選択し、同じスタイルを設定します。
同じスタイルを設定するには、同じ名前のタグを選択します。同じ名前のタグは区別できません。

<p>选中同名标签设置相同的样式,无法差异化同名标签</p>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
    p{
      
      
      color: chartreuse;
    }
  </style>
  </head>
  <body>
    <p>p标签1</p>
    <p>p标签2</p>
    <p1>p标签3</p1>
    <div>div_标签</div>
  </body>
</html>

ここに画像の説明を挿入します

< 2 >. ワイルドカード セレクター:
它使用`*`作为选择器，匹配所有元素，例如，`*`选择页面上的所有元素。它们设置相同的样式。通常用于重置或清除浏览器的默认样式，以确保在网页设计的初期得到一致的起点。

ワイルドカード セレクターは、テキストの色を赤に設定するために使用されます。これにより、Web ページのデザイン時に、ブラウザのデフォルト スタイルに関係なく、すべての要素のテキストの色が赤にリセットされます。

<style>
 * {
    
    
    color: red;
 }
</style>

これは、特に Web デザインを開始するときに、白紙の状態から開始し、徐々にカスタム スタイルを個々の要素に追加するための一般的な使用法です。ブラウザーのデフォルト スタイルを過度にリセットしないように、使用は慎重に行ってください。

【2】差別化できる

< 1 >. ID セレクター:
它使用元素的唯一标识符（ID）作为选择器，以`#`开头，例如，`#myId`选择具有`id="myId"`属性的元素。
  1. ID セレクターを定義する: CSS スタイル シートで、#シャープ記号 ( ) で始まり、その後に ID 名が続く ID セレクターを定義します。例: #red。
<style>
  /*定义id选择器*/
  #red{
      
      
    color: chartreuse;
  }
</style>
  1. ID セレクターの適用: HTML では、id属性を追加して ID 名を指定することで、要素に ID セレクターを適用できます。ページ内の同じ ID は一意である必要があり、同じ ID を複数回使用することはできないことに注意してください。
    <div id="red"> 这是div标签</div>
< 2 >. クラスセレクター:
它使用元素的类名作为选择器，以`.`开头，例如，`.myClass`选择所有具有`class="myClass"`属性的元素。
	查找标签，差异化设置标签的显示效果。步骤:
定义类选择器->.类名
使用类选择器>标签添加 class="类名"
  1. クラス セレクターを定義する: CSS スタイル シートで、.ドット ( ) で始まり、その後にクラス名が続くクラス セレクターを定義します。例:.redと.size。
<style>
  /*定义类选择器*/
  .red{
      
      
    color: red;
  }
  .size{
      
      
    font-size: 70px;
  }
</style>

  1. クラス セレクターの適用: HTML では、class属性を追加してクラス名を指定することで、1 つ以上のタグにクラス セレクターを適用できます。例:<div class="red">と<p class="red size">。

  2. 複数のクラス名:ラベルは複数のクラス セレクターを同時に適用できます (つまり、複数のクラスの追加は許可されません) が、複数の属性値を持つことができます。属性内の異なるクラス名を区切るにはスペースを使用してください。各クラスclass名対応するスタイルがラベルに提供されます。

<div class="red">这是div标签</div>
<p class="red size">这是p标签</p>

ここに画像の説明を挿入します

  1. 命名規則:クラス名は意味のあるものにする必要があり、純粋な数字や漢字の使用は避けてください。複数の単語をダッシュ​​で接続し-、意味のあるクラス名を使用できるため、CSS コードの保守と理解が容易になります。

これらは、HTML 要素の選択とスタイル設定に使用できる最も基本的なセレクターです。CSS には、要素のより正確な選択と制御のための他の多くのセレクターも用意されています。

複合セレクター

复合选择器是CSS中的一种选择器，它由两个或多个简单选择器通过不同的方式组合而成，用于更准确、更高效地选中HTML元素。

【1】子孫セレクターと子孫セレクターの違い

主な違いはオプションの範囲です。子孫セレクターは、より深くネストされた要素を含む幅広い要素を選択しますが、子孫セレクターは、指定された親要素内に直接ネストされた子要素のみを選択します。

< 1 > 子孫セレクター: 要素の子孫要素。

写法： 父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开。
子孫セレクターは、子孫要素のネストの深さに関係なく、指定された要素のすべての子孫要素を選択する CSS セレクターです。子孫セレクターは、スペースを使用して複数の単純なセレクターを区切ります。

<div>
    <p>这是一个后代选择器示例。</p>
    <div>
        <p>这也是被选择的后代元素。</p>
    </div>
</div>
  • 選択範囲: 子孫セレクターは、深くネストされた子要素と孫要素を含む、指定された祖先要素内のすべての子孫要素を選択します。
  • 構文: 複数のセレクターを区切るにはスペースを使用しますancestor descendant。
  • 例:レベルに関係なく、要素内のdiv pすべての要素を選択します。<div><p>
<style>
  div span{
      
      
    color: green;
  }
//选择特定的一个后代
  .container p {
      
      
    color: bisque;
  }


</style>

<span>span标签</span>
<style></style>
<div>
  <span>文字是绿色的</span>
    <br>
    <p>
    <span>asfdd</span>
	</p>
    
  <span>as</span>
</div>
<br>

<div class="container">
  <p>This is a paragraph inside a container.</p>
</div>

ここに画像の説明を挿入します

<2>子セレクター

CSS では > 記号で表される子セレクターは、要素の直接の子要素を選択するために使用される CSS セレクターです。

<ul>
    <li>直接子元素 1</li>
    <li>直接子元素 2</li>
</ul>
  • 選択範囲: 子孫セレクターは、より深い子孫要素を除き、指定された親要素の直接の子要素のみを選択します。
  • 構文:>記号を使用して、親要素と子要素のセレクターを区切ります (例: ) parent > child。
  • 例:要素の内側に直接ネストされているすべての要素ul > liが選択され、内側にネストされている他の要素は選択されません。<ul><li><li>
<style>
  div > span{
      
      
    color: aqua;
  }
</style>

<div>
  <span>div的子span标签</span>
  <p>
    <span>孙子span标签</span>
  </p>
</div>

ここに画像の説明を挿入します

【2】和集合セレクターと交差セレクターの違い

和集合セレクターは、いずれかの条件を満たす要素を選択するために使用され、交差セレクターは、同時に複数の条件を満たす要素を選択するために使用されます。

1. ユニオンセレクター:
并集选择器选中多组标签设置相同的样式
选择器1,选择器2,...,选择器N{CSS 属性}，选择器之间用，隔开选择器写法、
建议L：每多一个选择器和一个逗号就一个换行)
  • 構文: 共用体セレクターは、カンマを使用して,複数のセレクターを区切ります。また、いずれかのセレクターに一致する要素を選択します。
  • 例：selector1, selector2
  • 選択範囲: 共用体セレクターは、いずれかのセレクターに一致する要素を選択します。
<style>
    /* (建议，每多一个选择器和一个逗号就一个换行)
   */
    div,
    p,
    span{
      
      
        color: lightskyblue;
    }
</style>

<div>div标签</div>
<p>p标签</p>
<span>span标签</span>
//嵌套也可
<div>
    <span>
        <p>asds</p>
    </span>
</div>
<br>

ここに画像の説明を挿入します

2.交差点セレクター:
  • 構文: 交差セレクターは、スペースを含まない複数のセレクターを使用し、すべてのセレクター条件を同時に満たす要素のみを選択します。
  • 例：selector1.selector2
  • 選択範囲: 交差セレクターは、すべてのセレクターに一致する要素を同時に選択します。
  • 例:とクラスの両方を持つ要素.class1.class2が選択されます。class1class2
<div class="class1 class2">这是一个具有两个类的元素</div>
<p class="class1">这是一个只有一个类的段落</p>

この例では、最初の<div>要素のみが両方のクラスを持つため、それが選択されます。

<style>
  /* 既又的关系:既是 p 标签，又是有 box 类  */
  p.box{
      
      
    color: violet;
  }


</style>

<p class="box">p标签 。使用了类选择器</p>
<p>p标签</p>
<div class="box">div标签 。使用了类选择器</div>
<br>

ここに画像の説明を挿入します

【3】擬似クラスセレクター

伪类选择器:伪类表示元素状态，选中元素的某个状态设置样式。

疑似クラス セレクターは、名前、クラス、または ID だけに基づくのではなく、特定のステータスまたは特性を持つ HTML 要素を選択するために使用される CSS のセレクターです。疑似クラス セレクターは:コロンで始まり、通常、要素の特定の状態または動作にスタイルを適用するために使用されます。

  1. :hover : 要素上にマウスを置いたときの状態を選択します。通常はホバー効果を作成するために使用されます。
a:hover {
    
    
    color: red;
}

//用户鼠标方式的时候
//鼠标悬停状态:选择器: hover:{ CSS 属性 }
<style>
  a:hover{
      
      
    color: darkmagenta;
  }
  .box:hover {
      
      
    color: aquamarine;
  }
</style>

<a href="#">a标签</a>
<div class="box">div标签</div>
  1. :active : リンクをクリックしたときなど、アクティブ化またはクリックされた要素を選択します。
button:active {
    
    
    background-color: green;
}
  1. :focus : フォーカスを取得する要素を選択します。通常はフォーム要素で使用されます。
input:focus {
    
    
    border-color: blue;
}
  1. :nth-child(n) : 親要素の n 番目の子要素を選択します。奇数行スタイルや偶数行スタイルなどの作成に使用できます。
li:nth-child(odd) {
    
    
    background-color: #f0f0f0;
}
  1. :not(selector) : 指定されたセレクターに一致しない要素を選択します。
p:not(.special) {
    
    
    font-style: italic;
}
  1. :first-childおよび:last-child : 親要素の最初と最後の子要素をそれぞれ選択します。
ul > li:first-child {
    
    
    font-weight: bold;
}

ul > li:last-child {
    
    
    font-style: italic;
}

これらの疑似クラス セレクターを使用すると、要素の状態や位置に基づいて要素を選択してスタイル設定できるため、CSS の機能が強化され、より豊かなスタイル効果とインタラクティブなエクスペリエンスを実現できます。

  1. 疑似クラス - ハイパーリンク (展開)
    ハイパーリンクには合計 4 つの状態があります

セレクター – 機能
: リンク – 訪問前
: 訪問済み – 訪問後
: ホバー – マウスオーバー
: アクティブ – クリック時 (アクティブ化)

ヒント: ハイパーリンクに上記の 4 つの状態を設定したい場合は、LVHA の順序で記述する必要があります。



<style>
  /* 工作中，一个 a 标签选择器设置超链接的样式.hover状态特殊设置 */
  /* a:link{
    color: red;
}
a:visited{
  color: green;
}
a:hover{
  color: blue;
}
a:active{
  color: yellow;
} */
即：
a{
      
      
  color: aqua;
}
a:hover{
      
      
  color: gold;
}
</style>
<a href="#">a标签，测试伪装</a>

疑似クラス セレクターと疑似要素セレクターは 2 つの異なる CSS セレクターであり、次の違いがあります。

  1. ターゲットを選択してください:

    • 擬似クラス セレクター:hover:ホバー状態の要素の選択や奇数の位置にある要素の選択など、特定の状態または特性を持つ HTML 要素を選択するために使用されます:nth-child(odd)。

    • 疑似要素セレクター: 選択した要素のコンテンツの前後にダミー要素を作成し、これらのダミー要素にスタイルを適用するために使用されます。たとえば、::before要素のコンテンツの前に仮想要素を挿入したり、::after要素のコンテンツの後に仮想要素を挿入したりします。

  2. 構文:

    • 疑似クラス セレクター: 単一の:コロンで始まり、その後に疑似クラス名が続きます:hover。

    • 擬似要素セレクター: 二重::コロンで始まり、その後に擬似要素名が続きます::before。

  3. 作用機序:

    • 疑似クラス セレクター: 既存の HTML 要素を選択し、その状態または特性に基づいてスタイルを適用しますが、新しい要素は作成しません。

    • 擬似要素セレクター: 仮想要素を作成し、選択した要素のコンテンツの前後に挿入し、装飾や効果の目的でこれらの仮想要素にスタイルを適用します。

  4. 例:

    • 疑似クラスセレクターの例:

      a:hover {
        
        
    color: blue;
}

      このルールは、ホバー状態にあるすべてのリンクを選択し、その色を青に設定します。

    • 擬似要素セレクターの例:

      p::before {
        
        
    content: "注：";
    font-weight: bold;
}

      このルールは、各段落のコンテンツの前に、太字のテキスト「Note:」を含むダミー要素を挿入します。

要約すると、擬似クラス セレクターは、既存の要素の特定の状態や特性を選択してスタイル設定するために使用されますが、擬似要素セレクターはダミー要素を作成し、それにスタイルを適用して追加の装飾コンテンツを追加するために使用されます。これらは CSS での異なる役割と構文を持ちます。

< 1 > 構造擬似クラスセレクター

構造擬似クラス セレクターは、親要素内の構造的関係に基づいて要素を選択する CSS の方法です。一般的な構造擬似クラス セレクターとその説明をいくつか示します。

  1. :first-child : 要素の最初の子要素を選択します。

    li:first-child {
      
      
    background-color: green;
}

    このルールはすべての要素を選択します<li>が、それが親の最初の子である場合に限り、背景色が緑色に変わります。

  2. :last-child : 要素の最後の子要素を選択します。

    li:last-child {
      
      
    font-weight: bold;
}

    このルールはすべての要素を選択します<li>が、その要素が親の最後の子である場合にのみテキストを太字にします。

  3. :nth-child(N) : 要素の N 番目の子要素を選択します。N は整数です。

偶数ラベル: 2n
奇数ラベル: 2n+1、2n-12
5 の倍数: 5n
5 番目の後に n+5 、
5 番目の前に -n+5

li:nth-child(2) {
    
    
    text-decoration: underline;
}

このルールは、<li>親内の 2 番目の要素を選択し、下線を引きます。

これらの構造的な疑似クラス セレクターを使用すると、親要素内の位置に基づいて要素を選択およびスタイル設定できるため、より具体的な効果が得られます。

<2>擬似要素セレクタ

疑似要素セレクターは、CSS で仮想要素 (疑似要素) を作成し、それらにスタイルを適用する方法の 1 つです。これらは、要素のコンテンツの前後に装飾的なコンテンツやスタイルを挿入するためによく使用されます。一般的な疑似要素セレクターには、::beforeと が含まれます::after。

疑似要素セレクターに関する重要な情報を次に示します。

  • ::before pseudo-element: 選択した要素のコンテンツの前にダミー要素を挿入します。

    p::before {
      
      
    content: "前缀 ";
    font-weight: bold;
}

    このルールは、<p>各要素の内容の前に太字の接頭辞を挿入します。

  • ::after pseudo-element: 選択した要素の内容の後にダミー要素を挿入します。

    button::after {
      
      
    content: " (点击我)";
    color: blue;
}

    このルールは、<button>各要素のコンテンツの後に青いテキストを挿入して、ユーザーにボタンをクリックするよう促します。

予防：

  • content疑似要素の内容を定義するには、属性を設定する必要があります。コンテンツがない場合は、空の文字列に設定できます。
  • 擬似要素はデフォルトではインラインですが、他のスタイル プロパティを設定することで表示方法を変更できます。
  • 疑似要素は、それらが接続されているセレクターと同じ重みを持つため、通常は他のセレクターの重みと比較して重みが低くなります。

疑似要素セレクターを使用すると、HTML 構造を変更せずに CSS を通じて追加の装飾コンテンツを追加できるため、ページの視覚効果が向上します。

隣接する兄弟セレクター:

指定された要素と同じレベルおよびその直後の要素を選択します。たとえば、要素のh2直後にあるすべての要素を選択するには、次のようにします。p

h2 + p {
    
    
    /* CSS规则 */
}

おすすめ

転載: blog.csdn.net/m0_74154295/article/details/133368354
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com