ویژگی های CSS - قسمت اول

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

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

 

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

  • ذکر روند تدریس ویژگی های CSS
  • ویژگی های پیشونددار مرورگرهای خاص
  • پیشوند -moz- و مرورگر موزیلا فایرفاکس
  • پیشوند -ms- و اینترنت اکسپلورر
  • پیشوند -o- و مرورگر اپرا
  • پیشوند -webkit- برای کروم و سافاری
  • ذکر معایب و مزایای استفاده از ویژگی های پیشوند دار در کنار ویژگی های استاندارد CSS3
  • معرفی کیورد initial و کاربردهای آن
  • معرفی کیورد inherit و کاربردهای آن
  • معرفی کیورد none و کاربردهای آن
  • معرفی کیورد auto و کاربردهای آن
  • معرفی کیورد !important و کاربردهای آن
  • معرفی box model در html و css
  • تفاوت border, padding و margin
  • آموزش ویژگی های مختلف زبان CSS
  • ویژگی color و کاربردهای آن
  • ویژگی opacity و کاربردهای آن
  • ویژگی background و کاربردهای آن
  • ویژگی background-attachment و کاربردهای آن
  • ویژگی background-color و کاربردهای آن
  • ویژگی background-image و کاربردهای آن
  • ویژگی background-position و کاربردهای آن
  • ویژگی background-repeat و کاربردهای آن
  • ویژگی background-clip و کاربردهای آن
  • ویژگی background-origin و کاربردهای آن
  • ویژگی background-size و کاربردهای آن
  • ذکر نکات مهم در مورد نحوه طراحی و انتخاب درست پس زمینه
  •  بحث تقارن پس زمینه و یکپارچه سازی پس زمینه نهایی با تکرار تصویر کوچک
:: توجه

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

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

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

جلسات دوره

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

saeed

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

saeed

سلام وقتتون بخیر . 2 سوال داشتم خدمتتون .
1-میخواستم بدونم اگه مواردی که مربوط به css 1 هست رو در سایت پیاده سازی کنیم موردی داره ؟
2-با توجه به اینکه css 4 اومده میخواستم بدونم در ورژن جدید ساختار تغییر میکنن یا موارد جدید اضافه میشه ؟ ما این تغییراتو چطوری ازش اگاه بشیم؟
سپاس گزارم

hashem

دوره شما عالی بود

hashem

مشکل حل شد ممنون

داود حسینی

سلام و خسته نباشید
در مورد اینکه گفتین مرورگرهای مختلف کدهای CSS مخصوص خودشون دارند، من امتحان کردم و با اتفاق عجیبی روبه رو شدم.
کد moz- برای مایکروسافت اج (Microsoft Edge) اجرا میشه و کد webkit- برای فایرفاکس و گوگل کروم !!!!!!!
من از کروم ورژن 70 و فایرفاکس ورژن 65 و مایکروسافت اج ورژن 40 استفاده می کنم.

Amir Ahangar Azizi

سلام

من تو css برای background که رنگ میدم با !important رنگ عوض نمیشه ؟

Amir Ahangar Azizi

شرمنده پیدا کردم تو phpstorm عدد 1 و L کوچک شبیه به هم هستند منم اشتباهی نوشته بودم

علی سلطانی

سلام فایل دانلود نمیشه
!!!!

وحید صف آرا

با سلام و خسته نباشید دوباره خدمت استاد
من کلا آدم کنجکاویم ببخشید زیاد سوال میپرسم 😀

به یک سوال توی این جلسه برخورد کردم که دلیل منطقیشو توی اینترنت هم پیدا نکردم و اکثرا حرف شما رو زده بودند و بنظرم حرفی هم که شما توی آموزش زدید منطقی نیست
الان آخرین ورژن فایر فاکس مثلا از سودو المنت ::selection ساپورت نمیکنه و باید از پیشوند استفاده کرد تا این ویژه گی عمل بکنه.
ولی اینکه چرا بعد از این همه زمان که گذشته بعضی خصوصیت ها ساپورت نمیشن واسم جای سواله.
شما گفتید از پیشوند ها برای ویژه گی های css3 استفاده میشه.ولی اگه اینطوری بود، ویژه گی ::selection در جدیدترین نسخه فایرفاکس ساپورت میکرد و بدون استفاده از پیشوند کار میداد
بنظرتون درست عرض نمیکنم؟
توی نت هم سرچ کردم جوابی که باید واسش پیدا نکردم
خواستم بدونم شما اطلاعاتی در این باره دارید یا خیر
تشکر

لقمان آوند

سلام
لزوما اینطور نیست که فقط از پیشوندها به همراه ویژگی های css3 استفاده بشه. یکی از دلایلش اینه که اگر ساپورت نشه مشکلی بوجود نیاد در اون مرورگر.
الان تقریبا همه مرورگرهای معروف در آخرین ورژن هاشون سودوالمنت هایی مثل ::selcetion رو همینجوری ساپورت می کنن به جز فایرفاکس. دلیل این رو در موزیلا واقعا نمی دونم . احتمالا سیاست خاصی دارن دیگه که ما بی خبریم 😉

itone

سلام ی مجدد 😛
مشورت :
استاد مشکلی نیست از این جلسه به بعد یه جلسه ‌js یه جلسه php و یه جلسه html,css یاد بگیرم ؟؟؟
پیشناهادتون در رابطه با این برنامه ریزی چیه ؟؟؟؟
توی جلسه اول js گفتین پیشنیازش html css هستش که html تموم شد و start سی اس اس رو هم ک امروز زدیم
و توی جلسه php هم ک گفتین اصا پیشنیاز خاصی نداره ققط html , css بلد باشیم بهتر میتونیم خروجی بگیریم
نظرتون چیه یه جلسه وب ببینم و یادبگیرم و یه جلسه جاوااسکریپت و یه جلسم پی اچ پی 😆 😎 😎 😎 😎 😀 😀 😀 😉 😉 😉 😉 😉 😉

لقمان آوند

ترجیحا حداکثر 2 مورد رو دنبال کنید که تمرکزتون به هم نخوره. اول html,css و js رو یاد بگیرید و بعد برید سراغ php

Pouriya

استاد من اون نقطه رو گرفتم
حواسم نبود اون کلاس هست که نقطه گرفته 😐
چون به ul چسبیده بود فکر کردم ی چیز دیگه هس 🙂

Pouriya

سلام
استاد یک سوال
توی بعضی سایت ها قسمت جستجو با ویژگی palceholder نوشتن “جستجو… ” ولی وقتی روش کلیک میکنی این قسمت palceholder ناپدید میشه و اون نوشته میره، با کدوم دستور این کار رو میکنن استاد؟

لقمان آوند

با جاوااسکریپت می تونید اینکار بکنید.

Pouriya

سلام استاد
استاد من تو سایت w3sch دیدم که تو سلکتورهاشون از نقطه هم استفاده میکنن مثلا ul.a این نقطه همون معنی ul>a رو میده؟
مثلا این ادرس
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_list-style-type_ex
ممنون

Pouriya

سلام استاد
در ویدیو درباره کیورد ها گفتید
من فرق کیورد initial و auto رو متوجه نشدم
هر دو اینها به مروگر بستگی داره؟

لقمان آوند

initial مقدار اولیه ای که توسط css در نظر گرفته میشه رو ست میکنه.
auto مقدار رو به صورت اتوماتیک بر اساس محتوای موجود ست می کنه.

mansouri

سلام استاد .
ببخشید یه سوال برام پیش اومد .
مثل margin و border خصوصیت background-color هم به left و right دسترسی داریم ؟
مثلا دکمه های سایت دانلود ها رو اگر دیده باشید که الان خیلی مد شده یه دکمه مستطیل شکله که گوشه سمت چپش یه مستطیل کوچیکه با رنکی متفاوت و وقتی موس میره روش در هاور اون مستطیل کوچیک کل دکمه رو میگیره و رنگ متن برای خوانا تر شدن عوض میشه .
ممنون میشم توضیح بدید که آیا background-color-right: وجود داره ؟ و اگر وجود نداره اون دکمه به چه شکل نوشته شده
با تشکر

لقمان آوند

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

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

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

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

نیاز به لاگین

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