کلیدواژه‌های رنگ در CSS
در CSS سه کلیدواژه‌ی transparent، currentcolor و inherit برای تعریف رنگ‌ها استفاده می‌شوند.
کلیدواژه Transparent
کلیدواژه‌ی transparent برای ایجاد رنگ شفاف استفاده می‌شود. این ویژگی معمولاً برای شفاف کردن پس‌زمینه‌ی یک عنصر کاربرد دارد.
مثال:
در اینجا، رنگ پس‌زمینه‌ی عنصر <div> کاملاً شفاف است و تصویر پس‌زمینه از آن عبور می‌کند:
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}نکته: کلیدواژه‌ی transparent معادل rgba(0, 0, 0, 0) است. در واقع از مقادیر رنگ RGBA برای ایجاد شفافیت استفاده می‌کند.
کلیدواژه Currentcolor
کلیدواژه‌ی currentcolor به عنوان یک متغیر عمل می‌کند و مقدار فعلی خاصیت رنگ (color) عنصر را نگه می‌دارد. این ویژگی زمانی مفید است که می‌خواهید یک رنگ خاص در تمامی قسمت‌های یک عنصر یا صفحه ثابت بماند.
مثال ۱:
در این مثال، رنگ حاشیه‌ی عنصر <div> به دلیل آبی بودن رنگ متن عنصر، آبی می‌شود:
div {
color: blue;
border: 10px solid currentcolor;
}مثال ۲:
در این مثال، رنگ پس‌زمینه‌ی عنصر <div> با استفاده از مقدار فعلی رنگ بدن (body) تنظیم می‌شود:
body {
color: purple;
}
div {
background-color: currentcolor;
}مثال ۳:
در این مثال، رنگ حاشیه و سایه‌ی عنصر <div> از رنگ فعلی متن بدن (body) گرفته شده است:
body {
color: green;
}
div {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
}کلیدواژه Inherit
کلیدواژه‌ی inherit تعیین می‌کند که یک خاصیت CSS باید مقدار خود را از عنصر والد به ارث ببرد. این ویژگی می‌تواند برای هر خاصیت CSS و هر عنصر HTML استفاده شود.
مثال:
در این مثال، تنظیمات حاشیه عنصر <span> از عنصر والد یعنی <div> به ارث برده می‌شود:
div {
border: 2px solid red;
}
span {
border: inherit;
}این کلیدواژه زمانی مفید است که می‌خواهید از تنظیمات والد در عناصر داخلی استفاده کنید بدون اینکه دوباره مقادیر را تکرار کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام