در حال بارگذاری

گروه طراحي وب سایت ، سايت مايت ، با ارائه خدمات طراحي حرفه اي وب سايت ، سئو و بهينه سازي ، امنيت و هک و آموزش و کار آموزي شما را به صبر و شکيبايي جهت بارگذاری کامل وب سایت دعوت مينمايد.
شماره دفتر مرکزي : 03116618188
موبايل واحد فروش : 09136848587

موضوعات
دوستان
آرشیو
آمار سايت
arrow  افراد آنلاین : 2
بازديد ديروز: 300
بازديد امروز: 42
 خروجی فید امروز : 5
arrow  ورودی گوگل : 0
  • برچسب‌ها

  • کلاس آموزش css جلسه دوم

    تعداد بازدید : 372   دسته بندی : آموزش css , آموزش و کار آموزی دوشنبه ,29 اکتبر , 2012

    آموزش css3

    آموزش css به زبان ساده

    شبه گروه ها (pseudo-classes)
    شبه گروه ها در CSS، مانند گروه ها (classes) هستند اما مانند گروه ها به صورت عینی و علنی در کدهای HTML نوشته نمی شوند بلکه با لود شدن صفحه وب مورد نظر در پنجره مرورگر این شبه گروه ها به عناصری که واجد شرایط مشخص شده برای هر کدام از این شبه گروه ها باشند، اتلاق می شوند. برخی از شبه گروه ها نیز به صورت پویا یا داینامیک هستند یعنی در نتیجه انجام عملی خاص از سوی کاربر بر روی عنصری خاص به آن عنصر تعلق می گیرند. به عنوان مثال، با لود شدن صفحه وب، کلیه عناصری که اولین فرزند عنصر دربرگیرنده خود با شند، مشمول شبه گروهی به نام :first-child می شوند و لازم نیست که ما آنها را با گروه (class) خاصی مشخص نماییم. همچنین لینک ها، شبه گروه های مختلفی را می پذیرند که معمولاً در نتیجه قرار دادن ماوس بر روی آنها و یا کلیک کردن آنها به وجود می آیند. در ادامه بحث به صورت مشروح به بررسی این شبه گروه ها می پردازیم.


    آشنایی با شبه گروه های مربوط به لینک ها
    1ـ :link   : این شبه گروه بیانگر لینک های در حالتی است که هنوز مورد بازدید قرار نگرفته اند (حالت عادی و معمولی لینک ها).
    2ـ :visited   : این شبه گروه چنان که از نامش بر می آید، بیانگر لینک هایی است که قبلاً کلیک شده اند و از مقاصد آن لینک ها بازدید به عمل آمده است.
    3ـ :focus    : هنگامی که تمرکز صفحه کلید بر روی عنصری قرار گرفته باشد و آن عنصر آماده دریافت ورودی به وسیله صفحه کلید باشد، آن عنصر مشمول این شبه گروه خواهد شد. این حالت در مورد لینک ها معمولاً به این صورت است که هنگامی که تمرکز صفحه کلید بر روی آنها قرار گرفته می توان با فشار کلید enter به مقصد لینک مورد نظر رفت. در این حال است که لینک، مشمول شبه گروه :focus قرار می گیرد. لازم به ذکر است که اینترنت اکسپلورر نسخه های 7 و قبل از آن این شبه گروه را پشتیبانی نمی کنند و اشتباهاً در این حالت شبه گروه :active را که کارکرد دیگری دارد به عنصر مورد نظر اتلاق می کنند. همچنین، اینترنت اکسپلورر تنها در مورد لینک ها این شبه گروه را به کار می برد در حالیکه در مرورگرهای دیگر این شبه گروه شامل عناصر دیگر مانند کنترل های فرم نیز می شود.
    4ـ :hover    : هنگامی که اشاره گر موس یا وسیله اشاره گر دیگری بر روی عنصری قرار گرفته باشد، این شبه گروه به آن عنصر تعلق خواهد گرفت.
    5ـ :active    : هنگامی که عنصری فعال شده باشد (مثلاً در اثر کلیک موس) این شبه گروه به آن تعلق می گیرد. همانطور که قبلاً گفته شد، اینترنت اکسپلورر نسخه 6 و نسخه های قبل از آن، به جای شبه گروه :focus، این شبه گروه را به لینک هایی که تمرکز صفحه کلید بر روی آنها قرار گرفته است، ارتباط می دهند. همچنین، اینترنت اکسپلورر تا نسخه های 7 خود تنها این شبه گروه را به لینک ها ارتباط می دهند و آن را بر روی عناصر دیگر اعمال نمی کنند.
    در مورد شبه گروه های فوق باید بگوییم که رایج ترین ترتیب مشخص کردن آنها برای لینک ها به ترتیبی است که آنها را معرفی کردیم. در غیر این صورت، ممکن است نتیجه مورد نظر ما حاصل نشود.
    در صورتی که این شبه گروه ها نقض کننده یکدیگر نباشند، می توان بیش از یکی از آنها را به طور همزمان به کار برد. مثلاً a:link:visited بی معنی است زیرا لینک ها یا می توانند به صورت عادی باشند و یا بازدید شده اما a:visited:active معتبر است و می توان آن را برای مشخص کردن ویژگی هایی برای لینک هایی که قبلاً مورد بازدید قرار گرفته اند به کار برد. لازم به ذکر است که اینترنت اکسپلورر نسخه 6 و نسخه های قبل از آن، از چنین شبه گروه هایی پشتیبانی نمی کنند و تنها آخرین مورد را در نظر می گیرند.
    سایر شبه گروه ها
    1ـ :first-child    : در صورتی که عنصری اولین فرزند عنصر دربرگیرنده خود باشد، این شبه گروه به آن تعلق خواهد گرفت.
    اینترنت اکسپلورر نسخه های 6 و قبل از آن از این شبه گروه پشتیبانی نمی کنند.
    اینترنت اکسپلورر 7، فایرفاکس نسخه های 2 و قبل از آن، سافاری نسخه های 3 و قبل از آن و اپرا نسخه 9.2، در مواردی که به وسیله جاوااسکریپت، عنصری در داخل عنصر دیگری به عنوان اولین فرزند آن وارد شود، همچنان فرزند اولین قبلی را به عنوان فرزند اولی شناخته و دستورات CSS را به همان عنصر قبلی ارتباط می دهند.
    در اپرا 9.2، عنصر ریشه (HTML)، با اینکه فرزند هیچ عنصر دیگری نیست، مشمول این شبه گروه قرار می گیرد.
    2ـ :last-child    : این شبه گروه دقیقاً بر عکس مورد قبلی عمل می کند اما به این دلیل که این شبه گروه جدید تر بوده و در CSS3 اضافه شده است، مرورگرهای کمتری از آن پشتیبانی می کنند.
    اینترنت اکسپلورر تا نسخه 7 خود از این شبه گروه پشتیبانی نمی کند.
    در سافاری نسخه 3 و نسخه های قبل از آن، این شبه گروه به کلیه عناصری که فرزند عنصر دیگری هستند تعلق می گیرد نه فقط آنهایی که آخرین فرزند عنصر دربرگیرنده خود هستند.
    در CSS3 تعداد بیشتری از این شبه گروه ها وجود دارند که هنوز پشتیبانی مرورگرها از آنها کامل نیست. به همین دلیل، به ذکر همین موارد اکتفا می کنیم.
    شبه عناصر (pseudo-elements)
    شبه عناصر نیز مانند شبه گروه های به صورت صریح و عینی در کدهای HTML تایپ نمی شوند و عناصری هستند که به صورت مجازی در صفحه وب وجود دارند. در ادامه بحث به تشریح این عناصر می پردازیم:
    1ـ :first-letter    : این شبه عنصر بیانگر اولین کاراکتر از اولین خط متون داخل یک عنصر می باشد.
    2ـ :first-line    : این شبه عنصر بیانگر اولین خط از متن داخل یک عنصر می باشد.
    بقیه شبه عنصرها در حال حاضر از پشتیبانی خوبی توسط مرورگرها برخوردار نیستند. به همین دلیل از ذکر آنها خودداری می کنیم.
    سلسله مراتب (cascade) در دستورات CSS
    هنگامی که دستورات CSS را می نویسیم، ممکن است خواسته یا ناخواسته دستوراتی بنویسیم که نقض کننده یکدیگر باشند و ویژگی های مشترکی را برای عناصر مشترکی تعیین کنند. خوشبختانه ابزارها و وسایل کمکی وجود دارند که به ما نشان دهند که کدام دستورات ملاک عمل قرار گرفته اند و علت ملاک عمل قرارگرفتن آنها چیست. اما از آنجایی که در برخی موارد لازم می شود که بر دستوراتی که قبلاً نوشته ایم، غلبه نماییم و تعاریف جدیدی را برای عنصری که تحت تأثیر تعاریف قبلی قرار گرفته ارائه دهیم، به اختصار سلسله مراتب (cascade) را در CSS مورد بررسی قرار می دهیم.
    برای آن که مرورگر بتواند ویژگی های مشخص شده برای عنصر یا عناصری را به آنها ارتباط دهد، چهار مرحله را طی می کند که در ادامه بحث به صورت مشروح آنها را شرح می دهیم:
    1ـ یافتن دستورات مشترک: در این مرحله مرورگر، کلیه دستورات ذکر شده در کلیه منابع CSS موجود را فهرست کرده و بررسی می کند که آیا در میان این دستورات، دستوراتی هستند که ویژگی مشترکی را بر روی عنصر مشترکی تعیین کنند یا خیر. در صورتی که این امر صادق باشد، برای تعیین اولویت این دستورات، مرورگر به مرحله بعدی خواهد رفت.
    2ـ مرتب کردن دستورات بر اساس اهمیت آنها: برای بخشیدن اهمیت بیشتر به دستورات CSS می توان از !important در انتهای دستورات استفاده کرد. در این مرحله مرورگر دستوراتی را که ویژگی مشترکی را بر عنصر مشترکی تعیین می کنند یافته و آنهایی را که درجه اهمیت بیشتری داشته باشند، مورد اولویت قرار می دهد. در صورتی که دستورات یافته شده، میزان اهمیت مشترکی نیز داشته باشند، مرورگر به مرحله بعدی خواهد رفت.
    3ـ مرتب کردن دستورات بر اساس میزان خاص بودن (specificity) انتخابگرهای به کار رفته در آنها: چنانچه دستورات CSS یافته شده ویژگی های مشترکی را بر عنصر مشترکی تعیین کنند و همچنین از نظر میزان اهمیت بر یکدیگر برتری نداشته باشند، مرورگر به این مرحله خواهد رسید. در این مرحله، دستوراتی که درانتخابگرهای آنها به صورت خاص تر و دقیق تری تعیین شده باشند، بر عنصر مورد نظر اعمال خواهند شد. میزان خاص بودن انتخابگرهای CSS به زبان ساده به صورت زیر محاسبه می شود:
    الف) اگردستوراتی به عنوان مقدار ویژگی style یک عنصر در صفحه وب مشخص شده باشد، این دستورات بیشترین میزان خاص بودن را دارا هستند. این یکی از دلایلی است که به طور معمول نباید دستورات CSS را به وسیله ویژگی style، مشخص کرد. زیرا چنانچه بعداً نیاز به غلبه کردن به این دستورات داشته باشیم، کار ما دشوار خواهد شد. چنانچه، دستورات با استفاده از ویژگی style، مشخص نشده باشند برای تعیین میزان خاص بودن آن ها به مرحله بعد می رویم.
    ب) تعداد انتخابگرهای شناسه ها (id selectors) به کار رفته در دستورات مشترک را محاسبه می کنیم. دستوراتی که دارای تعداد بیشتری انتخابگر شناسه باشند، بیشترین میزان خاص بودن را دارا هستند. چنانچه تعداد انتخابگرهای شناسه در همه آنها برابر باشد یا اینکه هیچ کدام از آنها انتخابگر شناسه نداشته باشد، به مرحله بعد می رویم.
    پ) تعداد انتخابگرهای گروه ها (class selectors)، انتخابگرهای ویژگی ها (attribute selectors) و شبه گروه ها را محاسبه می کنیم. دستوراتی که دارای تعداد بیشتری از این انتخابگرها باشند، خاص تر بوده و اولویت بیشتری دارند. در صورتی که در این مرحله نیز نتوانیم اولویتی برای دستورات قائل شویم، به مرحله بعدی می رویم.
    ت) تعداد انتخابگرهای عناصر و شبه عناصر را محاسبه می کنیم. دستوراتی که تعداد بیشتری از این انتخابگرها داشته باشند، اولویت بیشتری دارند.
    چنانچه در هیچ کدام از مراحل فوق نتوانیم اولویت دستورات را تعیین کنیم، دستوراتی که از نظر ترتیب دیرتر ذکر شده باشند، اولویت بیشتری خواهند داشت.
    حاصل محاسبات فوق را به صورت چهار عدد با فرمت (a, b, c, d)  نشان می دهند که تعیین کننده رتبه ای است که دستورات از نظر میزان خاص بودن به دست می آورند. با ذکر مثالی، این مطلب را شرح می دهیم. به دستورات زیر توجه کنید:
    p.message {color: green; }
    (0, 0, 1, 1)
    #home #warning p.message {color: yellow; }
    (0, 2, 1, 1)
    #warning p.message {color: white; }
    (0, 1, 1, 1)
    body#home div#warning p.message {color: blue; }
    (0, 2, 1, 3)
    p {color: teal; }
    (0, 0, 0, 1)
    * body#home>div#warning p.message {color: red; }
    (0, 2, 1, 3)
    #warning p {color: black; }
    (0, 1, 0, 1)
    4ـ مرتب کردن دستورات بر اساس ترتیب ذکر شدن آنها در کدهای نوشته شده: چنانچه در سه مرحله قبل مرورگر نتواند اولویت دستورات مشترک را تعیین نماید و در همه موارد قبلی دستورات مشترک اولویت یکسانی بیابند، دستورات بر اساس ترتیب ذکر شدن آنها در استایل شیت مرتب شده و آخرین موردی که ذکر شده است بر موارد قبلی غلبه می کند.

     ارسال در حدود 1726 روز قبل  نویسنده : akbari  بدون نظر   | ادامه مطلب »

    برترين مطالب
    Best Posts
    آخرین مطالب ارسالی
    Last Posts