دوره مجازی طراحی وب (جلسه 11): ویژگی های CSS - قسمت اول



visibility  
mode_comment   ۲۷

در جلسه قبل انواع سلکتورهایی که در زبان 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 و کاربردهای آن
  • ذکر نکات مهم در مورد نحوه طراحی و انتخاب درست پس زمینه
  •  بحث تقارن پس زمینه و یکپارچه سازی پس زمینه نهایی با تکرار تصویر کوچک
info توجه

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

ثبت نام در آموزش تصویری html5 و CSS3

comment دیدگاه کاربران
Mahdi replyپاسخ

ممنون…

Mahdi replyپاسخ

استاد من در طراحی سایتم دچار یه مشکل شدم کی وقت دارین یه نگاهی به سایتم کنین.در حال حاظر روی لوکال هاستم هستش.هر موقع وقت دارین بگین تا با برنامه تیم ویور راهنماییم کنین.

لقمان آوند

سلام
امروز پاسخ میدم ایمیلتون رو

nader70 replyپاسخ

استاد خسته نباشید
میشه تقریبا تاریخ جلسات آینده رو مشخص کنید؟؟؟؟

لقمان آوند

سلام
فرقی نکرده . هر هفته دو جلسه منتشر میشه . که اولی شنبه/یک شنبه و دومی 4شنبه/5شنبه منتشر میشه .

Mehdi Zeynali replyپاسخ

سلام و درود
لطفا در مورد zoom:1 هم توضیح بدید (هروقت زمانش شد)

یه سری خصوصیتها هستن فقط مال مرورگر خاص هستن تو یکی از آموزش های سایت شما هم دیدم اما الان نمیتونم مثال بیارم(یادم نیست کدوم صفحه بود) . اولش webkit بود اما تو رفرنس سایت w3school نبوود یعنی فقط مال کروم بود(منظورم اینها نیست مثلا webkit-border-radius:5px)

اگه منظور من رو متوجه شدید در مورد این هم توضیح بدید

سپاس فراوان.

لقمان آوند

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

امین replyپاسخ

سلام استاد
1- ببخشید در این جلسه گفتین که یک فایل جاوااسکریپتی وجود داره که اگه کاربر از مرورگری که css3 رو ساپورت نکنه استفاده کنه اون فایل جاوا اسکریپته خودش اتومات بر اساس اون border-radius که نوشتیم میاد moz- webkit- op-ms- رو واسه مرورگر ایجاد میکنه ولی فایل جاوا اسکریپت رو ندادین اگه هستش بدین لطفا
2- اگر یه قالب html شامل چند تا فایل .js و .css باشه که در هدر لینک کنیم آیا میشه محتوای چند تا فایل .js رو درون یک فایل .js و محتوای چند تا فایل .css رو درون یک فایل .css بزاریم و فقط همون یک فایل .js و .css که شامل محتوای اون چند تا فایل بوده رو فراخونی کنیم ؟و آیا مشکلی در نمایش قالب پیش نمیاد؟
ممنون

لقمان آوند

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

بهادر replyپاسخ

سلام استاد! عیدتون مبارک
سوال : چطور میشه یک دایو رو در مرکز قرار داد دستور
background-color: darkgreen;
background-position: center;
با هم که استفاده میشن خطا میده
من می خواهم با تغییر رزولوشن موقعیت دایوهایی که درون هم هستند نسبت به هم تغییر نکه و همون فاصله ها حفظ شود
با تشکر!

کیوان علی محمدی

سلام می تونی از این کد استفاده کنید.

mansouri replyپاسخ

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

لقمان آوند

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

Pouriya replyپاسخ

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

لقمان آوند

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

Pouriya replyپاسخ

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

Pouriya replyپاسخ

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

لقمان آوند

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

Pouriya replyپاسخ

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

itone replyپاسخ

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

لقمان آوند

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

وحید صف آرا replyپاسخ

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

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

لقمان آوند

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

علی سلطانی replyپاسخ

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

Amir Ahangar Azizi replyپاسخ

سلام

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

Amir Ahangar Azizi

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

ارسال نظرات

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