بعد از اینکه اسکلت بندی صفحه ی وب را با استفاده از عناصر HTML انجام دادیم، نوبت به رنگ و لعاب صفحه خواهد رسید. CSS زبانی برای نمایش هر چه بهتر اسناد HTML است. با استفاده از این زبان میتوانیم ظاهر یک سند HTML را تعیین کرده و برای تک تک عناصر HTML استایلی مناسب برگزید. در این آموزش زبان CSS را از سطح پایه تا پیشرفته خواهید آموخت.
به نمونه مثالی که در زیر آورده شده است دقت کنید. این یک نمونه استفاده از زبان CSS برای استایل دهی به عناصر HTML است :
}body
;background-color : lightblue
{
}h1
;color : white
;text-align : center
{
}p
;font-family : verdana
;font-size : 20px
{
CSS یا Cascading Style Sheets زبان برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML بوجود آمده است پیشنهاد داده است. عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد.
هدف CSS جداسازی طراحی بدنه ی یک فایل html از شیوه ی نمایش آن فایل html هست . با CSS شما می توانید تعیین کنید که هر تگ html به چه شکلی نمایش داده بشود . مثلا رنگ ، اندازه و نوع فونت متن درون تگ را مشخص کنید . یا اینکه پس زمینه و ویژگی های دیگه ی تگ رو تعیین کنید .
CSS زبانی است که توسط آن قادر خواهید بود تا استیل طراحی صفحات وب سایت تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید. با CSS می توانید زیبا سازی و صفحه آرایی صفحات وب را داشته باشید .
CSS چیست ؟
- CSS مخفف کلمات Cascading Style Sheets است.
- CSS مشخص میکند که عناصر HTML چگونه در صفحات نمایش، کاغذ، و دیگر رسانه ها نمایش یابند.
- استفاده از CSS باعث صرفه جویی در زمان در هنگام طراحی میشود. CSS طرح بندی چندین صفحه وب را در یک لحظه میتواند مدیریت کند.
- کد های زبان CSS در فایل هایی با پسوند css. ذخیره میشوند.
یک صفحه HTML با چندین استایل
یکی از مزایای استفاده از کد های CSS در یک فایل جداگانه (فایلی با پسوند css.) این است که با تغییر این فایل میتوان به راحتی شکل و شمایل کل صفحات وب تان را تغییر دهید. در زیر چندین تصویر نشان داده شده است که همه ی آنها دارای کد های HTML یکسانی هستند ولی هر کدام ، کد های CSS متفاوتی برای استایل دهی به خود استفاده میکنند.
و شکل زیر صفحه ای را نشان میدهد که هیچ کد CSS ایی روی آن اعمال نشده است و فقط دارای کد های HTML است :
چرا از 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 است.
دو تصویری که در بالا نشان داده شده هست شبیه هم هستند اما تصویر بالایی با استفاده از زبان CSS طراحی شده است در حالی که تصویر پایینی تنها از تگ های HTML برای طراحی استفاده کرده است. حجم صفحه ی طراحی شده با CSS تنها 4 کیلوبایت بوده که این مقدار برای صفحه ی طراحی شده با HTML حدود 4 برابر بیشتر یعنی 14 کیلوبایت است.
دوران قبل از CSS
وقتی گروهی از دانشمندان وب را برای به اشتراک گذاری قواعد و اصطلاحات فنی ایجاد کردند، در آن زمان کسی با نام طراح گرافیک وجود نداشت. تمام آن چیزی که دانشمندان نیاز داشتند که HTML برای آنها انجام دهد فراهم آوردن اطلاعات با ساختاری مناسب برای درک بهتر بود. برای مثال تگ <h1> اشاره به یک سر تیتر مهم دارد، در حالی که تگ <h2> اشاره به سرتیتری کم اهمیت تر داشته و معمولا زیر مجموعه ی تگ <h1> قرار میگیرد. مورد دیگر تگ <ol> یا لیست ترتیبی است که برای ایجاد لیستی از عناوین به کار میرود (برای مثال 10 دلیل استفاده از سیستم های مدیریت محتوا).
اما به محض اینکه مردم هم همچون دانشمندان استفاده از HTML را آغاز کردند، آنها میخواستندصفحات وب از نظر ظاهر هم خوب به نظر برسد. بنابراین طراحان وب استفاده از تگ های HTML برای کنترل ظاهر صفحات وب را شروع کردند. این در حالی بود که قبلا از این تگ ها فقط برای نمایش اطلاعات ساختاری استفاده میشد. برای مثال شما میتوانید از تگ <blockqoute> (نمایش متنی از منبعی دیگر) برای هر متنی که میخواهید تورفتگی داشته باشد استفاده کنید.
با انجام کار و تلاش بیشتر طراحان یادگرفتند که چگونه از تگ <table> برای ایجاد ستون هایی از متن و قرار دادن دقیق متن و تصویر در صفحه استفاده کنند با این حال از آنجایی که تگ <table> برای قرار دادن داده های جدولی طراحی شده بود طراحان برای رسیدن به اهداف طراحی خود از آن به روش های غیر معمولی استفاده میکردند. گاهی اوقات برای رسیدن به مقاصد خود در طراحی جدولی را در جدولی دیگر قرار میدادند که باعث پیچیدگی هر چه بیشتر صفحات وب میشد.
دوران استفاده از CSS
اهمیتی ندارد که صفحه ی وب سایت شما چه محتوایی را نگه میدارد آن چیزی که صفحه ی شما را همچون یک صفحه ی حرفه ای و پیشرفته به نمایش خواهد گذاشت طراحی صفحه است. طراحی خوب پیام های موجود در سایت شما را تقویت میکند. و به بازدیدکنندگان در جستجوی آن چیزی که با دنبال آن هستند کمک خواهد کرد.
استفاده از HTML برای کنترل ظاهر متون و دیگر عناصر صفحات وب دیگر منسوخ شده است. از این به بعد CSS برای شما این کار را انجام میدهد. از HTML برای اضافه کردن ساختار به محتوای صفحه ی خود و سازماندهی آن استفاده کنید. از CSS برای زیبا سازی محتوا استفاده کنید.
منبع:learnsource