دوره مجازی طراحی وب (جلسه 9): انواع سلکتور های CSS - قسمت اول

- visibility ۹۰ mode_comment

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

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

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

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

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

comment دیدگاه کاربران
Hamide

سلام
استاد من تفاوت + و ~ رو متوجه نمیشم: باتوجه به توضیحی ک سایت W3Schools گفته:
http://www.w3schools.com/cssref/css_selectors.asp

وحید صالحی

سلام + برای عنصر بعدی هست مثلا div+p یعنی عنصر p که بلافاصله بعد از عنصر div قرار گرفته باشه ولی ~ برای انتخاب عنصر قبلی هست مثلا p~ul یعنی عنصر p که قبل از ul قرار گرفته باشه…

abbas

با سلام
در مورد این سلکتور باید بگم که علامت( ~) عنصرهای قبلی را انتخاب نمی کند ، جناب دکتر آوند هم در این جلسه همین مطلب را گفتند که عنصر های قبل را انتخاب می کند ولی این مورد صحیح نیست لطفا شما هم امتحان نمائید و نظرتان را اعلام کنید

لقمان آوند

سلام
برای مثال سلکتور p ~ a مجموعه a هایی رو مشخص میکنه که بعد از یه p در صفحه اومده باشن. (یعنی یه p قبل از اونها در هر کجای صفحه باشه)

علی صوفی

سلام و خسته نباشید این کد کجاش غلطه
span.wpcf7-not-valid-tip {
direction: rtl;
}

.use-floating-validation-tip span.wpcf7-not-valid-tip {
left: auto;
right: 20%;
}

span.wpcf7-list-item {
margin-left: 0;
margin-right: 0.5em;
}

لقمان آوند

از لحاظ ساختاری مشکل خاصی نداره.
باید ببینید در کجای صفحه به چه منظوری استفاده میشه و چه مشکلی داره احیانا !

itone

سلام و خسته نباشید
استاد اوند میشه یه تمرین در مورد مینی پروژه (قالب html )به من بدید !!!!
سپاسگزارم !

لقمان آوند

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

itone

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

this title article
body article
read more

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

لقمان آوند

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

itone

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


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


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

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

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

لقمان آوند

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

وحید صف آرا

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

با تشکر

لقمان آوند

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

وحید صف آرا

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

وحید صالحی

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

احسان

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

لقمان آوند

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3 4