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