ویژگی color در CSS

color Property

ویژگی color در CSS رنگ متن را مشخص می کند. همچنین این ویژگی رنگ جاری را نیز تعیین می کند که این موضوع رنگ بخش های دیگر مانند رنگ حاشیه (border) و یا رنگ سایه (box-shadow) را نیز شامل می شود.

نحوه نوشتار

/* نام رنگ */
color: red;
color: blue;

/* مقادیر HEX */
color: #c8a;
color: #cc88aa;

/* مقادر RGB */
color: rgb(22, 199, 60);
color: rgba(22, 199, 60, 0.6);

/* مقادیر HSL */
color: hsl(56, 50%, 48%, 0.8);
color: hsla(56, 50%, 48%, 0.8);
color: hsl(56 50% 48% / 0.8);

در مثال زیر نحوه عملکرد این ویژگی را میبینیم. در عنصر box1. رنگ متن، رنگ حاشیه و رنگ سایه، از رنگی که با ویژگی color به انتخابگر body داده شده است، به ارث برده شده است. در باکس های دیگر به هر کدام از این ویژگی ها مقادیر دیگری داده شده و سبب شده تا رنگ های متفاوتی بپذیرند:

html

<div class="box1">
      <p>box1</p>
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</div>
<div class="box2">
      <p>box2</p>
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</div>
<div class="box3">
      <p>box3</p>
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</div>
<div class="box4">
      <p>box4</p>
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</div>

css

div {
   max-width: 300px;
   margin-top: 30px;
   border: 2px solid;
   padding: 7px;
}
.box1 {
   box-shadow: 0 7px 20px;
}
.box2 {
   color: rgb(22, 199, 60);
   border-color: #1e90ff;
}
.box3 {
   color: hsl(0, 0%, 55%);
   box-shadow: 0 7px 15px;
}
.box4 {      
   color: orange;
   border-color: blueviolet;
   box-shadow: 0 7px 15px skyblue;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.