ما با امکانات و طرح جدید برگشتیم ...

CSS و رنگ در HTML

CSS و رنگ در HTML

در ششمین درس از سری آموزش HTML مقدماتی به بررسی CSS و رنگ و آموزش استفاده از این دو عنصر در HMTL می‌پردازیم. همان‌طور که در سری درس‌های قبلی سری آموزش HTML مقدماتی مشاهده کرده‌اید


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

قبلا با مطالعه مقاله «HTML چیست» دریافتیم که HTML یک زبان نشانه گذاری است که دستورات خود را به صورت تگ به مرورگر اعلام می‌کند. این تگ‌ها در زمان نمایش سند به کاربر نشان داده نمی‌شوند اما تمامی چارچوب و ظاهر یک صفحه وب را تعیین می‌کنند. از آنجایی که ظاهر صفحات وب هم اهمیت بالایی دارند، عناصری در HTML گنجانده شده‌اند که به برنامه نویس در ایجاد ظاهری مطلوب برای صفحات وب کمک می‌کنند. در ادامه به معرفی عناصر CSS و رنگ در HTML می‌پردازیم.

رنگ در HTML

رنگ‌های HTML با استفاده از نام‌های از پیش تعیین شده یا مقادیر RGB، HEX، HSL، RGBA و HSLA مشخص می‌شوند. در HTML، یک رنگ را می‌توان با استفاده از نام آن مشخص کرد. HTML از ۱۴۰ نام استاندارد رنگ پشتیبانی می‌کند:

رنگ در HTML

رنگ پشت زمینه

شما می‌توانید برای عناصر HTML یک رنگ پشت زمینه یا background انتخاب کنید که نمونه کد آن را در زیر مشاهده می‌کنید:

رنگ پشت زمینه

رنگ متن در html

در HTML می‌توان برای متن خود یک رنگ مشخص انتخاب کرد. نمونه و کد مربوط به آن را در زیر مشاهده می‌کنید:

رنگ متن در html

رنگ کادرها در html

اگر بخواهید پیرامون یک متن کادری را قرار دهید می‌توانید برای شاخص تر کردن کادر برای آن یک رنگ انتخاب کنید:

رنگ کادرها در html

مقدار رنگ ها در html

در HTML، رنگ ها می‌توانند با مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر rgBA و مقادیر HSLA مشخص شوند. در زیر نمونه رنگ «Tomato» نرمال را مشاهده می‌کنید:

مقدار رنگ ها در html

در اینجا هم نمونه رنگ Tomato را با ۵۰ درصد شفافیت مشاهده می‌کنید:

مقدار رنگ ها در html

نمونه کد دو رنگ بالا در ادامه آورده شده است:

مقدار RGB

در HTML می‌توان با استفاده از فرمول زیر یک رنگ را به عنوان یک مقدار RGB تعریف کرد. RGB سرواژه کلمات «Red، Green و Blue» است. هر یک از پارامترهای قرمز، سبز، آبی شدت رنگ را بین بازه ۰- ۲۵۵ تعریف می‌کند. برای مثال rgb(255, 0, 0) به صورت رنگ قرمز نمایش داده می‌شوند چون رنگ قرمز بالاترین مقدار را داشته و بقیه صفر تعریف شده‌اند. برای نمایش رنگ سیاه، تمام پارامترها باید صفر تعیین شوند مانند rgb(0, 0, 0). برای نمایش رنگ سفید تمام پارامترها باید ۲۵۵ تعیین شوند مانند rgb(255, 255, 255). در ادامه چند نمونه را مشاهده می‌کنید:

مقدار RGB

سایه خاکستری اغلب با استفاده از تعیین مقادیر مساوی برای هر سه منبع رنگ ایجاد می‌شود:

مقدار RGB

مقدار HEX

در HTML مقدار رنگ را می‌توان با استفاده از یک مقدار هگزادسیمال به شکل #rrggbb تعریف کرد که در آن rr نماد رنگ قرمز (red)، gg نماد رنگ سبز (green) و bb نماد رنگ آبی (blue)، مقادیری بین ۰۰ و ff (مشابه ۰- ۲۵۵) هستند. برای مثال #ff0000 به صورت رنگ قرمز نمایش داده می‌شود، چون به قرمز بالاترین مقدار (ff) داده شده و بقیه پایین‌ترین مقدار (۰۰) را دارند.

مقدار HEX

سایه خاکستری معمولا با استفاده از تعریف مقادیر مساوی برای سه منبع رنگ به دست می‌آید:

مشاهده
معرفی اصول اولیه و عناصر HTML

مقدار HEX

مقدار HSL

در HTML یک رنگ را می‌توان با استفاده از ته رنگ، غلظت و روشنایی به شکل HSL یا همان Hue، Saturation‌ و Lightness، مشخص کرد. ته رنگ یا hue درجه‌ ۰ تا ۳۶۰ روی چرخه رنگ است که مقدار ۰ نشان‌دهنده رنگ قرمز، مقدار ۱۲۰ مقدار رنگ سبز و ۲۴۰ معرف رنگ آبی است. غلظت یا Saturation به معنی یک مقدار درصدی است که %۰ به معنی سایه‌ی خاکستری و %۱۰۰ به معنی رنگ کامل است. روشنایی یا Lightness هم به صورت درصدی تعریف می‌شود که %۰ به رنگ سیاه، %۵۰ نه روشن و نه تیره و %۱۰۰ نشان‌دهنده رنگ سفید است:

مقدار HSL

غلظت رنگ در html

غلظت را می‌توان به عنوان شدت یک رنگ تعریف کرد. ۱۰۰ درصد یعنی یک رنگ خالص که هیچ‌گونه سایه خاکستری ندارد. ۵۰ درصد یعنی ۵۰ درصد سایه خاکستری وجود دارد اما هنوز می‌توانید رنگ اصلی را تشخیص دهید. صفر درصد یعنی خاکستری کامل و شما دیگر نمی‌توانید رنگ اصلی را ببینید:

غلظت رنگ در html

روشنایی

روشنایی یک رنگ را می‌توان به صورت میزان نوری که می‌خواهید به یک رنگ بدهید تعریف کرد؛ به این صورت که صفر درصد یعنی عدم وجود نور (سیاه)، ۵۰ درصد یعنی ۵۰ درصد نور (نه روشن و نه تیره) و ۱۰۰ درصد به معنی روشنایی کامل (سفید) است.

روشنایی

سایه‌های خاکستری اغلب از طریق قرار دادن مقادیر ته رنگ و غلظت روی صفر و تنظیم روشنایی بین صفر تا صد برای به دست آوردن سایه‌های تیره‌تر یا روشن‌تر ایجاد می‌شوند:

سایه‌های خاکستری

مقدار RGBA

مقادیر رنگ‌های RGBA در واقع بسط یافته‌ی مقادیر رنگ‌های RGB به همراه یک کانال آلفا هستند که کدری یک رنگ را مشخص می‌کند. مقدار رنگ RGBA به صورت rgba (red, green, blue, alpha) مشخص می‌شود. پارامتر آلفا یک عدد بین ۰٫۰ (کاملا شفاف) و ۱٫۰ (بدون هیچ‌گونه شفافیت) است:

مقدار RGBA

مقدار HSLA

مقادیر رنگ‌های HSLA هم بسط یافته‌ی مقادیر رنگ‌های HSL با یک کانال آلفا است که کدری رنگ را مشخص می‌کند. مقدار یک رنگ HSLA به صورت hsla (hue, saturation, lightness, alpha) تعریف می‌شود. پارامتر آلفا یک عدد بین ۰٫۰ (کاملا شفاف) و ۱٫۰ (بدون هیچ‌گونه شفافیت) است:

مقدار HSLA

CSS و استایل در HTML

CSS و استایل در HTML

CSS مخفف عبارت Cascading Style Sheet (شیوه نامه آبشاری) است و مشخص می‌کند که عناصر HTML روی صفحه نمایش، کاغذ یا در سایر رسانه‌ها چگونه نمایش داده شوند. با استفاده از CSS در حجم زیادی از کار صرفه جویی می‌شود چون می‌تواند آرایش چندین صفحه وب را به صورت هم‌زمان کنترل کند. به سه طریق می‌تواند CSS را به عناصر HTML افزود:

– Inline: با استفاده از خصوصیت style در عناصر HTML

– Internal: با استفاده از عنصر <style> در بخش <head>

– External: با استفاده از یک فایل CSS اکسترنال یا خارجی

رایج‌ترین روش افزودن CSS این است که استایل را در فایل‌های CSS جداگانه نگه داریم. البته در اینجا ما از روش inline و internal استفاده می‌کنیم چون نمایش آن ساده‌تر و یادگیری آن برای شما آسان‌تر خواهد بود. می‌توانید با مراجعه به بخش آموزش CSS، در مورد آن بیشتر بدانید.

افزودن CSS به روش Inline

روش inline برای به کار گیری یک استایل منحصر به فرد برای یک عنصر HTML به کار می‌رود. در این روش از خصوصیت style یک عنصر HTML استفاده می‌شود. در مثال زیر رنگ عنصر <h1> به رنگ آبی تعریف می‌شود:

افزودن CSS به روش Internal

از این روش برای تعریف یک استایل برای یک صفحه HTML استفاده می‌شود. افزودن CSS به این روش در بخش <head> یک صفحه HTML، درون عنصر <style> تعریف می‌شود:

افزودن CSS به روش External

یک شیوه نامه اکسترنال برای تعریف استایل چندین صفحه HTML به کار می‌رود. با این شیوه نامه یا style sheet می‌توانید تنها با تغییر یک فایل، کل وب سایت را تغییر دهید. برای استفاده از شیوه نامه اکسترنال، در بخش <head> صفحه HTML یک لینک اضافه کنید:

مشاهده
معرفی پاراگراف و استایل در HTML

می‌توان این شیوه‌نامه را در هر ویرایشگر متنی نوشت. فایل باید حاوی هیچ‌گونه کد HTML نبوده و باید با پسوند .css ذخیره شود:

 فونت CSS

خصوصیت color (رنگ) در CSS رنگ متنی که به کار برده می‌شود را تعریف می‌کند. خصوصیت font-family نوع فونتی که استفاده می‌شود را مشخص کرده و خصوصیت font-size هم اندازه متن مورد استفاده را نشان می‌دهد:

 کادر CSS

خصوصیت border در CSS یک کادر پیرامون عنصر HTML تعریف می‌کند:

 Padding در CSS

خصوصیت padding در CSS یک فضای خالی بین متن و کادر ایجاد می‌کند:

Margin در CSS

خصوصیت margin در CSS یک حاشیه یا فضای خالی در بیرون از کادر ایجاد می‌کند:

ویژگی id

برای تعریف یک استایل خاص برای یک عنصر خاص یک ویژگی id به آن عنصر اضافه می‌شود:

سپس یک استایل برای آن عنصر که دارای id مشخص است، تعریف می‌شود:

توجه داشته باشید که id یک عنصر باید منحصر به فرد باشد بنابراین برای انتخاب یک عنصر منحصر به فرد از سلکتور id استفاده می‌شود.

ویژگی Class در CSS

جهت تعریف یک استایل برای یک المان خاص، ویژگی class را به آن عنصر اضافه کنید:

سپس یک استایل برای عناصری که دارای کلاس مشخص هستند تعریف کنید:

مرجع خارجی

شیوه‌نامه‌های اکسترنال یا خارجی را می‌توان با یک URL کامل یا با مسیر مربوط به صفحه جاری رفرنس داد. در مثال زیر از یک URL کامل برای لینک دادن به یک شیوه‌نامه استفاده شده است:

در این مثال به شیوه‌نامه‌ای لینک داده شده است که در یک پوشه HTML در وب سایت قرار دارد:

در مثال بعدی به شیوه‌نامه‌ای لینک داده شده است که در همان پوشه HTML در صفحه جاری قرار دارد:

مبحث رنگ در HTML شاید در ابتدا کمی گیج‌کننده به نظر برسد، اما از طریق بازی کردن با مقادیر رنگ ها در HTML و تمرین زیاد، می‌توانید ترکیب‌های زیبایی ایجاد کنید. تفاوت ظاهر سایت های مختلف نتیجه سلیقه برنامه نویس آن و شناخت ترکیبات مختلف رنگی و استفاده از آن‌ها در پروسه طراحی سایت است.

برای بازی با رنگ ها در HTML، می‌توانید نمونه‌های آماده آن را در اینترنت پیدا کنید یا از خلاقیت خودتان استفاده کنید تا طراحی وب سایت خود و ظاهر آن را آن طور که می‌خواهید ایجاد کنید.

توصیه می‌شود حتی اگر اندکی با HTML آشنایی دارید، برای یادگیری بهتر و اصولی این زبان حتما از درس اول آموزش HTML که در وب‌سایت تدریس کده قرار داده شده شروع به یادگیری و تمرین کنید تا گام به گام تمامی نکات را به خوبی فرا بگیرید. در بخش بعدی از سری مقالات آموزش HTML مقدماتی در مورد لینک‌ و تصاویر در HTML صحبت خواهیم کرد. برای دسترسی به مجموعه‌ای کامل از مباحث آموزش طراحی سایت ، با ما همراه باشید

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

توسط
تومان