آموزش حق تقدم در css

آموزش حق تقدم در css

 

در این بخش در نظر دارم حق تقدم در css را آموزش دهم.

برای شروع کار یک فایل .html و .css میسازیم.

 

<!DOCTYPE html>
<html>
<head>
  <title>lesson9</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lesson9.css">
  
</head>
<body>
  <div>
    
      hello world(1)
    
  </div>
</body>
</html>
div{
  background-color: green;
  color: white;
}
حق تقدم در css
 

حال بیاید علاوه بر css external که نوشته ایم، یک css inline هم تعریف کنیم و ببینیم کدام تغییر انجام می­شود.

 

<!DOCTYPE html>
<html>
<head>
  <title>lesson9</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lesson9.css">
  
</head>
<body>
  <div style="background-color: pink; color: black">
    
      hello world(1)
    
  </div>
</body>
</html>

 

با اینکه ما پس زمینه را در css external سبز انتخاب کردیم و در css inline به رنگ صورتی، با این حال css inline حق تقدم داشت.

حق تقدم در html css
 

حال بیاید از class و id هم استفاده کنیم.

 

<!DOCTYPE html>
<html>
<head>
  <title>lesson9</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lesson9.css">
  
</head>
<body>
  <div style="background-color: pink; color: black" id="test" class="test">
    
      hello world(1)
    
  </div>
</body>
</html>

 

div{
  background-color: green;
  color: white;
}

#test{
  background-color: purple;
}

.test{
  background-color: black
}

 

میبینید که تغییری حاصل نشد. پس css inline به class ها و idها هم قدم دارد.

حق تقدم در برنامه نویسی
 

حال css inline را حذف میکنیم

 

<!DOCTYPE html>
<html>
<head>
  <title>lesson9</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lesson9.css">
  
</head>
<body>
  <div id="test" class="test">
    
      hello world(1)
    
  </div>
</body>
</html>

 

میبینید در این حالت css external اجرا میشود ولی از بین class و id ، حق تقدم id بالاتر است.

آموزش حق تقدم در css
 

تقدم برای css internal و css external یکی است. فقط بستگی دارد که css internal خود را قبل از تگ link بنویسید یا بعد از آن. اگر قبل از تگ link بنویسید، در نهایت چیزی که در css external است اجرا می­شود.

 

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

 

 

قسمت قبل آموزش (آموزش textها در css)

قسمت بعد آموزش (آموزش border در CSS)

ارسال دیدگاه

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