CSS ساخت فایل
برای استفاده از css در html سه حالت وجود دارد:
- (internal) استفاده از فایل css درون فایل html
- (external) استفاده از فایل css به صورت یک فایل خارجی
- (inline) استفاده از تنظیمات css درون کدهای html
به صورت یک فایل خارجی CSS استفاده از فایل
میتوان یک فایل با فرمت css. ساخت و داخل آن تنظیمات مورد نظر را وارد کرد.
به عنوان مثال ساخت فایل mystyle.css:
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }درنهایت باید در فایل های html برحسب نیاز فایل css ساخته شده را فراخوانی کرد. البته میتوان چندین فایل css با تنظیمات مختلف ایجاد کرد و درون فایل های html فایل css مناسب را فراخوانی کنیم.
نمونه ای از فراخوانی فایل css داخل فایل html:
<html> <head> <link rel=“stylesheet” href=“mystyle.css”> </head> <body>
<h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>HTML درون فایل CSS استفاده از فایل
برای استفاده از فایل css داخل فایل html تنها کافیست ابتدای فایل html درون تگ style تنظیمات مدنظرمان را وارد کنیم. سپس بعد از تگ style شروع به نوشتن کدهای html کنیم، در این حالت کدهای html درون همان صفحه به صورت خودکار از استایل تعریف شده در ابتدای فایل تبعیت میکنند. نمونه ای درمورد استفاده از تنظیمات css درون فایل html را میبینیم:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML در فایل CSS استفاده از تنظیمات
برای استفاده از تنظیمات css درون کدهای html دیگر نیازی به ساخت فایل css نیست تنها کافیست تنظیمات مدنظرمان برای هر تگ را درون همان تگ وارد کنیم. مثال پیش رو نمونه ای از استفاده از کدهای css درون تگ های html است:
<!DOCTYPE html>
<html>
<body>
<h1 style=”color:blue;text-align:center;”>This is a heading</h1>
<p style=”color:red;”>This is a paragraph.</p>
</body>
</html> - لازم به ذکر است که اگر برای یک عنصر با حالت های مختلف تنظیمات مختلف تعریف شود تنظیمات مربوط به آخرین مورد اعمال خواهد شد. به عنوان مثال اگر یک فایل css خارجی داشته باشیم و درون آن تنظیمات به این صورت باشد:
h1 {
color: navy;
}
درعین حال یک فایل css داخلی ایجاد کنیم و تنظیمات متفاوتی برای h1 در آن درنظر بگیریم:
h1 {
color: orange;
}
اگر فایل داخلی بعد از فایل خارجی فراخوانی شود تنظیمات فایل داخلی اعمال خواهد شد مثلا در نمونه پیش رو رنگ h1 نارنجی خواهد بود.
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
<style>
h1 {
color: orange;
}
</style>
</head>- اما در هر حالت استفاده از تنظیمات css درون کدهای html یا همان حالت inline بالاترین اولویت را نسبت به دو حالت دیگر دارد.