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

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

در این مقاله به شرح css ثانویه می پردازیم ، که فکر می کنم کمتر کسی با 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 تعریف شده ، به عنوان استایل پیش فرض تعیین میشه و در ابتدای اجرای صفحه محتوای این فایل اجرا میشه .

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

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

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۹

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین