۲
فروردین

جلسه ۷۱ : آموزش کار با ویژگی color در CSS

دسته‌بندی‌ها :

سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه گذشته با ویژگی clip-path آشنا شدیم و آموختیم که این ویژگی به شما امکان می دهد تا عنصری را به شکل اصلی یا منبع SVG بکشید.
در جلسه فعلی قرار است به آموزش کار با ویژگی color در CSS بپردازیم.

فهرست

آموزش کار با ویژگی color در CSS

به مثال زیر توجه نمایید؛ در این مثال رنگ متن را برای عناصر مختلف تنظیم کرده ایم.

مثال :

body {
  color: red;
}

h1 {
  color: #00ff00;
}

p.ex {
  color: rgb(0,0,255);
}

body {

color: red;

}

h1 {

color: #00ff00;

}

p.ex {

color: rgb(0,0,255);

}

تعریف و کاربرد

حتماً حدس زده اید که ویژگی color در CSS چه کار می کند؛ این ویژگی در حقیقت رنگ متن را مشخص می کند.

نکته

همیشه سعی کنید از رنگی به عنوان رنگ پس زمینه استفاده نمایید که خواندن آن را راحتتر و ساده تر نماید.

مقدار پیش فرض	not specified
به ارث بردن	بله
متحرک بودن	بله
نسخه	CSS1
سینتکس JavaScript	“(object.style.clipPath=”circle(50%

پشتیبانی مرورگر ها

در ادامه آموزش کار با ویژگی color در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.

نام ویژگی
color	۱٫۰	۱٫۰	۳٫۵	۱٫۰	۳٫۰

سینتکس CSS

مثال :

color: color|initial|inherit;

1	color: color\|initial\|inherit;

مقدار ویژگی

مقدار	توضیحات
color	رنگ متن را مشخص می کند.
initial	ویژگی را به مقدار پیش فرض خود تنظیم می کند.
inherit	این ویژگی را از عنصر parent خود به ارث می برد.

مثال های بیشتر

مثال یک

تنظیم رنگ متن با یک مقدار HEX :

مثال :

body {color: #92a8d1;}

1	body {color: #92a8d1;}

مثال دو

تنظیم رنگ متن با یک مقدار RGB :

مثال :

body {color: rgb(201, 76, 76);}

1	body {color: rgb(201, 76, 76);}

مثال سه

تنظیم رنگ متن با یک مقدار RGBA :

مثال :

body {color: rgba(201, 76, 76, 0.6);}

1	body {color: rgba(201, 76, 76, 0.6);}

مثال چهار

تنظیم رنگ متن با یک مقدار HSL :

مثال :

body {color: hsl(89, 43%, 51%);}

1	body {color: hsl(89, 43%, 51%);}

مثال پنج

تنظیم رنگ متن با یک مقدار HSLA :

مثال :

body {color: hsla(89, 43%, 51%, 0.6);}

1	body {color: hsla(89, 43%, 51%, 0.6);}

کلام آخر

در این جلسه آموزش کار با ویژگی color در CSS ارائه شد؛ این ویژگی رنگ متن را مشخص می کند.
در جلسه آینده شما را با ویژگی column-count و نحوه کار با آن آشنا خواهیم شد.
با پی وی لرن همراه باشید.

QR: جلسه ۷۱ : آموزش کار با ویژگی color در CSS

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۷۱ : آموزش کار با ویژگی color در CSS

آموزش کار با ویژگی color در CSS

تعریف و کاربرد

نکته

پشتیبانی مرورگر ها

سینتکس CSS

مقدار ویژگی

مثال های بیشتر

مثال یک

مثال دو

مثال سه

مثال چهار

مثال پنج

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ