Css: همانطور که استایل دهی قانون خود را دارد، سلکتورها نیز قانون اولویت بندی دارند. کلمه CSS مخفف Cascading Style Sheets به معنای صفحات استایل آبشاری میباشد. حال که نحوه نوشتن استایل را یاد گرفتیم میتوانیم بگوییم که اگر دو استایل مشترک در یک صفحه وجود داشته باشد، اولویت با آن استایلی خواهد بود که در پایین ترین سطر از کدها نوشته باشد. زیرا استایل ها به ترتیب از بالا به پایین اجرا و بر روی عنصر ها اعمال میشوند.
در کنار تمام مزایایی که css به کاربران خود ارائه میدهد، یکسری محدودیت نیز وجود دارد که شناخت آنها به تصمیمگیری بهتر شما کمک خواهد کرد. به بیانی بهتر، زمانی که با این موارد آشنا شوید، در حین انجام پروژهها قادر خواهید بود بهترین تصمیمها را برای اجرایی کردن ایدههای خود بگیرید.
سی اس اس با ایجاد فایل css. همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.
نحوه اتصال فایل css به فایلhtml به سه روش زیر انجام میشود:
اولین نسخه از سی اس اس که توسط موسسه استاندارد سازی W3C نیز مورد تایید قرار گرفت، در دسامبر سال ۱۹۹۶ منتشر شد. این نسخه از سی اس اس از قابلیت های زیر پشتیبانی می کرد :
چند راهکار کلیدی برای ریسپانسیو کردن وبسایت خود با سی اس اس را مطرح میکنیم:
با استفاده از Media Queries، میتوانید استایلهای مختلف را برای اندازههای مختلف صفحه نمایش تعریف کنید. این به شما امکان میدهد تا بر اساس ویژگیهای دستگاه مانند عرض صفحه، تنظیمات استایلها را تغییر دهید.
Flexbox و Grid Layout دو تکنیک قدرتمند هستند که به طراحان اجازه میدهند تا طرحهای پویا و ریسپانسیو را به راحتی ایجاد کنند. با استفاده از این تکنیکها، میتوانید عناصر را به صورت انعطافپذیر در صفحه نمایش قرار دهید.
از تصاویر و منابعی استفاده کنید که به طور اتوماتیک با اندازه صفحه نمایش تغییر کنند.
حتماً وبسایت را بر روی دستگاههای مختلف و با مرورگرهای مختلف تست کنید و از طریق ابزارهایی مانند DevTools در مرورگرها، مشکلات را شناسایی و رفع کنید.
برای اندازهدهی عناصر و استایلها، از واحدهای نسبی مانند درصد استفاده کنید. این کمک میکند تا استایلها و طرحها به درستی با اندازه صفحه نمایش تطابق پیدا کنند.
با اعمال این تکنیکها و استفاده از اصول ریسپانسیو طراحی، میتوانید وبسایت خود را به یک تجربه کاربری ریسپانسیو و مطلوب تبدیل کنید.
ساختار یک کد از دو قسمت تشکیل شده است:
در صورتی که بخواهید به بخشی از html استایل خاصی دهید باید یک تگ را انتخاب کنید تا بتوانید کدهای Css را روی آن اعمال کنید. عنصر انتخاب شده میتواند یک پاراگراف، یک تصویر و یا یک تیتر باشد. انتخاب کنندههای سی اس اس به چند دسته تقسیم میشود:
انتخاب کننده عنصر:
با استفاده از این انتخاب کننده میتوانید تگ خاصی را انتخاب و تغییرات استایل را بر روی آن اعمال کنید به طور مثال میتوان تگ <p> در یک صفحه وب را انتخاب کرد و رنگ آن را به قرمز تغییر داد.
انتخاب کننده id :
اگر بخواهید استایلهای CSS بر روی گروهی از تگها تعریف شود، باید از انتخاب کننده ID استفاده کنید. برای این کار باید در کدهای HTML برای تگی که قصد تغییر استایل آن را دارید یک ID تعریف کنید، سپس در بخش Css آیدی مورد نظر را انتخاب و تغیرات را بر روی آن اعمال میکنید.
دستورات فقط بر روی یک ID خاص که با با علامت # در ابتدای آن مشخص میشود اعمال میگردد.
انتخاب کننده Class :
برای این کار باید تمام تگهایی را که قصد دارید ظاهر یکسانی داشته باشند را داخل یک کلاس تعریف کنید و همانند ID به بخش CSS رفته و استایل مد نظرتان را روی آن کلاس تعریف کنید. مد نظر داشته باشید صفت کلاس با “ . “ در ابتدای آن قابل تشخیص میباشد.