اتصال فایل html به فایل css

در این آموزش چگونگی استفاده از CSS جهت کنترل style و layout چند صفحه بطور همزمان را فرا خواهید گرفت. برای این منظور شما باید درکی از مفاهیم HTML و XHTML داشته باشید چرا که پیش نیاز آموزش سی اس  اس میباشند.
صفحات HTML را می‌توان با style های مختلف در معرض نمایش قرار داد. style ها نحوه نمایش عناصر HTML را مشخص می‌کنند و بسیاری از مشکلات اساسی در سازماندهی عناصر اچ تی ام ال را برطرف کرده‌اند.
لازم به ذکر است که لینک به فایل css در بخش head از سند HTML (خط 3) قرار می‌گیرد. برای ایجاد دسترسی یک سند HTML به فایل css به روش زیر اقدام می‌کنیم:

  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="ex1.css" />
  4. </head>
  5. <body>
  6. <h1> This is a heading</h1>
  7. <p>This paragraph has a left margin of 50 pixels</p>
  8. </body>
  9. </html>

همانطور که در خط 3 مشاهده می‌کنید از تگ link برای اتصال فایل  CSS به HTML استفاده شده است. متغییر rel را برابر با stylesheet و متغییر type را برابر با text/css و در متغییر href آدرس فایل مورد نظرتان را قرار دهید. در مثال بالا اسم فایل CSS برابر با ex1 می‌باشد که فایل ex1 با پسوند CSS. ذخیره شده است.

اتصال فایل CSS به فایل HTML

حال به تعریف یک استایل کلی میپردازیم. فایل ex1.css را باز کرده و کد های زیر را داخل آن وارد می‌کنیم.
برای این منظور نام آن بخش یا عنصری که می‌خواهیم دارای خاصیت یا ویژگی خاصی باشد را نوشته و درون کروشه، ویژگی‌ها را اضافه می‌کنیم. برای فهم بهتر از چند مثال استفاده می‌کنیم:

مثال 1:

body{

background-color:red;

}

در این مثال رنگ پس زمینه‌ی قرمز می‌شود. توجه داشته باشید که حتما پس از نوشتن background-color:red از ";" استفاده کنید.

مثال 2:

p{

font-size:24pt;

color:green;

}

کد سی اس اس برای تغییر رنگ پس زمینه و تغییر سایز و رنگ متوندر این مثال سایز تمام متونی که داخل تگ P قرار گرفته‌اند 24 و رنگ نوشتاری آن‌ها سبز می‌باشد.
برای تعریف یک یا چند خاصیت کلی برای هر عنصر دلخواه به روش بالا عمل می‌کنیم. تصویر زیر خروجی کدهای بالا را در مرورگر نشان می‌دهد.

تغییر رنگ پس زمینه به کمک CSS

 

نویسنده : محمدهادی شریف  تاریخ : 07 / 11 / 97

مقالات مرتبط