October 10, 2022 1:40 pm

استایل در HTML
قالب بندی متن
عناصر نقل قول
تگ Comment (اظهار نظر)
رنگها

–

۸. استایل در HTML

ویژگی style برای افزودن سبک به یک عنصر مانند رنگ، فونت، اندازه و موارد دیگر استفاده می شود.

مثال:

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>

I am normal

I am red

I am blue

I am big

ویژگی سبک HTML دارای سینتکس زیر است:

<tagname style="property:value;">

این ویژگی یک ویژگی CSS است. مقدار یک مقدار CSS است.

بعداً در مورد CSS بیشتر خواهید آموخت.

رنگ پس زمینه

ویژگی CSS background-color رنگ پس زمینه یک عنصر HTML را مشخص می کند.

مثال۱:

رنگ پس زمینه یک صفحه را روی آبی تنظیم کنید:

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

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

</body>
</html>

This is a heading

This is a paragraph.

مثال۲:

رنگ پس زمینه را برای دو عنصر مختلف تنظیم کنید:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>
</html>

This is a heading

This is a paragraph.

رنگ متن

ویژگی color رنگ متن را برای یک عنصر HTML تعریف می کند:

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

This is a heading

This is a paragraph.

فونت ها

ویژگی CSS font-family فونت مورد استفاده برای یک عنصر HTML را تعریف می کند:

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

</body>
</html>

This is a heading

This is a paragraph.

اندازه متن

ویژگی CSS font-size اندازه متن را برای یک عنصر HTML تعریف می کند:

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

</body>
</html>

This is a heading

This is a paragraph.

ترازبندی متن

ویژگی CSS text-align تراز افقی متن را برای یک عنصر HTML تعریف می کند:

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>

Centered Heading

Centered paragraph.

خلاصه این قسمت:

از ویژگی style برای استایل دادن به عناصر HTML استفاده می شود.
از background-color برای رنگ پس زمینه استفاده می شود.
از color برای رنگ های متن استفاده می شود.
از font-family برای فونت های متنی استفاده می شود.
از font-size برای اندازه متن استفاده می شود.
از text-align برای تراز کردن متن استفاده می شود.

برو بالا 🡱

–

۹. قالب بندی متن

HTML شامل چندین عنصر برای تعریف متن با معنای خاص است.

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>

This text is bold

This text is italic

This is_subscript and ^superscript

قالب بندی عناصر

عناصر قالب بندی برای نمایش انواع خاصی از متن طراحی شده اند:

 – متن بولد
 – متن مهم
 – متن ایتالیک
 – متن تاکید شده
 – متن علامت گذاری شده
 – متن کوچکتر
<del> – متن حذف شده
<ins> – متن درج شده
 – متن زیرنویس
 – متن بالانویس

عناصر و

عنصر  متن پررنگ را بدون هیچ اهمیت اضافی تعریف می کند.

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

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

<strong>This text is important!</strong>

</body>
</html>

This text is normal.

This text is bold.

This text is important!

عناصر و

عنصر  بخشی از متن را به صورت کج (italic) نمایش می دهد.

نکته: تگ  اغلب برای نشان دادن یک اصطلاح فنی، عبارتی از زبان دیگر، یک اندیشه، نام کشتی و غیره استفاده می شود.

عنصر  متن تاکید شده را تعریف می کند. محتوای داخل معمولا به صورت مورب نمایش داده می شود.

نکته: یک صفحه‌خوان کلمات را در با تاکید و با استفاده از استرس کلامی تلفظ می‌کند.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
<em>This text is emphasized</em>

</body>
</html>

This text is normal.

This text is italic.

This text is emphasized

عنصر

عنصر  متن کوچکتر را تعریف می کند:

<!DOCTYPE html>
<html>
<body>

<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>

</body>
</html>

This is some normal text.

This is some smaller text.

عنصر

عنصر  متنی را تعریف می کند که باید علامت گذاری یا هایلایت شود:

<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>
</html>

Do not forget to buy milk today.

عنصر <del>

عنصر <del> متنی را تعریف می کند که از یک سند حذف شده است. مرورگرها معمولاً روی متن حذف شده یک خط می کشند:

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>

My favorite color is ~~blue~~ red.

عنصر <ins>

عنصر <ins> متنی را تعریف می کند که در یک سند درج شده است. مرورگرها معمولاً زیر متن درج شده خط می کشند:

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

</body>
</html>

My favorite color is ~~blue~~ red.

عنصر

عنصر  متن subscript را تعریف می کند. متن subscript نیم کاراکتر زیر خط معمولی ظاهر می شود و گاهی اوقات با فونت کوچکتر ارائه می شود. متن subscript را می توان برای فرمول های شیمیایی مانند H₂O استفاده کرد:

<!DOCTYPE html>
<html>
<body>

<p>This is <sub>subscripted</sub> text.</p>

</body>
</html>

This is _subscripted text.

عنصر

عنصر  متن superscript را تعریف می کند. متن subscript نیم کاراکتر بالاتر از خط معمولی ظاهر می شود و گاهی اوقات با فونت کوچکتر ارائه می شود. متن superscript را می توان برای پاورقی استفاده کرد، مانند WWW^[1]:

<!DOCTYPE html>
<html>
<body>

<p>This is <sup>superscripted</sup> text.</p>

</body>
</html>

This is ^{superscripted} text.

خلاصه عناصر قالب بندی متن:

 متن پر رنگ را تعریف می کند
 متن تاکید شده را تعریف می کند
 بخشی از متن را italic می کند
 متن کوچکتر را تعریف می کند
 متن مهم را تعریف می کند
 متن زیرنویس را تعریف می کند
 متن بالانویس را تعریف می کند
<ins> متن درج شده را تعریف می کند
<del> متن حذف شده را تعریف می کند
 متن هایلایت شده را تعریف می کند

برو بالا 🡱

–

۱۰. عناصر نقل قول

در این فصل عناصر <blockquote>، <q>، <abbr>، <address>، <cite> و <bdo> را بررسی خواهیم کرد.

عنصر <blockquote> بخشی را تعریف می کند که از منبع دیگری نقل شده است. مرورگرها معمولاً عناصر <blockquote> را با تورفتگی نشان می دهند.
تگ <q> یک نقل قول کوتاه را تعریف می کند.
تگ <abbr> یک مخفف یا مخفف مانند “HTML”، “CSS”، “Mr.”، “Dr.”، “ASAP”، “ATM” را تعریف می کند.

نکته: وقتی ماوس را روی عنصر قرار می‌دهید، از ویژگی title برای نشان دادن توضیحات مخفف استفاده کنید.

مثال:

<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>

</body>
</html>

The WHO was founded in 1948.

Marking up abbreviations can give useful information to browsers, translation systems and search-engines.

تگ <address> اطلاعات تماس نویسنده/مالک یک سند یا مقاله را تعریف می کند.
اطلاعات تماس می تواند آدرس ایمیل، آدرس اینترنتی، آدرس فیزیکی، شماره تلفن، دسته رسانه های اجتماعی و غیره باشد.
متن موجود در عنصر <address> معمولاً به صورت مورب ارائه می شود و مرورگرها همیشه قبل و بعد از عنصر <address> یک line break اضافه می کنند.

تگ <cite> عنوان یک اثر خلاقانه (مانند یک کتاب، یک شعر، یک آهنگ، یک فیلم، یک نقاشی، یک مجسمه و غیره) را تعریف می کند.
متن موجود در عنصر <cite> معمولا به صورت ایتالیک ارائه می شود.
تگ <bdo> برای نادیده گرفتن جهت متن فعلی استفاده می شود:

<!DOCTYPE html>
<html>
<body>

<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>

<bdo dir="rtl">This line will be written from right to left</bdo>

</body>
</html>

If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):

This line will be written from right to left

برو بالا 🡱

–

۱۱. تگ Comment (اظهار نظر)

با استفاده از سینتکس زیر می توانید به منبع HTML خود نظر اضافه کنید:

<!-- Write your comments here -->

توجه داشته باشید که علامت تعجب (!) در تگ شروع وجود دارد، اما در تگ پایان وجود ندارد.

توجه: comment ها توسط مرورگر نمایش داده نمی شوند، اما می توانند به مستندسازی کد منبع HTML شما کمک کنند.

با نظرات می توانید اعلان ها و یادآوری ها را در کد HTML خود قرار دهید:

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

This is a paragraph.

همچنین می توانید بیش از یک خط را مخفی کنید. همه چیز بین --> و <!-- از نمایشگر پنهان می شود.

مثال:

بی اثر کردن بخشی از کد HTML:

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>

</body>
</html>

This is a paragraph.

This is a paragraph too.

کامنت ها همچنین برای اشکال زدایی HTML عالی هستند، زیرا می توانید برای جستجوی خطاها، خطوط کد HTML را یک به یک کامنت کنید.

مخفی کردن محتوای درون خطی

از کامنت ها می توان برای مخفی کردن قسمت هایی از وسط کد HTML استفاده کرد:

<!DOCTYPE html>
<html>
<body>

<p>This <!-- great text --> is a paragraph.</p>

</body>
</html>

This is a paragraph.

برو بالا 🡱

–

۱۲. رنگها

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

در HTML، یک رنگ را می توان با استفاده از یک نام رنگ مشخص کرد:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

HTML از ۱۴۰ نام رنگ استاندارد پشتیبانی می کند.

رنگ پس زمینه

می توانید رنگ پس زمینه را برای عناصر HTML تنظیم کنید:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci 
tation ullamcorper suscipit lobortis nisl ut aliquip 
ex ea commodo consequat.
</p>

</body>
</html>

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

رنگ متن

می توانید رنگ متن را تنظیم کنید:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

رنگ حاشیه

می توانید رنگ حاشیه ها را تنظیم کنید:

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>

Hello World

مقادیر رنگ

در HTML، رنگ ها را می توان با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA نیز مشخص کرد.

مثال:

<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

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

<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using 
RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.
</p>

</body>
</html>

Same as color name “Tomato”:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name “Tomato”, but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.

در قسمت های بعدی بیشتر با RGB، HEX و HSL آشنا خواهید شد.

رنگ های RGB و RGBA

مقدار رنگ RGB نشان دهنده منابع نور قرمز، سبز و آبی است.

یک مقدار رنگ RGBA پسوند RGB با کانال آلفا (تاری) یا opacity است.

مقادیر رنگ RGB

در HTML، با استفاده از این فرمول، یک رنگ را می توان به عنوان مقدار RGB مشخص کرد:

rgb(red, green, blue)

هر پارامتر (قرمز، سبز و آبی) شدت رنگ را با مقداری بین 0 تا 255 مشخص می کند.

این بدان معنی است که 256 x 256 x 256 = 16777216 رنگ ممکن وجود دارد!

به عنوان مثال، rgb(255، 0، 0) به صورت قرمز نمایش داده می شود، زیرا قرمز روی بالاترین مقدار خود (255) و دو مورد دیگر (سبز و آبی) روی 0 تنظیم شده است.

مثال دیگر، rgb(0، 255، 0) به رنگ سبز نمایش داده می شود، زیرا رنگ سبز روی بالاترین مقدار خود (255) و دو مورد دیگر (قرمز و آبی) روی 0 تنظیم شده است.

برای نمایش مشکی، تمام پارامترهای رنگ را روی 0 تنظیم کنید، مانند: rgb(0، 0، 0).

برای نمایش رنگ سفید، تمام پارامترهای رنگ را روی 255 تنظیم کنید، مانند: rgb(255, 255, 255).

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

</body>
</html>

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

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

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

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(100, 100, 100);">rgb(100, 100, 100)</h1>
<h1 style="background-color:rgb(140, 140, 140);">rgb(140, 140, 140)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>

</body>
</html>

rgb(60, 60, 60)

rgb(100, 100, 100)

rgb(140, 140, 140)

rgb(180, 180, 180)

rgb(200, 200, 200)

rgb(240, 240, 240)

مقادیر رنگ RGBA

مقادیر رنگ RGBA گسترش مقادیر رنگ RGB با یک کانال آلفا است – که کدورت یک رنگ را مشخص می کند.

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

rgba(red, green, blue, alpha)

پارامتر آلفا عددی بین 0.0 (کاملا شفاف) و 1.0 (اصلا شفاف نیست):

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

</body>
</html>

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

مقادیر رنگ HEX

یک رنگ هگزا دسیمال با: #RRGGBB مشخص می شود، که در آن اعداد صحیح هگزا دسیمال RR (قرمز)، GG (سبز) و BB (آبی) اجزای رنگ را مشخص می کنند.

در HTML، یک رنگ را می توان با استفاده از یک مقدار هگزادسیمال به شکل زیر مشخص کرد:

#rrggbb

جایی که rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمال بین 00 و ff هستند (همان اعشاری 0-255).

به عنوان مثال، #ff0000 به صورت قرمز نمایش داده می شود، زیرا قرمز روی بالاترین مقدار خود (ff) و دو مورد دیگر (سبز و آبی) روی 00 تنظیم شده است.

مثال دیگر، #00ff00 به صورت سبز نمایش داده می شود، زیرا رنگ سبز روی بالاترین مقدار خود (ff) و دو مورد دیگر (قرمز و آبی) روی 00 تنظیم شده است.

برای نمایش مشکی، تمام پارامترهای رنگ را روی 00 تنظیم کنید، مانند: #000000.

برای نمایش رنگ سفید، تمام پارامترهای رنگ را روی ff تنظیم کنید، مانند: #ffffff.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

</body>
</html>

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

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

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

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#404040;">#404040</h1>
<h1 style="background-color:#686868;">#686868</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bebebe;">#bebebe</h1>
<h1 style="background-color:#dcdcdc;">#dcdcdc</h1>
<h1 style="background-color:#f8f8f8;">#f8f8f8</h1>

</body>
</html>

#404040

#686868

#a0a0a0

#bebebe

#dcdcdc

#f8f8f8

مقادیر رنگ HSL

در HTML، یک رنگ را می توان با استفاده از رنگ، اشباع و روشنایی (HSL) به شکل زیر مشخص کرد:

hsl(hue, saturation, lightness)

Hue یک درجه در چرخه رنگ از 0 تا 360 است. 0 قرمز، 120 سبز و 240 آبی است.

اشباع یک مقدار درصد است. 0% به معنی سایه خاکستری است و 100% رنگ کامل است.

سبک بودن نیز یک مقدار درصد است. 0% سیاه و 100% سفید است.

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

</body>
</html>

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Saturation (اشباع)

اشباع را می توان به عنوان شدت یک رنگ توصیف کرد.

100٪ رنگ خالص است، بدون سایه های خاکستری.
50% به مقدار 50% خاکستری دارد، اما همچنان می توانید رنگ را ببینید.
0% کاملا خاکستری است. شما دیگر نمی توانید رنگ را ببینید.

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

<p>With HSL colors, less saturation mean less color. 0% is completely gray.</p>

</body>
</html>

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

With HSL colors, less saturation mean less color. 0% is completely gray.

روشنایی

روشن بودن یک رنگ را می توان به این صورت توصیف کرد که چقدر نور می خواهید به آن رنگ بدهید، که در آن 0% به معنای عدم روشنایی (سیاه)، 50% به معنای 50% روشن (نه تاریک و نه روشن) و 100% به معنای روشن بودن کامل (سفید) است. ).

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>

</body>
</html>

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

With HSL colors, 0% lightness means black, and 100 lightness means white.

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

سایه های خاکستری اغلب با تنظیم رنگ و اشباع روی 0 و تنظیم روشنایی از 0٪ تا 100٪ برای گرفتن سایه های تیره تر / روشن تر تعریف می شوند:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>
<h1 style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1>
<h1 style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1>
<h1 style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1>
<h1 style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1>
<h1 style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1>

</body>
</html>

hsl(0, 0%, 20%)

hsl(0, 0%, 30%)

hsl(0, 0%, 40%)

hsl(0, 0%, 60%)

hsl(0, 0%, 70%)

hsl(0, 0%, 90%)

مقادیر رنگ HSLA

مقادیر رنگ HSLA گسترش مقادیر رنگ HSL، با یک کانال آلفا – که کدورت یک رنگ را مشخص می کند.

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

hsla(hue, saturation, lightness, alpha)

پارامتر آلفا عددی بین 0.0 (کاملا شفاف) و 1.0 (اصلا شفاف نیست):

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

</body>
</html>

HTML چیست؟ قسمت دوم

۸. استایل در HTML

رنگ پس زمینه

This is a heading

This is a heading

رنگ متن

This is a heading

فونت ها

This is a heading

اندازه متن

This is a heading

ترازبندی متن

Centered Heading

خلاصه این قسمت:

۹. قالب بندی متن

قالب بندی عناصر

عناصر <b> و <strong>

عناصر <i> و <em>

عنصر <small>

عنصر <mark>

عنصر <del>

عنصر <ins>

عنصر <sub>

عنصر <sup>

خلاصه عناصر قالب بندی متن:

۱۰. عناصر نقل قول

۱۱. تگ Comment (اظهار نظر)

مخفی کردن محتوای درون خطی

۱۲. رنگها

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

رنگ پس زمینه

Hello World

رنگ متن

Hello World

رنگ حاشیه

Hello World

Hello World

Hello World

مقادیر رنگ

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

رنگ های RGB و RGBA

مقادیر رنگ RGB

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

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

rgb(60, 60, 60)

rgb(100, 100, 100)

rgb(140, 140, 140)

rgb(180, 180, 180)

rgb(200, 200, 200)

rgb(240, 240, 240)

مقادیر رنگ RGBA

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

مقادیر رنگ HEX

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd