دلایل استفاده از CSS در توسعه وب

دلایل استفاده از CSS در توسعه وب

دلایل استفاده از CSS در توسعه وب ،تمام افرادی که با مبحث طراحی سایت آشنایی مختصری داشته باشند، حتما با فایل CSS و
کدهای آن آشنایی دارند و این موضوع را می دانند که این فایل مربوط به ظاهر و نحوه چیدمان
سایت ,رنگ بندی ها,قسمت بندی ها و …. می باشد.

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

در طراحی وب ، فقط آشنایی با زبان HTML کافی نیست زیرا :
یک وبسایت با ظاهر ساده و بدون استایل بدون شک نمی تواند کاربران زیادی را جذب کند.
HTML زبانی بود که در آن بسیاری از موارد پیشرفته طراحی وب لحاظ نشده بود.
بعلاوه اینکه این زبان قابلیت تغییر، کاربر پسندی و بسیاری دیگر از مباحثی که در دنیای
برنامه نویسی و طراحی با گذشت زمان بوجود آمده اند را در خود جای نداده است.
البته این نکته را فراموش نکنید که HTML اسکلت (frontend) ظاهر وبسایت شماست.
و CSS جادوگر ظاهر وب سایت شماست،

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

تعریف زبان CSS

CSS مخففی از سرواژه های Cascading Style Sheets و در اصطلاح به معنی
زبانی کمکی جهت شکل دهی ظاهر و فرم صفحات وب (HTML) است .

سی‌ اس‌ اس در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند.
عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و
سعی در پر کردن نقاط ضعف و خلاء های آن دارد.

به زبان ساده CSS یا همان Cascading Style Sheet تکنیکی است برای قالب بندی و
طراحی اجزای صفحه وب(HTML) از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر
چیزی که در طراحی صفحه وب استفاده می شود .

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

برای این منظور مثالی را می زنیم.

تصور کنید که سایت شما شامل ۵۰ صفحه استاتیک می باشد
و شما آنها را تماما به زبان HTML نوشته اید.
بعد از یک هفته تصمیم گرفته اید تا رنگ تمام کلمات را تغییر دهید.
گفتن اینکه رنگ تمام کلمات عوض شوند بسیار کار راحتی است و تنها یک جمله است
ولی آیا در عمل تغییر ۵۰ صفحه نیز به همان راحتی خواهد بود؟ قطعا نه!

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

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

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

کاربرد اصلی CSS

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

مزایای استفاده از CSS

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

مزایای دیگر CSS :

صرفه جویی در وقت
مکملی برای HTML است: ترکیب CSS وHTML در طراحی وب سایت باعث ایجاد کدهای تکنیکی با کیفیتی میشود
تغیییرات آسان و مجدد تگ های HTML
طراحی صفحه بدون نیاز به تگ های قالب بندی HTML
طراحی صفحات دینامیک به کمک javascript
CSS میتواند با HTML , XHTML ترکیب شود و نتیجه کار در تمام مرورگرها به یک شکل دیده شود
با استفاده از CSS میتوانید صفحات قابل چاپ طراحی کنید
ایجاد تغییرات در سایت های مبتنی بر CSS ساده است
و …

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

برای یادگیری CSS به چه چیزهایی نیاز دارید؟

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

چگونگی اعمال استایل ها درCSS

قدرت این زبان به قابلیت ایجاد حالت های گوناگون و تعریف کلاس (CLASS) و آی دی (ID) است،
به اینصورت که مثلا با تعریف یک کلاس، از آن در صفحات مختلف و بدون تکرار کدنویسی، استفاده می کنیم.
برای تعریف کلاس از کاراکتر ‘.’ و برای تعریف آی دی از کاراکتر ‘#’ استفاده می کنیم.

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

• استفاده از استایل های درونی (Internal Stylesheet)
• استایل های درون خطی (inline stylesheets)
• استایل های خارجی (external stylesheets)

روش اول : استفاده از استایل های درونی :

در این روش هیچ فایل جداگانه ای برای دستورات CSS ایجاد نمی شود
بلکه دستورات CSS درون یک تگ <style> و در درون تگ <head>
فایل HTML قرار داده می شوند.
به طور مثال کد زیر را که بخشی از کد HTML است را در نظر بگیرید :
این تکه کد رنگ زمینه را تغییر میدهد.

<!DOCTYPE html>
<html>
<head>
<title>
CSS FOR WEB
</title>
<style>
  body {background-color:lightgrey}
  h1   {color:blue}
  p    {color:green}
</style>
</head>

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

در این روش استایل های مد نظر، درون تگ بازکننده المنت مورد نظر نوشته می شوند. به مثال زیر توجه کنید :

<p style="color:red">This is a RED paragraph</p>

روش سوم : استایل های خارجی :

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

<link rel="stylesheet" type="text/css" href="main.css" />

قسمتی از کد که درون href=”” قرار می گیرد اشاره به محل قرار گیری فایل CSS دارد.
مزیت اصلی استفاده از فایل استایل خارجی این است که برای تغییر در یک جزء خاص
در کل یک وب سایت می توان فقط در فایل CSS آن تغییر را ایجاد کرد و تغییرات روی همه سایت اعمال می شود.

نظرات و پیشنهادات خود را با ما در میان بگذارید.☺