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

CSS rgb（）関数

rgb（）関数は、RGBカラー値を設定するために使用されます。関数のパラメーターは、色の強度をパーセンテージまたは0から255までの値で設定します。

例

まず、CSSでrgb（）を実装する例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
div {
   text-align: justify;
   text-justify: inter-word;
   color: rgb(213,33,33);
   background-color: rgb(211,211,211);
   font-size: 1.1em;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>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. 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. </div>
</body>
</html>

出力

CSS rgb（）関数

例

別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   grid-area: newArea;
   font-size: xx-large;
}
.item3 {
   font-size: small;
}
.item4 {
   font-size: medium;
}
.item5 {
   font-size: x-large;
}
.grid-container {
   display: grid;
   grid-template-areas:
   'newArea newArea . . .'
   'newArea newArea . . .';
   grid-gap: 5px;
   background-color: rgb(0,255,255);
   padding: 5px;
}
.grid-container > div {
   background-color: rgb(255, 50, 80);
   text-align: center;
   padding: 5px 0;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>

出力

CSS rgb（）関数


  1. CSSの権利プロパティ

    rightプロパティは、要素の水平位置を設定するために使用されます。 −として設定されます right: auto|length|initial|inherit; 例 CSSで適切なプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: white;    backgr

  2. CSSを使用したテキストのインデント

    テキストのインデントには、CSSのtext-indentプロパティを使用します。これは、段落の最初の行をインデントするためのものです。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-indent: 30px; } </style> </head> <body> <h1>Demo Heading</h1> <div> <p>This is demo text.