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