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

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

در روزهای ابتدایی وجود html قرار نبود که این تگ‌ها هیچ ظاهر به خصوصی به خود بگیرند. در واقع آن‌ها قرار بود تا تنها برای نوشتن متون و قرار دادن عکس‌ها به کار گرفته شوند. اما پس از مدتی،با آمدن استایل‌ها و انواع رنگ‌ها و فونت‌ها به وب، نوشتن صفحات اچ‌تی‌ام‌ال برای برنامه نویسان به کابوسی تبدیل شد.

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

نحوه افزودن css به صفحات وب

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

روش اول: CSS خطی

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

شاید از این مقاله خوشتون بیاد:  آموزش css جلسه پنجم: استایل css منوی کشویی

روش دوم: CSS داخلی

نحوه دیگر استفاده از css، استفاده از تگ <style> </style> در صفحه و در بین تگ <head></head> است. این نوع سی‌اس‌اس را internal یا همان داخلی می گویند. در استفاده از این نوع css باید دقت کرد که استایل‌های شما تنها در همان صفحه خوانده می‌شود و نمی‌توانید از آن‌ها در دیگر صفحات استفاده کنید.

روش سوم: فایل خارج از صفحه CSS

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

اکنون صفحه html جدیدی را باز کنید. در بین دو تگ <head></head> باید کد زیر را ا ضافه کنید و آدرس فایل سی‌اس‌اس را در آن وارد کنید.

نکته: برای به دست آوردن آدرس فایل ذخیره شده در ویندوز، بر روی فایل .css کلیک راست کرده و در منوی باز شده وارد تب general شوید و آدرس فایل را کپی کنید. سپس در انتهای این آدرس علامت / قرار داده و نام فایل را با پسوند .css وارد کنید. برای درک بهتر به مثال زیر توجه کنید:

<link rel=”stylesheet” type=”text/css” href=”ادرس فایل css”>

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

استفاده از css خارجی به چند دلیل نسبت به روش‌های دیگر برتری دارد:

شاید از این مقاله خوشتون بیاد:  بهترین زبان برنامه نویسی برای طراحی وب سایت چیست ؟

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

از شلوغ و طولانی شدن صفحات html جلوگیری می‌شود.

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

دسته‌ها: دنیای وب

غلامرضا بهشتیان

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *