انواع سلکتور های CSS - قسمت اول

دسته بندی: آموزش
زمان مطالعه: 1 دقیقه
۲۹ دی ۱۳۹۳

در جلسه امروز ابتدا یک صفحه html کامل رو با هم کد نویسی می کنیم تا مواردی که در جلسات پیش تدریس کردیم رو در عمل ببینیم چجوری باید استفاده کنیم. بعد از اینکه ساختار کلی صفحه رو با html ساختیم میریم سراغ معرفی سلکتور های مختلف در زبان CSS . با دونستن انواع سلکتور ها می تونید تعین کنید که تنظیمات و ویژگی های CSS در چه بخشی از صفحه وب اعمال بشن .

عموم مطالب مطرح شده در این جلسه عبارتند از :

  • مینی پروژه - ایجاد یک قالب کامل HTML5 بدون کدهای CSS
  • معرفی سلکتورهای مختلف CSS
  • سلکتور .class
  • سلکتور #id
  • سلکتور *
  • سلکتور element
  • سلکتور element,element
  • سلکتور element element
  • سلکتور element>element
  • سلکتور element+element
  • سلکتور element1~element2
:: توجه

این مطلب یک جلسه از آموزش طراحی وب سایت می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش طراحی وب سایت

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

Farzane Zareei

با سلام و ادب.
ببخشید به جای تگ hgroup که الان دیگه منسوخ شده چه جایگزینی باید استفاده کنیم؟

لقمان آوند

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

mststrange

سلام. از جلسه 2 به بعد هیچ فایلی دانلود نمیشه لطفا بررسی کنید

nilla abr

سلام استاد خسته نباشید، تگ hgroup در html5 منسوخ شده, طبق جستجویی که من کردم جایگزینی برای این تگ نیست، سوالم این هست که پس میتوان تگ های h1 تا h6 در تگ header بیاوریم؟ از نظر محتوایی به چه صورت باید عمل کرد؟

علی صالحی

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

علی صالحی

چرا به کامنتا جواب نمیدین ؟

لقمان آوند

سلام
تعداد کامنت ها یکم زیاده و طول می کشه
عذرخواهی می کنبم اگر تاخیر داریم در پاسخگویی

علی صالحی

سلام جناب اوند
یه سوالی برام پیش اومده ممنون میشم جواب بدین
تو بخش footer پروژه ای که در این قسمت کار شد شما اومدین یه تگ div تعریف کردین و درون اون از تگ footer استفاده کردین
ولی فک کنم اگه قبلش اول از تگ footer استفاده میکردیم که به مرورگر بگیم اینجا بخش فوتر است بعدش با تگ div قسمت های مختلف footer و جدا کنیم نمیدونم شایدم من اشتباه میکنم یه سایتی هم رفتم ( خارجی ) خواستین ادرسشم میدم اونام اینجوری نوشته بودن اول تگ footer بود بعد تگ Div که با div اون بخش footer رو به چند بخش تقسیم کرده بودن
تشکر

karami20102

سلام وقت بخیر
phpstorm2018 نشان میده که تگ hgrooup منسوخ شده
چه تگی جایگزینش میشه؟

احسان

سلام آقای دکتر آوند.خیلی ممنون از بیان عالیتون در ارایه مطالب سطح بالا.واقعا من از خریدی که انجام دادم راضی هستم.یک موردی که خیلی حتی قبل از اینکه خودتون بگید ذهن من رو مشغول کرده بود این بود که گاهی اوقات من توی سایت w3 میرم و دوس دارم برای یه مطلبی که میخوام همیشه داشته باشمش اون رو به صورت pdf داشته باشم و در گوشی دسترسی داشته باشم بهش .تا اینکه توی یکی از جلسات که خاطرم نیست کدوم جلسه بود ولی فکر کنم 8 یا 9 بود دیدم شما یه حرکت بسیار حرفه ای واسه این مورد زدید که واقعا شگفت انگیز بود 😆 میشه خواهش کنم کد کامل اکستنشن استایلیش خودتون رو در اختیارم بذارید دکتر؟ واقعا دوس دارم که متون w3 رو که لازم دارد به صورت pdf داشته باشم…خیلی ممنون از وبسایت غنی و آموزشهای عالیتون 😎

لقمان آوند

سلام و ممنون از شما دوست عزیز
متاسفانه الان اون استایل ها رو ندارم و فقط حین ضبط دوره ازشون استفاده می کردم.
اگر داشتم حتما بهتون میدادم.
می تونید یه مدیاکوئری برای print بزنید و بخش های مختلفی رو که نمی خواید نمایش داده بشه به کلاسشون display:none بدید و استایل رو خودتون بسازید

وحید صف آرا

سلام . خسته نباشید
استاد یه تکیه رو اشتباه تدریس کردید!!!
h2~p
شما به این گفتید p هایی که قبل از h2 اومده باشند.در حالی که صحیح نیست!
این یعنی تمامی p هایی که بعد از h2 اومدند ،و h2 هم باید فرزند همان والدی که تگه p هست
شما چون توی چندین پاراگراف توی آموزش اعمال کردید و فکر کردید اینطوری عمل میکنه.
خودم چندین بار تست کردم دیدم اون حرفی که شما گفتید صدق نمیکنه اصلا!چون خودم از قبل یه آموزش دیگه رو دیده بودم از روی کنجکاوی آزمایش کردم.
راستی جواب سوال منم که زیره پست جلسه دوم پرسیدم هنوز ندادید!
نمیدونم دلیلش چی بود از همه رو جواب دادید ولی منو ندادید
یه سوال دیگه هم دارم:
شما اون کد جاوا اسکریپت که واسه IE زدید توی آموزشتون اصلا هیچ سورسی نزاشتی واسش توی فایلاتون.
خب سورسش کجا ذخیره شده؟!
تو خوده ie؟
خودش از نت دانلود میکنه همونوقت؟
من الان نفهمیدم چی به چیه!

با تشکر

لقمان آوند

سلام
p ~ ul یعنی همه ul هایی که قبلشون یه تگ p اومده درحالتی که هر دو هم یک والد دارند. اگر غیر از این گفتم احتمالا اشتباه گفتم.
منظورتون کدوم دقیقه از آموزش هست اگر بگید که ببینم پاسخ میدم در مورد اون کد IE

وحید صف آرا

استاد منظورم اون فایل جاوا اسکریپت html5shiv بود که توی دو جلسه از آمورشاتون تا الان استفاده کردید
هیچ سورسی نداره تو فایل هایی که واسمون گذاشتید.صرفا فقط یه آدرسه

وحید صالحی

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

itone

استاد یه سوال دیگه ببخشید …

 div p{color:greent;}

این کد روی پاراگراف هایی اعمال میشه که توی دیو هستند

 div>p

اینم روی پاراگراف هایی که (مستقیما) درون دیو هستند ….
11111111111111111111111111111111111111111111111111111111

استاد میتونم بپرسممنظور از مستقیما چیه ؟؟
2-و فرق این دوتا سلکتور چیه باهم هر دوتاشون یه کارو میکنن که …

معذرت میخام از استاد عزیز اقای اوند و تمام کهربران به خاطر اینکه تعداد سوالاتم زیاده ……………..

لقمان آوند

یعنی فرزند مستقیم div باشن. نوه و نتیجه و … نباشن 😉

لقمان آوند

سلام
بله میشه
تو هر صفحه فقط یک h1 رو به کار ببرید .

itone

سلام استاد یه سوال
استاد شما توی تگ article از footer استفاده کردید …
ایا میتونیم از تگ header هم واسه title اون استفاده کین م؟؟؟
به این صورت …

this title article
body article
read more

-الان من توی Article از تگ h1 استفاده کردم و توی nav هم از تگ h1 استفاده کردم مشکلی به همراه نمیاره ؟
/////////////////////////////////////////////////////////////////////////////////////////////////
استاد من واسه تمرین رفتم توی وب سایت یاهو و سعی کردم کد html بنویسم استاد میشه واستون بفرستم و بگید مشکلاتش کجاست ؟؟
ممنون بابت پاسخگویتون ….

لقمان آوند

تمرین خاصی نمی خواد
یه عکس مربوط به سایت رو از سطح وب پیدا کنید و سعی کنید کدش رو بنویسید که شبیه اون بشه

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

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