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

要素のスタイル設定にCSSセレクターを使用するにはどうすればよいですか？

CSSセレクターを使用すると、好みに基づいて目的の要素を具体的にスタイル設定できます。 HTMLDOMの要素を選択するにはさまざまな方法があります。

構文

CSSセレクターの構文は次のとおりです-

Selector {
   /*declarations*/
}

次の例は、スタイリング要素のCSSセレクターを示しています-

例

<!DOCTYPE html>
<html>
<head>
<style>
#one {
   filter: invert(85%);
}
</style>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
<img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg">
</body>
</html>

出力

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

要素のスタイル設定にCSSセレクターを使用するにはどうすればよいですか？

例

<!DOCTYPE html>
<html>
<head>
<style>
div, p {
   margin: 4px;
   float: left;
   height: 200px;
   width: 300px;
   box-shadow: inset 0 2px 4px olive;
   background-image: url("https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg");
}
p {
   background-image: url("https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg");
   background-position: 50% 50%;
   color: black;
}
</style>
</head>
<body>
<h2>Learning Tutorials</h2>
<div></div>
<p>Tutorials</p>
</body>
</html>

出力

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

要素のスタイル設定にCSSセレクターを使用するにはどうすればよいですか？


  1. HTMLで内部CSS（スタイルシート）を使用するにはどうすればよいですか？

    CSSは、HTMLでさまざまな方法で使用できます。それらの1つは、内部CSSを使用すること、つまりタグを使用することです。 タグは、…タグで使用されます。単一ページのCSSスタイルを定義します。 例 次のコードを実行して、HTMLで内部CSSを使用することができます- <!DOCTYPE html> <html>    <head>       <style>          h1 {color: red;}     &

  2. HTMLでインラインCSS（スタイルシート）を使用するにはどうすればよいですか？

    HTMLにインラインCSSを追加するには、style属性を使用します。 style属性は、要素のインラインスタイルを指定します。この属性は、font-family、font-style、text-decoration、directionなどのCSSプロパティで使用されます。 スタイル属性の使用は、グローバルに設定されたスタイルを上書きすることに注意してください。 HTMLのタグまたは外部スタイルシートに設定されているスタイルを上書きします。 例 次のコードを試して、HTMLでインラインCSSを使用できます。ここでは、インラインCSSを使用して見出しにフォントサイズを追加しています &