به دلیل حجم بالای مطالب و زمان بر بودن دسته بندی و ترجمه آن ها، بخش هایی از سایت به صورت موقت غیر فعال است.

W3Persian.com

معادل فارسی وب سایت W3Schools.com، تقدیم به فارسی زبانان جهان!

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

سبک های CSS در HTML


طراحی ظاهری HTML به وسیله CSS

CSS مخفف کلمات Cascading Style Sheets و به معنای شیوه‌نامهٔ آبشاری می باشد.
CSS مشخص می کند که عناصر HTML چگونه روی صفحه نمایش، پیج ها یا سایر رسانه ها نمایش داده می شود.
CSS کارهای زیادی را ذخیره می کند. این می تواند طرح صفحات وب چندگانه را در یک زمان کنترل کند.
CSS را می توان به 3 روش به عناصر HTML نسبت داد:
  • Inline (درون خطی) - با استفاده از ویژگی style در عناصر HTML
  • Internal (داخلی) - با استفاده از عنصر <style> در تگ <head>
  • External (خارجی) - با استفاده از یک فایل CSS خارجی
شایع ترین روش اضافه کردن CSS این است که سبک ها را در فایل های CSS جداگانه نگه دارید. با این حال، در اینجا ما از یک ظاهر طراحی دروخ خطی و داخلی استفاده خواهیم کرد، زیرا این امر ساده تر است و برای شما راحت تر است که آن را امتحان کنید.
نکته: در بخش یادگیری CSS می توانید چیز های بیشتری درباره CSS بیاموزید.

CSS درون خطی

CSS درون خطی برای اعمال یک سبک منحصر به فرد به یک عنصر HTML استفاده می شود.
یک CSS درون خطی برای یک عنصر HTML مورد استفاده قرار می گیرد.
در مثال زیر، رنگ متن عنصر <h1> آبی تعریف شده است:

مثال
<h1 style="color:blue;">This is a Blue Heading</h1>خودتان امتحان کنید >

CSS داخلی

CSS داخلی برای تعریف سبک ها برای یک صفحه HTML استفاده می شود.
CSS داخلی در بخش <head> و در تگ <style> تعریف می شود:

مثال
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>خودتان امتحان کنید >

CSS خارجی

یک فایل CSS خارجی را می توان برای سبک دهی به یک یا چند فایل HTML مورد استفاده قرار می گیرد.
با استفاده از فایل CSS خارجی شما می توانید تنها با تغییر در یک فایل CSS کل وب سایت خود را تغییر دهید. برای استفاده از یک فایل CSS خارجی در صفحه HTML باید پیوندی به آن فایل در تگ <head> قرار دهید:

مثال
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>خودتان امتحان کنید >

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

body { background-color: powderblue; } h1 { color: blue; } p { color: red; }

فونت های CSS

خصوصیت color در CSS رنگ متن را تعریف می کند.
خصوصیت font-family نوع فونت را تعریف می کند.
خصوصیت font-size اندازه متن (فونت) را تعریف می کند.

مثال
<!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>خودتان امتحان کنید >

کادر های CSS

خصوصیت border در CSS یک کادر را در اطراف عنصر HTML قرار می دهد:

مثال
p { border: 1px solid powderblue; }خودتان امتحان کنید >

فاصله داخلی در CSS

خصوصیت padding فضایی خالی را بین نوشته و کادر تعریف می کند:

مثال
p { border: 1px solid powderblue; padding: 30px; }خودتان امتحان کنید >

فاصله خارجی در CSS

خصوصیت margin یک فاصله خالی را خارج از کادر تعریف می کند:

مثال
p { border: 1px solid powderblue; margin: 50px; }خودتان امتحان کنید >

خصیصه id

برای اعمال کد های CSS سفارشی خود برای یک عنصر خاص می توانید خصیصه id را به آن عنصر تخصیص دهید:

<p id="p01">I am different</p>

سپس به صورت زیر کد های سفارشی خود را برای عنصر HTML اعمال کنید:

مثال
#p01 { color: blue; }خودتان امتحان کنید >

نکته: نکته: خصیصه id یک عنصر باید در یک صفحه منحصر به فرد باشد.

خصیصه class

برای تعریف کد های CSS سفارشی برای یک نوع خاص از عناصر، یک ویژگی class به عنصر اضافه کنید:

<p class="error">I am different</p>

سپس به صورت زیر کد های سفارشی خود را برای عنصر HTML اعمال کنید:

مثال
p.error { color: red; }خودتان امتحان کنید >

منابع خارجی

صفحات سبک خارجی را می توان با یک آدرس کامل یا با مسیری نسبت به صفحه وب فعلی ارجاع داد.
این مثال از یک آدرس کامل برای پیوند به یک صفحه سبک استفاده می کند:

مثال
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">خودتان امتحان کنید >

این مثال به یک صفحه سبک در html در وب سایت فعلی پیوند دارد:

مثال
<link rel="stylesheet" href="/html/styles.css">خودتان امتحان کنید >

این مثال به یک صفحه سبک در فولدری اشاره دارد که فایل HTML نیز در همان فولدر است:

مثال
<link rel="stylesheet" href="styles.css">خودتان امتحان کنید >

شما می توانید اطلاعات بیشتری را درباره مسیر های فایل در مسیر های فایل در HTML به دست آورید.

خلاصه فصل

  • استفاده از خصیصه style در تگ HTML برای تعریف CSS درون خطی.
  • استفاده از تگ <style> در HTML برای تعریف CSS داخلی.
  • استفاده از عنصر <link> برای اتصال به یک فایل CSS خارجی.
  • عناصر <link> و <style> را در تگ <head> تعریف کیند.
  • استفاده از ویژگیcolor برای تعیین رنگ عناصر HTML.
  • استفاده از ویژگی font-family برای تعیین نوع فونت عناصر HTML.
  • استفاده از ویژگی font-size برای تعیین اندازه فونت عناصر HTML.
  • استفاده از ویژگی border برای کادر بندی عناصر HTML.
  • استفاده از ویژگی padding برای فضای خالی بین نوشته و کادر.
  • استفاده از ویژگی margin برای تعریف فاصله خالی در خارج از کادر.

با تمرینات خودتان را امتحان کنید!

تمرین 1 تمرین 2 تمرین 3 تمرین 4 تمرین 5 تمرین 6

تگ های سبک در HTML

تگ توضیحات
<style> تعریف کد های CSS برای یک سند HTML
<link> تعریف یک لینک برای اتصال سند HTML به یک منبع خارجی