استایل های خطی و جاسازی شده

استایل های خطی

فایل متنی html که در ابتدای دوره ایجاد کرده بودید را باز کنید.

بر روی منوی File->Seve As کلیک کنید. فایل را با عنوان جدید newpage.html ذخیره کنید. فراموش نکنید که قبل از کلیک روی دکمه ذخیره، آیتم Save As Type را به All Files تغییر دهید.

متن را برای عنوان صفحه در تگ Title وارد کنید. یک تگ عنوان H1 اضافه کرده و عبارتی را درون آن تایپ نمایید.

حال یک پاراگراف بعد از تگ عنوان وارد نمایید. برای ایجاد استایل خطی بعد از اولین H1 کلیک کنید. کلید فاصله (space)

را یکبار فشرده و عبارت زیر را تایپ نمایید:

<H1 style=text-align:center>

توجه کنید که هیچ فاصله ای بعد از علامت : و قبل از کلمه center وجود نداشته باشد. کدهای html شما باید شبیه تصویر زیر باشد:

                                     

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

                                    

بنابراین برای وسط چین کردن عناصر روی صفحه، می بایست از ویژگی text-align استفاده کنید. بعد از علامت : مقدار ویژگی را وارد نمایید که در مثال فوق کلمه center می باشد.

تمرین: مشابه کلمه center که برای وسط چین کردن عناصر استفاده می شود، می توانید از مقادیر left و  right برای چپ چین و راست چین کردن عناصر در صفحه استفاده نمایید. آنها را امتحان نمایید.

استایل های جاسازی شده

همانطور که قبلا نیز اشاره شد استایل های جاسازی شده، داخل بخش HEAD در کد قرار می گیرند. برای تمرین، کدهای CSS زیرا را به فایل خود اضافه کنید:

                                   

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

تغییرات را ذخیره کرده و مرورگر خود را مجددا بار گذاری نمایید. تغییری مشاهده نمی شود. علت اینست که استایل های خطی برای استایل های جاسازی که در قسمت HEAD قرار داده شده ارجعیت دارند.

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

                                   

تگ عنوان، راست چین شده است.

تمرین: مقدار ویژگی text-align را به مرکز تغییر دهید. تغییرات را ذخیره و نتیجه آنرا در مرورگر مشاهده کنید.

در درس بعدی، نحوه تنظیمات قلم با استفاده از css را خواهید آموخت.