09162352304
[email protected]

آموزش HTML مقدماتی؛ CSS و رنگ در HTML

درس 6/9 | زمان مطالعه: 20 حداقل
آموزش HTML مقدماتی؛ CSS و رنگ در HTML

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

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

در این درس از سری آموزش HTML می‌خوانید:

رنگ در HTML: رنگ Background | رنگ متن | رنگ کادر | مقدار رنگ‌ها

CSS و استایل در HTML

رنگ در HTML

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

رنگ پشت زمینه

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

 

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

رنگ متن در Html

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

 

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

رنگ کادرها در Html

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

 

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

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

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

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

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

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
 
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

مقدار RGB

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

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

مقدار HEX

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

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

مقدار HSL

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

غلظت رنگ در Html

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

روشنایی

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

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

مقدار RGBA

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

مقدار HSLA

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

CSS و استایل در HTML

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

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

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

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

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

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

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

<h1 style="color:blue;">This is a Blue Heading</h1>

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

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

<!DOCTYPE html><html>

<head>

<style>body {background-color: powderblue;}h1   {color: blue;}p    {color: red;}</style>

</head>

<body>

 <h1>This is a heading</h1>

<p>This is a paragraph.</p> 

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<head> 

<link rel="stylesheet" href="styles.css">

</head>

<body> 

<h1>This is a heading</h1>

<p>This is a paragraph.</p> 

</body>

</html>

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

body {    background-color: powderblue;}h1 {    color: blue;}p {    color: red;}

 فونت CSS

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

<!DOCTYPE html>

<html>

<head>

<style>

h1 {    color: blue;    font-family: verdana;    font-size: 300%;}p  {    color: red;    font-family: courier;    font-size: 160%;}

</style>

</head>

<body> 

<h1>This is a heading</h1>

<p>This is a paragraph.</p> 

</body>

</html>

 کادر CSS

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

p {    border: 1px solid powderblue;}

 Padding در CSS

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

p {    border: 1px solid powderblue;    padding: 30px;}

Margin در CSS

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

p {    border: 1px solid powderblue;    margin: 50px;}

ویژگی Id

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

<p id="p01">I am different</p>

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

#p01 {    color: blue;}

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

ویژگی Class در CSS

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

<p class="error">I am different</p>

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

p.error {    color: red;}

مرجع خارجی

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

<link rel="stylesheet" href="https://www.setinco.com.com/html/styles.css">

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

<link rel="stylesheet" href="/html/styles.css">

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

<link rel="stylesheet" href="styles.css">

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

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

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