اضافه کردن 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)
- پیشفرض مرورگر
بنابراین، یک استایل درون خطی بیشترین اولویت را دارد، و استایل های خارجی و داخلی و پیشفرضهای مرورگر را نادیده خواهد گرفت.
خود را به وسیله تمرینها امتحان کنید!
منابع آموزشی