آموزش css از سیر تا پیاز

[Edwin]

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

ممنون

کروم ، فایرفاکس ، در برخی موارد سافاری :دی

[amoozesh-sara.ir]

کروم ، فایرفاکس ، در برخی موارد سافاری :دی

اشتباه نکنید
هسته هر دو این ها webkit هست
پس هرچی کروم ساپورت کنه سافاری هم میکنه
و الان چند وقتی هست که اپرا از وب کیت داره استفاده میکنه
پس همه این مرورگر ها عملکرد یکسان دارن
دستوراتی که من میگم روی تمامی مرورگر های فعلی ساپورت میشه و اگر پشتیبانی نشه حتما ذکر میشه

- - - Updated - - -

جلسه هفتم :
به استایل دهی متون در css می پردازیم و با پراپرتی های
text-align, text-decoration, text-indent, direction و word-spacing
و انواع مقادیر وکاربرد های آن اشنا می شویم.




دانلود

- - - Updated - - -

جلسه هشتم :
به ادامه استایل دهی متون در css می پردازیم و با پراپرتی های
white-space, vertical-align, letter-spacing, text-transform و line-height
و انواع مقادیر وکاربرد های آن اشنا می شوید


دانلود

- - - Updated - - -

جلسه نهم :
به typography و استایل دهی متون در ۳ css می پردازیم و با پراپرتی های text-shadow و value آن اشنا می شویم و به توضیح آن می پردازیم و در پایان با مثال های متعدد اهمیت این پراپرتی جدید و قدرتمند را بررسی می کنیم.


دانلود

- - - Updated - - -

جلسه دهم :
به ادامه typography و استایل دهی متون در ۳ css می پردازیم و با پراپرتی text-stroke و value های آن برای مرورگر کروم اشنا می شویم و همچنین به پیاده سازی این خاصیت در مرورگر های دیگر از طریق دستور text-shadow می پردازیم.


دانلود

- - - Updated - - -

جلسه یازدهم :
به ادامه typography و استایل دهی متون در ۳ css می پردازیم و با پراپرتی Box-Reflect و Value های آن برای مرورگر کروم اشنا می شویم و با mask box image و حالت های پیاده سازی آن آشنا می شویم و به gradient می پردازیم و به کاربرد آن در Reflection اشاره می کنیم و در نهایت حالت های مختلف را پس از پیاده سازی روی عکس،روی متن پیاده می کنیم.


دانلود

- - - Updated - - -

جلسه دوازدهم :
به اخرین جلسه typography و استایل دهی متون در ۳ css می پردازیم و در ابتدا به طور مفصل در مورد خاصیت overflow صحبت می کنیم و بعد به خاصیت های text-overflow و word-wrap در css3 می پردازیم و تفاوت های آن ها را بررسی می کنیم.




دانلود

- - - Updated - - -

جلسه سیزدهم :
با پراپرتی های color, image, repeat, attachment و position در background اشنا می شویم و به value های آن می پردازیم و در نهایت نحوه shorthand یا مختصر نویسی آن را شرح می دهیم.




دانلود

- - - Updated - - -

جلسه چهاردهم :
به طور مفصل و با مثال های متعدد به پراپرتی display و value های آن می پردازیم و در مورد تفاوت value های آن صحبت می کنیم و با استفاده از این پراپرتی یک لیست را به وجود می آوریم و یک عنصر را مخفی می کنیم.


دانلود

- - - Updated - - -

جلسه پانزدهم :
به نحوه ی تنظیم عرض و ارتفاع عناصر را با استفاه از پراپرتی های
max-width, height, min-height, max-height ,min-width,width
می پردازیم و نکات مهمی را درباره ی استفاده از این پراپرتی ها مطرح می کنیم و به
صورت عملی تفاوت inline و inline-block را بیان و به کاربرد max-width می پردازیم.




دانلود

- - - Updated - - -

جلسه شانزدهم :
ابتدا به واحد ها در css می پردازیم و واحد های نسبی و مطلق را معرفی و سپس مهم ترین آن ها را بیان می کنیم و سپس به
سراغ فونت ها میرویم و در مورد پراپرتی های
font-family, font-style, font-weight, font-size, lineheight
صحبت می کنیم و با value های آن اشنا می شویم و سپس نکات مهمی را در این رابطه مطرح می کنیم.


دانلود

- - - Updated - - -

جلسه هفدهم :
به دو نکته باقی مانده از جلسه قبل می پردازیم و درمورد پراپرتی font صحبت می کنیم و سپس font face را اغاز می کنیم و در مورد فرمت های مختلف فونت و نحوه پشتیبانی از چند فرمت صحبت می کنیم و در نهایت به font services می پردازیم.




دانلود

- - - Updated - - -

جلسه هجدهم :
در مورد list style و نحوه استایل دهی لیست ها صحبت می کنیم و به پراپرتی های list-style-type, list-style-image, list-style-position و value های آن می پردازیم و در نهایت حالت shorthand آن را بیان می کنیم.


دانلود

- - - Updated - - -

جلسه نوزدهم :
باز به مبحث pseude class یا کلاس های کاذب می پردازیم و در مورد کلاس های hover, link, active, visited و focus صحبت می کنیم و به شرح آن ها می پردازیم.


دانلود

- - - Updated - - -

جلسه بیستم :
وارد مبحث box model می شویم و پراپرتی padding را معرفی کرده و به حالت short hand آن پرداخته و انواع مقدار دهی آن را بررسی می کنیم.


دانلود

- - - Updated - - -

جلسه بیست و یکم :
با توجه به مطالبی که آموختید یک منو اکاردئونی کاملا جذاب بدون استفاده از حتی یک خط کد jquery را طراحی می کنیم.


دانلود

- - - Updated - - -

جلسه بیست و دوم :
به ادامه مبحث box model می شویم و پراپرتی border را معرفی کرده و به حالت shorthand آن پرداخته و انواع مقدار دهی آن را بررسی می کنیم.


دانلود

- - - Updated - - -

جلسه بیست و سوم :
به ادامه مبحث box model می پردازیم و پراپرتی margin را معرفی کرده و به حالت shorthand آن پرداخته و انواع مقدار دهی آن را بررسی می کنیم.


دانلود

- - - Updated - - -

جلسه بیست و چهارم :
به نحوه محاسبه ی box model می پردازیم و سپس وسط چین کردن متون را در راستای افقی و عمودی بررسی می کنیم..


دانلود

- - - Updated - - -

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


دانلود

- - - Updated - - -

جلسه بیست و ششم :
با توجه به مطالبی که آموختید یک دکمه را فقط با استفاده از css برای حالت های عادی و هاور و اکتیو طراحی می کنیم و همچنین با پراپرتی border radius که در نسخه css3 ارائه شده آشنا می شوی


دانلود

- - - Updated - - -

جلسه بیست و هفتم :
با توجه به مطالبی که آموختید یک منو عمودی را با استفاده از css برای حالت های عادی و هاور طراحی می کنیم.


دانلود

- - - Updated - - -

جلسه بیست و هشتم :
به پراپرتی cursor و به نحوه تغییر کرسر در css می پردازیم و سپس در مورد استایل های پیش فرض مرورگرها صحبت می کنیم و نحوه ریست کردن آن ها در reset.css را توضیح می دهیم و سلکتور * را مطرح می کنیم.


دانلود

- - - Updated - - -

جلسه بیست و نهم :
به پراپرتی visibility می پردازیم و تمام value های آن را بررسی می کنیم و سپس تفاوت visibility : hidden و display : none را بیان می کنیم.


دانلود

- - - Updated - - -

جلسه سی ام :
به نحوه استفاده از دستور import و نکات مثبت و منفی آن می پردازیم و سپس دستور charset را دز css بیان می کنیم.


دانلود

- - - Updated - - -

جلسه سی و یکم :
یک صفحه تماس با ما را به طور کامل با توجه به آنچه که آموختیم پیاده سازی می کنیم.


دانلود

- - - Updated - - -

جلسه سی و دوم :
به پراپرتی float و مفهوم شناور شدن می پردازیم و کاربرد آن را مطرح می کنیم و در مورد تفاوت آن با display صحبت می کنیم و مشکلات float را بررسی و حل می کنیم و در نهایت به پراپرتی opacity می پردازیم.


دانلود

- - - Updated - - -

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


دانلود

- - - Updated - - -

در جلسه سی و چهارم :
یک منو افقی (nav menu) زیبا با استفاده از پراپرتی های جدیدی که یاد گرفتیم ) مانند float و (overflow برای تمرین بیشتر طراحی می کنیم.


دانلود