استفاده از دو کلاس با هم شما می توانید به هر تگ html بیش از یک کلاس انتساب دهید به این ترتیب که در خاصیت class چند تا کلاس را به استفاده از space از هم جدا می کنید: کد: <p class="text side">...</p> به این ترتیب، در css کلیه ی rule هایی که به هر یک از کلاس های موجود انتساب داده شده باشد، برای آن تگ html استفاده خواهد شد. توجه کنید که اگر برای یکی از کلاس ها، یک css rule تعریف شده باشد و برای کلاس بعدی rule متضاد آن تعریف شده باشد، کلاسی که در html اول آمده باشد، اولویت بیشتری خواهد داشت.
مقدار پیش‌فرض border در CSS هنگامی که border را برای یک عنصر تعریف می کنید، معمولا مقادیر width و color و style را مشخص می کنید. برای مثال دستور زیر برای شما یک حاشیه‌ی سیاه رنگ یکنواخت به قطر 1 پیکسل ایجاد می کند: کد: border: 3px solid #000; ولی در دستور فوق، تنها گزینه ای که الزامی است، style است. یعنی border: solid اگر فقط بنویسید border: solid برای سایر خصوصیات از مقدار پیش فرض استفاده خواهد شد. اما مقادیر پیش فرض، چه چیزی هستند؟ مقدار پیش فرض برای عرض حاشیه (border-width) برابر medium است که تقریبا معادل 3 الی 4 پیکسل می باشد مقدار پیش فرض برای رنگ حاشیه (border-color) برابر رنگ متن درون حاشیه در نظر گرفته می شود. در صورتی که مقادیر پیش فرض، برای شما مناسب است، می توانید مقدار آن ها را مشخص نکنید تا از مقدار پیش فرض استفاده شود.
کد CSS مخصوص پرینت اکثر صفحات وب به گونه ای طراحی می شوند که برای نمایش در مانیتور کامپیوتر مناسب باشد. اما اگر تصویر صفحه ی وب را با استفاده از پرینتر بر روی کاغذ چاپ کنیم، زیاد جالب نمی شود. معمولا بهتر است که در هنگام چاپ یک صفحه ی وب، فقط مطالب مهم آن چاپ شود و همچنین نیازی به جلوه های گرافیکی و رنگ زمینه و ... نیست. عرض صفحه باید با عرض کاغذ سازگار باشد و از فضای کاغذ به طور بهینه استفاده شود و ... برای رسیدن به این هدف، اکثرا وب سایت ها، صفحاتی را به طور اختصاصی برای پرینت طراحی می کنندو به این معنی که هر صفحه یا مقاله را در یک نسخه ی جداگانه برای پرینت هم تهیه می کنند. اما روش دیگری هم وجود دارد و آن این است که کدهای css متفاوتی را برای پرینت بنویسیم برای این منظور، باید در تگ head یک فایل css جدید را برای print مشخص کنیم و باید خاصیت media را در تگ link با مقدار "print" مشخص کنیم کد: <link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" /> خاصیت media مشخص می کند که فایل css فوق برای چه ابزاری قابل استفاده است. screen به معنی صفحه نمایش کامپیوتر است و print به معنی پرینتر است. با استفاده از دستور فوق، زمانی که کاربر می خواهد صفحه ی وب را پرینت بگیرد، به طور خودکار از فایل css دوم استفاده خواهد شد. اما در داخل فایل printstyle.css چه کدی بنویسیم؟ کافی است کدهایی بنویسیم که صفحه برای کاغذ بهینه شود. برای این منطور معمولا باید نوارهای کناری سایت را با استفاده از دستور display:none مخفی کنیم زیرا معمولا شامل اطلاعات مفیدی برای چاپ نمی باشند. همچنین باید رنگ زمینه ی عناصر را حذف کنیم و کلیه ی عناصر و تصاویر گرافیکی که جنبه ی تزئینی دارند را حذف کنیم و همچنین می توانیم فونت مناسب چاپ استفاده کنیم و برای سایز فونت ها هم از واحد هایی مانند pt استفاده کنیم...
تکنیک جایگذاری تصویر همواره توصیه می شود که برای نمایش متن، از کد عادی html استفاده کنید و از تصویر برای نمایش متن پرهیز نمایید. این باعث می شود که سرعت بارگذاری صفحه ی وب بالا برود و همچنین صفحه ی وب بیشتر قابل دسترس باشد (به عنوان مثال برای افراد نا بینا با استفاده از مرورگر های صفحه خوان) با این حال، گاهی اوقات ممکن است بخواهید به جای متن از تصویر استفاده کنید. به عنوان مثال فرض کنید که در بالای تمامی صفحات سایتتان، عبارت "خرید آنلاین" وجود دارد و شما می خواهید که این عبارت را با یک فونت خیلی خاص نمایش دهید که هیچ مرورگری از آن پشتیبانی نمی کند. در این صورت، احتمالا تنها گزینه ای که وجود دارد این است که به جای متن فوق، یک تصویر قرار دهید. یک روش بدیهی این خواهد بود که به صورت زیر عمل کنید: کد: <h1><img src="buy-image.gif" alt="Buy online" /></h1> اما شما می خواهید که در موتور های جستجو، برای عبارت فوق، صفحه ی شما در لیست ظاهر شود. موتور های جستجو نیز به متن درون alt به اندازه ی متن درون صفحات وب اهمیت نمی دهند. و بهتر است که عبارت به صورت زیر باشد: کد: <h1>Buy online</h1> برای حل این مشکل می توان از تکنیک جایگذاری تصویر با متن استفاده کرد: متن را با کد عادی html می نویسیم و سپس به کمک css تصویر را با متن جایگزین می کنیم کد: h1 { background: url(buy-image.gif) no-repeat; height: 100px; text-indent: -2000px; } اطمینان حاصل کنید که مقدار ارتفاع تصویر را به درستی مشخص کنید. با روش فوق، متن 2000 پیکسل به سمت صفحه ی نمایش خواهد رفت و از صفحه خارج خواهد شد و دیگر نمایش داده نمی شود و به جای آن تصویر نمایش داده می شود. توجه کنید که این کار سبب می شود که کاربرانی که نمایش تصویر را در مرورگر خود غیر فعال کرده اند، قادر به مشاهده ی متن نخواهند بود.
آموزش اسلاید بار در سایت! در این آموزش یاد میگیریم که چطور یک سایدبار بسازیم که با اسکرول صفحه، از یک جایی به بعد، ثابت بمونه در حالی که صفحه داره اسکرول میشه. کد HTML برای این کار کد زیر رو به عنوان نمونه در نظر بگیرید: HTML: <section id="parent"> <section id="main-content"> Main Content </section> <section id="sidebar"> Sidebar </section> </section> در کد html بالا یک المنت parent و دو المنت sidebar و main-content داریم. میخواهیم وقتی صفحه اسکرول میشه، sidebar ثابت بمونه. نکته که هست اینه که سایدبار در داخل parent ثابت خواهد ماند. به نحوه ساختار کد html دقت کنید. کد CSS کد css زیر رو برای کد html بالا در نظر بگیرید: کد: *{ margin:0; padding:0; box-sizing:border-box; } body{ height:1000px; } #parent{ border:2px solid gray; padding:10px; overflow:hidden; height:600px; } #main-content{ border:2px solid blue; float:right; width:80%; height:400px; } #sidebar{ border:2px solid green; float:left; width:20%; height:200px; } نکته ای که در کد css بالا وجود دارد اینکه در المنت های sidebar و main-content از float استفاده شده. تعریف تعدادی از سطر ها صرفا برای دادن استایل بوده و احتمالا در پروژه واقعی شما تغییر خواهد کرد. کد JavaScript خب، حالا رسیدیم به قسمت جاوا اسکریپت آموزش، اول از همه باید فریم ورک jQuery رو لود کنید: کد: <script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script> بعد از لود jQuery پلاگین Sticky-Kit رو لود کنید: کد: <script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.min.js"></script> برای اینکه از این پلاگین استفاده کنیم باید مشخص کنیم که میخوایم کدوم المنت در المنت مادر خودش ثابت باشه. برای اینکار این کد رو بعد از لود پلاگین بنویسید: کد: ( "Sidebare" )$ . Stick_in_parent ; توجه کنید که #sidebar آی دی المنت سایدبار شما هست که باید در کل صفحه منحصر به فرد باشه. اگر میخواید بیشتر از یک المنت در المنت مادر خودش ثابت باشه، میتونید این کد رو برای اون المنت هم تکرار کنید و یا از اسم کلاس المنت ها استفاده کنید.
