فرض کنید یک صفحه وب با استفاده از کدهای ساده 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 برای ارائه برخی قالب های ظاهری به کد خود استفاده کرده ایم.
خروجی
سه روش اعمال کد 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>
خروجی
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 |
