تصور کنیم که ما صفحه وب خود را با استفاده از یک کد HTML ساده ایجاد کرده ایم، و ما می خواهیم چیزی که بتواند صفحه ما را با فرمت صحیح ارائه دهد و به وضوح جذاب باشد. برای انجام این کار، می توانیم صفحه وب خود را با ویژگی های css در(Cascading Stylesheet) طرحی کنیم.
CSS برای اعمال استایل در صفحه وب که از عناصر HTML تشکیل شده است استفاده می شود. این توصیف ظاهر صفحه وب است.
CSS ویژگی های استایل های مختلفی از قبیل رنگ پس زمینه ، حاشیه، رنگ حاشیه و بسیاری موارد دیگر را برای طراحی یک صفحه وب پشتبانی می کند.
هر خاصیت در CSS دارای یک جفت name-value است و هر خاصیت با یک کلمه جدا می شود (؛).
مثال:
<body style="text-align: center;">
<h2 style="color: red;"> به باگتو خوش آمدین</h2>
<p style="color: blue; font-size: 25px; font-style: italic ;">باگتو سایت آموزش برنامه نویسی است</p>
</body> خروجی:
سه روش برای اعمال CSS
برای استفاده از CSS با سند HTML ، سه روش وجود دارد:
Inline CSS: خصوصیات CSS را با استفاده از ویژگی استایل در عناصر HTML تعریف می کنیم .
داخلی یا جاسازی شده CSS : CSS را با استفاده از تگ <style> در بخش <head> تعریفمی کنیم.
External CSS: تمام ویژگی های CSS را در یک پرونده جداگانه .css تعریف می کنیم و سپس با استفاده ازتگ section ، فایل را به پرونده HTML وارد می کنیم.
Inline CSS:
Inline CSS برای اعمال CSS تنها در یک عنصر استفاده می شود. و ویژگی های که نوشته می شود فقط در یک عنصر استفاده می شود.
برای اعمال CSS درون خطی ، باید از عنصرstyle درون عنصر HTML استفاده کنید. ما هر تعداد ویژگی که بخواهیم میتوانیم استفاده کنیم، اما هر یک از ویژگی ها باید با یک سیمیکالن (semicolon) از هم جدا شوند.
مثال:
<body style="text-align: center;">
<h2 style="color: red;"> به باگتو خوش آمدین</h2>
<p style="color: blue; font-size: 25px; font-style: italic ;">باگتو سایت آموزش برنامه نویسی است</p>
</body> خروجی:
CSS داخلی:
در روش اعمال css داخلی تمام ویژگی های CSS برای یک صفحه وب که را در قسمت <head> سند HTMLقرار می دهیم.برای استفاده از CSS داخلی ، می توانیم از خصوصیات کلاس و id هم استفاده کنیم.
برای اعمال style برای یک صفحه HTML می توانیم از CSS داخلی استفاده کنیم.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
/*Internal CSS using element name*/
body{background-color:lavender;
text-align: center;}
h2{font-style: italic;
font-size: 30px;
color: #f08080;}
p{font-size: 20px;}
/*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> خروجی:
CSS خارجی:
CSS خارجی شامل یک پرونده CSS جداگانه است که فقط شامل کد style با استفاده از نام کلاس ، نام id ، نام تگ ، و غیره است.
اگر چندین صفحه HTML برای یک برنامه داشته باشیم و از CSS مشابه استفاده کنیم ، می توانیم از CSS خارجی استفاده کنیم.
برای اعمال CSS خارجی ،به دو فایل احتیاج داریم
ابتدا فایل HTML را ایجاد کنید
با استفاده از پسوند css.، یک فایل CSS ایجاد کرده و آن را ذخیره کنید.
فایل CSS را در پرونده HTML خود با استفاده از تگ در بخش هدر سند HTML پیوند دهید.
مثال: فایل 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 استفاده می شود:
| نام ویژگی | Syntax=روش استفاده | توضیحات |
| background-color | background-color:red; | رنگ پس زمینه آن عنصر را تعریف می کند. |
| color | color: lightgreen; | رنگ متن یک عنصر را تعریف می کند |
| padding | padding: 20px; | فضای بین محتوا و مرز را مشخص می کند. |
| margin | margin: 30px; margin-left: | فضایی را در اطراف یک عنصر ایجاد می کند. |
| font-family | font-family: cursive; | خانواده فونت برای یک عنصر خاص رامشخص میکند |
| Font-size | font-size: 50px; | اندازه یک قلم را برای یک عنصر خاص تعریف می کند. |
| text-align | text-align: left; | برای تراز کردن متن در موقعیت انتخابی استفاده می شود. |
برای افزودن دیدگاه خود، نیاز است ابتدا وارد حساب کاربری‌تان شوید