آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

css ثانویه چیست؟

secondary css

Secondary CSS یا css ثانویه چیست؟

فایل های CSS ثانویه بطور پیش فرض غیرفعال هستند ؛ قابلیتی هستند که اگر مرورگر شما پشتیبانی کنه می تونید چند استایل برای صفحه ی وب خود تعریف کنید و کاربر به دلخواه یک استایل و برای نمایش صفحه وب انتخاب کنه .

برای اینکار از تگ <link> برای افزودن استایل ها به صفحه استفاده می کنیم . هر تگ <link> می تونه یک خاصیت title داشته باشه که مقداری که برای این خاصیت تعریف می کنیم ، کاربر توی مرورگر خود به عنوان نام گروه استایل میبینه و به دلخواه یک استایل رو انتخاب می کنه .

 فایل css ای که با استفاده از عبارت rel=”stylesheet” به صفحه وب معرفی شده اما خاصیت title برای اون منظور نشده باشه به عنوان قالب پایدار شناخته میشه و همیشه ( حتی وقتی که کاربر یک قالب ثانویه ی تعریف شده رو انتخاب کنه ) به تگ های صفحه اعمال میشه .

اما در صورتی که خاصیت title برای اون تعریف شده باشه ، به عنوان قالب ترجیح یافته شناخته میشه و در صورتی به صفحه اضافه میشه که کاربر اون رو انتخاب کنه .

برای درک بهتر از مسائلی که مطرح کردیم به مثال های زیر توجه کنید :

ما سه استایل برای صفحه وب مورد نظرمون تعریف می کنیم و به کاربر این امکان و میدیم که از طریق مرورگر خودش بتونه قالب دلخواه خودش رو انتخاب کنه . برای این کار ما سه استایل در سه فایل مجزا تعریف و به نام های Base , Blue_style , Red_style ذخیره می کنیم .

فایل index.html بصورت زیر ایجاد می کنیم :

 برای فایل Base.css مقادیر زیر رو تعریف می کنیم :

 برای فایل  Red_style.css مقادیر زیر رو تعریف می کنیم :

 برای فایل Blue_style مقادیر زیر رو تعریف می کنیم :

 حالا فایل index.html خودتون رو اجرا کنید ، به منوی view رفته و گزینه Page Style رو کلیک کنید ، منویی شبیه به تصویر زیر براتون باز میشه :

page style

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

به کدهای HTML دقت کنید:

فایل base.css به دلیل اینکه فاقد خاصیت title هست ، به عنوان قالب پایدار شناخته میشه و هر استایلی که تو این فایل تعیین کنید برای صفحه وب اعمال میشه (چه کاربر استایلی رو انتخاب کنه و چه نکنه)

تگ استایل فایل red_style.css به دلیل اینکه جلوتر از فایل blue_style.css تعریف شده ، به عنوان استایل پیش فرض تعیین میشه و در ابتدای اجرای صفحه محتوای این فایل اجرا میشه .

برای درک بهتر میتونید فایل ضمیمه رو دانلود کنید و روی سیستم خودتون اجرا کنید .

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • fantometkh

    خیلی خوب بود ، ممنون

    • میترا رحیمی

      خواهش می کنم ، امیدوارم مفید واقع شده باشه .

  • محمود

    مطلب خیلی خوبی بود
    ممنون.

  • danial

    عالی بود ممنون.با آرزوی پیشرفت

  • razagh

    عالی بود مرسی

  • فرهاد

    تشکر استفاده کردیم.

  • محمد صبائیان

    البته با کد جاوا اسکریپت میشه انتخاب کرد (مثلا یک دکمه در صفحه بوجود آورد که با اون رنگ رو انتخاب کنید مثل قالب های چند رنگه)

    نمی دونم چطور داخل این سایت میشه مقاله فرستاد……

    شاید در آینده داخل یه انجمن بزارمش

    • میترا رحیمی

      سلام دوست عزیز
      بله حق باشماست با جاوااسکریپت به راحتی این عمل قابل پیاده سازیه ، اما خوب هر چیزی جای خودشو داره 🙂 این مقاله هم مربوط میشه به css ثانویه .
      در آینده یه قابلیت تو سایت لحاظ می کنیم که کاربران هم بتونن در سایت مقاله ارسال کنن .
      موفق و پیروز باشید .

  • مسعود

    مرسی مفید بود
    ولی مشکل من تو کد جاوا اسکریپشه، میشه آموزش اونو بذارین؟
    ممنون

وبلاگ مدرسه

مختصری درباره ما
مدرسه مجازی ایرانیان در زمینه آموزش علوم و فنون طراحی و برنامه نویسی صفحات وب اعم از آموزش زبان های برنامه نویسی و کدنویسی و همچنین آموزش طراحی گرافیک توسط نرم افزارهای گرافیکی پیکسلی و برداری فعالیت دارد .
ورود به وبلاگ

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟