زبان CSS

زبان CSS در حقیقت یک  فناوری جدید و یک زبان استایل نویسی تحت وب است که برای ظاهر و دیزاین سایت مورد استفاده قرار می گیرد.  با استفاده از CSS میتوانید ساختار سایت خودتان را زیبا کنید، به آن رنگ اضافه کنید، اندازه‌ی آن‌ ها را مشخص کنید، روش نمایش آن‌ ها را تنظیم کنید و...این قابلیت به کارشناسان طراحی سایت کمک می کند تا صفحات وب سایت را با کد هایی سبک تر، طراحی و بارگذاری کنند. 

زبان CSS

عبارت CSS که در همه قسمت های طراحی سایت کاربرد دارد، مختصر شده از عبارت سه کلمه ‌ای Cascading Style Sheets به معنی برگه ‌های سبک آبشار یا برگه ‌های آبشاری است. آبشاری بودن برگه‌ های CSS به این معنی است که استایل، کلاس یا هر چیزی که به یک برگه CSS داده شود، روی عناصر فرزند این برگه‌ ها هم تاثیر گذار خواهد بود. به عنوان مثال اگر شما رنگ متن را در یک برگه CSS قرمز تعیین کنید، این به معنای قرمز بودن تمام هدینگ و پاراگراف‌ های متنی است که قرار است در این برگه CSS نوشته شود.

در واقع CSS  یک زبان برنامه نویسی ظاهری است که برای ارائه زیباتر و قابل فهم تر یک سند  نوشته شده به زبان نشانه گذاری به کار برده میشود.

CSS در کنار HTML قرار میگیرد تا هسته ایجاد یک وب سایت را به وجود بیاورند. برای طراح سایت، استفاده از  CSS بهترین و سریع‌ ترین راه شکل و شمایل دادن به یک وب سایت است.

برگه ‌های CSS در واقع مسئولیت ایجاد ظاهر سایت را به عهده دارند و رنگ، اندازه و محل قرارگیری متن و دیگر تگ ‌های HTML را تعیین میکنند.

زبان CSS چیست؟

CSS مخفف Cascading Style Sheet است. زبان CSS یک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. CSS  یکی از رایج ترین و محبوب ترین ابزار های طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML می باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML، SVG  و XUL نیز به خوبی پشتیبانی می نماید.

در کدنویسی با استفاده از CSS می‌توانید استایل سایت مثل رنگ، فونت، تصاویر پس زمینه و … را بصورت دلخواه تغییر دهید.

هدف و کاربرد CSS چیست ؟

هدف از تولید CSS در واقع جداسازی اطلاعات محتوا که توسط زبانی مانند HTML نوشته شده اند از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کار های تکراری در طراحی وب سایت میگردد.

از دیگر کاربرد  CSS این است که می توان تنظیماتی را اعمال نمود که نمایش صفحه وب سایت مورد نظر بسته به اندازه صفحه نمایش کاربر متغیر باشد که به آن اصطلاحا طراحی ریسپانسیو می گویند. در صورتی که مدیر وب سایت چندین نوع نمایش را برای یک صفحه وب سایت خود تنظیم نموده باشد، CSS برای تصمیم گیری اینکه کدام حالت را به نمایش بگذارد، از ابزار های تعیین اولویت استفاده می نماید.

ساختار کد های  CSS

ساختار یک کد در CSS از دو قسمت تشکیل شده است:

• انتخاب کننده (Selector)
• بلاک اعلان (Declaration)
• Selector

در صورتی که بخواهید به بخشی از html استایل خاصی دهید باید یک تگ را انتخاب کنید تا بتوانید کدهای CSS را روی آن اعمال کنید. عنصر انتخاب شده می ‌تواند یک پاراگراف، یک تصویر و یا یک تیتر باشد. انتخاب کننده‌ های CSS به چند دسته تقسیم می‌شود:

انتخاب کننده عنصر:

با استفاده از این انتخاب کننده میتوانید تگ خاصی را انتخاب و تغییرات استایل را بر روی آن اعمال کنید به طور مثال می‌توان تگ‌

در یک صفحه وب را انتخاب کرد و رنگ آن را به قرمز تغییر داد.

انتخاب کننده  ID:

اگر بخواهید استایل های CSS بر روی گروهی از تگ‌ ها تعریف شود، باید از انتخاب کننده ID استفاده کنید. برای این کار باید در کد های HTML برای تگی که قصد تغییر استایل آن‌ را دارید یک ID تعریف کنید، سپس در بخش  CSS   مورد نظر را انتخاب و تغیرات را بر روی آن اعمال می‌کنید.

دستورات فقط بر روی یک ID خاص که با با علامت # در ابتدای آن مشخص میشود اعمال میگردد.

انتخاب کننده  Class:

برای این کار باید تمام تگ‌ هایی را که قصد دارید ظاهر یکسانی داشته باشند را داخل یک کلاس تعریف کنید و همانند ID به بخش CSS رفته و استایل مد نظرتان را روی آن کلاس تعریف کنید. مد نظر داشته باشید صفت کلاس با ( . ) در ابتدای آن قابل تشخیص میباشد.

Declaration

با استفاده از این بخش که در بین {…} قرار می‌گیرد م‎‌توانید مشخص کنید چه استایلی روی تگ ‌های انتخاب شده اعمال گردد. این بخش از دو قسمت ویژگی و مقدار تشکیل شده است که باید مشخص کنید عنصر انتخاب شده چه ویژگی و چه مقداری داشته باشد. به طور مثال مشخص کنید تگ h1 به رنگ آبی و یا سایز فونت برابر ۱۴ پیکسل باشد.

فایل  CSS چیست ؟

CSS با ایجاد فایل CSS. همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا برای مرورگر های مبتنی بر قابلیت شناسایی صدا و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.

اضافه کردن CSS به HTML

نحوه اتصال فایل CSS به فایلhtml  به سه روش زیر انجام می‌شود:

• External CSS
• Internal CSS
• Inline CSS

External CSS

با استفاده از روش External CSS که پرکاربرد ترین روش استفاده از CSS است میتوانید با تغییر یک فایل که از قبل ایجاد شده، ظاهر یک سایت را تغییر دهید. محل قرارگیری کد های CSS در روش خارجی به این شکل است که باید کد های  CSS را در یک فایل notepad  به صورت مجزا نوشته و با پسوند . CSS ذخیره کنید. حال باید این فایل را با دستورات html به فایل اصلی متصل کنید. برای این کار میتوانید داخل تگ در بخشفایلی که از قبل ایجاد کرده اید را معرفی کنید.  

Internal CSS

Internal CSS  زمانی استفاده میشود که یک صفحه از سایت باید استایل مشخصی داشته باشد. 

مطالب مرتبط با انواع زبان های برنامه نویسی که ممکن است علاقه داشته باشید:

برنامه نویسی متلب MATLAB

برنامه نویسی R

برنامه نویسی C

برنامه نویسی C++

زبان برنامه نویسی scratch

برنامه نویسی پایتون

برنامه نویسی جاوا

برنامه نویسی اسکالا

زبان برنامه نویسی گو GO

زبان برنامه نویسی swift

زبان برنامه نویسی PHP

زبان برنامه نویسی ویژوال بیسیک

زبان برنامه نویسی HTML