طراحی ظاهری سایت

استاندارد HTML تعریف می کند که مرورگرها چگونه قالب بندی اولیه متن را انجام می دهند، اما این واقعا راهی برای گفتن نحوه نمایش متن به مرورگر نیست .

تگ<h1> نشان می دهد که متن باید یک عنوان باشد، اما هیچ چیز به جز اینکه چگونه عنوان را نمایش دهیم تا از هر متن دیگری در صفحه متفاوت باشد به مرورگر نمی گوید.

اینجاست که استایل ظاهر می شود. یک طراحی ظاهری (استایل)  به شما این امکان را می دهد که فقط به مرورگر بگویید از چه فونت‌ها، اندازه‌ ها و رنگ‌ هایی برای متن استفاده کند و نحوه قرار دادن متن در آن نمایشگر چگونه باشد. این بخش به بازدیدکنندگان شما  توضیح می دهد که چگونه استایل بر ظاهر صفحات وب شما تأثیر می گذارد.

شیوه نامه ها

راه های مختلفی برای تعریف استایل برای یک سند HTML وجود دارد. ابتدایی ترین روش همان چیزی است که مرورگر به طور پیش فرض استفاده می کند. وقتی مرورگر یک تگی مانند  <h1>  را می بیند فونت، اندازه و رنگ از پیش برای آن تعریف شده است.

خوب است، اما اگر بخواهید برخی از عناوین را سیاه و برخی را قرمز کنید، چه؟

این امر با استایل داخلی امکان پذیر است. استایل درون خطی به شما این امکان را می دهد استایل های خاصی را تعریف کنیدکه فقط برای یک برچسب خاص در سند اعمال می شود. مثلا برای ساختن یک عنوان قرمز، از تگHTML زیر استفاده می کنید:

<h1 style=”color: red”>Warning, this is bad</h1>

ویژگی style  یک رفتار برای تگ <h1> می باشد.

Style   های متفاوتی وجود دارد که می توانید مستقیماً در داخل تگ HTML اعمال کنید که هر کدام به گونه ای روی تگ اعمال می شود.

مرورگر باید تگ را مدیریت کند. ویژگی style به شما این امکان را می دهد که یک ظاهر طراحی شده به  یک تگ خاص در سند را اعمال کنید. در این مثال، من انتخاب کردم که رنگ متن را تغییر دهید حالا، احتمالاً فکر می کنید که شما را با یک  چالش جدید روبه رو کرده ام.

اگر بخواهید رنگ قرمز را به همه تگ های <h1>در سند خود اعمال کنید چه؟

شاید فکر کنید مقدار زیادی کد برای نوشتن وجود دارد.نگران نباشید، راه حلی برای آن هست.

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

به این صورت است:

<style>

h1{  color : red; }

</style>

اکنون مرورگر تمام تگ های <h1> را در سند با استفاده از رنگ قرمز نمایش می دهد.

اما صبر کنید، چیزهای بیشتری وجود دارد!

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

یک استایل دهی خارجی به شما این امکان را می دهد که سبک ها را دقیقاً مانند روش داخلی تعریف کنید.

اما در یک فایل جداگانه به نام استایل شیت وهر صفحه وب  را می توان به همان ارجاع داد و می توانید چندین استایل شیت را در یک صفحه وب اعمال کنید.

استایل دهی خارجی را با استفاده از تگ <link> مانند زیر ایجاد کنید:

<link rel=”stylesheet” href=”mystyle.css”>

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

ادامه در مقاله ی طراحی ظاهری سایت 2