সিএসএস স্টাইলশিটগুলি কোন ক্রমে ওভাররাইড করে?

157

এইচটিএমএল শিরোনামে, আমি এটি পেয়েছি:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.cssএটি আমার পৃষ্ঠা-নির্দিষ্ট শীট। master.cssব্রাউজারের ডিফল্টগুলিকে ওভাররাইড করতে আমার প্রতিটি প্রকল্পে আমি ব্যবহার করি একটি শীট। এর মধ্যে কোন স্টাইলশিট অগ্রাধিকার নেয়? উদাহরণ: প্রথম শীটে নির্দিষ্ট রয়েছে

body { margin:10px; }

এবং সম্পর্কিত সীমানা, তবে দ্বিতীয়টিতে আমার পুনরায় সেটগুলি রয়েছে

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

সংক্ষেপে, সিএসএসের ক্যাসকেডিং উপাদানটি স্টাইলশিট রেফারেন্সের ক্ষেত্রে যেমন একইসাথে সিএসএস ফাংশনগুলিতে করে তেমন কাজ করে? মানে যে শেষ লাইনটি প্রদর্শিত হয়?

css overriding stylesheet

— ian5v
সূত্র

আমি এখনই বুঝতে পেরেছি এটি ওয়েবমাস্টারদের জন্য আরও উপযুক্ত। এটি পোস্ট করার জন্য আরও ভাল জায়গা আছে?

— ian5v

10

ঠিক এখানে ভাল।

— ব্লেন্ডার

4

body:not(input="button")উপায় দ্বারা একটি বৈধ নির্বাচনকারী নয়। আপনি সম্ভবত এটি বিভক্ত করতে চেয়েছিলেন body, input:not([type="button"])।

— BoltClock

ইহা আকর্ষণীয়. আমি বিশ্বাস করি না যে এর আগে আমি এরকম সিনট্যাক্স দেখেছি। আমি এখনও নতুন, কিন্তু double ডাবল বন্ধনীগুলি আমার কাছে বিদেশী।

— ian5v

এই বন্ধনীগুলি অ্যাট্রিবিউট সিলেক্টারের জন্য: ডেভেলপার.মোজিলা.আর.এন.ইউএস / ডকস / ওয়েবে / সিএসএস / অ্যাট্রিবিউট_সিলিটর @ টপিক: সম্ভবত আপনি স্টাইলশিটের ক্রমটি স্যুইচ করতে চান: আপনার জেনারেলটিকে master.cssপ্রথমে লোড করা উচিত, তারপরে এটি ওভারলোল করার সহজ উপায় আপনার মাস্টার শৈলী styles.css।

— গ্রিলি

163

সিএসএস বিধি ক্যাসকেডিংয়ের নিয়মগুলি জটিল - এগুলি খারাপভাবে প্যারাফ্রেজ করার চেষ্টা করার পরিবর্তে, আমি কেবল আপনাকে স্পষ্টে উল্লেখ করব:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

সংক্ষেপে: আরও সুনির্দিষ্ট নিয়ম আরও সাধারণকে ওভাররাইড করে। কতটি আইডি, শ্রেণি এবং উপাদানগুলির নাম জড়িত রয়েছে সেই সাথে !importantঘোষণাপত্রটি ব্যবহৃত হয়েছিল কিনা তার উপর ভিত্তি করে নির্দিষ্টকরণটি নির্ধারিত হয়। যখন একই "নির্দিষ্টতা স্তর" এর একাধিক নিয়ম উপস্থিত থাকে, যার মধ্যে যে কোনও একটি শেষবারের মতো জয়লাভ করে।

— সন্ধ্যাক
সূত্র

1

তারপরে স্টাইলশিটগুলি কোন অর্ডারে অর্ড হবে সে সম্পর্কে কোনও নির্দিষ্ট বিধি নেই? আমি বুঝতে পারি যে সিএসএস কীভাবে সুনির্দিষ্টতার দিক থেকে প্রদর্শন করে তবে আমি ধরে নেব যে আমার মাস্টার শীটটি ওভাররাইড না করা থাকলে লোড হবে।

— ian5v

11

আসলে, !importantসরাসরি ক্যাসকেডে অংশ নেয়, এবং নির্দিষ্টতার সাথে কিছুই করার থাকে না। সুনির্দিষ্টতা নির্বাচকদের সাথে সম্পর্কিত, যেখানে !importantসম্পত্তি ঘোষণার সাথে ব্যবহৃত হয়। (সুতরাং আপনি ঠিক বলেছেন যে নিয়মগুলি জটিল!))

— বোল্টক্লক

2

তাহলে স্টাইলশিটগুলিও উপাদানগুলির মতো একইভাবে লোড হয়, যদি তারা একই বৈশিষ্ট্যের হয় তবে সর্বশেষ গ্রহণের অগ্রাধিকার?

— ian5v

3

@ আইয়ানানানান: মূলত, ব্রাউজারটি স্বতন্ত্র স্টাইলশিটের ক্ষেত্রে সিএসএস কখনই দেখতে পায় না। যদি একাধিক স্টাইলশিট থাকে তবে সেগুলি সমস্তরূপে চিকিত্সা করা হয় যেন সেগুলি এক বিশালাকার স্টাইলশিট, এবং নিয়মগুলি সেই অনুযায়ী মূল্যায়ন করা হয়।

— বোল্টক্লক

2

@ ব্যবহারকারী 34660 বোল্টক্লকের মন্তব্য সিএসএস স্টাইলিংয়ের দৃষ্টিকোণ থেকে। আপনি সঠিক যে স্টাইলশীটগুলি ডিওমে পৃথক রাখা হয়েছে, কিন্তু সেই পৃথকীকরণ কীভাবে সেই স্টাইলগুলি কোনও কিছুর সাথে প্রয়োগ হয় তা প্রভাবিত করে না।

— সন্ধ্যাশক্তি-নিষ্ক্রিয়-

31

সর্বাধিক নির্দিষ্ট শৈলী প্রয়োগ করা হয়:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

যদি নির্বাচকদের সকলেরই একই স্বাতন্ত্র্য থাকে তবে সর্বাধিক ঘোষণাপত্রটি ব্যবহৃত হয়:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

আপনার ক্ষেত্রে body:not([input="button"])এটি আরও নির্দিষ্ট তাই এর স্টাইলগুলি ব্যবহার করা হয় are

— মিশ্রণকারী
সূত্র

1

সর্বশেষ নির্বাচক সম্পর্কিত প্রশ্নে আমার মন্তব্য দেখুন।

— BoltClock

1

যখন আমাদের অন-সম্পাদনযোগ্য স্টাইলশিটটিকে ওভাররাইড করতে হয় তখন নির্দিষ্টকরণের নিয়ম জিনিসগুলিকে আরও শক্ত করে তোলে!

— এরি

23

অর্ডার ব্যাপার না। একাধিক ঘটনার সর্বশেষ ঘোষিত মান নেওয়া হবে। দয়া করে আমি যা কাজ করেছি ঠিক একইটি দেখুন : http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

আপনি যদি ক্রমের ক্রমটি বিনিময় করেন .test{}, তবে আপনি দেখতে পাচ্ছেন যে এইচটিএমএল সিএসএসে ঘোষিত সর্বশেষটির মান নেয়

— রায় এমজে
সূত্র

3

সুতরাং আপনার সর্বশেষ সুনির্দিষ্ট CSS যুক্ত করা উচিত।

— লাইভ-

17

শেষ লোডিং সিএসএস হ'ল মাস্টার, যা একই সিএসএস সেটিংস সহ সমস্ত সিএসএসকে ওভাররাইড করবে

উদাহরণ:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

এইচ 1 ট্যাগের আউটপুট হ'ল ফন্ট-আকার: 30px;

— Doodl
সূত্র

1

ওহে. আমার ক্ষেত্রে প্রথম সংজ্ঞায়িত .cssশেষটি লোড হয়। এগুলি কি প্রয়োগ করা হয় যাতে তারা বোঝা হয় বা ক্রম হিসাবে তাদের সংজ্ঞা দেওয়া হয়?

— ইউজেন কনকভ

ধন্যবাদ, এটি হ'ল ব্যাখ্যাটি আমি সন্ধান করছি।

— হান্টার TheGatherer

7

উদাহরণ দিয়ে ক্যাসকেডিং নিয়মকে সহজ করার চেষ্টা করি। নিয়মগুলি সাধারণের সাথে আরও সুনির্দিষ্ট হয়।

আইডির প্রথমটির নিয়ম প্রয়োগ করে (শ্রেণি এবং / অথবা উপাদানগুলি অর্ডার নির্বিশেষে)
অর্ডার নির্বিশেষে উপাদানগুলির উপর ক্লাস প্রয়োগ করে
কোনও শ্রেণি বা আইডি না থাকলে জেনেরিকগুলি প্রয়োগ করে
একই গ্রুপ / স্তরের জন্য আদেশে (ফাইল লোড ক্রমের উপর ভিত্তি করে ঘোষণার আদেশ) সর্বশেষ শৈলী প্রয়োগ করে।

এখানে সিএসএস এবং এইচটিএমএল কোড রয়েছে;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

এখানে সিএসএস শৈলী

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

ফলাফল এখানে। শৈলীর ফাইল বা শৈলীর ঘোষণার ক্রম যাই হোক না কেন, id="important"শেষে প্রযোজ্য ( class="deadline"সর্বশেষে ঘোষিত নোটটি উল্লেখ করুন তবে কোনও প্রভাব ফেলবে না)।

<article>উপাদান রয়েছে <aside>উপাদান অবশ্য গত ঘোষিত শৈলী প্রভাবী হবে এই ক্ষেত্রে, article h2 { .. } তৃতীয় H2 উপাদান।

আইই ১১-এ ফলাফল এখানে রয়েছে: (চিত্র পোস্ট করার পক্ষে যথেষ্ট অধিকার নেই) ডার্ক ব্লু: হিউস্টন ক্রনিকল নিউজ, ডার্কগ্রিন: আপনার শহরের সর্বশেষ উন্নয়ন, বেগুনি: হিউস্টন স্থানীয় বিজ্ঞাপন বিভাগ, কালো: পরবর্তী বিভাগ

— কাগন আগুন
সূত্র

6

এটি প্রতিটি শৈলীতে প্রয়োগ হওয়া লোড অর্ডার এবং প্রকৃত নিয়মের স্বীকৃতি উভয়ের উপর নির্ভর করে। আপনার প্রশ্নের প্রসঙ্গে আপনি প্রথমে আপনার সাধারণ রিসেট লোড করতে চান, তারপরে পৃষ্ঠাটি নির্দিষ্ট করুন। তারপরেও যদি আপনি এখনও ইচ্ছাকৃত প্রভাবটি না দেখেন তবে অন্যরা ইতিমধ্যে উল্লেখ করেছেন বলে আপনাকে জড়িত নির্বাচকদের সুনির্দিষ্টতাটি খতিয়ে দেখার দরকার।

— prodigitalson
সূত্র

2

সম্পাদনা: 2020 এপ্রিল, @ লিসির মন্তব্য অনুসারে, এটি আর হয় না

হ্যাঁ, এটি একইভাবে কাজ করে তবে তারা এক শীটে থাকলেও:

অর্ডার বিষয়গুলি লোড করুন!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

উপরের কোডে, কোনও গ্যারান্টি নেই যে এর master.cssপরে লোড হবে styles.css। সুতরাং, যদি master.cssদ্রুত লোড হয় এবং styles.cssকিছুক্ষণ সময় নেয় styles.cssতবে দ্বিতীয় স্টাইলশিটে পরিণত হবে এবং একই বৈশিষ্ট্যের যে কোনও নিয়ম master.cssওভাররাইট করা হবে।

মোতায়েনের আগে আপনার সমস্ত নিয়মকে একটি শীটে (এবং মিনিফাইয়েড) রাখার পক্ষে সেরা।

— n_i_c_k
সূত্র

কোনও পৃষ্ঠার <হেড> বিভাগ থেকে লোড করা বিকল্প প্রায় শনাক্তকরণ শৈলীর শীটগুলির ক্ষেত্রে কেসটি বিবেচনা করুন, স্মার্টফোন এবং ট্যাবলেটগুলির জন্য নির্দিষ্ট স্টাইলশিট লোড করার জন্য শর্তাধীন মিডিয়া বৈশিষ্ট্যযুক্ত একটি। এই ক্ষেত্রে, লোড অর্ডার যদি অনির্দিষ্ট হয় তবে মিডিয়াতে নির্দিষ্ট যুক্তিটি প্রতিটি স্টাইলশিটের জন্য অবশ্যই কঠোরভাবে একচেটিয়া হওয়া উচিত।

— লিন্ডসে হাইসলি

@n_i_c_k আপনার উত্তরটি ভুল। ক্রম ঘোষণা কি গুরুত্বপূর্ণ তা নয় লোড অর্ডার। আমি স্রেফ ফিডলারের সাথে এটি পরীক্ষা বন্ধ করে দিয়েছি, ডাউনলোড ডাউনলোড বন্ধ করে master.cssএবং styles.cssলোডকে পুরোপুরি রেখে ting তারপরে, আমি master.cssলোড করতে দেই । master.cssএখনও প্রয়োগ করা থেকে "ওভারল্যাপিং" শৈলীটি - এবং রেন্ডারিং master.cssলোড হওয়া এবং পার্স করা পর্যন্ত অবরুদ্ধ ছিল। নোট : আমি চেষ্টা rel=preloadউপর master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`।

— লিসি

ধন্যবাদ @ লাইক, আমি জানি আমার উত্তরটি লেখার সময় সঠিক ছিল, তবে আমি এটির জন্য আপনার শব্দটি গ্রহণ করব যে এটি এখনই স্থির হয়ে গেছে এবং আমার উত্তরটি সম্পাদনা করবে।

— n_i_c_k

1

সর্বোত্তম উপায় হ'ল যথাসম্ভব ক্লাস ব্যবহার করা। যাইহোক আইডি নির্বাচক (#) এড়িয়ে চলুন। আপনি যখন কেবল একক শ্রেণীর সাথে নির্বাচক লিখেন, সিএসএস উত্তরাধিকারটি আরও সহজ অনুসরণ follow

আপডেট: এই নিবন্ধে সিএসএসের সুনির্দিষ্টতা সম্পর্কে আরও পড়ুন: https://css-tricks.com/specifics-on-css-specificity/

— জেরোইন ওমস
সূত্র

1

এটি সিএসএসের নির্দিষ্টতা সম্পর্কে একটি দুর্দান্ত নিবন্ধ: css-tricks.com/specifics-on-css-specificity

— জেরোইন ওমস

0

আমি আপনার প্রশ্ন থেকে সন্দেহ করি যে আপনার সদৃশ নির্বাচন, একটি মাস্টার সেট যা সমস্ত পৃষ্ঠাগুলির জন্য যায় এবং আরও নির্দিষ্ট সেট যা আপনি প্রতিটি পৃথক পৃষ্ঠার জন্য মাস্টার মানকে ওভাররাইড করতে চান। যদি এটি হয় তবে আপনার আদেশটি সঠিক। মাস্টারটি প্রথমে লোড হয়েছে এবং পরবর্তী ফাইলের বিধিগুলি অগ্রাধিকার নেবে (যদি তারা অভিন্ন হয় বা একই ওজন থাকে)। এই ওয়েবসাইটে http://vanseodesign.com/css/css/specificity-inheritance-cascaade/ এ সমস্ত নিয়মের একটি অত্যন্ত প্রস্তাবিত বর্ণনা রয়েছে যখন আমি সম্মুখ সমাপ্তির বিকাশ শুরু করি, তখন এই পৃষ্ঠাটি এতগুলি প্রশ্ন সাফ করেছে।

— user3094826
সূত্র

0

এটি ক্যাসকেড যা ঘোষণার প্রাধান্যকে সংজ্ঞায়িত করে। আমি অফিসিয়াল স্পেসিফিকেশন সুপারিশ করতে পারেন; এর এই অংশটি ভালভাবে পঠনযোগ্য।

https://www.w3.org/TR/css-cascade-3/#cascading

অগ্রাধিকারের ক্রমবর্ধমান ক্রমে নিম্নলিখিতটি বাছাইয়ের উপর প্রভাব ফেলে।

উত্স এবং গুরুত্বের সংমিশ্রণ :
1. Transition ঘোষণা
2. ব্যবহারকারী এজেন্টের ঘোষণাগুলি চিহ্নিত হয়েছে marked !important
3. ব্যবহারকারীর ঘোষণাগুলি চিহ্নিত করা হয়েছে marked !important
4. পৃষ্ঠা লেখকের ঘোষণাগুলি চিহ্নিত হয়েছে marked !important
  1. সাথে উপাদানটির সংজ্ঞা styleবৈশিষ্ট্যের
  2. ডকুমেন্ট-বিস্তৃত সংজ্ঞা
5. Animation ঘোষণা
6. পৃষ্ঠা লেখকের ঘোষণা
  1. সাথে উপাদানটির সংজ্ঞা styleবৈশিষ্ট্যের
  2. ডকুমেন্ট-বিস্তৃত সংজ্ঞা
7. ব্যবহারকারীর ঘোষণা
8. ব্যবহারকারী এজেন্ট এর ঘোষণা
দুটি ঘোষণার যদি একই উত্স এবং গুরুত্ব থাকে তবে স্পষ্টতা, অর্থটি কীভাবে স্পষ্টভাবে সংজ্ঞায়িত করা হয়, একটি স্কোরিং গণনা করে খেলায় আসে।
- প্রতিটি সনাক্তকারী জন্য 100 পয়েন্ট (#x34y )
- প্রতিটি শ্রেণীর জন্য 10 পয়েন্ট ( .level)
- প্রতিটি উপাদান ধরণের জন্য 1 পয়েন্ট (li )
- :hoverবাদে প্রতিটি সিউডো-এলিমেন্টের জন্য 1 পয়েন্ট ( ):not
উদাহরণস্বরূপ, নির্বাচকটির main li + .red.red:not(:active) p > *24 এর স্পষ্টতা রয়েছে।
চেহারা ক্রম শুধুমাত্র একটি ভূমিকা পালন করে যদি দুটি সংজ্ঞা একই উৎস, গুরুত্ব এবং নির্দিষ্টতা আছে। পরবর্তী সংজ্ঞাগুলি নথিতে পূর্ববর্তী সংজ্ঞাগুলির পূর্বে (আমদানি সহ)।

— মাইকেল শ্মিড
সূত্র

0

আমি বিশ্বাস করি কোডটি সম্পাদন করার সময় এটি উপরে থেকে নীচে পড়ে পড়ে থাকে, যার অর্থ শেষ সিএসএস লিঙ্কটি এর উপরে যে কোনও স্টাইল শিটগুলিতে একই ধরণের শৈলীর ওভাররাইড হবে।

উদাহরণস্বরূপ, যদি আপনি দুটি স্টাইল শীট তৈরি করেন

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

এবং এই উভয়টিতে আপনি শরীরের ব্যাকগ্রাউন্ড-রঙকে দুটি পৃথক রঙে সেট করেছেন - স্টাইল 2 সিএসএসে শরীরের রঙটি অগ্রাধিকার গ্রহণ করবে।

আপনি অগ্রাধিকার !IMPORTANTনিতে চান ক্লাস শৈলীর ভিতরে বা সম্ভবত আপনার <link>অর্ডার পুনরায় ব্যবস্থা করে স্টাইলিং অগ্রাধিকার সমস্যা এড়াতে পারে ।

— এননাম হক
সূত্র