آموزش css – رنگها در css

رنگها در صفحات وب به صورت ترکیبی از قرمز، سبز و آبی نمایش داده می‌شوند.

مقدار هرکدام از رنگها عددی بین ۰ تا ۲۵۵ است.

نمایش این اعداد معمولا به صورت هگزادسیمال (در مبنای ۱۶) انجام می‌شود.

مقادیر هگزادسیمال رنگها

• علامت # در شروع، نشان دهنده مبنای ۱۶ است.
• مقادیر به صورت جفت از ۰۰ تا FF موجود هستند.
• سه جفت عدد رنگ را به صورت RGB نشان می‌دهد.

#۰۰۰۰۰۰ black
#FFFFFF white
#FF0000 red
#۰۰FF00 green
#۰۰۰۰FF blue

رنگهای مناسب در وب

• یا به عبارت دیگر: Web Color Palette
• مجموعه ای از ۲۱۶ رنگ
• بیشتر همخوانی در نمایش در محیط های مختلف (مثل Mac و PC) را دارند.
• تنها شامل مقادیر زیر می‌باشند : ۰۰, ۳۳, ۶۶, ۹۹, CC, FF

منبع : http://webdevfoundations.net/color/

انتخاب رنگها

چگونه یک رنگ بندی را انتخاب کنیم؟

• یک ترکیب رنگ

http://meyerweb.com/eric/tools/color-blend/

• انتخاب از یک تصویر

http://www.colr.org

• شروع با رنگ مورد علاقه و انتخاب بقیه رنگها توسط ابزارهایی نظیر:

http://colorsontheweb.com/colorwizard.asp
http://colorschemedesigner.com/
http://kuler.adobe.com/
http://www.colors4webmasters.com/safecolor/index.htm

تنظیم رنگها با استفاده از Inline CSS

Inline CSS

• در قسمت بدنه صفحه تعریف می‌شوند.
• از صفت style تگهای XHTML استفاده می‌کنند.
• فقط به یک عنصر خاص محدود می‌شوند.

صفت style

• مقدار: یک یا چند تعریف به صورت جفت صفت-مقدار

مثال۱ : تعریف رنگ قرمز در یک عنصر h1

<h1 style="color:#ff0000">Heading text is red</h1>

خروجی : Heading text is red

مثال۲: رنگ عنوان قرمز و پس‌زمینه خاکستری

• تعاریف مختلف در style با ; از هم جدا می‌شوند.

<h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>

خروجی :

Embedded Styles

• در قسمت سرآیند صفحه تعریف می‌شوند.
• از تگ style استفاده می‌کنند.
• شامل کلیه عناصر صفحه می‌شوند.
• تعاریف بین تگ شروع و پایان style می‌آیند.
• صفت type به صورت text/css تعریف می‌شود.

مثال۱ : تنظیم صفحه به صورت متن سفید و زمینه سیاه

<style type ="text/css">
body { background-color: #000000;
           color: #FFFFFF;
}
</style>

مثال۲ : در اینجا

• انتخابگر body، نشاندهنده اعمال قانون برای کل صفحه می‌باشد.
• این قوانین کلی با قوانین مربوط به h1 و h2 بازنشانی می‌شوند.

<style type="text/css">
body { background-color: #E6E6FA;
            color: #191970;}
h1 { background-color: #191970;
            color: #E6E6FA;}
h2 { background-color: #AEAED4;
           color: #191970;}
</style>

رنگهای مناسب در وب

Loading...