cssچیست؟

شیوه‌نامه آبشاری (به انگلیسی: Cascading Style Sheets)

با کوته‌ نوشت سی‌اس‌اس (به انگلیسی: CSS) یک زبان برای ساخت شیوه‌نامه است

که از آن برای توصیف نمایش یک سند (که به یکی از زبان‌های نشانه‌گذاری مثل اچ‌تی‌ام‌ال نوشته شده‌است) استفاده می‌شود.

اگر از ما بپرسید اولین قدم برای یادگیری طراحی سایت چیست، قطعا جواب ما آموزش HTML و سپس CSS است.

این دو زبان در کنار یکدیگر معنی پیدا می‌کنند. زیرا CSS را می‌توان مکملی بر زبان HTML دانست

که با هدف پر کردن نقاط ضعف و خلاء‌های آن توسعه یافته است.

این زبان با هدف فرم دهی صفحات وب HTML و اجزای مختلف صفحات آن توسط کنسرسیوم بین المللی شبکه جهانی وب یا W3C توسعه داده شده است.

در واقع CSS یک زبان نشانه‌ گذاری است که اجازه می‌دهد ساختار صفحات وب را از چیدمان عناصر گرفته تا تغییر رنگ‌بندی و فونت‌ها شکل دهید.

این زبان در کنار HTML و JavaScript از هسته‌های اصلی طراحی صفحات وب به حساب می‌آیند.

همانطور که از تصویر بالا برداشت می‌شود، CSS حکم پوست و گوشت و در نهایت کت و شلوار صفحات وب را دارد.

CSS طراحان سایت را قادر می‌سازد که بدون محدودیت خلاقیت‌های خود را در طراحی صفحات سایت پیاده سازی کنند.

دنیای وب بدون زبان CSS چگونه می‌شد

آیا متوجه شدید اگر CSS وجود نداشت دنیای وب چه چهره زشت و ناخوشایندی به خود می‌گرفت؟

در گذشته برای ساخت صفحات وب سایت همه چیز در کدهای HTML خلاصه می‌شد.

طراحان سایت برای ساخت یک صفحه وب و اعمال ویژگی‌های ظاهری مختلف مانند

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

آن‌ها می‌بایست این تغییرات را در تک تک صفحه‌های مورد نظر و بر روی تک به تک اجزای آن اعمال می‌کردند.

این عوامل طراحی سایت را با صرف زمان و سختی‌های زیادی همراه ساخته بود.

CSS این قابلیت را در اختیار شما قرار می‌دهد که با ایجاد یک فایل خارجی (Style Sheet) ویژگی‌های اجزای مختلف در صفحات وب سایت را تعیین کنید.

یعنی تغییراتی که شما به کمک CSS در یک صفحه وب ایجاد می‌کنید، روی اجزای زیرمجموعه ی آن هم تاثیر می‌گذارند.

به عنوان مثال اگر شما رنگ متن یک صفحه را تغییر دهید،

تمامی زیرمتن‌ها مانند پاراگراف‌ها و سرخط‌ها نیز آن رنگ را خواهند داشت. تصویر بالا نمونه ای از یک فایل CSS یا Styles است.

مثالی از CSS در دنیای واقعی

حال که فهمیدیم CSS چیست و چه اهمیتی در دنیای وب دارد، قصد داریم شما را با ساختار این زبان آشنا کنیم.

تصور کنید قصد دارید یه پاراگراف را از سایر پاراگراف‌های دیگر متمایز کنید.

به همین منظور پس زمینه آن را قرمز و رنگ فونت را سفید در نظر بگیرید.

کد با استفاده از کدهای زیر، این تغییرات بر روی پاراگراف مورد نظر اعمال می‌شوند:

P { Background-color: red; Color: white; }

همانطور که می‌بینید کدهای CSS بسیار به زبان انسان شبیه هستند،

بنابراین یادگیری این زبان به شدت آسان است. در کد بالا، خاصیت‌های CSS به المان پاراگراف (p) اختصصاص داده شده است.

به این قسمت از کدهای CSS انتخاب کننده یا selector گفته می‌شود.

همچنین تمام بخش‌های داخل براکت‌ها بلوک declaration نامیده می‌شوند.

هر کدام از خط‌های داخل بلوک declaration یک declaration است که از دو بخش تشکیل می‌شود.

بخش قبل از علامت : property نامیده می‌شود که نشان دهنده خاصیتی است که قصد دارید به آن مقداری اختصاص دهید.

بخش بعد از علامت : که value نامیده می‌شود نشان دهنده مقدار آن خاصیت است. هر خط declaration با یک علامت سمی کالم (;) به پایان می‌رسد.

روش‌های اضافه کردن CSS به صفحه HTML

حال که دانستیم css چیست و چه ویژگی هایی دارد بهتر است سراغ معرفی نحوه استفاده از آن در کد برویم.

برای استفاده از CSS سه راه برای توسعه دهندگان وجود دارد که در این قسمت از مطلب به این سه روش می‌پردازیم:

inline style یا اتصال درون خطی:

استفاده از این روش می‌توانید کدهای css را در میان تگ‌های html تعریف کنید. این روش معمولا توصیه نمی‌شود، زیرا به مرور زمان و با بزرگ‌تر شدن پروژه، این کدها بسیار نامرتب می‌شوند و در آینده باعث سردرگمی خواهند شد.فراموش نشود که پس از وارد کردن دستورات خود حتما پسوند Css را وارد نمایید.
برای مثال :

<p style=”background: blue; color: white;”>A new background and font color with inline CSS</p>

Internal Style Sheet یا اتصال داخلی:

در وب سایت هایی که تعداد صفحات کمی دارند از روش css داخلی برای طراحی سایت استفاده می کنند.همچنین این لینک داخل تگ Head قرار می گیرد.این سبک دارای مزایایی می باشد که عبارتند از :

این سبک فقط برای صفحاتی قابل جرا می باشد که از این سبک استفاده شده است.
با استفاده از این روش می توان خاصیت ارث بری کلاس ها استفاده کرد.به عبارتی می توانید از چند جای همان صفحه استفاده کنید.
همچنین این سبک می تواند سرعت بارگزاری صفات را پایین بیاورد.

مثال زیر کاربرد Css داخلی را نشان می دهد.

<head>
<style>
hr {color:silver;}
p {margin-left:20px;}
body {background-image:url(“images/bg.gif”);}
</style>
</head>

External style sheet یا اتصال خارجی:

با استفاده از این روش شما می‌توانید یک صفحه دیگر با پسوند css ایجاد کنید و سپس کدهای CSS را در آن بنویسید. سپس کافیست صفحات HTML مورد نظر خود را با استفاده از تگ‌‌های <link> به این صفحات متصل کنید. در این روش باید آدرس فایل صفحه css را در اتریبیوت href تگ link بنویسید. برای مثال :

اولویت تاثیرگذاری روش های اتصال کد CSS

به طور کلی، زمانی که یک کد CSS توسط هر سه روش برای یک عنصر HTML نوشته می‌شه، اولویت اجرای اون‌ها به صورت زیر است:

استایل های درون خطی
شیوه نامه های داخلی
شیوه نامه های خارجی

پس دستورات CSS ای که به صورت درون خطی و تنها برای یک عنصر خاص نوشته می‌شه،

باعث می‌شه دستورات CSS مربوط به اون عنصر که توسط روش اتصال داخلی که در تگ style نوشته شده و

همچنین دستورات مربوطه در روش اتصال خارجی که با تگ link به صفحه فعلی متصل شده نادیده گرفته بشن.

نکته: چنانچه لینک اتصال یک فایل CSS خارجی بعد از دستورات CSS اتصال داخی در تگ head قرار داده بشن،

در نهایت دستورات فایل CSS خارجی اعمال خواهند شد.

چرا CSS یک زبان برنامه نویسی نیست!

خیلی از اشخاصی که به خوبی مفهوم CSS را درک نکرده اند و نتوانسته اند که پاسخ خوبی برای سوالCSS چیست پیدا کنند،

CSS را یک زبان برنامه نویسی میدانند که کاملا اشتباه است.

CSS هرگز نمیتواند یک زبان برنامه نویسی باشد. زیرا اصلا ویژگی های یک زبان برنامه نویسی،

مثل متغیر ها، توابع، شرط ها، حلقه ها و… را ندارد. پس کاملا اشتباه است اگرCSS را یک زبان برنامه نویسی بدانیم.

میتوانیم درباره‌یCSS بگوییم که ابزاری است که استفاده از آن میتوانیم تگ های HTML خود را زیبا کنیم و صفحات وب چشم نوازی را طراحی کنیم.

چرا باید از CSS استفاده کنیم؟

اساسی‌ترین کاربرد CSS، زیبا سازی و بهبود طراحی صفحات وب است.

CSS بسیار منعطف‌تر از HTML است و به شما اجازه می‌دهد

برای تغییر صفحات وب، کمتر سراغ ساختار HTML رفته و با سرعت بیشتری طراحی خود را خوش استیل کنید. د

ر ادامه این مطلب می‌خواهیم ببینیم که چرا باید از کدهای CSS در صفحات وب استفاده کنیم.

مزایای CSS

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

و در زمان صرفه جویی کنید. CSS همچنین به بهبود سئو سایت نیز کمک می‌کند

و به اصطلاح SEO Friendly است.

زیرا استفاده از این کدها می‌تواند تاثیر بسیار خوبی در زیبایی و دسترسی پذیری صفحات وب،

پشتیبانی از صفحات وب در دستگاه‌ها و مرورگرهای مختلف و در نهایت بهبود تجربه کاربری داشته باشد.

برخی دیگر از مزایای این زبان به صورت زیر می‌باشند:

ویژگی‌های بیشتری برای کار با اجزای صفحات نسبت به HTML دارد.
بهبود بخشیدن به سرعت وب سایت و زمان بارگذاری کمتر برای صفحات وب
امکان ساخت جلوه‌های تصویری و انیمیشنی جذاب
نگه‌ داری آسان کدها
جلوگیری از کدنویسی کثیف و غیر اصولی

معایب CSS چیست؟

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

برخی از محدودیت‌های این زبان عبارتند از:

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

id و Class در CSS

همونطور که در بخش ساختار نحوی دستورات مشاهده کردین،

تو بخش Selector عنصری رو که می‌خوایم استایل روی اون اعمال بشه رو ذکر می‌کنیم.

حالا اگه بخوایم دستورات استایل مورد نظر فقط روی یک عنصر

در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال بشه باید از id و Class استفاده کنیم.

اعمال دستورات فقط بر روی یک عنصر واحد توسط id

برای این منظور اول باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id رو تعریف کنیم.

سپس به بخش دستورات CSS رفته و در بخش Selector، صفت id که برای عنصر مورد نظر تعریف کردیم

رو نوشته و یک نماد “#” قبل از اون اضافه کنیم.

مثلا اگه بخوایم دستورات فقط بر روی یک پاراگراف خاص اعمال بشن،

ابتدا برای اون پاراگراف یک صفت id در کدهای HTML تعریف می‌کنیم:

<p id="para1">This is a Paragraph.<p>

سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:

#para1 { text-align:center; color:red; }

اعمال دستورات بر روی یک گروه از عناصر توسط Class

برای این منظور اول باید به کدهای HTML رفته و برای همه عناصری که می‌خوایم خاصیت‌های ظاهری یکسان داشته باشن صفت Class رو تعریف کنیم.

سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرد‌یم

رو نوشته و یک نماد “.” قبل از اون اضافه کنیم.

مثلا اگه بخوایم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال بشن،

ابتدا برای اون دسته از پاراگراف‌ها یک صفت Class مشترک در کدهای HTML تعریف می‌کنیم:

<p class="center">This is a Paragraph.</p>

سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.” یا همان نقطه می‌نویسیم:

.center { text-align:center; }

بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال می‌شن که دارای Class برابر با Center هستن

و سایر پاراگراف‌های موجود در صفحه از این دستورات تاثیرپذیر نیستن.

ریسپانسیو کردن با css

همانطور که می‌دانید در زمان‌های گذشته بیشتر افراد از طریق سیستم‌های کامپیوتری به وب‌گردی و مشاهده صفحات وب می‌پرداختند.

اما امروزه با پیشرفت تکنولوژی، دسترسی به اینترنت با دستگاه‌هایی مثل گوشی ، تبلت، ساعت‌های هوشمند و … افزایش پیدا کرده است.

این امر سبب شد که توسعه دهندگان به فکر سازگار کردن صفحات وبسایت‌ها با دستگاه‌های هوشمند بیفتند.

سازگار کردن صفحات وب‌سایت‌ها همان Responsive یا واکنشگرا کردن است.

به عبارت دیگر یعنی بتوانید صفحات وب سایت را در رزولوشن‌های مختلفی مشاهده کنید،

بدون اینکه صفحه مورد نظر با اختلالی رو به رو شود. پیاده سازی این قابلیت با فریم ورک هایی که برای css نوشته شده است،

بسیار ساده و سریع شده است.

آشنایی با نسخه‌های CSS

هر کدام از نسخه‌های CSS به منظور تکمیل نسخه قبلی و ارائه ویژگی‌های جدید معرفی شدند که در این قسمت به شرح مختصر هر یک می‌پردازیم.

داشتن نسخه‌های متعدد CSS ممکن است برای کسانی که آشنایی چندانی با آن ندارند گیج کننده باشد،

اما معرفی این نسخه‌ها اشاره مختصری به تاریخچه css و تنها به منظور آشنایی

با آن‌ها است زیرا امروزه از نسخه سوم و چهارم بیشتر استفاده می‌شود.

CSS 1

اولین نسخه از CSS که به طور رسمی در سال 1996 معرفی شد، CSS 1 بود.

با معرفی نسخه‌های جدیدتر، در حال حاضر استفاده از CSS 1 پیشنهاد نمی‌شود.

برخی از ویژگی‌های اصلی این نسخه از CSS به صورت زیر می‌باشند:

افزودن امکاناتی برای فونت مانند ایجاد سبک و تنظیم Font face و Emphasis
امکان تغییر رنگ، تخصیص رنگ به پس زمینه و سایر عناصر دیگر به متن
امکان تنظیم فاصله بین کلمات و سطرها در متن (Alignment)
امکان اضافه کردن کادر (Border)، حاشیه (Margin) و لایه بندی (Padding) صفحات وب
امکان کلاس بندی گروهی از ویژگی‌ها (Attributes)

CSS 2

این نسخه در 1998 معرفی شد و برخی از امکانات جدید آن عبارت اند از:

امکان تنظیم جایگاه اجسام به سه روش ثایت، متغیر و وابسته به سایر اجسام
شناخت انواع فایل‌های چند رسانه ای
قابلیت هایی برای طراحی متن مانند تنظیم راست چین بودن نوشته ها

این نسخه دارای دو اصلاحیه CSS 2.1 و CSS 2.2 نیز بود اما به طور کلی امروزه استفاده از این نسخه نیز پیشنهاد نمی‌شود.

CSS 3

CSS 3 در 1999 معرفی شد و تحول بزرگی در بهبود نسخه‌های CSS محسوب می‌شود.

این نسخه ساختاری ماژول بندی شده دارد و امکانات آن در قالب ماژول‌های مختلف در دسترس طراحان قرار می‌گیرد.

تا سال 2012 حدود 50 ماژول معرفی شدند که امکاناتی مانند استفاده از تصویر در پس زمینه،

اضافه کردن فرم‌های چند ستونی و غیره را برای طراحی سایت‌ها فراهم می‌کنند.

CSS 4

در واقع استانداردی به نام CSS 4 وجود ندارد زیرا توسعه دهندگان CSS 3 به توسعه و بهبود هر کدام از ماژول‌ها پرداختند

و این سطح، در واقع از تعدادی از ماژول‌های سطح 4 تشکیل شده است.

برخی از این ماژول‌ها عبارت اند از Image value، Background و Selectors که بسیار کاربردی هستند.

پشتیبانی مرورگرها از CSS

در اولین سال‌های معرفی CSS بسیاری از مرورگرها توانایی تفسیر و تجزیه کدهای آن را نداشتند.

به همین دلیل توسعه دهندگان مجبور بودند از تکنیکی به نام CSS Hack استفاده کنند.

به کمک این تکنیک، برنامه نویسان تعیین می‌کنند قسمت هایی از CSS که در مرورگر پشتیبانی نمی‌شوند، نمایش داده نشوند.

پس از آن مرورگر Internet Explorer 3 شروع به پشتیبانی از کدهای CSS کرد

و در سال 2008 و در هشتمین نسخه خود، توانست به طور کامل CSS 2 را پشتیبانی کند.

امروزه اکثر مرورگرها از CSS پشتیبانی می‌کنند، اما هنوز هم ممکن است توسعه ی نسخه‌های CSS، مشکلاتی به همراه داشته باشد.

جمع بندی

در این مقاله در مورد css صحبت کردیم و دیدیم که مهمترین کاربردهای css چیست

و چه مزیت هایی را در اختیار ما قرار می‌دهد.

اما فراموش نکنید که برای طراحی سایت، آموزش CSS به تنهایی کافی نیست

و به یادگیری HTML و جاوا اسکریپت نیز نیاز دارید.

اگر از آموزش‌ها و تمرینات پروژه محور استفاده کنید، قطعا زمان یادگیری شما بسیار کاهش خواهد یافت

و پس از چند هفته می‌توانید از قابلیت‌های CSS در کدهای خود استفاده کنید.

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: حانیه گل لاله کرمانی

cssچیست؟

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ