سی اس اس (CSS)
در این سری از آموزش ها سعی نمودیم تا با زبانی ساده مفاهیم اصلی سی اس اس (CSS) را به علاقمندان منتقل نماییم و در اینجا دوره آموزش رایگان سی اس اس (CSS) در سایت عصر فنون به پایان می ...
در سی اس اس برای افزودن سایه به عناصر قرار گرفته روی صفحه می توان از Property های box-shadow و text-shadow به ترتیب برای باکس ها و متون استفاده نمود. برای آنکه به طور عملی با این Property ها آشنا ...
گاهی اوقات نیاز داریم تا عناصر قرار گرفته روی یکدیگر را تا حدودی شفاف سازیم تا چیزی که در زیر قرار گرفته است نیز نمایان گردد. برای این منظور به سادگی با استفاده از Property یی تحت عنوان opacity می ...
Attribute یی تحت عنوان clear با float به کار گرفته می شود. همانطور که پیش از این گفتیم تگ های اچ تی ام ال (HTML) به صورت پیش فرض یکی پس از دیگری قرار می گیرند و زمانیکه یکی از ...
برای آنکه بتوانیم جایگاه عناصر قرار گرفته روی صفحه را به راست یا چپ منتقل کنیم، می بایست از Attribute یی تحت عنوان float استفاده کنیم. برای این Attribute مقادیری همچون right، left، none و inherit می توان استفاده کرد. ...
مقدار fixed به نوعی همانند absolute است با این تفاوت که جایگاه آن همواره در صفحه ثابت خواهد بود. برای روشن شدن این موضوع کدهای زیر را وارد ویرایشگر متن خود می کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>asrefonon</title> ...
در این ماژول قصد داریم تا با Value دیگری تحت عنوان absolute به معنی "مطلق" در طراحی Layout با سی اس اس (CSS) آشنا شویم. absolute بر خلاف relative این امکان را به طراح می دهد تا ترتیب پیش فرض ...
شاید بتوان گفت یکی از دشوار ترین بخش های فراگیری زبان سی اس اس (CSS) نحوه ایجاد یک Layout از طریق آن باشد. در این ماژول قصد داریم تا با چیزی تحت عنوان Normal Flow آشنا شویم. به طور کلی ...
یکی از روش های کدنویسی بهینه، استفاده از رویکردی است که اصطلاحاً Shorthand یا "خلاصه نویسی" نامیده می شود. به عبارت دیگر به جای استفاده از چندین Property مرتبط با background-image, background-color و background-position به سادگی می توان از background ...
یکی از قابلیت های بسیار کاربردی در سی اس اس امکان اختصاص بیش از یک تصویر برای background-image است. در واقع با استفاده از این قابلیت می توان چیزهای جذابی من جمله بنرهایی که از چندین عکس تشکیل شده اند ...
پیش از این در دوره آموزش اچ تی ام ال (HTML) گفتیم که به چه شکل می توان تصاویر را وارد صفحات وب کرد. حال در این آموزش قصد داریم ببینیم که به چه شکل می توان از طریق سی ...
برای آنکه بتوانیم در سی اس اس (CSS) رنگ نوشته های خود را تغییر دهیم، می بایست از دستور color استفاده کنیم. برای روشن شدن این موضوع کدهای اچ تی ام ال (HTML) زیر را وارد ویرایشگر متن می کنیم: ...
در سی اس اس به طور کلی 140 رنگ استاندارد وجود دارد که در ادامه با آن ها آشنا خواهیم شد: در حین استفاده از این رنگ ها به خاطر داشته باشیم که به حروف کوچک و بزرگ نام رنگ ...
به کارگیری از background در طراحی صفحات وب می تواند تاثیر قابل توجهی در ظاهر وب سایت ما داشته باشد. به طور کلی background رنگ پس زمینه Element های اچ تی ام ال (HTML) را مشخص می سازد: همانطور که ...
border-radius این امکان را به طراحان سایت می دهد تا بتوانند گوشه های عناصر قرار گرفته روی صفحه را از حالت زاویه دار خارج کرده به طوری که بسته به مقداری که برای آن در نظر گرفته می شود، حالت ...
معمولاً برای افزودن زیبایی بصری به Element های مختلف اچ تی ام ال (HTML) از Property یی تحت عنوان border استفاده می شود. به طور کلی border به سه صورت border-style، border-color و border-width مورد استفاده قرار می گیرد. این ...
margin نشانگر فاصله مابین Element های مختلف است: همانطور که در تصویر فوق مشخص است، باکس سیاه رنگ نشانگر یک Element است که حاوی عبارت Object است. فاصله این عبارت تا لبه های باکس سیاه رنگ همان padding است که ...
پس از آشنایی با مفهوم Box Model در این ماژول قصد داریم تا با padding به صورت کامل آشنا شویم. به طور کلی منظور از padding فضایی است که مابین محتوای تگ های اچ تی ام ال (HTML) و لبه ...
Box Model یک مفهوم انتزاعی در سی اس اس است، اما عدم آگاهی از آن منجر به سردرگمی در حین نوشتن کدهای سی اس اس خواهد شد. به طور خلاصه، هر عنصر قرار گرفته روی صفحات اچ تی ام ال ...
به طور کلی Gradient به حالتی اطلاق می گردد که بسته به جهتی که انتخاب می کنیم به تدریج یک رنگ به رنگ دیگری تبدیل می شود: همانطور که در تصویر فوق می بینیم جهت یا اصطلاحاً Direction این گرادیانت ...
آشنایی با Property یی تحت عنوان font-variant در سی اس اس (CSS) آشنایی با Property یی تحت عنوان font-transform در سی اس اس (CSS) آشنایی با Property یی تحت عنوان text-align در سی اس اس (CSS) آشنایی با Property یی ...
برای آن که بتوانیم تعداد کدهای خود را به حداقل برسانیم، می توانیم از خلاصه نویسی کدهای مرتبط با font در سی اس اس (CSS) استفاده کنیم. برای این منظور کدهای اچ تی ام ال (HTML) زیر را وارد مرورگر ...
معرفی Property یی تحت عنوان font-family در سی اس اس (CSS) معرفی Property یی تحت عنوان font-size در سی اس اس (CSS) معرفی Property یی تحت عنوان font-weight در سی اس اس (CSS) معرفی Property یی تحت عنوان font-style در ...
همانطور که در آموزش پیش دیدیم، به سادگی از طریق کدهای سی اس اس (CSS) می توان نوع فوتی که می خواهیم صفحات وب سایتمان با آن نمایش داده شود را انتخاب کنیم. چنین کاری یک نقطه ضعف بزرگ دارد ...
همانطور که می دانیم در زبان اچ تی ام ال برای کامنت گذاری از علامت های <-- --!> استفاده می کنیم اما در کدهای سی اس اس بایستی از روش دیگری برای کامنت گذاری استفاده کنیم. پیش از توضیح پیرامون ...
متأسفانه مرورگرهای مختلف صفحات وب را به روش های مختلفی اصطلاحاً Render یا اجرا می کنند و این اختلاف در نحوه اجرا هم از آنجا ناشی می شود که مرورگر های مختلف از Rendering Engine ها یا "موتورهای اجرایی" مختلفی ...
با توجه به قوانین آبشاری سی اس اس (CSS) آخرین کدهای نوشته شده همواره اعمال می شوند. حال زمان هایی برای ما پیش می آید که نیاز داریم این قانون آبشاری کدهای سی اس اس را نقض کنیم. برای این ...
اصطلاح DOM مخفف واژگان Document Object Model است. این اصطلاح به نمود خارجی کلیه تگ های اچ تی ام ال گفته می شود که به همان ترتیبی که نوشته می شوند در مرورگر به نمایش در خواهند آمد. در چنین ...
آشنایی با Descendant Selector ها در سی اس اس (CSS) آشنایی با Child Selector ها در سی اس اس (CSS) آشنایی با Adjacent Selector ها در سی اس اس (CSS) آشنایی با Attribute Selector ها در سی اس اس (CSS) ...
اگر نیاز داشته باشیم تا id یا class یی که ایجاد کرده ایم فقط به برخی تگ های خاص در اچ تی ام ال (HTML) اختصاص یابند، می بایست کد سی اس اس (CSS) خود را به صورت زیر بازنویسی ...
اولین و رایج ترین نوع Selector ها در زبان سی اس اس (CSS) تحت عنوان Element Selector شناخته می شوند. همانطور که در دوره اچ تی ام ال (HTML) توضیح دادیم منظور از Element تگ های اچ تی ام ال ...
همواره به خاطر داشته باشیم که در سی اس اس (CSS) آخرین دستوری که نوشته شود همواره برنده است. به عبارت دیگر آخرین دستورات سی اس اس (CSS) موجب می گردند دستورات پیشین تاثیر خود را از دست بدهند. برای ...
بدون استفاده از تگ <style> در بخش head سند اچ تی ام ال (HTML) خود می توان کدهای سی اس اس (CSS) را به صورت Inline یا به عبارتی "داخل تگی" مورد استفاده قرار داد. برای روشن شدن این موضوع ...
همانطور که پیش از این گفتیم کدهای سی اس اس (CSS) را به صورت Internal یا داخلی هم می توان در صفحات اچ تی ام ال (HTML) مورد استفاده قرار داد. برای این منظور کد زیر را وارد ویرایشگر متن ...
به منظور لینک دادن به فایل های سی اس اس (CSS) که External یا خارجی هستند می بایست به صورت زیر عمل کرد: همانطور که در تصویر فوق ملاحظه می شود فولدری تحت عنوان my site به معنی "سایت من" ...
تاریخچه سی اس اس (CSS) زمانیکه زبان سی اس اس (CSS) بوجود نیامده بود، هر مرورگری دارای قواعد مختص به خود برای نمایش تگ های اچ تی ام ال (HTML) بود. بنابراین می توانستیم این انتظار را داشته باشیم که ...
به عبارت ساده سی اس اس (CSS) زبانی است که با استفاده از آن می توان ظاهر کدهای زبان های Markupیی همچون اچ تی ام ال را تغییر داد. در واقع اچ تی ام ال (HTML) ساختار یک صفحه از ...
