آموزش selector در CSS
آموزش ویدیوییselector در CSS
در این فیلم و آموزش ویدئویی با selector ها در CSS آشنا خواهید شد.
چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.
مشاهده یا دانلود فیلم بالادر این بخش از آموزش css از تاپ سایت 98 به بحث آموزش selector در CSS می پردازیم و با ذکر چندین مثال شما را با انواع سلکتورها آشنا می کنیم.
آموزش سلکتورها در css
در این بخش به آموزش سلکتورها در css می پردازیم. سلکتور (selector) برای انتخاب عنصر html استفاده می شود.
زمانی که می خواهیم روی یک یا چند عنصر html تغییراتی را اعمال نماییم یا استایلی به آنها بدهیم بایستی ابتدا آنها را انتخاب نماییم که این وظیفه selector است.
انواع سلکتور
حال به بحث انواع سلکتور می رسیم. روش های مختلفی برای یافتن عناصر html وجود دارد که در قسمت زیر با انواع سلکتور (selector) آشنا می شویم.
انتخاب بر اساس عنصر (The CSS element Selector)
انتخاب بر اساس عنصر (The CSS element Selector) یعنی استایل یا css بر تمامی عنصر انتخاب شده اعمال شود. بگذارید با مثال توضیح دهیم.
در مثال زیر تمامی تگ های p انتخاب می شوند و استایل روی آنها اعمال می شود ، رنگ پس زمینه مشکی و رنگ متن سفید خواهد شد.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TopSite98.com</title>
<style>
p{ color: #fff; background-color: black; }
</style>
</head>
<body>
<div id="d1">
<h1>TopSite98.com</h1>
<p>تاپ سایت 98</p>
<p class="aa">آموزش رایگان کامپیوتر</p>
<p class="aa">آموزش رایگان برنامه نویسی</p>
<h2 class="bb">test h2</h2>
</div>
<p title="topsite98.com">topsite98</p>
</body>
</html>
سلکتور id در css
سلکتور id در css برای انتخاب id بکار می رود. اگر بخواهیم یک یا چند id را انتخاب نماییم از # استفاده می کنیم و استایل ها را می نویسیم.
مثال بالا را تغییر می دهیم و سلکتور id را انتخاب و رنگ پس زمینه و رنگ متن آن را تغییر می دهیم.
نتیجه و خروجی مثال ، تغییر background عنصر div به رنگ مشکی و تغییر رنگ متن به سفید خواهد بود.
#d1{
color: #fff;
background-color: black;
}
</style>
سلکتور کلاس در css
با سلکتور کلاس در css می توانیم یک یا چند کلاس را انتخاب کرده و استایل مناسب را روی آن اعمال نماییم.
مثال بالا را تغییر داده و id را حذف می کنیم و بجای آن در style کد زیر را قرار می دهیم و خروجی را مشاهده می کنیم.
در این مثال مشاهده می کنید که همزمان می توانیم چند عنصر را انتخاب کرده و یک استایل خاص را روی آها اعمال نماییم.
ما دو کلاس aa و bb را انتخاب کرده ایم و چند استایل را روی آن اعمال کرده ایم. کلاس ها در css با نقطه مشخص می شود.
.aa , .bb{
color:blue;
border: 5px solid red;
font-weight: bold;
}
</style>
سلکتور * در css
از سلکتور * در css زمانی استفاده می شود که بخواهیم استایل یا css روی همه عناصر اعمال شود.
مثال بالا را تغییر می دهیم و کد زیر را قرار می دهیم. خروجی انتخاب و تغییر رنگ متن همه عناصر در صفحه می باشد.
*{
color:blue;
font-weight: bold;
}
</style>
انتخاب همزمان چند عنصر در css
ما می توانیم بصورت همزمان چندین عنصر مختلف را با هم انتخاب نماییم.
برای انتخاب همزمان چند عنصر در css کافی است آنها را با کاما از هم جدا نماییم و سپس استایل را بنویسیم.
h1 , .bb{
color:blue;
font-weight: bold;
}
</style>
سلکتور < در css
سلکتور < در css به دنبال تگ های p در div می گردد و استایل را روی آن اعمال می کند.
اگر تگ p ای در div نباشد استایل روی آن اعمال نمی شود.
خروجی مثال ، انتخاب همه تگ های p داخل div می باشد و p خارج از div استایل روی آن اعمال نمی شود.
div > p{
color:blue;
font-weight: bold;
}
</style>
سلکتور attribute در css
سلکتور attribute در css برای انتخاب عنصر با ویژگی خاص می باشد.
در مثال زیر تگ p که دارای ویژگی title می باشد انتخاب می شود و استایل روی آن اعمال می شود رنگ متن آبی و متن توپر خواهد شد.
p[title]{
color:blue;
font-weight: bold;
}
</style>
امیدواریم این آموزش برای شما مفید باشد.
موفق باشید.
منبع: دبلیوتری اسکولز
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید