استفاده از کدهای css
چهارشنبه, ۱۸ اسفند ۱۳۹۵، ۰۷:۴۷ ب.ظ
برای استفاده از کدهای cssدر داخل یک فایل اچ تی ام ال سه روش وجود دارد:
شیوه نامه های درونی (داخل فایل اچ تی ام ال –Internal style sheet)
همانطور که از نام این نوع از شیوه نامه مشخص است، این نوع شیوه نامه ها در داخل یک فایل اچ تی ام ال نوشته می شوند، و از این نوع شیوه نامه ها زمانی استفاده می کنیم که بخواهیم یک صفحه خاص، سبک دهی مخصوص به خود را داشته باشد. در این حالت با استفاده از عنصر <style> کدهای قوانین مربوط به شیوه نامه خود را در قسمت بالای صفحه اچ تی ام ال و مابین عناصر <head> می نویسیم. عنصر <style>در برگیرنده قوانین مربوط به شیوه نامه ما است و باید صفت (attribute) نوع (type)در این عنصر با مقدار text/css مقداردهی شود:
شیوه نامه های درون خطی (Inline style)
ما می توانیم با استفاده از صفت style (style attribute) یک سبک را به یک عنصر خاص نسبت دهیم که به این حالت، سبک درون خطی گفته می شود. style یک صفت عمومی است که می توانیم آن را به تمام تگ های آغازین اچ تی ام ال نسبت دهیم. مقداری که به این صفت می دهیم همان مقدار مربوط به بلوک اعلان است که باید بین بلوک های اعلان مختلف از علامت نقطه ویرگول استفاده کنیم. مسلما در اینجا دیگر نیازی به انتخاب کننده (selector) نیست، به خاطر اینکه، همان تگ اچ تی ام ال که این صفت به آن اعمال شده به عنوان انتخاب کننده در نظر گرفته شده است:
شیوه نامه های خارجی (External style sheet) – فایل های css در خارج از فایل اچ تی ام ال رایج تریج و البته بهترین شیوه استفاده از شیوه نامه های آبشاری، قرار دادن کدهای مربوط به آن در یک فایل خارجی است. قوانین مربوط به شیوه نامه ها در داخل یک فایل متنی با پسوند .cssمجزا ذخیره می شوند. سپس در قسمت سرصفحه فایل اچ تی ام ال، با استفاده از تگ <link> با فایل css مورد نظر خود ارتباط برقرار کرده و آن را وارد می کنیم.
تگ <link> دارای سه صفت (attribute) است. صفت rel که مخفف relationship است باید با مقدار stylesheet مقدار دهی شود. صفت type که از نوع متا است و اختیاری نیز هست، باید با مقدار text/css مقداردهی شود. با استفاده از صفت href نیز لینک مربوط به فایل css خارجی مقدار دهی می شود (یعنی آدرس فایل خارجی .css):
البته این روش برای افزایش سرعت باز شدن صفحات وب سایت ما نیز مفید است؛ به خاطر اینکه فایل های css که به صورت خارجی طراحی شده اند فقط برای اولین باری که کاربر، یک صفحه از وب سایت ما را باز می کند دانلود شده و بر روی دستگاه کاربر ذخیره می شود (cache). این فرایند باعث می شود که در دفعات بعد یا در بازدید از سایر صفحات وب سایت، دیگر فایل مربوط به شیوه نامه ها دانلود نشود و در نهایت باعث افزایش سرعت مرور صفحات ما توسط بازدید کننده خواهد شد.
- استفاده از یک شیوه نامه در داخل فایل اچ تی ام ال(Internal style sheet)
- استفاده از شیوه نامه به صورت درون خطی (Inline style sheet)
- استفاده از یک شیوه نامه خارج از فایل اچ تی ام ال (External style sheet)
شیوه نامه های درونی (داخل فایل اچ تی ام ال –Internal style sheet)
همانطور که از نام این نوع از شیوه نامه مشخص است، این نوع شیوه نامه ها در داخل یک فایل اچ تی ام ال نوشته می شوند، و از این نوع شیوه نامه ها زمانی استفاده می کنیم که بخواهیم یک صفحه خاص، سبک دهی مخصوص به خود را داشته باشد. در این حالت با استفاده از عنصر <style> کدهای قوانین مربوط به شیوه نامه خود را در قسمت بالای صفحه اچ تی ام ال و مابین عناصر <head> می نویسیم. عنصر <style>در برگیرنده قوانین مربوط به شیوه نامه ما است و باید صفت (attribute) نوع (type)در این عنصر با مقدار text/css مقداردهی شود:
<style type=”text/css”>
p {color: black;}
</style>
همانطور که در بالا مشاهده می کنید می توانیم ما بین عناصر <style> به هر تعداد انتخاب کننده (Selector) و بلوک های اعلان (Declaration) مربوط به آن را بنویسیم. شیوه نامه های درون خطی (Inline style)
ما می توانیم با استفاده از صفت style (style attribute) یک سبک را به یک عنصر خاص نسبت دهیم که به این حالت، سبک درون خطی گفته می شود. style یک صفت عمومی است که می توانیم آن را به تمام تگ های آغازین اچ تی ام ال نسبت دهیم. مقداری که به این صفت می دهیم همان مقدار مربوط به بلوک اعلان است که باید بین بلوک های اعلان مختلف از علامت نقطه ویرگول استفاده کنیم. مسلما در اینجا دیگر نیازی به انتخاب کننده (selector) نیست، به خاطر اینکه، همان تگ اچ تی ام ال که این صفت به آن اعمال شده به عنوان انتخاب کننده در نظر گرفته شده است:
<p style=”color: red; text-align: right;”>استفاده از شیوه نامه به صورت درون خطی</p>مسلما به عنوان یک برنامه نویسی حرفه ای وب سایت، نباید در طراحی صفحات وب سایت خود یا دیگران از چنین روشی استفاده کنید! این روش فلسفه وجود css را تا حدودی زیر سوال می برد. ما از css برای این استفاده می کنیم که تا حد امکان محتوا را از ظاهر (سبک بندی ظاهری) جدا کنیم؛ در حالی که این شیوه (درون خطی) محتوا را با سبک بندی ظاهری آن تلفیق می کند و همین کار باعث می شود که در آینده انجام تغییرات در شیوه نامه ها کاری مشکل و پیچیده شود. از این روش فقط زمانی استفاده کنید که می خواهید اثر یک یا چندین سبک را بر روی قسمتی از محتوای وب سایت خود به صورت سریع مشاهده کنید (در مرحله طراحی)، پس از آن هنگامی که به شیوه نامه مورد نظر خود رسیدید، کدهای مربوط به آن را در یک فایل خارجی شیوه نامه ذخیره کنید.
شیوه نامه های خارجی (External style sheet) – فایل های css در خارج از فایل اچ تی ام ال رایج تریج و البته بهترین شیوه استفاده از شیوه نامه های آبشاری، قرار دادن کدهای مربوط به آن در یک فایل خارجی است. قوانین مربوط به شیوه نامه ها در داخل یک فایل متنی با پسوند .cssمجزا ذخیره می شوند. سپس در قسمت سرصفحه فایل اچ تی ام ال، با استفاده از تگ <link> با فایل css مورد نظر خود ارتباط برقرار کرده و آن را وارد می کنیم.
تگ <link> دارای سه صفت (attribute) است. صفت rel که مخفف relationship است باید با مقدار stylesheet مقدار دهی شود. صفت type که از نوع متا است و اختیاری نیز هست، باید با مقدار text/css مقداردهی شود. با استفاده از صفت href نیز لینک مربوط به فایل css خارجی مقدار دهی می شود (یعنی آدرس فایل خارجی .css):
<linkrel=”stylesheet” type=”text/css” href=”cssFile.css”>همیشه ترجیح بر این است که از فایل های خارجی css استفاده کنید، چون این روش محتوا را کاملا از سبک دهی ظاهری آن جدا می کند. این روش به ما کمک می کند که یک ظاهر یکپارچه برای همه صفحات وب سایتمان ایجاد کنیم و از طرف دیگر برای ایجاد تغییرات ظاهری در صفحات وب سایتمان فقط کافی است محتوای فایل css را ویرایش کنیم تا تمام تغییرات اعمال شده در همه صفحات وب سایت دیده شود.
البته این روش برای افزایش سرعت باز شدن صفحات وب سایت ما نیز مفید است؛ به خاطر اینکه فایل های css که به صورت خارجی طراحی شده اند فقط برای اولین باری که کاربر، یک صفحه از وب سایت ما را باز می کند دانلود شده و بر روی دستگاه کاربر ذخیره می شود (cache). این فرایند باعث می شود که در دفعات بعد یا در بازدید از سایر صفحات وب سایت، دیگر فایل مربوط به شیوه نامه ها دانلود نشود و در نهایت باعث افزایش سرعت مرور صفحات ما توسط بازدید کننده خواهد شد.
