محتوای خود را با شمارنده های CSS سازماندهی کنید
آموزش طراحی سایت
![[تصویر: %D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8...%D8%AF.jpg]](http://magbot.ir//%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8%AE%D9%88%D8%AF-%D8%B1%D8%A7-%D8%A8%D8%A7-%D8%B4%D9%85%D8%A7%D8%B1%D9%86%D8%AF%D9%87-%D9%87%D8%A7%DB%8C-CSS-%D8%B3%D8%A7%D8%B2%D9%85%D8%A7%D9%86%D8%AF%D9%87%DB%8C-%DA%A9%D9%86%DB%8C%D8%AF/%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8%AE%D9%88%D8%AF-%D8%B1%D8%A7-%D8%A8%D8%A7-%D8%B4%D9%85%D8%A7%D8%B1%D9%86%D8%AF%D9%87-%D9%87%D8%A7%DB%8C-CSS-%D8%B3%D8%A7%D8%B2%D9%85%D8%A7%D9%86%D8%AF%D9%87%DB%8C-%DA%A9%D9%86%DB%8C%D8%AF.jpg)
محتوای مبتنی بر توضیحات گام به گام در وب شایع است. آموزش، خرید، پرسش های متداول، دستور العمل ها. می دانید، چند مرحله ای کردن محتوا و مراحل برای گرفتن توجه کاربر خوب است، بسیاری از نویسندگان از این استفاده کنید.
اما، در مورد HTML چگونه باید آن را بنویسیم؟ بیشترین تعداد مراحل متن در عنوان ها یا محتوای معمولی چقدر است.
خوب، اجازه بدهید به شما یک راز بگویم:
چند وقت پیش من در مورد این موضوع تعجب کردم، آیا کار در CSS بیشتر نیست؟ در واقع هست. ما باید محتوای HTML و CSS را نگه داریم، و از آنجایی که ممکن است ما بخواهیم برای همه عناوین سفارشی سازی داشته باشیم، کار پیچیده می شود. اما، چطور می توانیم این کار را انجام دهیم؟ یک کلاس برای هر مورد؟ این کار بسیار وحشتناک است!
CSS counter برای صرفه جویی در این قضیه کاربرد دارد. این ویژگی بسیار ناشناخته است اما به ما اجازه می دهد یک شمارش ساده از طریق CSS انجام دهیم و با هر شمارش ویژگی متمایزی برای هر دو المان مجاور ایچاد کند در ساده ارین حالت مثلا المان های زوج سفید و المان هایی با شماره فرد سیاه باشند. بهتر است دموی زیر را ببینید: D
نسخه ی نمایشی را مشاهده کنید . و یا فایل کد را دانلود کنید
مقالات مرتبط
![[تصویر: %DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8...%D8%B5.jpg]](http://magbot.ir//%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%B3%D8%B1%DB%8C%D8%B9-%D9%81%D8%B1%D9%85-%D9%87%D8%A7-%D8%AF%D8%B1-CSS-%D8%AE%D8%A7%D9%84%D8%B5/%DA%86%DA%AF%D9%88%D9%86%DA%AF%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%B3%D8%B1%DB%8C%D8%B9-%D9%81%D8%B1%D9%85-%D9%87%D8%A7-%D8%AF%D8%B1-CSS-%D8%AE%D8%A7%D9%84%D8%B5.jpg)
چگونگی طراحی فرم ها و اشکال در CSS
![[تصویر: %D8%AF%D8%B1-10-%D8%AF%D9%82%DB%8C%D9%82...%D8%AF.jpg]](http://magbot.ir//%D8%AF%D8%B1-10-%D8%AF%D9%82%DB%8C%D9%82%D9%87-%D8%A8%D8%A7-Adobe-Photoshop-%DB%8C%DA%A9-%D8%B7%D8%B1%D8%AD-%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C-%D8%B2%DB%8C%D8%A8%D8%A7-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%DA%A9%D9%86%DB%8C%D8%AF/%D8%AF%D8%B1-10-%D8%AF%D9%82%DB%8C%D9%82%D9%87-%D8%A8%D8%A7-Adobe-Photoshop-%DB%8C%DA%A9-%D8%B7%D8%B1%D8%AD-%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C-%D8%B2%DB%8C%D8%A8%D8%A7-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%DA%A9%D9%86%DB%8C%D8%AF.jpg)
در 10 دقیقه با فتوشاپ یک طرح تایپوگرافی زیبا ایجاد کنید
![[تصویر: %D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%A8%D8...ion.js.jpg]](http://magbot.ir//%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%A8%D8%A7%D8%B2%D8%AA%D8%A7%D8%A8-%D8%A7%D8%AB%D8%B1-%D9%82%D8%A7%D8%A8%D9%84-%D8%AA%D9%88%D8%AC%D9%87%DB%8C-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-CSS-%D9%88-Reflection.js/%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%A8%D8%A7%D8%B2%D8%AA%D8%A7%D8%A8-%D8%A7%D8%AB%D8%B1-%D9%82%D8%A7%D8%A8%D9%84-%D8%AA%D9%88%D8%AC%D9%87%DB%8C-%D8%A8%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-CSS-%D9%88-Reflection.js.jpg)
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js
آموزش طراحی سایت
محتوای مبتنی بر توضیحات گام به گام در وب شایع است. آموزش، خرید، پرسش های متداول، دستور العمل ها. می دانید، چند مرحله ای کردن محتوا و مراحل برای گرفتن توجه کاربر خوب است، بسیاری از نویسندگان از این استفاده کنید.
اما، در مورد HTML چگونه باید آن را بنویسیم؟ بیشترین تعداد مراحل متن در عنوان ها یا محتوای معمولی چقدر است.
خوب، اجازه بدهید به شما یک راز بگویم:
چند وقت پیش من در مورد این موضوع تعجب کردم، آیا کار در CSS بیشتر نیست؟ در واقع هست. ما باید محتوای HTML و CSS را نگه داریم، و از آنجایی که ممکن است ما بخواهیم برای همه عناوین سفارشی سازی داشته باشیم، کار پیچیده می شود. اما، چطور می توانیم این کار را انجام دهیم؟ یک کلاس برای هر مورد؟ این کار بسیار وحشتناک است!
CSS counter برای صرفه جویی در این قضیه کاربرد دارد. این ویژگی بسیار ناشناخته است اما به ما اجازه می دهد یک شمارش ساده از طریق CSS انجام دهیم و با هر شمارش ویژگی متمایزی برای هر دو المان مجاور ایچاد کند در ساده ارین حالت مثلا المان های زوج سفید و المان هایی با شماره فرد سیاه باشند. بهتر است دموی زیر را ببینید: D
نسخه ی نمایشی را مشاهده کنید . و یا فایل کد را دانلود کنید
چگونگی طراحی فرم ها و اشکال در CSS
در 10 دقیقه با فتوشاپ یک طرح تایپوگرافی زیبا ایجاد کنید
ایجاد بازتاب آینه ای با استفاده از CSS و Reflection.js
