آشنایی با زبان CSS

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


CSS چیست ؟

  • CSS مخفف کلمات Cascading Style Sheets است.
  • CSS مشخص میکند که عناصر HTML چگونه در صفحات نمایش، کاغذ، و دیگر رسانه ها نمایش یابند.
  • استفاده از CSS باعث صرفه جویی در زمان در هنگام طراحی میشود. CSS طرح بندی چندین صفحه وب را در یک لحظه میتواند مدیریت کند.
  • کد های زبان CSS در فایل هایی با پسوند css. ذخیره میشوند.

یک صفحه HTML با چندین استایل

یکی از مزایای استفاده از کد های CSS در یک فایل جداگانه (فایلی با پسوند css.) این است که با تغییر این فایل میتوان به راحتی شکل و شمایل کل صفحات وب تان را تغییر دهید. در زیر چندین تصویر نشان داده شده است که همه ی آنها دارای کد های HTML یکسانی هستند ولی هر کدام ، کد های CSS متفاوتی برای استایل دهی به خود استفاده میکنند.

layou1

layout2

layout3

layout4

 و شکل زیر  صفحه ای را نشان میدهد که هیچ کد CSS ایی روی آن اعمال نشده است و فقط دارای کد های HTML است :

layout5


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

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


CSS مشکلات بزرگی را حل کرده است

HTML هیچگاه به قصد داشتن تگ هایی برای استایل دهی به صفحات وب طراحی نشد. هدف اصلی تگ ها در HTML نمایش محتوای صفحه است مانند :

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

وقتی تگ هایی همچون <font> در نسخه هایی از HTML اضافه شد به کابوسی برای توسعه دهندگان وب تبدیل شد. توسعه ی وب سایت های بزرگی که هر صفحه از آن نیاز به اطلاعاتی در مورد فونت ، رنگ و .. داشتند پیچیده و دشوار شد.

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


CSS و رابطه ی آن با HTML

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

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

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

designwithcss

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


دوران قبل از CSS

وقتی گروهی از دانشمندان وب را برای به اشتراک گذاری قواعد و اصطلاحات فنی ایجاد کردند، در آن زمان کسی با نام طراح گرافیک وجود نداشت. تمام آن چیزی که دانشمندان نیاز داشتند که HTML برای آنها انجام دهد فراهم آوردن اطلاعات با ساختاری مناسب برای درک بهتر بود. برای مثال تگ <h1> اشاره به یک سر تیتر مهم دارد، در حالی که تگ <h2> اشاره به سرتیتری کم اهمیت تر داشته و معمولا زیر مجموعه ی تگ <h1> قرار میگیرد. مورد دیگر تگ <ol> یا لیست ترتیبی است که برای ایجاد لیستی از عناوین به کار میرود (برای مثال 10 دلیل استفاده از سیستم های مدیریت محتوا).

اما به محض اینکه مردم هم همچون دانشمندان استفاده از HTML را آغاز کردند، آنها میخواستندصفحات وب از نظر ظاهر هم خوب به نظر برسد. بنابراین طراحان وب استفاده از تگ های HTML برای کنترل ظاهر صفحات وب را شروع کردند. این در حالی بود که قبلا از این تگ ها فقط برای نمایش اطلاعات ساختاری استفاده میشد. برای مثال شما میتوانید از تگ <blockqoute> (نمایش متنی از منبعی دیگر) برای هر متنی که میخواهید تورفتگی داشته باشد استفاده کنید.

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


دوران استفاده از CSS

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

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

منتشر شده در ۵ تیر ۱۳۹۶ حمید رضا ملکی ۸۰۵ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده