در جلسه قبل از آموزش CSS با سلکتور CSS آشنا شدید. در این بخش قصد داریم شما را با نحوه استفاده از خصوصیت رنگ در CSS را آموزش بدیم.
خصیصه رنگ در CSS رنگ پیش زمینه را برای یک المان خاص تعریف می کند.
تنظیم خصیصه رنگ در CSS :
ویژگی color معمولا رنگ محتوای متن یک المان را تعریف می کند. به عنوان مثال خصیصه رنگ مشخص شده در سلکتور بدنه، رنگ پیش فرض متن را برای کل صفحه تعریف می کند.
|
1 2 3 |
body { color: #000000; } |
رنگ ها در زبان CSS اغلب توسط روش های زیر مشخص می شود:
- مقادیر هگزا دسیمال مثلا #ff0000
- مقادیر RGB مثلا rgb(255,0,0)
- نام رنگ مثلا red
مقادیر هگزادسیمال رنگ ها
- علامت # در شروع، نشان دهنده مبنای ۱۶ است.
- مقادیر به صورت جفت از ۰۰ تا FF موجود هستند.
- سه جفت عدد رنگ را به صورت RGB نشان میدهد.
در این روش که بدلیل کوتاه و ساده بودن کد رنگ بیشترین استفاده رو داره رنگ به صورت rrggbb# نشان داده می شود و از اعداد مبنای ۸ (HexaDecimal) به جای اعداد دهدهی است که rr و gg و bb به ترتیب مقدار عددی شدت رنگ های قرمز ، سبز و آبی رو نشون میدهد و مقادیر هگزادسیمال بین ۰۰ تا FF که معادل همون ۰ تا ۲۵۵ دهدهی هست را میتوانند بگیرند
|
1 2 3 4 5 |
#000000 =>> black #FFFFFF =>> white #FF0000 =>> red #00FF00 =>> green #0000FF =>> blue |
اگر شما اعداد را بصورت ۳ حرفی بجای ۶ حرفی وارد کنید برای مرورگر این معنی را خواهد داشت که سایر ارقام آن رنگ نیز همان مقدار را دارد. مثلا:
|
1 2 3 4 |
p { /* 333333 */ color: #333; } |
نام رنگ
لیست کلیه نام رنگ ها را که در CSS می توانید استفاده کنید در لینک زیر لیست شده است :
https://www.w3schools.com/colors/colors_names.asp
رنگ RGB
حروف آن نماینده همان ۳ رنگ اصلی آبی B، قرمز R و سبز G هستند. در این روش بدون تبدیل مبنا اعداد در بازه ای بین ۰ تا ۲۵۵ (۲۵۶ سطح) تعریف می شوند. مانند:
|
1 2 3 |
p { color: rgb(99,141,200); } |
تاثیر خصیصه رنگ بر روی حاشیه ها و Outlineها:
خصیصه رنگ تنها برای محتوای متن نیست. این خصیصه برای هر چیزی که در فورگراند قرار دارد و می تواند مقادیر رنگ را اتخاذ نماید مورد استفاده قرار می گیرد.
به عنوان مثال اگر مقادیر رنگ حاشیه یا رنگ outline به طور واضح و برای المان موردنظر تعریف نشده باشد، مقدار رنگ به جای آن مورد استفاده قرار خواهد گرفت.
|
1 2 3 4 5 6 7 8 |
p.one { color: #0000ff; border: 2px solid; } p.two { color: #00ff00; outline: 2px solid; } |
نکته: خصیصه رنگ به طور طبیعی مقدار رنگ را از المان والد خود به ارث می برد. این قانون یک استثنا دارد و آن هم در مورد المان Anchor است
امیدوارم در این بخش آموزش CSS, از خصوصیت رنگ در CSS نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
