استایل ها را کجا قرار دهیم؟

استایل ها در سه محل می توانند قرار بگیرند: خطی، جاسازی شده در فایل html و در فایل خارجی.

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

می توانید یک تک استایل را مستقیما در تگ های html قرار دهید. این روش استایل دهی خطی نام دارد. استایل های خطی بر سایر خط ها اولویت دارند.

مثال:

<H1 STYLE = 'Color: Red'>My Heading</H1>

برای جایگذاری استایل در تگ html، به روش زیر عمل کنید:

  • تگی که می خواهید تغییر کند را بنویسید.
  • یک فاصله دار و کلمه style را تایپ کنید.
  • یک علامت مساوی (=) وارد کنید.
  • علامت نقل قول را تایپ کنید.
  • نام ویژگی را به همراه دو نقطه وارد کنید.
  • مقدار را وارد کنید.
  • علامت نقل قول را مجددا وارد کنید.
  • علامت بزرگتری را برای تگ html وارد کنید.

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

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

                                                                     

ما بین دو تگ <style>، قواعد css نوشته می شوند.

استایل دهی در فایل خارجی:

 به جای قرار دادن استایل ها در بخش HEAD، می توان تمام آنها را در یک فایل متنی وارد کرد. سپس به مرورگر می گویید که محل قرارگیری این فایل کجا است. سپس این فایل مانند زمانی که در بخش (HEAD) بود عمل کند. فایل خارجی استایل به صورت زیر نوشته می شود:

  

برای شناسایی فایل استایل، از تگ Link استفاده می کنیم. صفت REL به مروگر می فهماند که مقصد معرفی یک فایل استایل دهی را دارید.

صفت TYPE نوع فایل را به مرورگر شناسایی می کند. صفت HREF نام و محل فایل را به مرورگر معرفی می کند. (هنوز با نحوه ارجاع دهی آشنا نشده اید. بنابراین اکنون راجع به HREF نگران نباشید).

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

تمام چیزی که احتیاج دارید قرار دادن تگ Link در بخش HEAD صفحات وب سایت است. با استایل دهی جاسازی شده داخلی، مجبورید تمام کدهای استایل در بخش Head را در تمام صفحات وارد کنید. فایل استایل دهی خارجی شما را از تایپ زیاد یا کپی و پیست خلاص می کند.

فایل های استایل دهی خارجی یک فایل متنی هستند، بنابراین در هر ویرایشگر متنی می توانند تایپ شوند، مانند برنامه Notepad. تصویر زیر یک فایل استایل دهی نوشته شده در Notepad را نمایش می دهد.

                                         

دقت کنید که از هیچ تگی در این فایل استفاده نشده است. هیچ تگ <style> یا تگ html دیده نمی شود. تنها انتخاب گرها و جفت های ویژگی و مقدار وجود دارند همچنین دقت داشته باشید که سه استایل نوشته شده است. در روش جاسازی شده هم می توانید به همین تربیت داشته باشید و هر تعداد دلخواه استایل را می توانید ما بین جفت تگ <style> و <style/> قرار دهید.

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

زمان ذخیره فایل استایل دهی، لازم نیست که حتما پسوند css. را وارد کنید. می توانید با همان پسوند txt. فایل را ذخیره نمایید و سپس در قسمت HREF تگ Link، نام فایل را وارد کنید:

HREF = style1.txt

به جای

HREF = style1.css

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