CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSセレクターと宣言を理解する

CSSセレクターは、特定のパターンの各要素を照合することでHTML要素を選択するために使用されます。セレクター内でプロパティとその値を宣言することにより、スタイルを定義します。

構文

スタイルを宣言するための構文は次のとおりです-

Selector {
property: value; }

CSSには、単純なセレクター、属性セレクター、疑似クラス、疑似要素、および標準のコンビネーターによるセレクターの組み合わせがあります。次の表に、セレクターの一部を示します-

セレクター セレクターのタイプ 説明
* ユニバーサルセレクター すべての要素に一致します
e タイプセレクター タイプeのすべての要素に一致します
e1e2 子孫セレクター e1要素の子孫である任意のe2要素に一致します。
e1> e2 子セレクター 要素e1の子である任意のe2要素に一致します。
e [bar ="demo"] 属性セレクター 「bar」属性値が「demo」と完全に等しいe要素と一致します。
#id IDセレクター IDが「id」に等しい要素と一致します。

例

次の例は、CSSセレクターを示しています-

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: lightgreen;
   color: white;
   text-decoration: overline black;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is our demo text. Only the first line will have a different style. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSセレクターと宣言を理解する

例

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: lightgreen;
   color: white;
   text-decoration: overline red;
}
span {
   font-size: 1.4em;
}
#demo {
   box-shadow: inset 0 0 20px orange;
}
</style>
</head>
<body>
<h2>Student Details</h2>
<p><span>Student</span>details would be mentioned here. <span id="demo">Student Marks</span> includes the score of students in the final semester held July 2018. With that the ranks are also displayed.</p>
</body>
</html>
>

出力

これにより、次の出力が得られます-

CSSセレクターと宣言を理解する


  1. CSSボーダーとアウトラインの違いを理解する

    CSS borderプロパティは、要素のborderプロパティを定義するために使用されます。これは、border-width、border-style、border-colorの省略形です。個々の辺の境界線のスタイルを設定したり、境界線の半径を指定したりできます。 一方、CSSアウトラインはスペースをとらず、設定されている場合は境界線の周りに表示されます。オフセットをサポートします。さらに、個々の側面に輪郭を付けるかどうかを指定することはできません。 デフォルトでは、境界線とアウトラインの両方は表示されません。 構文 CSSのborderおよびoutlineプロパティの構文は次のとおりで

  2. CSSメディアタイプとクエリを理解する

    CSSメディアタイプとクエリは、ユーザーがデバイスの一般的なタイプ（画面、印刷など）またはその特性（画面解像度、ビューポートの寸法など）に従って特定のスタイルを定義するのに役立ちます。 構文 メディアクエリの構文は次のとおりです- @media not | only mediatype and (expressions) {    CSS-Code; }のみ ここで、メディアクエリは-の場合に適用されます mediatypeは、ドキュメントがレンダリングされるデバイスタイプと一致します。 not / only演算子が定義されていない場合、メディアクエリはすべてのメ