3 سال پیش / خواندن دقیقه

آموزش سبک دهی HTML با استفاده از CSS +مثالهای کاربردی

فرض کنید یک صفحه وب با استفاده از کدهای ساده HTML ایجاد کرده ایم و چیزی می خواهیم تا بتوانیم صفحه را با قالب درست و بسیار جذاب ارائه دهیم. برای ساخت چنین صفحه ای، می توانیم صفحه وب خود را با خصوصیات CSS ( شیوه‌نامه‌ آبشاری با Cascading Stylesheet) سبک دهی یا قالب بندی کنیم.

CSS برای اعمال سبک یا استایل به صفحه وب ساخته شده از عناصر HTML استفاده می شود.
CSS ظاهر صفحه را توصیف می کند.
CSS ویژگی های ظاهری مختلفی ارائه می دهد؛ مانند رنگ پس زمینه، فاصله تا حاشیه، حاشیه، رنگ حاشیه و بسیاری موارد دیگر برای سبک دهی یک صفحه وب.
هر صفت در CSS دارای یک جفت نام- مقدار است و هر صفت با علامت سیمی کالون (;) جدا می شود.

در این بخش، به طور مختصری درباره CSS توضیح می دهیم.

مثال

<body style=”text-align: center;”>
      <h2 style=”color: red;”>Welcome to javaTpoint</h2>
      <p style=”color: blue; font-size: ۲۵px; font-style: italic ;”>This is a great website to learn technologies in very simple way. </p>
</body>

در مثال بالا، از صفت style برای ارائه برخی قالب های ظاهری به کد خود استفاده کرده ایم.

خروجی

آموزش سبک دهی HTML با استفاده از CSS +مثالهای کاربردی

سه روش اعمال کد CSS

برای استفاده از کدهای CSS در سند HTML، سه راه وجود دارد:

CSS خطی: با استفاده از صفت style در عناصر HTML، ویژگی های CSS را تعریف کنید.
CSS داخلی یا جاسازی شده: تگ <style> را در عنصر <head> تعریف کنید.
CSS خارجی: تمام ویژگی های CSS را در یک سند جداگانه با پسوند css. تعریف کرده و سپس با استفاده از تگ link آن را در سند HTML وارد کنید.

CSS خطی

CSS خطی برای اعمال ویژگی های CSS در یک عنصر استفاده می شود. می تواند به هر عنصر به صورت منحصر به فرد اعمال شود.

برای اعمال کدهای CSS درون خطی، باید از صفت style در تگ شروع استفاده کنید. تعداد ویژگی های مورد استفاده محدودیتی ندارد اما هر یک از ویژگی ها باید با علامت سیمی کالون (؛) از یکدیگر جدا شوند.

مثال

<h3 style=”color: red;
            font-style: italic;
            text-align: center;
            font-size: ۵۰px;
            padding-top: ۲۵px;”>Learning HTML using Inline CSS
</h3>

خروجی

آموزش سبک دهی HTML با استفاده از CSS +مثالهای کاربردی

CSS داخلی

ویژگی های CSS داخلی برای صفحه وب در تگ <style> در عنصر <head> تعریف می شوند. برای استفاده از CSS داخلی از صفات class و id در عناصر استفاده می کنیم.

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

نکته: در مثال زیر، از صفت class در تگ شروع استفاده کرده ایم که در قسمت های بعدی توضیح داده می شود.

مثال

<!DOCTYPE html>
<html>
<head>
                  <style>
      /*Internal CSS using element name*/
            body{background-color:lavender;
             text-align: center;}
             h2{font-style: italic;
              font-size: ۳۰px;
              color: #f08080;}
            p{font-size: ۲۰px;}
        /*Internal CSS using class name*/
            .blue{color: blue;}
            .red{color: red;}
            .green{color: green;}
      </style>
    </head>
  <body>
   <h2>Learning HTML with internal CSS</h2>
    <p class=”blue”>This is a blue color paragraph</p>
    <p class=”red”>This is a red color paragraph</p>
    <p class=”green”>This is a green color paragraph</p>
  </body>
</html>

CSS خارجی

CSS خارجی، یک فایل CSS جداگانه است که تنها شامل کدهای سبک همراه با نام کلاس، نام id، نام تگ و … است.

می توانیم فایل CSS خارجی را در هر فایل HTML ای استفاده کرد، فقط کاقیست این فایل را با استفاده از تگ link در فایل HTML وارد کنید.

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

برای اعمال CSS خارجی به دو فایل نیاز داریم:

ابتدا فایل HTML را ایجاد کنید.
یک فایل CSS با پسوند css. ایجاد کنید. ( این فایل فقط حاوی کدهای CSS است.)
فایل CSS را با استفاده از تگ link قرارگرفته در بخش هد به سند HTML پیوند دهید.

مثال

<!DOCTYPE html>
<html>
<head>
    <link rel=”stylesheet” type=”text/css” href=”style.css”>
    </head>
  <body>
   <h2>Learning HTML with External CSS</h2>
    <p class=”blue”>This is a blue color paragraph</p>
    <p class=”red”>This is a red color paragraph</p>
    <p class=”green”>This is a green color paragraph</p>
  </body>
</html>

فایل CSS

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}
.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

ویژگی های رایج CSS

توضیحات	ساختار	اسم صفت
رنگ پس زمینه عنصر را تعریف می کند.	background-color:red;	background-color
رنگ متن (قلم) عنصر را تعیین می کند.	color: light green;	color
فاصله بین محتوای یک عنصر تا حاشیه آن را مشخص می کند.	padding: 20px;	padding
اطراف یک عنصر فاصله ایجاد می کند.	margin: 30px; margin-left:	margin
برای یک عنصر خاص نوع قلم تعریف می کند.	font-family: cursive;	font-family
برای یک عنصر خاص اندازه قلم تعیین می کند.	font-size: 50px;	Font-size
برای تراز کردن متن در موقعیت انتخابی استفاده می شود.	text-align: left;	text-align