سوال در مورد تمرین

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

امکان داره هر سه حالت رو با هم داشت؟ inline که اولویت بالاتری داره مشکلی نداره

ولی برای داشتن internal , external باید چی کار کرد؟

چند حالت رو امتحان کردم در هر صورت اولویت با internal بود

<!DOCTYPE html>

<head>

</head>

<body>

<h1 style="color : green; ">Hello, World! inline</h1>

<h1>Hello, World! internal</h1>

<h1>Hello, World! external</h1>

</body>

</html>

فایل css

h1{

color:rgb(255, 17, 0); }

سلام.

در مورد کد هایی که خودتون نوشتید من متوجه نشدم چون قسمت 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>

همایون ۱۲ مهر ۱۴۰۰، ۱۲:۰۷

کلا inline برای سئو و سرعت و تمیزی توصیه نمی‌شه مگر در موارد خاص..’

بهترین پاسخ

وحید صالحی ۱۲ مهر ۱۴۰۰، ۱۴:۱۷