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

سلکتورهای Grouping

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

نمونه اول

    <style>
    h1{
        color: green;
    }
    h2{
        color: green;
    }
    p{
        color: green;
    }
</style><button></button>

امتحان کنید

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

نمونه دو

h1, h2, p{
    color: green;
}<button></button>

امتحان کنید

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

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

نمونه سه

p{
    color:blue;
    text-align:center;
}
.marked{
    background-color:blue;
}
    .marked p {
        color: white;
    }<button></button>

امتحان کنید

آموزش سلکتورهای اتریبیوت در CSS آموزش تراز کردن افقی در CSS

1394/07/27 7231 3902

دانلود PDF

دانلود سورس کد

دانلود فیلم اول

رمز عبور : tahlildadeh.com یا www.tahlildadeh.com

سوالات و نظرات

نظرات شما