معرفی و کار با سلکتورها در CSS3 و HTML5

html5 selectors

معرفی :

با عرض سلام ادب و احترام ، خدمت شما کاربران محترم سایت دوست داشتنی ilikephp.ir  به جلسه هشتم Html5 خوش آمدید.

هدف جلسه :

در این جلسه قصد داریم تا کار با سلکتورها را آغاز کنیم (انتخاب کننده ها ) در طول  این دوره شما به همراه HTML5 , CSS3 نیز یاد خواهید گرفت اما برای حرفه ای تر شدن نیاز به یک دوره مجزا CSS3 خواهید داشت که حتما بعد از اتمام این دوره،یک دوره کاملا مجزا در خدمت شما عزیزان خواهیم بود.   با ما همراه باشید …

 

شروع آموزش :

دوستان خیلی خوش آمدید به جلسه هشتم ، این جلسه رو شروع میکنیم با معرفی اولین سلکتور در CSS3 .

  >

 

علامتی که در بالا مشاهده می کنید علامت بزرگتر است این علامت بیانگر این است که همیشه عنصر دوم را در سی اس اس انتخاب کند .  

به عنوان مثال :

زمانی شما یک Div پدر دارید و داخل آن پاراگراف هایی را تعریف کرده اید  طبق کد زیر:

  <div id =”Pedar”>    <p class=”ali”>bache 1 </p>    <p class=”ali”>bache 2 </p>    <p class=”ali”>bache 3</p>    <p class=”ali”>bache 4</p>    <p class=”ali”>bache 5 </p>    

 

با استفاده از کد زیر اعلام می کنید که فقط عنصر دومی در کد پروژه را انتخاب کند و رنگ های آنها را تغییر دهد :

  Div > p {color:blue;}    

که دارای تگ P است و تمامی تگ ها را به رنگ آبی در می آورد .

دومین سلکتور علامت + است :

، این علامت بیانگر این است که شما می توانید به تمامی کدها یک خاصیت را اعمال کنید ولی به یکی از آنها نباید خاصیت مورد نظر را اعمال کنید  به عنوان مثال :

  P.ali + p {color:red;}    

منظور از این کد این است که بلافاصله بعد از خوانده شدن آن توسط مرورگر ، تگ پاراگراف اولی که دارای کلاس علی است تغییری پیدا نکند اما از پاراگراف دو به بعد تغییرات رنگی بر روی آن اعمال شود .

 

توجه : دوستان در نظر داشته باشید که شما می توانید خاصیت های بسیاری رو در بین آکولادها در سی اس اس ذکر کنید ما به علت اینکه سطح آموزش کاملا مقدماتی باشه مجبوریم مثال های ساده ای رو برای کاربرای عزیز در نظر بگیریم

 

ممنون از اینکه همراه ما بودید

دوره های مارو به دوستانتان معرفی کنید

دوستدار شما : عباس حبیبی

سوالات خود را از ما بپرسید … 

دیدگاهتان را بنویسید