آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

90 17100 ۲۹ دی ۹۳
در جلسه امروز ابتدا یک صفحه html کامل رو با هم کد نویسی می کنیم تا مواردی که در جلسات پیش تدریس کردیم رو در عمل ببینیم چجوری باید استفاده کنیم. بعد از اینکه ساختار کلی صفحه رو با html ساختیم میریم سراغ معرفی سلکتور های مختلف در زبان CSS . با دونستن انواع سلکتور ها می تونید تعین کنید که تنظیمات و ویژگی های CSS در چه بخشی از صفحه وب اعمال بشن . عموم مطالب مطرح شده در این جلسه عبارتند از :
  • مینی پروژه - ایجاد یک قالب کامل HTML5 بدون کدهای CSS
  • معرفی سلکتورهای مختلف CSS
  • سلکتور .class
  • سلکتور #id
  • سلکتور *
  • سلکتور element
  • سلکتور element,element
  • سلکتور element element
  • سلکتور element>element
  • سلکتور element+element
  • سلکتور element1~element2
این مطلب یک جلسه از کاملترین و کاربردی ترین پکیج و دوره آموزش طراحی وب است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : به جای صرف هزینه های چند صد هزارتومانی برای یادگیری طراحی وب ، تنها با 30% هزینه ی کلاس های حضوری، دوره ی کامل و حرفه ای آموزش طراحی وب را برای شما عزیزان برگزار کرده ایم. در این دوره مفاهیم اساسی و پایه ای طراحی وب مطرح خواهد شد و زبان های HTML5 و CSS3 با جزئیات کامل و به صورت کاملا عملی و کاربردی تدریس می شود. وجه تمایز و مزیت این دوره نسبت به دوره های مشابه، کاربردی بودن آن است. در این دوره مواردی مانند آموزش طراحی قالب متناسب با سئو، آموزش طراحی وب واکنشگرا (Responsive)، آموزش تبدیل قالب فتوشاپی به صفحه وب، آموزش ترجمه و فارسی سازی قالب های خارجی، آموزش طراحی قالب برای سیستم های وبلاگدهی (بلاگفا و میهن بلاگ) به صورت کاملا عملی، از پایه تا پیشرفته توسط مدرسی با تجربه 10 ساله طراحی وب و دانشجوی دکترای نرم افزار برای شما به صورت کاملا اصولی و عملی تدریس می شود. شما برای این حجم مطالب آموزشی فقط یک سوم کلاس های حضوری هزینه می کنید! ما رضایت شما را تضمین خواهیم کرد ...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 90 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

    • ‏‏
      وحید صالحی(۱ خرداد ۱۳۹۵)

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

      • ‏‏

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

        • ‏‏
          لقمان آوند(۲ تیر ۱۳۹۵)

          سلام
          برای مثال سلکتور 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;
    }

    • ‏‏
      لقمان آوند(۲ تیر ۱۳۹۵)

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۲۸ تیر ۱۳۹۵)

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

      • ‏‏

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

        this title article
        body article
        read more

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

        • ‏‏
          لقمان آوند(۵ مرداد ۱۳۹۵)

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

  • ‏‏

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


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


    اینم روی پاراگراف هایی که (مستقیما) درون دیو هستند ….
    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 بدید و استایل رو خودتون بسازید

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

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :