استایل‌ها - CSS
استایل دهی با CSS
CSS (سرواژه: Cascading Style Sheets) یه معنای برگه‌های استایل آبشاری است.[۱]
CSS نحوهٔ نمایش عنصرهای HTML در صفحه نمایش، کاغذ یا رسانه‌های دیگر را توصیف می‌کند.
CSS می‌تواند کارهای زیادی را ذخیره کند. می‌تواند چیدمان چند صفحه وب را بطور همزمان کنترل کند.
CSS را می‌توان به سه روش به عناصر HTML اضافه کرد:
- درون خطی (به انگلیسی: Inline) - با استفاده از ویژگی‌های عناصر 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> یک صفحه HTML داخل عنصر <style> مشخص می‌شود:
مثال
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 body {background-color: powderblue;}
6 h1 {color: blue;}
7 p {color: red;}
8 </style>
9 </head>
10 <body>
11
12 <h1>This is a heading</h1>
13 <p>This is a paragraph.</p>
14
15 </body>
16 </html>
CSS خارجی
یک صفحه استایل (Style Sheet) خارجی برای تعریف استایل برای چند صفحه HTML استفاده می‌شود.
با یک صفحه استایل خارجی، می‌توانید با تغییر یک فایل، ظاهر کل وبسایت را تغییر دهید!
برای استفاده از صفحه استایل خارجی، لینک آن را در بخش <head> صفحه HTML اضافه کنید:
مثال
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link rel="stylesheet" href="styles.css">
5 </head>
6 <body>
7
8 <h1>This is a heading</h1>
9 <p>This is a paragraph.</p>
10
11 </body>
12 </html>
صفحه استایل استاندارد را می‌توان در هر ویرایشگر متنی نوشت. فایل نباید حاوی هرگونه کد HTML باشد و باید با پسوند .css ذخیره شود.
در اینجا می‌توانید فایل “styles.css” را مشاهده کنید:
1 body {
2 background-color: powderblue;
3 }
4 h1 {
5 color: blue;
6 }
7 p {
8 color: red;
9 }
قلم ها در CSS
خصوصیت color رنگ متن مورد استفاده را مشخص می‌کند.
خصوصیت font-family قلم مورد استفاده را مشخص می‌کند.
خصوصیت font-size اندازه متن مورد استفاده را مشخص می‌کند.
مثال
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 h1 {
6 color: blue;
7 font-family: verdana;
8 font-size: 300%;
9 }
10 p {
11 color: red;
12 font-family: courier;
13 font-size: 160%;
14 }
15 </style>
16 </head>
17 <body>
18
19 <h1>This is a heading</h1>
20 <p>This is a paragraph.</p>
21
22 </body>
23 </html>
کادر CSS
خصوصیت border کادری در اطراف عنصر HTML را مشخص می‌کند:
مثال
1 p {
2 border: 1px solid powderblue;
3 }
Padding (به فارسی: حاشیه) درونی CSS
خصوصیت padding یک حاشیه درونی (فاصله) بین متن و کادر ایجاد می‌کند:
مثال
1 p {
2 border: 1px solid powderblue;
3 padding: 30px;
4 }
Margin (به فارسی: حاشیه) CSS
خصوصیت margin یک حاشیه (فاصله) خارج از کادر را مشخص می‌کند:
مثال
1 p {
2 border: 1px solid powderblue;
3 margin: 50px;
4 }
ویژگی id (به فارسی: شناسه)
برای ایجاد استایل خاص برای یک عنصر خاص، یک ویژگی id به عنصر اضافه کنید:
<p id="p01">I am different</p>
سپس با id تعیین شده استایلی برای آن عنصر تعریف کنید:
مثال
1 #p01 {
2 color: blue;
3 }
توجه: شناسه یک عنصر باید در داخل صفحه یکتا باشد، تا انتخابگر شناسه (به انگلیسی: id Selector) بتواند یک عنصر واحد را شناسایی کند!
ویژگی کلاس
به‌منظور تعریف استایل برای انواع مختلف عنصرها، ویژگی class را به عنصر اضافه کنید:
<p class="error">I am different</p>
سپس با استفاده از کلاس تعیین شده برای عناصر استایل مشخص کنید:
مثال
1 p.error {
2 color: red;
3 }
مرجع های خارجی
برگه‌های استایل خارجی را می‌توان با URL کامل یا با مسیر مربوط به صفحه وب فعلی ارجاع زد.
این مثال از URL کامل برای ایجاد لینک به برگه استایل استفاده می‌کند:
مثال
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
این مثال به برگه استایلی که در یک فولدر html در وبسایت فعلی قرار دارد، لینک می‌زند:
مثال
<link rel="stylesheet" href="/html/styles.css">
این مثال به برگه استایلی که در همان فولدر صفحه فعلی قرار گرفته، لینک می‌زند:
مثال
<link rel="stylesheet" href="styles.css">
شما می‌توانید در مورد مسیرهای فایل در بخش مسیرهای فایل HTML بیشتر مطالعه کنید.
خلاصه بخش
- از ویژگی
styleدر HTML برای استایل دهی درون خطی استفاده می‌شود
- از عنصر
<style>در HTML برای تعریف CSS داخلی استفاده می‌شود
- از عنصر
<link>در HTML برای ارجاع به یک فایل CSS خارجی استفاده می‌شود
- از ویژگی
<head>در HTML برای ذخیره عناصر <link> و <style> استفاده می‌شود
- از ویژگی
colorدر CSS برای رنگ‌های متن استفاده می‌شود
- از ویژگی
font-familyدر CSS برای نوع قلم‌های متن استفاده می‌شود
- از ویژگی
font-sizeدر CSS برای اندازه‌های متن استفاده می‌شود
- از ویژگی
borderدر CSS برای کادرها استفاده می‌شود
- از ویژگی
paddingدر CSS برای ایجاد فاصله داخل کادر استفاده می‌شود
- از ویژگی
marginدر CSS برای ایجاد فاصله خارج از کادر استفاده می‌شود
تمرین های HTML
تگ های استایل HTML
| تگ | تعریف |
|---|---|
| <style> | اطلاعات مربوط به استایل یک سند HTML را مشخص می‌کند |
| <link> | لینک بین یک سند و منبع خارجی را نعریف می‌کند |
منابع آموزشی