کانال بله, جهت پشتیبانی و اطلاع رسانی کانال بله, جهت پشتیبانی و اطلاع رسانی
عضویت
ورود کاربر جدید هستید؟ ثبت نام کنید
مشاوره رایگان
مشخصات مقاله
  • 4043
  • 5.0
  • 7966
  • 1
  • 1
آموزش Css بخش دوم
  1. آموزش Padding در CSS
  2. آموزش سلکتور های Grouping و Nesting در CSS
  3. آموزش نمایش و قابلیت دیده شدن در CSS
  4. آموزش تعیین موقعیت در CSS و عنصرهای روی هم افتاده
  5. آموزش CSS Float
  6. آموزش شبه عناصر یا CSS Pseudo-classes
  7. آموزش Pseudo-elements در CSS
  8. آموزش نوار پیمایش در CSS
  9. آموزش گالری عکس در CSS
  10. آموزش Media Types در CSS
  11. آموزش سلکتورهای اتریبیوت در CSS
  12. آموزش کدر بودن و شفافیت تصویر در CSS
  13. آموزش Spriteهای تصویر در CSS
  14. آموزش تراز کردن افقی در CSS
آموزش Css بخش اول
  1. آموزش فونت در CSS
  2. CSS چیست؟
  3. آموزش سینتکس CSS
  4. آموزش Selectorهای id و class
  5. آموزش Style Sheet ها در CSS
  6. آموزش پس‌زمینه در CSS
  7. آموزش متن در CSS
  8. آموزش لینک‌های CSS
  9. آموزش جدول های CSS
  10. آموزش لیست‌های CSS
  11. آموزش دور قاب CSS
  12. آموزش CSS Border
  13. آموزش outlineهای CSS
  14. آموزش Margin در CSS
آموزش CSS3
  1. آموزش BackGround در CSS3
  2. تبدیل دوبعدی (2D Transformation) در CSS3
  3. تبدیل سه‌بعدی (3D Transformation) در CSS3
  4. آموزش Border Radius در CSS3
  5. آموزش CSS3
  6. آموزش Shadow (سایه) در CSS3
  7. آموزش Animation در CSS3
  8. آموزش رنگها در CSS3
  9. آموزش گرادینت در CSS3
  10. آموزش text متن در CSS3
  11. آموزش Transition در CSS3
  12. استفاده از فونت با @font-face در CSS3

آموزش سلکتور های Grouping و Nesting در CSS

سلکتورهای Grouping

در style sheetها، اغلب عناصری با یک استایل وجود دارند.

نمونه اول
امتحان کنید

برای کوتاه کردن کد، می توان سلکتورها را group کرد.
هر سلکتور را باید با یک علامت ویرگول جدا کرد.
در مثلا زیر، سلکتورهای کد بالا با هم group شده اند:

نمونه دو

        h1, h2, p{
            color: green;
        }
امتحان کنید

Nest کردن سلکتورها

اعمال کردن استایل برای سلکتور درون سلکتوری دیگر امکان پذیر است.
در مثال زیر، یک استایل برای همه عنصرهای p، تعیین شده است، و استایلی دیگر نیز برای عنصرهای p، که درون کلاس "marked" تودرتو شده اند، تعیین شده است.

نمونه سه

        p{
            color:blue;
            text-align:center;
        }
        .marked{
            background-color:blue;
        }
            .marked p {
                color: white;
            }
امتحان کنید
1394/07/27 7966 4043
دانلود PDF
دانلود سورس کد
دانلود فیلم اول
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com
سوالات و نظرات
نظرات شما

نظرات خود را ثبت کنید...