آموزش حق تقدم در 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 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 حق تقدم داشت.
حال بیاید از 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 internal و css external یکی است. فقط بستگی دارد که css internal خود را قبل از تگ link بنویسید یا بعد از آن. اگر قبل از تگ link بنویسید، در نهایت چیزی که در css external است اجرا میشود.
برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.
