آموزش سه روش اضافه کردن 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
 

به هرکدام از این ویژگی هایی که در 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
 

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

 

<!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
 

تا به اینجا 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 را به فایل .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>
طراحی وب با html css
 

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

 

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

طراحی وب سایت با html css
 

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

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

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

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.