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

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

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

 

در جزوه قبل دیدیم که به روش css inline توانستیم style مورد نظر خود را به متن ها اضافه کنیم.

 

<!DOCTYPE html>
<html>
<head>
  <title>first lesson</title>
</head>
<body>
<p style="color: blue; font-size: 200%; background-color: yellow;">1-farkiantech => info@farkiantech.com</p>
<p style="color: white; font-size: 200%; background-color: blue;">2-farkiantech => info@farkiantech.com</p>
</body>
</html>

 

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

 

به هرکدام از این ویژگی هایی که در style خود استفاده میکنیم property میگوییم.

بعضی مواقع به دلیل پیچیدگی سایت و طولانی بودن کد های html نیاز است که CSS خود را جدا از HTML بنویسیم.

CSS internal

برای این نوع اضافه کردن css، کد آن را در المان style و در تگ head اعمال میکنیم.

 

<!DOCTYPE html>
<html>
<head>
  <title>first lesson</title>
  <style type="text/css">
    p{
      color: blue; 
      font-size: 200%; 
      background-color: yellow;
    }
    
  </style>
</head>
<body>
<p>1-farkiantech => info@farkiantech.com</p>

</body>
</html>

 

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

حال تصور کنید یک پاراگراف دیگر هم دارم.

 

<!DOCTYPE html>
<html>
<head>
  <title>first lesson</title>
  <style type="text/css">
    p{
      color: blue; 
      font-size: 200%; 
      background-color: yellow;
    }
    
  </style>
</head>
<body>
<p>1-farkiantech => info@farkiantech.com</p>
<p>i am a student</p>

</body>
</html>

 

میبینید که به هر دو پاراگراف این ویژگی ها اعمال شده است. به این دلیل است که ما در استایل ویژگی ها را برای تگ p تعریف کردیم. پس هر تگ p که در صفحه دیده شود این ویژگی ها را میگیرد.

 

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

تا به اینجا css inline و css internal را یاد گرفتیم.

حال میخواهیم از css external استفاده کنیم. یعنی کل کد های مربوط به css را در یک فایل جدا با پسوند .css ذخیره کنیم.

به صورت زیر:

 

<!DOCTYPE html>
<html>
<head>
  <title>first lesson</title>
</head>
<body>
<p>1-farkiantech => info@farkiantech.com</p>
<p>i am a student</p>

</body>
</html>

 

p{
  color: blue; 
  font-size: 200%; 
  background-color: yellow;
}

 

میبینید که پس از ساخت فایل css و انتقال کد های css از فایل .html به فایل .css هیچ تغییری اعمال نشد.

 

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

 

به این دلیل است که شما هیچ دستوری را ننوشته اید که بتواند فایل .html را به فایل .css متصل کند. برای اتصال این دو بهم دیگر کافیست از تگ link استفاده کنید و آن را در تگ head بنویسید.

سپس href را اسم فایل .css خود قرار داده تا اتصال برقرار شود.

 

<!DOCTYPE html>
<html>
<head>
  <title>first lesson</title>
  <link rel="stylesheet" type="text/css" href="text.css">
</head>
<body>
<p>1-farkiantech => info@farkiantech.com</p>
<p>i am a student</p>

</body>
</html>

 

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

حال به راحتی میتوانیم با فقط یک بار اعمال تغییر، در هر دو تگ p تغییر ایجاد کنیم.

 

p{
  color: white; 
  font-size: 200%; 
  background-color: green;
}

 

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

 

برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.

قسمت قبل آموزش (آشنایی با CSS)

قسمت بعد آموزش (آموزش رنگ ها در css)

 

فاطمه صابری

مطالب مرتبط

دیدگاهها

نظر: