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

CSSで背景色を設定する

background-colorプロパティを使用して要素の背景色を指定できます。標準名、rgb（）、rgba（）、hsl（）、またはhsla（）で値を指定できます。

構文

CSSbackground-colorプロパティの構文は次のとおりです-

Selector {
   background-color: /*value*/
}

例

次の例は、CSSのbackground-colorプロパティ-

を示しています。 
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
   font-family: cursive;
   background-color: pink;
}
p:last-child {
   background-color: azure;
}
div {
   margin: auto;
   padding: 5px;
   font-family: Helvetica;
   width: 430px;
   background-color: burlywood;
}
</style>
</head>
<body>
<p>
Java is a high-level programming language originally developed by Sun Microsystems.<p>
<div>
Java released in 1995</div>
<p>
Java runs on a variety of platforms such as Windows, Mac OS, and the various versions of UNIX.</p>
</body>
</html>

出力

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

CSSで背景色を設定する

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   background-color: springgreen;
}
h1 {
   background-color: lightcoral;
   text-align: center;
}
p {
   background-color: lightseagreen;
   font-size: 150%;
}
</style>
</head>
<body>
<div>
<h1>Demo</h1>
<p>This is demo text1. This is demo text2. This is demo text3. </p>
</div>
</body>
</html>

出力

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

CSSで背景色を設定する


  1. CSSを使用して要素のテキストの色を設定する

    CSSのcolorプロパティは、要素のテキストの色を変更するために使用されます。値は、標準の色名、rgb（）、rgba（）、hsl（）、hsla（）、および16進値として指定できます。 構文 CSScolorプロパティの構文は次のとおりです- Selector {    color: /*value*/ } 次の例は、CSSカラープロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> div {    height: 50px;   &nb

  2. CSSを使用してスクロールでグラデーションの背景色を作成するにはどうすればよいですか？

    スクロール時にグラデーションの背景色を作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <style>    body {       height: 250vh;       color: white;       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;