زبان نشانهگذاری CSS در حقیقت زبانی برای توصیف نحوهی نمایش صفحات وبسایت است. اگر یک وبسایت را مانند یک ساختمان در نظر بگیریم HTML اسکلتبندی و ساختار کلی سایت محسوب شده و CSS نمای ساختمان، رنگها، کاغذ دیواریها و تمام بخشهای مربوط به دکوراسیون و زیباسازی ساختمان را شامل میشود. زبانهایی مانند ASP و PHP
را نیز میتوان مانند قفلها، گاو صندوقها، سیستم اطفاء حریق و تمامی امور مربوط به هوشمند سازی ساختمان تشبیه کرد.
سی اس اس ها از نظر استفاده و پیاده سازی می توانند به سه روش نوشته شوند: CSS های داخلی، CSS های خارجی و CSS های درونی. هرچند مبانی آن ها برای نوشتن تقریبا ثابت و یکسان است اما آن ها به گونه های متفاوتی می توانند نوشته شوند و هرکدام مزایای و معایب مخصوص به خود را دارند.
CSS های داخلی، استایل هایی هستند که داخل خود صفحات وب (و نه در فایلی جداگانه) در میان کدهای HTML نوشته می شوند.
استفاده از استایل ها داخل خود صفحات وب، باعث خواهد شد که صفحات اینترنتی نیازی به هیچ فایل جانبی برای نمایش صحیح، نداشته باشند.
استایل هایی هستند که در فایل جداگانه ذخیره و نگهداری می شوند. این روش می تواند بهترین، بهینه ترین و مناسب ترین روش برای نوشتن استایل های صفحات وب باشد. فایل ها با پسوند css ذخیره سازی می شوند و در صفحات وب، بارگذاری خواهند. استفاده از این روش باعث بهبود زمان بارگذاری صفحات اینترنتی خواهد شد.
این نوع از CSS ها داخل تگ های HTML نوشته می شوند و تنها مختص به همان تگ هستند. هر تگ می تواند به صورت انحصاری یا توسط سی اس اس های درونی، آرایش شود. در نتیجه استفاده از آن ها برای کل سایت یا کل یک صفحه وب، روشی با سرعت پایین است به طوریکه نوشتن هر استایل جداگانه برای هر تگ، زمان زیادی را خواهد برد.
اما از آن ها می توان در کنار دو نوع دیگر از سی اس اس و به تعداد محدود به خوبی استفاده کرد. استفاده از آن ها برای زمان هایی که طراح وب می خواهد به سرعت خروجی تغییرات خود را مشاهده کند و یا در مواقعی که طراح به فایل اصلی سی اس اس های خارجی دسترسی ندارد، کمک بزرگی خواهد بود.
هدف از تولید Css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.
برخی از کاربردهای آن عبارتند از:
در ادامه با ساختار کدهای CSS آشنا می شوید.
ساختار یک کد از دو قسمت تشکیل شده است:
در صورتی که بخواهید به بخشی از html استایل خاصی دهید باید یک تگ را انتخاب کنید تا بتوانید کدهای Css را روی آن اعمال کنید. عنصر انتخاب شده میتواند یک پاراگراف، یک تصویر و یا یک تیتر باشد. انتخاب کنندههای سی اس اس به چند دسته تقسیم میشود:
انتخاب کننده عنصر:
با استفاده از این انتخاب کننده میتوانید تگ خاصی را انتخاب و تغییرات استایل را بر روی آن اعمال کنید به طور مثال میتوان تگ <p> در یک صفحه وب را انتخاب کرد و رنگ آن را به قرمز تغییر داد.
انتخاب کننده id :
اگر بخواهید استایلهای CSS بر روی گروهی از تگها تعریف شود، باید از انتخاب کننده ID استفاده کنید. برای این کار باید در کدهای HTML برای تگی که قصد تغییر استایل آن را دارید یک ID تعریف کنید، سپس در بخش Css آیدی مورد نظر را انتخاب و تغیرات را بر روی آن اعمال میکنید.
دستورات فقط بر روی یک ID خاص که با با علامت # در ابتدای آن مشخص میشود اعمال میگردد.
انتخاب کننده Class :
برای این کار باید تمام تگهایی را که قصد دارید ظاهر یکسانی داشته باشند را داخل یک کلاس تعریف کنید و همانند ID به بخش CSS رفته و استایل مد نظرتان را روی آن کلاس تعریف کنید. مد نظر داشته باشید صفت کلاس با “ . “ در ابتدای آن قابل تشخیص میباشد.