در جلسه قبل از آموزش HTML با نحوه فرمت دهی متن آشنا شدید. در این بخش قصد داریم شما را با نحوه استفاده از استایل های CSS در HTML را آموزش بدیم.
استایل ها نشان دهده نحوه نمایش داکیومنت در مروگر وب هستند.
استایل دهی عناصر HTML
زمانی که بحث ارایه در سند می شود می توان گفت که در این مورد HTML کاملا محدود است.
این زبان اصالتا برای نمایش یک راه آسان به منظور نمایش اطلاعات در وب بود. در سال ۱۹۹۶ توسط W3C زبان CSS معرفی شد که راهی بهتر برای استایل دهی المان های HTML ارایه می دهد.
با CSS , مشخص کردن رنگ برای متن و پس زمینه ها, اندازه و استایل فونت ها, فاصله بین المان ها, افزون خط دورچین المان و غیره بسیار آسان است.
افزودن استایل ها به المان HTML
اطلاعات استایل می تواند به عنوان یک سند جدا یا embed شده در HTML استفاده شود.
سه روش برای پیاده سازی استایل های CSS در HTML وجود دارد (از بالاترین به پایین ترین اولویت)
- Inline (درون خطی) – استفاده از خصوصیت
styleدر تگ شروع HTML - Embedded (جاسازی) – استفاده از المان
<style>در بخش head سند - External (خارجی) – استفاده از المان
<link>و اشاره به فایل CSS خارجی
در این آموزش ما هر سه نوع متفاوت از استفاده استایل را پوشش خواهیم داد:
Inline Styles (درون خطی)
استایل درون خطی برای مشخص کردن استایل یکتا به یک المان با قرار دادن خصوصیات CSS در تگ شروع استفاده می شود. می توان آن را با ویژگی style به یک المان متصل کرد.
ویژگی style شامل یک سری از خصوصیات CSS و مقادیر جفت هستند.
هر جفت property:value با یک ; از هم جدا می شوند. همانند نوشتن در یک فایل جدا یا embed شده فقط با این تفاوت که باید پشت سر هم و بدون فاصله در یک خط قرار بگیرد.
مثال زیر نحوه تغییر رنگ با color و اندازه فونت با font-size را برای متن نشان می دهد:
|
1 2 3 |
<h1 style="color:red; font-size:30px;">This is a heading</h1> <p style="color:green; font-size:18px;">This is a paragraph.</p> <div style="color:green; font-size:18px;">This is some text.</div> |
استفاده از استایل های درون خطی معمولا به عنوان یک تمرین بد درنظر گرفته می شوند. از آنجایی که استایل های embed شده بطور مستقیم در تگ های HTML بکار می روند باعث می شود که محتوای سند HTML ما با کدهای CSS درهم شوند که این خلاف جهت هدف ایجاد CSS است و باعث بی نظمی و عدم خوانایی و مشکل توسعه پذیری را داشته باشد.
نکته: این مهم غیر ممکن است که از کلاس و المان های pseudo در استایل درونی استفاده کنید. بنابراین از خصوصیت style در تگ ها خودداری کنید. استفاده از استایل خارجی یک روش پیشنهادی برای افزودن استایل به داکیومنت HTML است.
استایل embed شده
استایل های embed شده یا داخلی فقط بر روی سند فعلی تاثیر می گذارند و قابلیت نوشتن یکبار و استفاده در سند های مختلف بدون نیاز به کپی را ندارند.
استایل embed شده در بخش <head> صفحه HTML با تگ <style> تعریف می شود. همچنین می توانید چندین المان <style> را داخل بخش head سند HTML بکار ببرید.
|
1 2 3 4 5 6 |
<head> <style type="text/css"> body {background-color: YellowGreen;} p {color: Black;} </style> </head> |
استایل خارجی (external)
یک سند استایل خارجی مناسب استفاده از استایل های آن در صفحات مختلف است.
یک سند استایل خارجی تمام خصوصیات را در یک سند جدا ذخیره می کند که می تواند توسط هر فایل HTML در سایت لود شود. استایل های خارجی به این دلیل بسیار انعطاف پذیر هستند که شما می توانید با تغییر فقط یک فایل, کل ظاهر وبسایت را تغییر بدید.
با دو روش می توانید استایل های خارجی را به فایل HTML اضافه کنید.
لینک کردن استایل خارجی
یک سند استایل خارجی می تواند با تگ <link> که در بخش <head> صفحه قرار می گیرد به سند HTML اضافه شود.
|
1 2 3 |
<head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> |
وارد کردن استایل خارجی
دستور @import یک راه دیگر برای لود کردن استایل است. این دستور به مرورگر می فهماند که فایل مورد نظر را برای اعمال استایل های آن لود کند.
|
1 2 3 4 5 6 7 |
<style type="text/css"> @import url("css/style.css"); p { color: blue; font-size: 16px; } </style> |
امیدوارم در این بخش آموزش HTML , از استایل های HTML نهایت استفاده را برده باشید.
در بخش بعدی در مورد نحوه کار با عکس ها در صفحه وب را یاد می گیریم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
