آموزش کلمات کلیدی رنگ در CSS

در این مقاله به توضیح کلمات کلیدی transparent و currentcolor و inherit می پردازیم.

کلمه ی کلیدی transparent در  CSS

از کلمه ی کلیدی transparent برای شفاف(ناپیدا) کردن یک رنگ استفاده می شود. از این کلمه اغلب برای شفاف کردن رنگ پس زمینه ی یک عنصر استفاده می شود.

body {
  background-image: url("paper.gif");
}

div {
  background-color: transparent;
}

 نکته: کلمه ی کلیدی transparent با rgba(0,0,0,0) معادل(برابر) است.

مقادیر رنگ RGBA از مقادیر رنگ RGB با یک کانال آلفا توسعه یافته اند؛ که opacity (شفافیت) را برای یک رنگ مشخص می کند.

کلمه ی کلیدی currentcolor در CSS

کلمه ی کلیدی currentcolor مانند یک متغیر است که مقدار فعلی ویژگی color از یک عنصر را نگهداری می کند.اگر بخواهیم یک رنگ خاص در یک عنصر یا یک صفحه یکدست(consistent) باشد، می توانیم از این کلمه ی کلیدی استفاده کنیم:

div {
  color: blue;
  border: 10px solid currentcolor;
}

body {
  color: purple;
}

div {
  background-color: currentcolor;
}

body {
 color: green;
}

div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

 کلمه ی کلیدی inherit در CSS

کلمه ی کلیدی inherit مشخص می کند که مقدار یک ویژگی باید از عنصر والد آن به ارث برده شود. برای هر ویژگی در CSS  و هر عنصر HTML، می توانیم از کلمه ی کلیدی inherit استفاده کنیم.

div {
  border: 2px solid red;
}

span {
  border: inherit;
}