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

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

CSSのcolorプロパティは、要素のテキストの色を変更するために使用されます。値は、標準の色名、rgb（）、rgba（）、hsl（）、hsla（）、および16進値として指定できます。

構文

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

Selector {
   color: /*value*/
}

次の例は、CSSカラープロパティ-

を示しています。

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   height: 50px;
   width: 50px;
   float: right;
   color: white;
   background-color: #2f5587;
}
p {
   color: rgba(225,5,135,0.7);
   border: 2px solid #16c618;
   box-shadow: 0 7px 0 5px hsl(90, 60%, 70%);
}
</style>
</head>
<body>
<h2>Example Heading</h2>
<div>This is it</div>
<p>Demo text is visible here.</p>
</body>
</html>

出力

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

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

例

<!DOCTYPE html>
<html>
<head>
<style>
li:nth-of-type(even) {
   color: dodgerblue;
   border: 6px groove #16c618;
   padding: 4px;
   box-shadow: inset -100px 0 5px red;
}
</style>
</head>
<body>
<h2>Learn Servlets</h2>
<ul>
<li>Java Servlets are programs that run on a Web or Application server.</li>
<li>Java Servlets often serve the same purpose as programs implemented using the CGI.</li>
<li>Servlets are platform-independent because they are written in Java.
</li>
</ul>
</body>
</html>

出力

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

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


  1. CSSを使用して放射状グラデーションのサイズを設定する

    放射状グラデーションのサイズを設定するには、radial-gradient（）関数を使用します。この関数は、放射状のグラデーションを背景画像として設定します。関数の2番目のパラメーターは、次の例のように、必要なサイズに設定します- background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128, 0, 32)); 可能な値は、最も遠い角（デフォルト）、最も近い側、最も近い角、および最も遠い側です。以下は、CSSを使用して放射状グラデーションのサイズを設定するためのコード

  2. CSSを使用したロケーションカラーの設定停止

    カラーストップの位置は、パーセンテージまたは絶対長として設定できます。たとえば、線形グラデーションの場合 background-image: linear-gradient(    rgb(61, 255, 2) 40%,    rgb(0, 174, 255) 80%,    rgb(255, 29, 29) 20% ); 以下は、CSS-を使用して線形グラデーションで位置の色の停止を設定するためのコードです。 例 <!DOCTYPE html> <html> <head> <style&