شروع پرقدرت آموزش HTML و CSS [ ورود به دنیای هیجان انگیز وب! ]

30% تخفیف برای مدت محدود!

CSS چیست و چه کاربردی دارد؟


نویسنده:
دوشنبه ۲۴ تیر ۱۳۹۸
CSS چیست

اگر به حوزه‌ی طراحی سایت وارد شده باشید، حتماً بارها نام CSS را شنیده‌اید و برایتان این سوال پیش آمده که CSS چیست؟
CSS مخفف عبارت Cascading Style Sheets است که اگر این عبارت را ترجمه کنیم به عبارت “برگه‌هایی به سبک آبشاری ”می‌رسیم! این ترجمه مقداری عجیب است اما در ادامه خواهیم گفت که آبشاری بودن به چه معناست!

CSS چیست؟

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

برای روشن شدن کاربرد این زبان به سراغ یک مثال می‌رویم. تصویر زیر نمونه‌ای از یک کد css است.
با کمک آن برای تگ h1 (عنوان اصلی صفحه) رنگ متن آبی و برای تگ p (پاراگراف) رنگ پس‌زمینه‌ نارنجی تنظیم کردیم. به کمک عبارت text-align نیز آن را وسط چین کردیم که خروجی آن را در سمت راست تصویر می‌بینید.

CSS چیست؟

همانطور که در تصویر مشخص است نوشتن این کد کار سختی نیست.

ساختار css

همانطور که در تصویر زیر می‌بینید، ساختار یک خط از کد CSS شامل یک انتخاب‌گر (selector) است که به یک یا چند تگ از html اشاره می‌کند. در مقابل انتخاب‌گر یک بلاک قرار می گیرد که سبک خاصی را به عنصر انتخاب شده اعمال می‌کند.

css چیست

ساختار آبشاری به چه معناست؟

فایل‌های css به روش‌های مختلفی به فایل html افزوده ‌می‌شوند. گاهی درون تگ HTML نوشته می‌شوند. گاهی در یک فایل جداگانه نوشته و به HTML اضافه می‌شود و …
گاهی ممکن است به یک تگ مشخص چند استایل مختلف داده شود. برای مثال درون فایل html، یک تگ <style> باز کرده و به تگ h1 سایز فونت ۲۳ پیکسل می‌دهیم.
حالا یک فایل css جدید را به html اضافه کنیم که در آن تگ h1 باید دارای سایز فونت ۳۰ پیکسل باشد! خب حالا برای تگ h1 دو سایز فونت متفاوت وجود دارد. کدام یک باید بر تگ مدنظر اثر بگذارند؟

پاسخ این سوال همان خاصیت Cascading یا ساختار آبشاری است. CSS برای اجرای کدها الویت‌بندی‌های خاص خود را دارد که بر اساس آن تصمیم می‌گیرد کدام سبک روی تگ اثر بگذارد.

ارتباط CSS و HTML

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

نحوه‌ی اضافه کردن کدهای CSS به فایل HTML

برای اضافه کردن کدهای CSS به سند HTML و سایر کدها، می توان از روش‌های زیر استفاده کرد.

۱- نوشتن inline CSS یا css خطی

در این روش شما با نوشتن کلمه‌ی style داخل هر تگ، می‌توانید کدهای css مد نظر خود را به آن اضافه کنید:

۲- نوشتن CSS در بخش HEAD فایل

همانطور که می‌دانید در HTML یک بخش به نام head قرار دارد که می‌توانید در آن یک تگ <style> قرار داده و شروع به نوشتن css کنید:

۳- نوشتن CSS در فایل خارجی

این روش بهترین راه برای اضافه کردن استایل‌هاست. برای این کار کافیست تمام کدهای CSS را در یک فایل نوشته و با پسوند css. ذخیره نمایید. سپس این فایل را در هر head فایل html خود فراخوانی کنید:

هدف این مقاله صرفاً بررسی مفهوم css بوده و امیدواریم با مطالعه‌ی این مقاله درک کرده باشید که مفهوم CSS چیست؟ در روزهای آینده مقالات بیشتری در این زمینه منتشر خواهیم کرد. همراه ما باشید.

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

8 پاسخ به “CSS چیست و چه کاربردی دارد؟”

  1. Fateme گفت:

    سلام ببخشید
    برای گذراندن دوره‌ی کامل HTML و CSS چقد زمان کافیه؟؟
    جواب سوال هارو ایمیل هم میکنید؟

    • سلام دوست عزیز، معمولاً طول دوره‌‌های آموزشی html و css در رنج ۲۵ تا ۳۵ ساعت هستش. این دیگه به خودتون بستگی داره که بخواین این آموزش‌ها رو یک ماه تمام وقت مشاهده و تمرین کنید یا اینکه در طی چندماه بگذرونید. به زودی این دوره در وب‌سایت قرار داده میشه.

  2. زهرا اخلاقی گفت:

    لینک اموزش های رایگانتون میذارین

  3. marawww گفت:

    میشه راجب روش سوم یکم بیشتر توضیح بدید ؟
    اینکه css رو توی یه فایل جدا بنویسیم متوجه شدم
    ولی اینکه با اون کد ها چطور به HTML اضافه میشه رو متوجه نشدم

    • سلام ابتدا استایل‌ها را در یک فایل جدا قرار بدید و برای فایل یه نام انتخاب کنید برای مثال mystyle.css
      بعد فایل را در یک پوشه کنار فایل HTML قرار بدید. (هر دو در یک پوشه باشن)
      بعد در فایل HTML بخش ابتدایی کد بین دو تگ head همون کد لینک نوشته شده در محتوا رو قرار بدید تا فایل html و css باهم ارتباط بگیرن.

  4. سینا گفت:

    سلام ببخشید این دوره رایگان آموزش htmlوcssکامل هستش یعنی میتوان با استفاده از همین دوره کامل به این دو زبان مسلط شد؟

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

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