آموزش HTML – استایلینگ(CSS)

CSS یک زبان Style Sheet (به فارسی “زبان شیوه نامه”) است که با استفاده از این زبان میشه ظاهر یک صفحه وب رو تعریف کرد که باید به چه شکلی باشه. حالا CSS همه جا وجود داره! رنگ بندی صفحات وب و چیدمان اونها، رنگ و اندازه فونت ها و … همه با CSS انجام میشه.

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

استایل بندی HTML با CSS

CSS همزمان با HTML 4 معرفی شد تا راه بهتری برای استایل بندی HTML وجود داشته باشه.

برای استفاده از CSS در HTML چند را وجود داره:

  • Inline(درون خطی) – استفاده از مشخصه Style موجود در المنتهای HTML.
  • Internal(داخلی) یا Embedded(جاسازی شده) – استفاده از المنت <Style> در قسمت head صفحه.
  • External(خارجی) – لینک دادن به یک فایل CSS برای بارگذاری در صفحه.

توجه کنید که شما از همه این راهها هم میتونید استفاده کنید و هیچ محدودیتی ندارید.

چه وقت از کدومش استفاده کنم؟

بجز روش اول، از روش دوم و سوم همیشه میتونید استفاده کنید اما چون در روش سوم به یک فایل خارجی لینک میدیم و باعث خوانایی بیشتر کد و تفکیک کدها میشه، این روش رو بهترین روش اضافه کردن CSS به HTML میدونن.

همونطور که گفتم روش سوم به فایل خارجی لینک میدیم اما یه وقتایی هم هست که دوست داریم همه کدها رو بصورت یکجا داشته باشیم در این مواقه روش دوم استفاده میشه.

اما روش اول چه مشکلی داره؟

روش اول فقط یکبار میتونه استفاده بشه چون مستقیما داخل المنت مورد نظر قرار میگیره  و فقط استایل همون المنت رو تغییر میده و نمیتونه روی بقیه المتها تاثیر بذاره پس نمیتونه بجای روشهای دوم و سوم استفاده بشه. معمولا از این روش برای باز نویسی یا Override کردن یک یا چند Property(ویژگی،خاصیت) CSS که قبلا برای المنت تعریف شده استفاده میشه. اما محدودیت های دیگه ای هم داره مثلا در این روش شما نمیتونید از Selector های CSS  استفاده کنید.

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

ادامه