آموزش اضافه کردن کد CSS به HTML

Ratings
(0)

وقتی که یک مرورگر، یک برگه ی استایل(style sheet) را قرائت می کند، سند HTML را، بر اساس اطلاعات درون این برگه ی استایل، فرمت دهی می کند.

 سه راه برای اضافه کردن کدهای CSS در HTML

برای اضافه کردن یک برگه ی استایل(style sheet) سه راه وجود دارد:

  1. روش خارجی(اکسترنال)
  2. روش داخلی(اینترنال)
  3. روش درون خطی(اینلاین)

کدهای CSS اکسترنال

با استفاده از یک برگه ی استایل اکسترنال، می توانیم ظاهر کل یک سایت را، تنها با تغییر یک فایل، تغییر دهیم. در این روش، هر صفحه ی HTML باید حاوی یک ارجاع به یک فایلِ برگه ی استایل اکسترنال، درون عنصر <link> در بخش <head> از سایت باشد.

مثال شماره 1

استایل های اکسترنال، درون عنصر <link>  که در بخش <head> از صفحه ی HTML اضافه می شود، تعریف می شوند:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/other/mystyle2.css">
</head>
<body>

<h1>این یک عنوان است</h1>
<p>.این یک پاراگراف است</p>

</body>
</html>
امتحان کنید

برگه های استایل اکسترنال را می توانیم در هر ادیتور متنی بنویسیم و آنها را باید با پسوند css. ذخیره کنیم. فایل css. اکسترنال، نباید حاوی هیچ کد HTML ای باشد. فایل mystyle2.css (در کد بالا) به صورت زیر است:

مثال

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

نکته: بین مقدار ویژگی (20) و واحد آن (px) هیچ فاصله ی سفیدی قرار ندهید:
اشتباه: margin-left: 20 px;
صحیح: margin-left: 20px;

 کدهای CSS داخلی(اینترنال)

با استفاده از کدهای CSS داخلی، می توانیم استایل هایی را مستقیماً در داخل یک سند HTML تعریف کنیم. استایل های داخلی(اینترنال) در داخل عنصر <style> در بخش <head> از سند قرار می گیرند.

مثال شماره 2

کدهای CSS داخلی، در داخل عنصر <style> که در داخل بخش <head> از صفحه ی HTML باشد، قرار می گیرند:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است</p>

</body>
</html>
امتحان کنید
 
کدهای CSS درون خطی(اینلاین)

از یک استایل درون خطی(اینلاین) می توان برای اعمال یک استایل یکتا برای یک عنصر تکی استفاده کرد. برای استفاده از استایل های درون خطی، از خصوصیت style در عنصر مورد نظر استفاده کنید. خصوصیت style می تواند حاوی هر ویژگی CSS باشد.

مثال شماره 3

استایل های درون خطی، در داخل خصوصیت style در عنصر مورد نظر قرار می گیرند:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">این یک عنوان است</h1>
<p style="color:red;">این یک پاراگراف است</p>

</body>
</html>
امتحان کنید

نکته: اگر از یک استایل درون خطی استفاده کنیم، (با مخلوط شدن محتوا با کد CSS)بسیاری از مزیت های برگه های استایل(style sheet) از دست می روند. سعی کنید از این روش کمتر استفاده کنید.

استفاده از چند برگه ی استایل(Style Sheet)

اگر برای یک سلکتور(عنصر) در برگه های استایل مختلف، چند ویژگی ها(properties) تعریف شده باشد، آنگاه مقدار آخرین برگه ی استایل قرائت شده، (برای آن عنصر) مورد استفاده قرار می گیرد.

مثال

فرض کنید که یک برگه ی استایل اکسترنال، از استایل زیر، برای عنصر <h1> استفاده می کند:

h1 {
  color: navy;
}

مثال

سپس، فرض کنید که یک برگه ی استایل داخلی(اینترنال) نیز از استایل زیر برای عنصر <h1> استفاده می کند:

h1 {
  color: orange;   
}

مثال

اگر استایل داخلی(اینترنال) پس از لینک به برگه ی استایل اکسترنال قرار گیرد، رنگ عناصر <h1> برابر با نارنجی یا orange می شوند:

<head>
<link rel="stylesheet" type="text/css" href="/other/mystyle3.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
امتحان کنید

مثال

اما، اگر استایل داخلی(اینترنال) قبل از لینک به برگه ی استایل اکسترنال قرار گیرد، رنگ عناصر <h1> برابر با آبی کم رنگ یا navy می گردد:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="/other/mystyle3.css">
</head>
امتحان کنید
در مثال های بالا، علامت اسلش که در خصوصیت href قبل از کلمه ی other قرار گرفته است، اشتباه و اضافی است و نباید آن را به حساب بیاورید. سیستم ما به طور خودکار آن را ایجاد کرده است. اما اگر در داخل دکمه ی خودتان امتحان کنید وارد شوید، کدها درست هستند.
 

ترتیب آبشاری(Cascading Order)

وقتی که بیش از یک استایل برای یک عنصر HTML مشخص شود، از کدام استایل استفاده خواهد شد؟

تمام استایل های درون یک صفحه، با استفاده از قواعد زیر، در داخل یک برگه ی استایل مجازی قرار می گیرند، به طوری که اولین قاعده، از بیشترین اولویت برخوردار است:

  1. استایل های درون خطی یا اینلاین(که درون یک عنصر HTML قرار می گیرند).
  2. برگه های استایل اکسترنال یا داخلی(اینترنال) (که در بخش head قرار می گیرند).
  3. استایل های پیش فرض مرورگر(Browser default).

بنابراین، یک استایل درون خطی(اینلاین) از بیشترین اولویت برخوردار است و بر روی استایل های اکسترنال و داخلی(اینترنال) و استایل های پیش فرض مرورگر، رونویسی می شود. برای مشاهده ی یک مثال از ترتیب آبشاری، اینجا کلیک کنید.

 

  • بازدید: 241

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال