CSS

روش های اضافه کردن CSS به سایت

تبلیغات
کانال تلگرام فتولیا
4 سوالی شهرداری

مقالات این سری آموزشی :

  1. آشنایی با CSS و شروع کار با آن
  2. آموزش انتخابگر ها (Selectors) در CSS
  3. روش های اضافه کردن CSS به سایت
  4. آموزش قرار دادن تصویر پس زمینه در CSS

سه راه برای اضافه کردن کدهای css به صفحه داریم :

  • شیوه نامه خارجی یعنی در یک فایل مجزا(External style sheet)
  • شیوه نامه داخلی (Internal style sheet)
  • اعمال به خود عنصر(Inline style)

شیوه نامه خارجی

این نوع بهترین حالت برای استفاده در سایتی با چندین صفحه است،چون با یک تغییر کوچک این تغییر در همه صفحه های سایت (که فایل CSS بهشون الحاق شده) اعمال میشه . برای لینک کردن فایل css مجزا به صفحه باید از تگ <link> استفاده کنید ،به این شکل:

این فایل مجزای CSS رو می تونید با هر ادیتوری بنویسید و حتما باید پسوند فایل رو .CSS بزارید . در ضمن هیچ کد html نباید در اون باشه و فقط کد css رو قبول می کنه. مثل این :

هیچ وقت بین مقدار خصیصه و واحد اون مقدار فاصله قرار ندید (مثل این : margin-left: 20 px;) بلکه حتما باید به این صورت نوشته بشه : margin-left: 20px;)

شیوه نامه داخلی

این نوع استایل دهی بهتره زمانی استفاده شود که یک استایل شیت بیشتر ندارین و یک صفحه یا چند صفحه محدود دارید ،اون موقع از این روش استفاده میکنیم و داخل همون فایل HTML و با کمک تگ <style> کدها رو مینویسیم.این تگ رو باید داخل تگ head بذارید:

شیوه نامه Inline

اگر از این روش استفاده کنید بسیاری از مزیتهای اصلی css رو از دست خواهید داد! چون محتوا رو با نحوه ی نمایش قاطی میکنه (اگه با MVC آشنا باشید بهتر متوجه میشید این بخش رو) . به هرحال برای استفاده از این روش باید از خاصیت style برای عنصر مورد نظر استفاده کنید:

چندتا نکته:

  • هر سه ی این روشها رو میتونید با هم به کار ببرید.
  • اگر برای یک عنصر صفحه مثل تگ <h1> با هر سه روش استایل تعریف کنید تکلیف چیه ؟ اون موقع بحث اولویت میاد وسط . به این صورت که نزدیک ترین استایل به عنصر در اولویته یعنی :
    • اول: Inline style
    • دوم: Internal style sheet
    • سوم: External style sheet
    • چهارم: پیشفرضهای خود مرورگر

یادتون باشه که تگ های <link> و <style> رو داخل تگ <head> استفاده کنید .

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین مقالات فتولیا در ایمیل شما

در خبرنامه ما عضو شوید و آخرین مطالب و مقالات آموزشی را اول شما دریافت کنید