مقدمه ای بر CSS

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

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

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

 

کاربرد css
وظیفه CSS زیباسازی محتوای و ساختار صفحات وب از طریق اعمال ویژگی های مختلف مثل رنگ و فونت و اندازه و غیره می باشد.

 

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

جداسازی HTML و CSS
جداسازی HTML و CSS

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

 

CSS کوتاه شده چه کلماتی است؟

CSS اول کلمات Cascading Style Sheets می باشد که در ادامه هر کدام توضیح داده شده اند:

Styles: استایل ها مجموع قوانینی هستند که با اعمال آنها بر روی یک سند وب موجب زیبایی آن می شویم.

Sheets: قوانین می توانند درون یک سند یا چندین سند باشند که به سندهای قوانین CSS برگه یا Sheet گفته می شود.

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

 

سند وب

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

 

ارائه یا نمایش یک سند وب

کار مرورگرهای مختلف مثل کروم, فایرفاکس, اینترنت اکسپلورر, اپرا و غیره تبدیل یک سند وب به شکلی که برای انسان قابل فهم و استفاده است, می باشد. که این کار را با اعمال قوانین CSS بر روی محتوای HTML انجام می دهد. به این تبدیل, ارائه یا نمایش یک سند گفته می شود.

 
در ادامه با تاریخچه CSS آشنا خواهید شد.

سوالت رو توی پنل بحث و گفتگو مطرح کن.

4 دیدگاه برای “مقدمه ای بر CSS

  1. سلام
    شما از تگ H1 به چه شکل در صفحات استفاده می‌کنید؟
    در html5 میشه برای هر section یک تگ h1 استفاده کرد و اگر از تگ section و تگهای مشابه به درستی استفاده بشه outline صفحه درست شکل میگیره ولی با این حال بعضی میگن فقط یک بار باید از h1 در سند html استفاده بشه (که البته این قانون در html4 لازم الاجرا هست) تا برای seo سایت اشکال ایجاد نکنه.
    شخصا فکر میکنم یک تگ h1 برای اسم سایت و یکی در شروع تگ body برای عنوان اصلی یعنی در مجموع ۲ تگ h1 صفحه احتمالا در شرایط فعلی مناسبترین گزینه هست.
    شما با کدوم روش موافق هستید؟
    مثالی برای یک outline استاندارد html5 سراغ دارید که نکته های اصلی رو پوشش داده باشه؟

    1. سلام.

      اگر صفحه اصلی سایت باشه عنوان سایت رو h1 می زارم. اگر صفحه لندینگ باشه عنوان مطلب رو h1 می زارم. حالا یا اسم محصوله یا اسم پسته و غیره. و دیگه توی صفحه لندینگ عنوان سایت رو h1 نمی زارم.

      یه بار یادمه توی سایت html5doctor یک مطلب در مورد outline خوندم. یک نگاه بندازین شاید کمکتون کرد.

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