استفاده از CSS در HTML

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

CSS مخفف عبارت Cascading Style Sheet به معنی الگوهای آبشاری می باشد.

CSS نحوه نمایش عناصر HTML را روی صفحه کامپیوتر، کاغذ یا دیگر رسانه ها مشخص می کند.

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

همچنین CSS به یکی از سه روش زیر می تواند به عناصر HTML اضافه شود:

Inline یا در خط - با استفاده از صفت style به طور مستقیم برای عناصر HTML استفاده شود.
Internal یا داخلی - با استفاده از عنصر <style> در بخش <head>
External یا خارجی - در این روش می توان با استفاده از یک فایل خارجی CSS عناصر HTML را استایل دهی کرد.

رایج ترین روش برای اضافه کردن CSS به عناصر HTML استفاده از روش External است. با این حال ما در این آموزش ها برای Style دهی به عناصر HTML از روش های Inline و Internal استفاده می کنیم به این دلیل که استفاده از این روش ها راحت تر است و آموزش های ما را برای شما قابل فهم تر میکند.

نکته: در این فصل ما تنها به آموزش برخی از مفاهیم پایه ای CSS پرداخته ایم، اما در آینده آموزش کامل CSS در دوره آموزشی مربوط به آن قرار خواهد گرفت.

روش Inline

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

در روش Inline ما با استفاده از صفت style ویژگی مد نظرمان را بر روی عنصر مورد نظر اعمال می کنیم.

در مثال زیر با استفاده از این روش رنگ متن عنصر <h1> را به آبی تغییر داده ایم:

مثال

<h1 style="color:blue;">This is a Blue Heading</h1>

خودتان امتحان کنید »

روش Internal

از روش Internal برای دادن استایلی به یک صفحه مشخص HTML استفاده می شود.

در روش Internal کد های CSS در بخش <head> از صفحه ی HTML و در داخل عنصر <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>

خودتان امتحان کنید »

روش External

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

در این روش به این دلیل که ما از یک فایل خارجی برای استایل دهی به تمام صفحات وب سایت استفاده می کنیم با تغییر کدهای تنها همین یک فایل می توانیم شاهد تغییر ظاهر همه ی صفحات وب سایت باشیم.

برای استفاده از روش External، ابتدا باید یک فایل با پسوند CSS. ایجاد کنید و سپس لینک این فایل را به صورت زیر در داخل بخش <head> از سند HTML تان قرار دهید:

مثال

<!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>

خودتان امتحان کنید »

صفحه ی External که حاوی کدهای CSS است، می تواند توسط هر ویرایشگر متنی نوشته شود. این فایل نباید حاوی هیچ کد HTML ای باشد و همچنین باید با پسوند CSS. ذخیره شود.

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

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

فونت ها در CSS

ویژگی color در CSS رنگ متن مورد استفاده را مشخص می کند.

ویژگی font-family در CSS فونت متن مورد استفاده را مشخص می کند.

ویژگی font-size در CSS اندازه متن مورد استفاده را مشخص می کند.

مثال

<!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>

خودتان امتحان کنید »