سوال در مورد تمرین
امکان داره هر سه حالت رو با هم داشت؟ inline که اولویت بالاتری داره مشکلی نداره
ولی برای داشتن internal , external باید چی کار کرد؟
چند حالت رو امتحان کردم در هر صورت اولویت با internal بود
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1, initial-scale=1.0">
<title>css </title>
<link rel = "stylesheet" type = "text/css" href = "../style.css">
</head>
<body>
<h1 style="color : green; ">Hello, World! inline</h1>
<!-- ******************************* -->
<style>h1{ color:blue; } </style>
<h1>Hello, World! internal</h1>
<!-- ************************************* -->
<h1>Hello, World! external</h1>
</body>
</html>
فایل css
h1{
color:rgb(255, 17, 0); }
کلا inline برای سئو و سرعت و تمیزی توصیه نمی شه مگر در موارد خاص..’
سلام.
در مورد کد هایی که خودتون نوشتید من متوجه نشدم چون قسمت Inline و External رو مشخص نکردید. به هر حال توضیحاتی در زیر دادم. به کد های زیر دقت کنید متوجه میشید.
در مورد سوالی هم که پرسیدید می تونید هر سه حالت رو با هم در یه سند داشته باشید ولی اولویت اعمال شدن داره.
اولویت در اعمال استایل ها در HTML اول با Inline یا همون خطی هست. که توسط Property Style اعمال میشه.
بین Inline و Internal هر کدوم که پایین تر قرار داشته باشه اولویت با اونه. فرقی نداره که کدوم به اون Element نزدیک تر باشه همیشه اونی اعمال میشه که توی سند پایین تر باشه.
* نکته اضافی اینه که در داخل کد های CSS بین Property های مشابه هم صادقه و اونی اعمال میشه که پایین تر باشه. البته باید به Selector توجه کنید چون که Selector میتونه اولویت اعمال رو تغییر بده مثلا Selector ID نسبت به بقیه در بعضی موارد اولویت داره و فرقی نداره که پایین تر باشه نسبت به بقیه یا بالاتر.
در کد زیر رنگ قرمز(red) اعمال میشه چون به صورت Inline هست و فرقی نداره که Internal و External توی Head باشه یا پایین تر از اون Element در داخل Body به هر حال Inline اعمال میشه.
<!doctype HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML and CSS</title>
<style>
div {
background-color: blue; /* Blue */
}
</style>
<link rel="stylesheet" href="./style.css"> <!-- Green -->
</head>
<body>
<div style="background-color: red">Hello World!</div> <!-- Red -->
</body>
</html>در مورد Internal و External هم فرقی نداره که توی Head باشه یا توی Body. اونی اعمال میشه که پایین تر باشه توی سند. در کد زیر قسمت اول رنگ سبز(green) اعمال میشه و در قسمت دوم هم رنگ سبز. ولی اگر در قسمت دوم External رو بالاتر قرار بدید چون Internal پایین تر قرار میگیره رنگ آبی اعمال میشه.
<!doctype HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML and CSS</title>
<style>
div {
background-color: blue; /* Blue */
}
</style>
<link rel="stylesheet" href="./style.css"> <!-- Green -->
</head>
<body>
<div>Hello World!</div>
</body>
</html><!doctype HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML and CSS</title>
</head>
<body>
<div>Hello World!</div>
<style>
div {
background-color: blue; /* Blue */
}
</style>
<link rel="stylesheet" href="./style.css"><!-- Green -->
</body>
</html>