سبک‌ها در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 03 آذر 1399

سبک‌ها در HTML از طریق (Cascading Style Sheets (CSS برای قالب‌بندی و تنظیم ظاهر صفحات وب استفاده می‌شوند. این کار به شما امکان می‌دهد تا رنگ، فونت، اندازه، چیدمان و سایر جنبه‌های بصری محتوای وب خود را کنترل کنید.

استفاده از سبک‌ها در HTML

هدف HTML عملکرد است – نه طراحی. برای ایجاد ظاهری منحصر به فرد برای صفحه وب خود ، باید از (Cascading Style Sheets (CSS استفاده کنید. با این حال، برای قرار دادن آن‌ها در صفحه وب خود، باید از برخی عناصر HTML استفاده کنید.

سه روش اساسی برای استفاده از سبک در HTML وجود دارد:

Best for	Added with	Type
یک عنصر واحد	The style attribute	Inline CSS
یک صفحه وب واحد	The <style> tag	Internal CSS
کل وب سایت	The <link> tag	External CSS

1. استفاده از ویژگی style:

این ساده‌ترین روش برای اعمال سبک به یک عنصر HTML خاص است.
برای این کار از تگ <style> در بخش <head> صفحه HTML خود استفاده کنید.
در داخل تگ <style>، جفت‌های کلید-مقدار CSS را برای تعیین سبک‌های مورد نظر خود بنویسید.

مثال:

HTML

<head>
  <style>
    h1 {
      color: red;
      font-size: 24px;
    }
    p {
      font-family: Arial, sans-serif;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>عنوان صفحه</h1>
  <p>این یک پاراگراف است.</p>
</body>

2. استفاده از تگ <style>:

این روش برای اعمال سبک به چندین صفحه HTML در یک وب‌سایت مناسب است.
برای این کار از تگ <style> در بخش <head> هر صفحه HTML استفاده کنید.
در داخل تگ <style>، جفت‌های کلید-مقدار CSS را برای تعیین سبک‌های مورد نظر خود بنویسید.

مثال:

HTML

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    h1 {
      color: blue;
      text-align: center;
    }
  </style>
</head>

3. استفاده از فایل CSS خارجی:

این روش برای اعمال سبک به کل وب‌سایت شما به روشی سازمان‌ یافته و کارآمد مناسب است.
برای این کار یک فایل CSS با پسوند .css ایجاد کنید.
در این فایل، جفت‌های کلید-مقدار CSS را برای تعیین سبک‌های مورد نظر خود بنویسید.
سپس، در بخش <head> هر صفحه HTML، از تگ <link> برای پیوند دادن به فایل CSS خارجی استفاده کنید.

مثال:

HTML

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}
h1 {
  color: blue;
  text-align: center;
}

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>عنوان صفحه</h1>
  <p>این یک پاراگراف است.</p>
</body>

نکات مهم:

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

نکات مفید سبک HTML

هنگام استفاده از مشخصه سبک HTML می توانید همزمان چندین ویژگی یک ظاهر طراحی را اضافه کنید – فقط اطمینان حاصل کنید که جفت های مقدار-اسم را با کاما جدا کنید.
استفاده از یک صفحه سبک جداگانه برای یک ظاهر طراحی چند صفحه بسیار راحت است، زیرا اعمال تغییرات در یک سند از هر صفحه به طور جداگانه آسان‌تر است.

نکات مفید سبک HTML برای نوشتن کد تمیز و کارآمد

1. ساختار سندی:

از تگ‌های HTML به درستی و با نظم منطقی استفاده کنید.
کد خود را با به کارگیری عناوین (h1, h2, h3, …)، پاراگراف‌ها (<p>)، فهرست‌ها (<ul>, <ol>) و جدول‌ها (<table>) ساختار دهید.
از کامنت‌ها برای توضیح بخش‌های مختلف کد خود استفاده کنید.

2. سبک‌دهی با CSS:

از CSS برای جدا کردن محتوا از ظاهر استفاده کنید.
از تگ <style> در بخش <head> برای اعمال سبک‌های درون خطی به عناصر خاص استفاده کنید.
برای اعمال سبک به کل صفحه یا وب‌سایت، از یک فایل CSS خارجی استفاده کنید.
از selectorهای CSS به طور موثر برای هدف قرار دادن عناصر خاص در صفحه خود استفاده کنید.
از خواص CSS برای تعیین رنگ، فونت، اندازه، حاشیه، فاصله‌گذاری و سایر جنبه‌های بصری عناصر خود استفاده کنید.

3. خوانایی کد:

از فضاهای سفید و تب‌ها برای indentation کد خود به طور منظم استفاده کنید.
نام‌های کلاس و شناسه‌های معنادار و توصیفی انتخاب کنید.
کد خود را به بخش‌های کوچک و قابل مدیریت تقسیم کنید.
از نظرات برای توضیح عملکرد کد خود و هدف هر بخش استفاده کنید.

4. اعتبارسنجی:

همیشه کد HTML و CSS خود را با استفاده از ابزارهای آنلاین اعتبارسنجی مانند W3C Validator یا CSS Validator اعتبارسنجی کنید.
این ابزارها به شما کمک می‌کنند تا خطاها و اشکالاتی را که ممکن است در کد شما وجود داشته باشد، شناسایی و رفع کنید.

5. ابزارها و منابع:

از ابزارهای ویرایش کد مانند Visual Studio Code, Sublime Text یا Atom برای نوشتن و ویرایش کد HTML و CSS خود استفاده کنید.
از منابع آنلاین مانند W3Schools , MDN Web Docs و CSS Tricks برای یادگیری بیشتر در مورد HTML و CSS استفاده کنید.

6. تمرین و صبر:

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

با رعایت این نکات، می‌توانید کد HTML و CSS خود را به گونه‌ای بنویسید که خوانا، قابل نگهداری و سازگار با مرورگرهای مختلف باشد.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊