CSS یک زبان Style Sheet (به فارسی “زبان شیوه نامه”) است که با استفاده از این زبان میشه ظاهر یک صفحه وب رو تعریف کرد که باید به چه شکلی باشه. حالا CSS همه جا وجود داره! رنگ بندی صفحات وب و چیدمان اونها، رنگ و اندازه فونت ها و … همه با CSS انجام میشه.
ما الان نمیخوایم CSS درس بدیم و فرض میکنیم که شما تا حدی بلدید، اگر هم بلد نیستید نحوه استفاده از اون رو یاد میگیرید. در این درس فقط میخوایم نحوه استفاده از CSS رو در HTML رو آموزش بدیم.
استایل بندی HTML با CSS
CSS همزمان با HTML 4 معرفی شد تا راه بهتری برای استایل بندی HTML وجود داشته باشه.
برای استفاده از CSS در HTML چند را وجود داره:
- Inline(درون خطی) – استفاده از مشخصه Style موجود در المنتهای HTML.
- Internal(داخلی) یا Embedded(جاسازی شده) – استفاده از المنت <Style> در قسمت head صفحه.
- External(خارجی) – لینک دادن به یک فایل CSS برای بارگذاری در صفحه.
توجه کنید که شما از همه این راهها هم میتونید استفاده کنید و هیچ محدودیتی ندارید.
چه وقت از کدومش استفاده کنم؟
بجز روش اول، از روش دوم و سوم همیشه میتونید استفاده کنید اما چون در روش سوم به یک فایل خارجی لینک میدیم و باعث خوانایی بیشتر کد و تفکیک کدها میشه، این روش رو بهترین روش اضافه کردن CSS به HTML میدونن.
همونطور که گفتم روش سوم به فایل خارجی لینک میدیم اما یه وقتایی هم هست که دوست داریم همه کدها رو بصورت یکجا داشته باشیم در این مواقه روش دوم استفاده میشه.
اما روش اول چه مشکلی داره؟
روش اول فقط یکبار میتونه استفاده بشه چون مستقیما داخل المنت مورد نظر قرار میگیره و فقط استایل همون المنت رو تغییر میده و نمیتونه روی بقیه المتها تاثیر بذاره پس نمیتونه بجای روشهای دوم و سوم استفاده بشه. معمولا از این روش برای باز نویسی یا Override کردن یک یا چند Property(ویژگی،خاصیت) CSS که قبلا برای المنت تعریف شده استفاده میشه. اما محدودیت های دیگه ای هم داره مثلا در این روش شما نمیتونید از Selector های CSS استفاده کنید.
با انواع راههای استفاده CSS آشنا شدید حالا برای یادگیری بهتر از هر کدوم از روش ها براتون مثال میزنم.
چطور از این روش ها استفاده کنم؟
استفاده از روش Inline
<!DOCTYPE html>
<html>
<head>
<title> Test page </title>
<style type="text/css">
#box p{background:yellow;color:black}
</style>
</head>
<body>
<div id="box">
<p>This is a pharagraph</p>
<p style="background:blue;color:white">This is a pharagraph</p>
<p>This is a pharagraph</p>
<p>This is a pharagraph</p>
</div>
</body>
</html>
خروجی:
This is a pharagraph
This is a pharagraph
This is a pharagraph
This is a pharagraph
ما در این کد از دو روش Internal و Inline استفاده کردیم. در روش Internal(لاین 7) گفتیم تمام المنت های <p> که در داخل Box هستند، پس زمینه زرد و رنگ متنشون سیاه باشه اما خواستیم برای یکی از اونها یعنی پاراگراف دوم استثنا قائل بشیم و استایل دیگه ای برای اون تعریف کنیم که این کار رو با استفاده از روش Inline انجام دادیم(لاین 14) و میبینید که رنگ پس زمینه و رنگ متن پاراگراف دوم با بقیه تفاوت داره. البته همین کار رو بدون اینکه از روش Inline استفاده کنیم هم میشه انجام داد.
استفاده از روش Internal
در این روش کدهای CSS در المنت <style> قرار گرفته در قسمت Head صفحه تعریف میشن.
<!DOCTYPE html>
<html>
<head>
<title> Test page </title>
<style type="text/css">
.mybtn {
background: rgb(223, 223, 223);
padding: 5px;
border: 1px solid rgb(158, 158, 158);
}
.mybtn:hover {
background: rgb(36, 201, 29);
color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<button class="mybtn">Click To Download</button>
</body>
</html>
خروجی:
در این مثال ما دو حالت برای دکمه تعریف کردیم یکی درحالت معمولی و بعدی وقتیکه کاربر ماوس رو روی اون نگه داشته که هر کدوم رنگ متفاوتی دارن. اگر دقت کنید در حالت دوم ما از hover: استفاده کردیم که یکی از Selector های CSS هست و اینها رو نمیشه در روش Inline استفاده کرد.
استفاده از روش External
فرق این روش با Internal اینه که در این روش کدها در فایل دیگه ای قرار میگیرن.
برای لینک دادن یا ایجاد رابطه بین صفحه وب و فایل CSS باید از المنت <link> استفاده کنیم.
حالا میخوام دقیقا همون مثال بالا رو براتون با استفاده از این روش بزنم. برای اینکار فایلهای زیر رو با همین محتویات ایجاد کنید و فایل index.html رو باز کنید تا همون نتیجه بالا رو ببینید.
فایل: style.css
.mybtn {
background: rgb(223, 223, 223);
padding: 5px;
border: 1px solid rgb(158, 158, 158);
}
.mybtn:hover {
background: rgb(36, 201, 29);
color: rgb(255, 255, 255);
}
فایل: index.html
<!DOCTYPE html> <html> <head> <title> Test page </title> <link rel="stylesheet" type="text/css" href="tyle.css"> </head> <body> <button class="mybtn">Click To Download</button> </body> </html>