آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

Attribute Selectors در CSS

css-logo

فصل چهارم : Properties در CSS

جلسه بیست و پنجم : Attribute Selectors در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

در این جلسه ی آموزشی قصد دارم در رابطه با سلکتورهای خصوصیات یا Attribute Selectors در css صحبت کنم و با ذکر مثال نحوه ی استفاده از این سلکتورها رو خدمتتون آموزش بدم .

 

Attribute Selectors چیست؟

با استفاده از سلکتورهای خصوصیات شما میتونید با اشاره به خصوصیت عناصر برای اونها استایل تعریف کنید. به عنوان مثال میگید عناصری که خصوصیت title دارن و title شون برابر با ” مدرسه مجازی ایرانیان ” هست رو با استایل مورد نظر نمایش بده.

 

 

مثال اول:

در این مثال گفتیم عناصری a یی که خصوصیت targetدارند رو با بک گراند زرد نمایش بده.

 

 

مثال دوم:

در این مثال گفتیم عناصر aیی که خصوصیت target دارند و این خصوصیتشون مقدار blank داره رو با بک گراند زرد نمایش بده.

 

 

مثال سوم:

در این مثال گفتیم تمامی عناصری که در خصوصیت title شون کلمه flower به کار رفته رو با border زرد نمایش بده. نکنه ای که هست اینه که کلمه flower باید با یک فاصله از کلمات دیگه در title قرار گرفته باشه.

 

 

مثال چهارم:

در این مثال گفتیم عناصری که کلاسشون با کلمه top شروع شده با بک گراند زرد نمایش بده. نکته اینجاست که کلمه top نباید تشکیل دهنده یک عبارت باشه، کلمه top باید یه تنهایی استفاده شده باشه و یا با علامت – از عبارات دیگه جدا شده باشه.

 

 

مثال پنجم:

در این ثال گفتیم عناصری که کلاسشون با کلمه top شروع شده رو با بک گراند زرد نمایش بده. این مورد دیگه لازم نیست حتما کلمه top مجزا باشه میتونه تشکیل دهنده یک عبارات باشه.

 

 

مثال ششم:

در این مثال گفتیم عناصری که کلاسشون به کلمه test ختم میشه رو با بک گراند زرد نمایش بده. نیازی نیست کلمه test مجزا باشه میتونه تشکیل دهنده یک عبارات باشه فقط باید انتهای نام کلاس باشه.

 

 

مثال هفتم :

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

 

 

مثال آخر:

در این مثال گفتیم input هایی که از نوع text و یا button هستند رو انتخاب کن و این استایل رو بهشون بده.

 

این سلکتورهارو IE7 و  IE8 هم ساپورت میکنه در صورتی که از !DOCTYPE استفاده شده باشه.

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

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • Mj

    سلام
    خیلی جالب و عالی بود ممنون
    اما فکر نمیکنم این همه تنوع در انتخاب کردن لازم باشه و فقط موجب گمراهی و سردرگمی بیشتر فرد میشه
    بازم تشکر

    • میترا رحیمی

      سلام دوست عزیز
      بله عموما استفاده نمیشه ، اما گاهی اوقات باید یکسری شروط در css تون لحاظ کنید که دونستن این موارد زودتر شمارو به نتیجه میرسونه.
      باید از وجود همه چیز مطلع باشید تا بتونید بهترین تصمیم گیری رو در کدنویسی بگیرید.
      موفق و پاینده باشید.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟