استایل‌ها - CSS

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷نقشه‌های تصویری
۱۸تصاویر پس‌زمینه
۱۹عنصر Picture
۲۰جداول
۲۱لیست‌ها
۲۲بلوک‌ها
۲۳کلاس‌ها
۲۴شناسه
۲۵Iframeها
۲۶جاوا اسکریپت
۲۷مسیرهای فایل
۲۸Head
۲۹چیدمان‌ها
۳۰واکنش‌گرا
۳۱کد کامپیوتری
۳۲معنایی‌ها
۳۳موجودیت‌ها
۳۴نماد‌ها
۳۵ایموجی‌ها
۳۶مجموعه کاراکترها
۳۷رمزگذاری URL
۳۸HTML X
۳۹راهنمای استایل
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


استایل دهی با 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> لینک بین یک سند و منبع خارجی را نعریف می‌کند
برای دستیابی به لیست کامل تگ‌های HTML موجود، به مرجع تگ HTML ما مراجعه کنید.


منابع آموزشی