ویژگی Style در زبان HTML

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

ویژگی Style

کلمه ی style در لغت به معنی «سبک» یا «طرح» یا همان «استایل» ای است که در فارسی نیز می گوییم. در واقع کار این تگ اعمال دستورات زبان CSS در کد های HTML است. ساختار کلی style به این شکل است:

<tagname style="property:value;">

در این ساختار، property یک خصوصیت CSS (مانند سایز فونت و ...) است و value نیز مقداری که آن خصوصیت می گیرد (مانند 25px و ...). در مورد این تگ در دوره ی آموزشی CSS به طور مفصل صحبت خواهیم کرد.

بهترین راه برای یادگیری این ویژگی استفاده از مثال های مختلف است بنابراین چندین مثال از آن را برایتان آماده کرده ایم.

رنگ پس زمینه در HTML

خصوصیت background-color، یک رنگ پس زمینه را برای سند HTML ما و یا یکی از عناصر آن تعیین می کند. در مثال زیر رنگ پس زمینه ی سند HTML را به رنگ powderblue تنظیم کرده ایم. اگر نمی دانید این رنگ چیست می توانید در گوگل جست و جو کنید.

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

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

</body>
</html>

مشاهده ی خروجی در JSBin

سوال: من از کجا بدانم چه رنگ هایی می توانم به عنوان value بگذارم؟

پاسخ: جواب این سوال طولانی است اما به صورت خلاصه بدانید که رنگ ها در CSS به دو صورت حرفی (مانند brown به معنی قهوه ای و ..) و کُدی (مانند fff#) انتخاب می شوند. در دوره ی CSS با آن ها به طور کامل آشنا خواهیم شد اما برخی از این رنگ ها را به صورت خلاصه به شما معرفی می کنم.

نام رنگ به صورت حرفی	کد HEX
Aqua	#00FFFF
Black	#000000
CadetBlue	#5F9EA0
Coral	#FF7F50
Crimson	#DC143C
Cyan	#00FFFF
DarkOrange	#FF8C00
DeepSkyBlue	#00BFFF
HotPink	#FF69B4

شما می توانید از هر کدام از این رنگ ها که خواستید استفاده کنید. در واقع تعداد این رنگ ها بیشتر از این ها است و جدول بالا تنها مشتی از خروار است! اگر دقت کرده باشید متوجه می شوید رنگ هایی که در جدول بالا آورده ایم هم نام دارند و هم کد. این یعنی در زبان CSS می توانید به جای کد هایشان از نام هایشان استفاده کنید (مانند "style="background-color:powderblue) اما بسیاری از رنگ هایی که ما می خواهیم دارای نام نیستند بنابراین تنها راه استفاده از آن ها تعیین رنگ به وسیله ی کد HEX است.

اگر نیاز به کد رنگ خاصی دارید، می توانید به وب سایت htmlcolorcodes.com یا امثال آن مراجعه کنید.

سوال: آیا رنگ ها فقط در کد HEX هستند؟

پاسخ: خیر رنگ ها در قالب های HSL و HSA و ... نیز موجود هستند که در دوره ی CSS مورد بحث قرار خواهند گرفت.

رنگ متون

خصوصیت 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>

مشاهده ی خروجی در JSBin

فونت متون

خصوصیت 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>

مشاهده ی خروجی در JSBin

همانطور که در خروجی مشاهده می کنید در این متن از دو فونت verdana و courier استفاده کرده ایم.

سوال: آیا می توانیم نام هر فونتی را به این خصوصیت بدهیم؟

پاسخ: بستگی دارد! اگر فونتی که انتخاب کرده اید از فونت های پیش فرض موجود در مرورگر ها نباشد باید آن را import کنید که خودش بحث جداگانه ای دارد و در دوره ی CSS مورد بحث قرار خواهد گرفت.

اندازه ی متون

خصوصیت font-size اندازه ی فونت یک عنصر را مشخص می کند. در واقع این خصوصیت همان خصوصیتی است که در قسمت های قبلی در موردش صحبت کردیم و گفتیم می توانید با آن اندازه ی heading ها را تغییر دهید! به مثال زیر توجه کنید:

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

مشاهده ی خروجی در JSBin

اگر خروجی این کد را مشاهده کنید می بینید که اندازه ی تگ های h1 و p به اندازه ی پیش فرضشان نیستند و بزرگترشان کرده ایم.

سوال: چرا اندازه ی فونت ها به درصد تعیین شده است؟

پاسخ: در CSS شما می توانید از واحد های مختلفی برای تعیین سایز عناصر، سایز متون و ... استفاده کنید. یکی از آن ها درصد است. از دیگر واحد ها می توان پیکسل (px) را نام برد. توضیح کامل این موارد مربوط به دوره ی CSS است و در بحث ما نمی گنجد، بلکه نگاه ما به این کد ها به عنوان ویژگی (attribute) های HTML است.

تراز کردن افقی متون

خصوصیت text-align کار ترازبندی افقی متون را بر عهده دارد. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال ما ترازبندی را center (به معنی «وسط») قرار داده ایم و در خروجی نیز مشخص است که متون ما در وسط صفحه قرار گرفته اند.

سوال: آیا می توانیم چندین خصوصیت را به یک ویژگی style بدهیم؟

پاسخ: بله! این کار را در مثال زیر انجام داده ام:

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red; font-size:300%; text-align:center;">I am red</p>
<p style="color:blue; font-family:courier;">I am blue</p>
<p style="font-size:50px; font-family:calibri;">I am big</p>

</body>
</html>

مشاهده ی خروجی در JSBin

خلاصه ی مقاله

در این قسمت با ویژگی style آشنا شدیم و فهمیدیم که در اصل به زبان HTML کاری ندارد بلکه کارش پیاده سازی کد های CSS در سورس کدِ HTML است و در نحوه ی نمایش محتوای HTML تاثیر دارد.