اضافه کردن CSS
چگونه CSS را اضافه کنیم[ویرایش | ویرایش]
هنگامی که مرورگری یک فایل طراحی (به انگلیسی: stylesheet) را میخواند، فایل HTML را مطابق اطلاعات موجود در فایل طراحی قالببندی میکند.[۱]
سه روش برای اضافهکردن CSS[ویرایش | ویرایش]
سه روش برای اضافهکردن یک فایل طراحی (stylesheet) وجود دارد:
CSS خارجی[ویرایش | ویرایش]
با داشتن یک فایل طراحی خارجی، میتوانید با تغییر فقط یک فایل، ظاهر وبسایت را به طورکامل تغییر دهید!
هر صفحه HTML باید در بخش head و در داخل عنصر <link> به فایل طراحی خارجی ، ارجاع داشته باشد.
مثال[ویرایش | ویرایش]
استایل های خارجی، درون عنصر <link> و داخل قسمت <head> یک صفحه HTML تعریف می شوند:
یک فایل طراحی خارجی را میتوان به وسیله هر نوع ویرایشگر متنی نوشت، و میبایست با پسوند .css ذخیره شود.
فایل .css خارجی نباید حاوی هیچگونه تگ HTML باشد.
در اینجا کد فایل "mystyle.css" را مشاهده میکنید:
نکته: بین مقدار خاصیت و واحد آن، فضای خالی اضافه نکنید: (margin-left: 20 px;
)
روش صحیح به این صورت است: margin-left: 20px;
CSS داخلی[ویرایش | ویرایش]
اگر یک صفحه HTML دارای استایل (طرح) منحصربهفردی باشد، میتوان از صفحه استایل داخلی استفاده کرد.
استایل داخلی در داخل عنصر <style>، در قسمت head تعریف میشود.
مثال[ویرایش | ویرایش]
استایلها (طرحها) درون عنصر <style> و درون قسمت <head> تعریف میشوند:
CSS درون خطی (به انگلیسی: Inline)[ویرایش | ویرایش]
استایل درون خطی ممکن است برای ایجاد استایل منحصر به فردی برای یک عنصر استفاده شود.
برای استفاده از استایلهای درون خطی، خاصیت style را به عنصر مربوطه اضافه کنید. خاصیت style میتواند حاوی هر گونه ویژگی CSS باشد.
مثال[ویرایش | ویرایش]
استایلهای بر خط به وسیله خاصیت "style" عنصر مربوطه تعریف میشوند:
نکته: یک استایل درون خطی بسیاری از مزایای یک فایل طراحی (به انگلیسی: style sheet) (با ترکیب محتوا و شیوه نمایش) را از دست میدهد. از این روش خیلی کم استفاده کنید.
فایلهای طراحی چندگانه[ویرایش | ویرایش]
اگر برخی از خصوصیات برای یک انتخابگر (عنصر) در فایلهای طراحیهای مختلف تعریف شده باشد، مقدار موجود در آخرین صفحه استایل خوانده شده استفاده میشود.
فرض کنید که یک صفحه استایل خارجی (به انگلیسی: external style sheet) استایل زیر را برای عنصر <h1> دارد:
فرض کنید که یک صفحه استایل داخلی نیز طرح زیر را برای عنصر <h1> دارد :
مثال[ویرایش | ویرایش]
اگر استایل داخلی (به انگلیسی: internal style) بعد از لینک صفحه به صفحه استایل خارجی (به انگلیسی: external style sheet) تعریف شود، عنصر <h1> به رنگ «نارنجی» خواهد بود:
مثال[ویرایش | ویرایش]
اما، اگر استایل داخلی قبل از لینک به صفحه استایل خارجی تعریف شود، عناصر <h1> به صورت "navy" خواهند بود :
روش قرارگیری آبشاری (به انگلیسی: Cascading)[ویرایش | ویرایش]
اگر بیش از یک استایل برای یک عنصر HTML تعریف شده باشد، کدامیک استفاده خواهد شد؟
تمامی استایل ها با رعایت قوانین زیر، درون یک صفحه استایل «مجازی»، به صورت «آبشاری» قرار میگیرند که شماره یک، بیشترین اولویت را دارد:
- استایل درون خطی(درون یک عنصر HTML)
- صفحه های استایل خارجی و داخلی (در قسمت head)
- پیشفرض مرورگر
بنابراین، یک استایل درون خطی بیشترین اولویت را دارد، و استایل های خارجی و داخلی و پیشفرضهای مرورگر را نادیده خواهد گرفت.
خود را به وسیله تمرینها امتحان کنید![ویرایش | ویرایش]
منابع آموزشی[ویرایش | ویرایش]