CSS چیست | کاربرد زبان سی اس اس | ساختن فایل css

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

• CSS چیست ؟
• CSS مخفف چیست
• کاربرد  زبان CSS
• کاربردهای رایج سی اس اس
• مزایای CSS
• چگونه یک فایل CSS بسازیم
• ساختن فایل CSS
• روش های استایل دهی به صفحات وب
• دوره آموزش سی اس اس

CSS چیست ؟

در پاسخ به سوال CSS چیست باید گفت: در واقع CSS یک زبان کمکی برای توصیف عناصر ظاهری و بصری HTML می باشد، بدین معنا که شما با استفاده از CSS نمای سایت خود را بصورت سفارشی تر طراحی خواهید کرد. بنابراین همانطور که در مقاله HTML چیست اشاره نمودیم ما به کمک HTML ساختمان و اسکلت سایت را بنا نهاده و سپس با به کمک کد های CSS ظاهر و نمای سایت را طراحی می کنیم.
CSS زبان کد نویسی همیشه همراه HTML است. زبانی که توسط کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان استفاده از HTML تا به الان بوجود آمده است پیشنهاد شده. درواقع از آنجا که HTML برای طراحی و زیبا سازی صفحات وب دارای نقاط ضعف و خلاء های بسیاری است، شما نیاز دارید که از زبان های سازگار دیگری مثل زبان سی اس اس استفاده کنید تا بر برخی مشکلات فائق آمده و بتوانید شخصی سازی مورد نظر خودتان را انجام دهید.
زبان CSS زبانی است که به کمک آن قادر خواهید بود که یک فرمان را در قالب یک استایل (Style) نوشته و به تمام صفحات وبتان تحمیل کنید. برای اینکه این موضع را بهتر درک کرده و با برخی نقاط ضعف HTML که توسط زبان سی اس اس مرتفع می گردد آشنا شوید به مثال زیر توجه کنید.
تصور کنید که یک وب سایت استاتیک ۲۰۰ صفحه ای را به کمک HTML ساخته اید. بعد از چند روز تصمیم می گیرد تا فونت تمام کلمات را کمی بزرگتر کنید. گفتن اینکه فونت تمام کلمات بزرگتر شود بسیار کار راحتی است و تنها یک جمله است. ولی در عمل شما باید به ۲۰۰ صفحه و احتمالا بیش از چند صد خط کد سر بزنید تا این کار را انجام دهید. اینجاست که زبان CSS به کمک شما خواهد آمد. شما بجای تغییر صد ها کد در HTML کافی است کد فرمان مورد نظر را در فایل CSS بنویسید تا روی تمام صفحات وب سایت اعمال گردد.

پیشنهاد مطالعه: برای آشنایی با زبان HTML و درک ارتباط html و css پیشنهاد می کنیم مقاله “HTML چیست” را مطالعه نمایید. پس از مطالعه این مقاله درک بهتری از قابلیت های زبان CSS خواهید داشته.

Css مخفف چیست ؟

واژه CSS مخفف cascading style sheets به معنی برگه های سبک آبشار یا برگه های آبشاری می باشد. به زبان CSS زبان برنامه نویسی ظاهری (Style Sheet Language) نیز می گویند.

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

شاید با خودتان فکر کنید چرا برگه های آبشاری؟
علت نامگذاری CSS و استفاده از صفت Cascading (آبشاری) در این اسم، نحوه اعمال دستورات به عناصر موجود در صفحه است. قوانین این زبان به صورت آبشاری یا از بالا به پایین اعمال می شوند. شما برای اعمال دستورات CSS به عناصر HTML می بایست از بیرونی ترین عنصر به ترتیب به عناصر داخلی آن دسترسی پیدا کنید که تداعی کننده حالت آبشاری است که در ادامه  با مطالعه شیوه استفاده از کد های CSS این موضوع را بهتر متوجه خواهید شد.

کاربرد زبان CSS

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

کاربردهای رایج سی اس اس

• تعین فونت
• تعین رنگ پیش زمینه و پس زمینه
• تعیین فاصله و حاشیه عناصر صفحه
• تعیین عرض و ارتفاع
• تعیین تصویر پس زمینه
• تغییر موقعیت قرار گیری عناصر صفحه
• چپ چین و راست چین کردن عناصر

نکته جالب: شما به کمک HTML و CSS می توانید انیمیشن های کوتاه GIF مانند بسازید. در این مورد، در یک مقاله جداگانه بحث خواهیم کرد تا با قابلیت های زبان CSS بیشتر آشنا شوید.

 

مزایای CSS

زبان CSS باعث ایجاد تحولات و پیشرفت های زیادی در دنیای طراحی وب گردید است بطوریکه می توان گفت یکی از مفید ترین و پر کاربرد ترین ابزارها در حوزه طراحی وب می باشد.
یکی از بزگ ترین مزایای CSS صرفه جویی در وقت و انرژی طراحان وب و افزایش سرعت بارگذاری صفحات وب می باشد به این صورت که می توان تمامی ویژگی های ظاهری مدنظر برای سایت را در قالب یک برگه CSS نوشت و به تمامی صفحات مورد نیاز اختصاص داد. البته در مقاله بوت استرپ چیست توضیح داد ایم که چطور این زبان نیز می تواند تا ۸۰ درصد در سرعت کدنویسی شما تاثیر گذار باشد.
خوب است بدانید در گذشته طراحی و چیدمان عناصر صفحات وب، از طریق جدول انجام می‌گرفت. جدول ها مشکلات زیادی از جمله حجم بالای پردازش و بدنبال آن کاهش سرعت سایت داشتند و به این خاطر با ظهور CSS کاملا منسوخ شدند.این ویژگی منفی وب سایت هایی بود که با جدول پیاده سازی می شدند.
در مقابل در وب سایتی که با کدهای CSS  پیاده سازی می شود، عناصر یکی پس از دیگری در هنگام بارگزاری بر روی صفحه پدیدار میشوند و کاربر از لحظه درخواست میتواند مشغول مطالعه و مشاهده وب سایت باشد تا زمانی که بارگزاری کامل شود.
از دیگر مزایای CSS می توان به افزایش سئو سایت اشاره نمود.

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

مزایای CSS بطور خلاصه:

• طراحی ظاهر صفحات بدون استفاده از دستورات HTML
• جلوگیری از تکرار دستورات
• سرعت بارگذاری بیشتر برای صفحات
• استفاده از فایل CSS خارجی جهت تغییر ظاهر هر تعداد صفحه ای که مایل هستیم
• بهبود سئو سایت

چگونه یک فایل css بسازیم

بعد از کسب اطلاعات در مورد CSS چیست حالا زمان آن رسیده تا بدانید چگونه یک فایل css بسازیم.
همانطور که در مقاله HTML چیست گفته شد، برای کدنویسی با زبان هایی مثل CSS نیازی به نرم افزار خاصی نیست. شما می توانید حتی با notepad ویندوز هم کدنویسی کنید. البته استفاده از phpstorm و visual studio code پیشنهاد می شود.

ساختن فایل css

برای ساختن فایل css کافی است بعد از انجام کد نویسی های لازم فایل مروبطه را با پسوند css. ذخیره کنید. تمام! فایل سی اس اس شما ساخته شد.

روش های استایل دهی به صفحات وب

برای استایل دهی به صفحات وب و اعمال CSS روی کد های HTML سه راه وجود دارد که به ترتیب اولویت از بالا به پایین ذکر خواهند شد.

ایجاد استایل شیت (style sheet) جدا. (استایل خارجی یا External)

در این روش که بهترین روش فراخوانی css در html است شما می بایست یک فایل CSS جدا بسازید و به کمک تگ های و اتریبیوت های HTML آن را فراخوانی کنید. این شیوه از  فراخوانی css در html در فیلم آموزشی کاملا توضیح داده شده است.
از مزیت های این روش می توان به موارد زیر اشراه کرد :

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

۲٫ نوشتن CSS درون صفحه (استایل داخلی یا Internal)

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

۳٫ استایل خطی یا Inline Css در HTML

روش استایل خطی یا Inline Css در HTML زمانی مناسب است که بخواهیم یک Style را برای یک بار برروی یک تگ اعمال کنیم. در این روش کد CSS درون تگ HTML قرار می گیرد. این روش نیز در فیلم آموزشی کاملا توضیح داده شده است.

تفاوت نسخه های مختلف css

CSS در نسخه های مختلفی ارائه گردیده است که به هر کدام از نسخه های CSS یک Level گفته می شود و هر کدام از نسخه ها دارای یکسری نسخ تکمیلی می باشند که به آن ها Profile نیز گفته می شود.
در این بخش بطور خلاصه به معرفی و بیان تفاوت نسخه های مختلف css که تا به حال ارائه شده خواهیم پرداخت.

نسخه CSS1

CSS1 به عنوان اولین نسخه از سی اس اس برای اولین بار توسط W3C به توسعه دهندگان وب ارائه گردید و در سال ۱۹۹۶ بصورت رسمی در دسترس عموم قرار گرفت.
البته در حال حاضر W3C دیگر نسخه CSS را پیشنهاد نمی کند.

پیشنهاد ویژه: برای شروع یادگیری طراحی وب سایت و ورود به دنیای وب حتما در کلاس طراحی وب سایت آموزشگاه آریا تهران شرکت کنید تا علاوه بر یادگیری کامل مدرک بین الملی نیز دریافت نمایید.

ویژگی های CSS1:

• امکانات مختلف برای فونت، مثل ایجاد سبک و تاکید
• تخصیص رنگ، پس زمینه و عناصر دیگر به متن
• تنظیم (Alignment) متن، تصاویر، جدول‌ها و دیگر عنصر صفحه وب
• ایجاد حاشیه (Margin)، مرزبندی (Border)، لایه گذاری (Padding) و جای گذاری اکثر اجزا صفحه
• شناسایی متمایز و کلاس‌بندی عمومی گروهی از ویژگی‌ها (attributes)

نسخه CSS2:

نسخه CSS2 تنها ۲ سال پس از معرفی CSS1 یعنی در سال ۱۹۹۸ ارائه شد و شباهت های زیادی به CSS1 داشت ولی یکسری قابلیت های جدید مثل جایگذاری مطلق (Absolute) ، وابسته (Relative) و  ثابت (Fixed) به آن اضافه شده بود.
همچنین امکاناتی مانند ایجاد درک و شناخت انواع مختلف فایل (Media) و قابلیت‌های جدید برای طراحی متن در نسخه CSS2 ایجاد شده بود.
البته در حال حاضر استفاده از نسخه CSS2 نیز از طرف W3C  پیشنهاد نمی گردد.

نسخه CSS3:

اولین بار در سال ۱۹۹۹ نسخه CSS3 ارائه گردید و می توان گفت تحول بزرگی در تاریخچه CSS به حساب می آید.
در این نسخه اسناد زیادی بوجود آمد که به هر کدام از آن ها یک ماژول Module گفته می شود.
بطور کلی نسخه CSS3 بر پایه ماژول ساخته شده و تا سال ۲۰۱۲ نیز ماژول های زیادی نظیر Media Queries، Namespace، Selector Level و Color از جانب تیمی که روی این زبان کار می‌کرد، منتشر شدند.

نسخه CSS4:

پس از این که CSS3 بر پایه ماژول ها ساخته شد دیگر هیچ نسخه ای از CSS بصورت یکپارچه تحت عنوان CSS4 یا… ارائه نگردید بلکه ماژول های CSS بصورت جداگانه توسعه پیدا کردند.
در این میان تعدادی ماژول هم به عنوان ماژول‌های Level 4 توسعه پیدا کردند. از ماژول‌های Level4 در CSS4  می‌توان به Image Values، مرزبندی و پس زمینه (Background & Borders) و Selector اشاره کرد.
خلاصه مقاله:
درصورتی که این مقاله رضایت شما را جلی کرده است حتما نظرات و سوالات خود را در قسمت نظرات برای ما پست کرده و امتیاز لازم را برای این مقاله در نظر بگیرد. همکاری شما باعث دلگرمی ما خواهد بود.

آموزش سی اس اس

اگر علاقه مند به یادگیری طراحی سایت هستید و هیچ پیش زمینه ای در این حوزه ندارید، آموزش سی اس اس و اچ تی ام ال جزء قدم‌ های ابتدایی شما است.
اگر بدنبال مرکز معتبر جهت یادگیری HTML و CSS هستید پیشنهاد می کنم سری به آریا تهران بزنید! در آموزشگاه آریا تهران شما به صورت کامل با css و ریسپانسیو سازی(نمایش در موبایل) مسلط می شوید.
مجتمع فنی حرفه ای آریا تهران، همراه با بهترین اساتید و همچنین ارائه مدرک فنی حرفه ای، انواع دوره های طراحی سایت را برگزار می نماید.
دوره های پیشنهادی ما برای آموزش سی اس اس  و اچ تی ام ال:

• برنامه‌نویسی Html برای صفحات وب

2,400,000 تومانثبت نام

• دوره آموزش Dreamweaver به همراه HTML و CSS

دوره آموزش زبان برنامه نویسی php

 

یادگیری طراحی سایت را در محیطی آرام، حرفه ای و همراه با اساتید برتر تجربه نمایید!!!