সিএসএস শ্রেণি এক বা একাধিক শ্রেণীর উত্তরাধিকারী হতে পারে?

Question

এত দিন ওয়েব প্রোগ্রামার থাকার কারণে আমি এই বোকা বোধ করি এবং এই প্রশ্নের উত্তর না জেনে আমি আসলে এটি সম্ভব বলে আশা করি এবং আমি উত্তরটি কী বলে মনে করি তার চেয়ে আমি ঠিক জানি না (যা এটি সম্ভব নয়) ।

আমার প্রশ্নটি এমন যে কোনও সিএসএস শ্রেণি তৈরি করা সম্ভব যা অন্য সিএসএস ক্লাসের (বা একের অধিক) "উত্তরাধিকার সূত্রে প্রাপ্ত"।

উদাহরণস্বরূপ, বলুন আমাদের ছিল:

.something { display:inline }
.else      { background:red }

আমি যা করতে চাই তা হ'ল এইরকম:

.composite 
{
   .something;
   .else
}

যেখানে ".কম্পোজাইট" শ্রেণি উভয়ই ইনলাইন প্রদর্শন করবে এবং একটি লাল পটভূমি থাকবে

Comments

উত্তরাধিকারের চেয়ে ক্যাসকেডিং সম্পর্কে আরও চিন্তা করুন, এটি এখানে প্রযোজ্য নয়

— ব্লু

অসাধারণ!! haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx

— জোয়েল মার্টিনেজ

Answer 1

LESS এর মতো সরঞ্জাম রয়েছে যা আপনাকে বর্ণিত বর্ণনার অনুরূপ বিমূর্ততার উচ্চ স্তরে CSS রচনা করতে দেয়।

কম এই "মিশিনস" কল

পরিবর্তে

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

তুমি বলতে পার

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Comments

বাহ, আমি ঠিক ঠিক যা খুঁজছি তা হ'ল ... এটি লজ্জার বিষয় যে এটি স্থানীয়ভাবে সমর্থিত নয়, এবং এটি রুবিতে লেখা হয়েছে (আমি এএসপি.নেট এমভিসি ব্যবহার করছি)

— জোয়েল মার্টিনেজ

হ্যাঁ, আমি এএসপি.নেট বিশ্বেও তাই আমি এটিকে আমার প্রযোজনার কর্মপ্রবাহে স্থানান্তর করি নি।

— লার্সেনাল

কম সুন্দর এবং লোভনীয় ... তবে আমি একই ওয়ার্কফ্লোতে সিএসএসইডিট দিয়ে এটি ব্যবহার করতে খুব সফল হইনি - তাই আমি এখনও এটি পুরোপুরি গ্রহণ করি নি।

— রায়ান ফ্লোরেন্স

হ্যাঁ খুব মিষ্টি এটা না। Ive আসলে এখানে । নেট বন্দরে কাজ করছে: nlesscss.codeplex.com ।

— ওয়েন

যদি আপনি

— গুগলের

Answer 2

আপনি একটি একক ডিওএম উপাদানটিতে একাধিক ক্লাস যুক্ত করতে পারেন, যেমন

<div class="firstClass secondClass thirdclass fourthclass"></div>

পরবর্তী শ্রেণিতে প্রদত্ত বিধিগুলি (বা যা আরও সুনির্দিষ্ট) ওভাররাইড হয়। সুতরাং fourthclassযে উদাহরণে ধরণের বিরাজ করে।

উত্তরাধিকার সিএসএস স্ট্যান্ডার্ডের অংশ নয়।

Comments

আপনি কি জানেন যে কোন শ্রেণিটি বিরাজ করছে, যদি শেষ শ্রেণি বা 1 ম শ্রেণি এবং আচরণ ক্রস ব্রাউজারটি নিরাপদ? আসুন বলি যে আমরা .firstClass {font-size:12px;} .secondClass {font-size:20px;}চূড়ান্ত font-sizeহবে 12pxবা 20pxএই ক্রস ব্রাউজারটি নিরাপদ?

— মার্কো ডেমাইও

নির্বাচক সর্বোচ্চ সুনির্দিষ্ট সঙ্গে নিয়ম জিততে হবে। স্ট্যান্ডার্ড সুনির্দিষ্ট বিধি প্রযোজ্য; আপনার উদাহরণে, যেহেতু "প্রথম" এবং "দ্বিতীয়" একই বৈশিষ্ট্য রয়েছে তাই সিএসএসে পরে ঘোষিত বিধিটি জিতবে।

— ম্যাট ব্রিজেস

আমি এই সমস্যাটি সমাধান করার জন্য খাঁটি সিএসএস (কম পরিবর্তে) ব্যবহার করার ধারণা পছন্দ করি।

— অ্যালেক্স

আমি একাধিকবার একাধিক ক্লাস টাইপ না করার ধারণাটিও পছন্দ করি - যা ও (এন ^ 2) কাজ :)

— সিক্রেট

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

— শিবাম

Answer 3

হ্যাঁ, তবে ঠিক সেই সিনট্যাক্সের সাথে নয়।

.composite,
.something { display:inline }

.composite,
.else      { background:red }

Comments

এই স্তন্যপান, কিন্তু আমি আনন্দিত যে আমরা কমপক্ষে এটি পেয়েছি!

— পেসারিয়ার

কেন চুষছে? এটা খুব ভাল মনে হচ্ছে। আমি কমা প্রতীক এবং কম.জেএস সমাধানের মধ্যে পার্থক্য বুঝতে পারি না।

— সত্যই

কারণ যদি কিছু কিছু এবং .else ক্লাসগুলি বিভিন্ন ফাইলে থাকে এবং আপনি সেগুলি সংশোধন করতে পারবেন না, তবে আপনি আটকে রয়েছেন।

— আলেকজান্দ্রি ম্যালার্ড

এটি সঠিক উত্তর ছিল কারণ এটি খাঁটি সিএসএস সিনট্যাক্স ব্যবহার করে প্রশ্নের উত্তর দিয়েছে। কম উত্তর যদিও জানা ভাল।

— রাদদেবস 6:58

এটি ব্যতীত উত্তর হওয়া উচিত।

— eaglei22

Answer 4

আপনার সাধারণ বৈশিষ্ট্যগুলি একসাথে রাখুন এবং আবার নির্দিষ্ট (বা ওভাররাইড) বৈশিষ্ট্যগুলি বরাদ্দ করুন।

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

Comments

এটি একটি আদর্শ সমাধানের খুব কাছাকাছি, আমি আশা করি লোকেরা কেবল এটি কম ভোট পেয়েছে বলে এটিকে ত্যাগ করবেন না। আসলে, "সিএসএস উত্তরাধিকার" সম্পর্কে একটি চ্যালেঞ্জিং সমস্যা হ'ল আপনি সাধারণত একটি ইতিমধ্যে তৈরি, বিশাল ওয়েব সফ্টওয়্যার পান (উদাহরণস্বরূপ, একটি ই-বাণিজ্য বা একটি ব্লগ পিএইচপি বিখ্যাত সফ্টওয়্যার) এবং তারা পিএইচপি কোড ব্যবহার করে যা স্থানীয়ভাবে জিতেছে ' টি এইচটিএমএল উপাদানগুলির বাইরে একাধিক ক্লাস যুক্ত করে add এটি আপনাকে আশেপাশে যেতে বাধ্য করে এবং সোর্স কোডের সাথে জগাখিচুড়ি করতে বাধ্য করে (আপনি যদি পরে আপগ্রেড করেন তবে পরিবর্তনগুলি হারাবেন) যাতে এগুলি অতিরিক্ত ক্লাসগুলি আউটপুট হয়। এই পদ্ধতির পরিবর্তে, আপনি কেবল কখনও সিএসএস ফাইল সম্পাদনা করুন!

— দারিও ফুমাগল্লি

এটি ঠিক আমি যা খুঁজছিলাম ছিল। এই একই পন্থা সিএসএস নির্বাচকদের সাথে কাজ করবে তা কি মূল্য নয়? h1, h2, etcআপনি উল্লেখ করতে পারার পরিবর্তে.selector1, .selector2, .etc

— জেফরিহাউসার

আমি মন্তব্য করতে চেয়েছিলাম যে এটি হ'ল ডাব্লু 3 তাদের প্রস্তাবিত ডিফল্ট এইচটিএমএল স্টাইল শীটটিতে ব্যবহার করেছে : [w3 CSS2]: w3.org/TR/CSS2/sample.html । আমি সিএসএস কোডটি কীভাবে সংগঠিত করতে পারি তার সম্পর্কেও একটি গ্রিপ পাওয়ার চেষ্টা করছি এবং মনে হচ্ছে আদর্শ বস্তু-ভিত্তিক উত্তরাধিকারের তুলনায় দৃষ্টান্তটি উল্টানো হয়েছে: আপনি কোন উপাদানগুলি উত্তরাধিকার সূত্রে নির্দিষ্ট করতে ক্লাস (বা আরও সাধারণভাবে নির্বাচক) ব্যবহার করেন, তবে আপনি বৈশিষ্ট্যগুলির উত্তরাধিকারী হন (কমপক্ষে, এইভাবে হায়ারার্কিটি সহজেই যুক্তিযুক্তভাবে সহজেই উপস্থিত হতে পারে), তারপরে যখন প্রয়োজন হয় তখন আরও নির্দিষ্ট নির্বাচকগুলিতে বৈশিষ্ট্যগুলিকে ওভাররাইড করুন।

— নাথান চ্যাপেল

Answer 5

একটি উপাদান একাধিক ক্লাস নিতে পারে:

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

এবং দুর্ভাগ্যক্রমে আপনি যে যাচ্ছেন এটি প্রায় কাছাকাছি। আমি এই বৈশিষ্ট্যটি দেখতে ক্লাস-এলিয়াসের সাথে একদিন দেখতে চাই।

Answer 6

না আপনি কিছু করতে পারবেন না

.composite 
{
   .something;
   .else
}

ওও অর্থে এটি কোনও "শ্রেণি" নাম নয়। .somethingএবং .elseকেবল নির্বাচকরা এর চেয়ে বেশি কিছু নয়।

তবে আপনি হয় একটি উপাদান দুটি শ্রেণি নির্দিষ্ট করতে পারেন

<div class="something else">...</div>

অথবা আপনি উত্তরাধিকারের অন্য কোনও রূপটি অনুসন্ধান করতে পারেন

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

প্যারাগ্রাফের ব্যাকগ্রাউন্ড কালার এবং রঙ বর্ধিত ডিভের সেটিংস থেকে উত্তরাধিকার সূত্রে প্রাপ্ত যা .fooস্টাইলযুক্ত। আপনাকে সঠিক ডাব্লু 3 সি স্পেসিফিকেশনটি পরীক্ষা করতে হবে। inheritবেশিরভাগ বৈশিষ্ট্যের জন্য ডিফল্ট তবে যাইহোক সকলের জন্য নয়।

Comments

হ্যাঁ, এই (প্রথম অংশ) আমার প্রত্যাশা ছিল যখন আমি প্রথমবারের মতো বিংশ শতাব্দীতে সিএসএসের কথা শুনেছিলাম ... এবং আমাদের এখনও তা নেই, তারা কিছু গতিশীল বিষয়গুলিতে পারফরম্যান্স জ্বালিয়ে দিচ্ছে, যদিও এটি সিএসএস প্রয়োগের ঠিক আগে স্থিতিশীল হতে পারে can এবং এটি ভেরিয়েবলের প্রয়োজনের পরিবর্তে (স্থিতিশীল "ভেরিয়েবল")

— নিউ-রাহ

Answer 7

আমি এই একই সমস্যার মধ্যে দৌড়েছি এবং একটি ক্লাসটি অন্য শ্রেণীর উত্তরাধিকারী হতে পারে বলে মনে করার জন্য একটি জিকুয়ারি সমাধান ব্যবহার করে শেষ করেছি।

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

এটি "সংমিশ্রিত" শ্রেণি সহ সমস্ত উপাদান সন্ধান করবে এবং উপাদানগুলিতে "কিছু" এবং "অন্য" শ্রেণি যুক্ত করবে। সুতরাং এর মতো কিছু <div class="composite">...</div>শেষ হবে:
<div class="composite something else">...</div>

Comments

এই সমাধানটি সহকারে সমস্যাটি হ'ল এটি সমস্ত বিদ্যমান নিয়ন্ত্রণগুলিতে প্রযোজ্য, যদি আপনি এই কলটির পরে নিয়ন্ত্রণ তৈরি করেন তবে এতে নতুন শ্রেণি থাকবে না।

— লুইসুয়ার্ডোএসপি

Answer 8

SCSS দেওয়া উদাহরণস্বরূপ ভাবে, ভালো কিছু হবে:

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

আরও তথ্য, sass বেসিক পরীক্ষা করুন

Comments

এর তুলনায় যুক্ত হওয়া মানটি কী? .composite,.something { display:inline }এবং.composite,.else { background:red }

— পাভেল গাতনার

@ পাভেলগ্যাটনার আপনি অন্য সিএসএস সংজ্ঞা .somethingএবং এর সংজ্ঞা পুনরায় ব্যবহার করতে পারেন .else।

— লেগোস

Answer 9

আপনি যা করতে পারেন তা হ'ল এটি

সিএসএস

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

এইচটিএমএল

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

Answer 10

ভুলে যাবেন না:

div.something.else {

    // will only style a div with both, not just one or the other

}

Comments

আমি এটি খুঁজছি না, তবে এটি আমার জন্য গঠনমূলক ছিল n__n

— এজলেস উপস্থিতি

Answer 11

CSS ফাইলটিতে:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

Comments

তাহলে এর ফলাফল কী হবে font-size?

— আবাটিশচেভ

"P.Title" এর জন্য ফন্টের আকারটি 12px হবে কারণ এটি ফাইলের প্রথমটির পরে সংজ্ঞায়িত করা হয়। এটি প্রথম ফন্ট-আকারকে ওভাররাইড করে।

— YWE

@ ওয়াইওয়াই: এর অর্থ কী এই ঘোষণাগুলি এই উত্তরে যা লিখিত হয়েছে তার তুলনায় আসলে অন্যভাবে হওয়া উচিত (কমপক্ষে যদি আমরা উদাহরণস্বরূপ উদাহরণস্বরূপ বলতে চাই)? যদি শেষের একটি নির্ধারিত হয় তবে font-size: 16pxতা কার্যকর হতে পারে না , তাই না?

— বা ম্যাপার

@ ওআরএম্পার - সাধারণত যা হয় তা হ'ল প্রথম ঘোষণাটি একটি সাধারণ সিএসএস ফাইলে থাকে যা একাধিক পৃষ্ঠাগুলি দ্বারা ভাগ করা হয়। তারপরে দ্বিতীয় ঘোষণাটি একটি দ্বিতীয় সিএসএস ফাইলে রয়েছে, কেবলমাত্র নির্দিষ্ট পৃষ্ঠায় ব্যবহৃত হয়। এবং সাধারণ সিএসএস ফাইলের পরে আমদানি করা । সুতরাং সেই পৃষ্ঠাগুলি "সর্বশেষ দেখা" মানটির ব্যবহার করে 12px।

— টুলমেকারস্টেভ

Answer 12

আমি বুঝতে পারি এই প্রশ্নটি এখন অনেক পুরনো তবে এখানে কিছুই নেই!

যদি দেশীয় সমাধান হিসাবে একাধিক শ্রেণীর বৈশিষ্ট্য বোঝায় এমন একক শ্রেণি যুক্ত করার উদ্দেশ্য যদি থাকে তবে আমি জাভাস্ক্রিপ্ট / jQuery ব্যবহার করার পরামর্শ দেব (jQuery সত্যিই প্রয়োজনীয় নয় তবে অবশ্যই দরকারী)

যদি আপনার কাছে থাকে, উদাহরণস্বরূপ .umbrellaClassযে "উত্তরাধিকার সূত্রে" এসেছে .baseClass1এবং .baseClass2আপনার কাছে এমন কিছু জাভাস্ক্রিপ্ট থাকতে পারে যা প্রস্তুত থাকে।

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

এখন সমস্ত উপাদান .umbrellaClassউভয় .baseClassএর সমস্ত বৈশিষ্ট্য থাকবে । মনে রাখবেন যে ওওপি উত্তরাধিকারের মতো,.umbrellaClass এর নিজস্ব বৈশিষ্ট্য থাকতে পারে বা নাও থাকতে পারে।

এখানে কেবলমাত্র সতর্কতা অবলম্বন করে বিবেচনা করা হবে যে এই কোডটি চালিত হওয়ার সময় অস্তিত্বের অস্তিত্ব রয়েছে কিনা এমন উপাদান রয়েছে কি না, তবে তার চারপাশে সহজ উপায় রয়েছে।

সাকস সিএসএসের দেশীয় উত্তরাধিকার নেই, যদিও।

Comments

এই দৃষ্টিভঙ্গি ইতিমধ্যে ২০১৩ সাল থেকে @ ডিহুভারের উত্তরে পরামর্শ দেওয়া হয়েছে ।

— ব্রায়ান

Answer 13

সঠিক সময়সীমা : আমি এই প্রশ্নটি থেকে আমার ইমেলের কাছে গিয়েছিলাম, কম সম্পর্কে একটি নিবন্ধ খুঁজতে , একটি রুবি লাইব্রেরি যা অন্যান্য জিনিসগুলির মধ্যে এটি করে:

যেহেতু super দেখতে দেখতে দেখতে ঠিক footerঅন্যরকম, তবে ভিন্ন ফন্টের সাথে, আমি এই ঘোষণাগুলিও অন্তর্ভুক্ত করার জন্য এটি বলার জন্য কমের শ্রেণি অন্তর্ভুক্তি কৌশলটি ব্যবহার করব (তারা এটিকে মিক্সিন বলে):

#super {
  #footer;
  font-family: cursive;
}

Comments

ঠিক যখন আমি ভেবেছিলাম কম কম আমাকে আর অবাক করে দিতে পারে না ... আপনি অন্য ব্লক থেকে ফর্ম্যাটিং এইভাবে আমদানি করতে পারবেন এমন আমার কোনও ধারণা ছিল না। দুর্দান্ত টিপ।

— ড্যানিয়েল রিপস্টিন

Answer 14

দুর্ভাগ্যক্রমে, সিএসএস প্রোগ্রামিং ভাষা সি ++, সি # বা জাভা যেমন করে 'উত্তরাধিকার' সরবরাহ করে না। আপনি কোনও সিএসএস ক্লাস ঘোষণা করতে পারবেন না তার পরে অন্য কোনও সিএসএস শ্রেণীর সাথে এটি প্রসারিত করুন।

তবে, আপনি আপনার মার্কআপের একটি ট্যাগে একক শ্রেণীর চেয়েও বেশি প্রয়োগ করতে পারেন ... এই ক্ষেত্রে নিয়মের একটি পরিশীলিত সেট রয়েছে যা ব্রাউজার দ্বারা কোন প্রকৃত শৈলী প্রয়োগ করা হবে তা নির্ধারণ করে।

<span class="styleA styleB"> ... </span>

সিএসএস সমস্ত শৈলীর সন্ধান করবে যা আপনার মার্কআপের ভিত্তিতে প্রয়োগ করা যেতে পারে এবং সেইগুলি একাধিক নিয়মে সিএসএস শৈলীগুলি একত্রিত করে।

সাধারণত, শৈলীগুলি একত্রিত করা হয়, তবে যখন বিরোধগুলি দেখা দেয়, পরে ঘোষিত শৈলীটি সাধারণত জিততে পারে (যদি না! গুরুত্বপূর্ণ বৈশিষ্ট্যটি শৈলীর একটিতে নির্দিষ্ট না করা থাকে, তবে যে ক্ষেত্রে এটি জিতবে)। এছাড়াও, এইচটিএমএল উপাদানগুলিতে সরাসরি প্রয়োগ করা শৈলীগুলি CSS শ্রেণীর শৈলীর চেয়ে বেশি প্রাধান্য পায়।

Comments

আপনার উত্তরটি আমার জন্য গুগলে প্রথম ফলাফল হিসাবে উপস্থিত হয়েছিল এবং সহায়ক ছিল। এটি বলেছিল, আমার কাছে আপনার কাছে একটি টিপ রয়েছে - আপনি যদি সমাধানের প্রস্তাব দিচ্ছেন, তবে নেতিবাচকভাবে বাক্যগুলি শুরু করা ভাল ( তবে কখনও কখনও লোকেরা ধৈর্য ধরে কম চলে এবং এই সিদ্ধান্তে ছুটে যেতে পারে যে তারা যা করার চেষ্টা করছে তা অসম্ভব। অন্যকে সাহায্য করার সর্বোত্তম সুযোগের জন্য, আপনি "সিএসএসের উত্তরাধিকার নেই, আপনি যা প্রয়োজন তা অর্জন করতে পারেন" এর মতো কিছু দিয়ে শুরু করতে পারেন ...

— egmfrs

Answer 15

SASS এছাড়াও রয়েছে, যা আপনি http://sass-lang.com/ এ খুঁজে পেতে পারেন । এখানে একটি @ এক্সটেন্ড ট্যাগ রয়েছে পাশাপাশি মিক্স-ইন টাইপ সিস্টেম রয়েছে। (রুবি)

এটি এক ধরণের কম প্রতিযোগী।

Answer 16

সিএসএসে এটি সম্ভব নয়।

সিএসএসে সমর্থিত একমাত্র জিনিসটি অন্য নিয়মের চেয়ে বেশি নির্দিষ্ট করা হচ্ছে:

span { display:inline }
span.myclass { background: red }

ক্লাস "মাইক্লাস" সহ একটি স্প্যানের উভয় বৈশিষ্ট্য থাকবে।

আরেকটি উপায় হল দুটি শ্রেণি নির্দিষ্ট করে:

<div class="something else">...</div>

"অন্য" এর স্টাইলটি "কিছু" এর স্টাইলকে ওভাররাইড করবে (বা যুক্ত করবে)

Comments

1 ফাইলে সমস্ত শৈলীর জন্য সিএসএসে উত্তরাধিকারের মতো সমাধান রয়েছে, আমার পোস্টটি দেখুন।

— পাভেল গাতনার

Answer 17

আপনি এই শ্রেণি = "অন্য কিছু" এর মতো কিছু দ্বারা কোনও উপাদানগুলিতে একাধিক সিএসএস ক্লাস প্রয়োগ করতে পারেন

Answer 18

অন্যরা যেমন বলেছে, আপনি কোনও উপাদানে একাধিক ক্লাস যুক্ত করতে পারেন।

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

Comments

সমস্ত কম্পোজিশন ক্লাস চেইন ব্যবহার না করে উত্তরাধিকারের মতো সিএসএস সংজ্ঞা তৈরি করা ভাল, আমার পোস্টটি দেখুন।

— পাভেল গাতনার

Answer 19

আমিও পাগলের মতো এটির সন্ধান করছিলাম এবং আমি বিভিন্ন জিনিস চেষ্টা করে এটি আবিষ্কার করেছি: পি ... ভাল আপনি এটি এর মতো করতে পারেন:

composite.something, composite.else
{
    blblalba
}

এটি হঠাৎ আমার জন্য কাজ করেছে :)

Answer 20

নির্দিষ্ট পরিস্থিতিতে আপনি "নরম" উত্তরাধিকার করতে পারেন:

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

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

এখানে বৈশিষ্ট্যগুলির একটি তালিকা রয়েছে এবং তারা এগুলি স্বয়ংক্রিয়ভাবে করে বা না করে: https://www.w3.org/TR/CSS21/propidx.html

Answer 21

যদিও সরাসরি উত্তরাধিকার সম্ভব নয়।

পিতামাতাদের ট্যাগের জন্য কোনও শ্রেণি (বা আইডি) ব্যবহার করা সম্ভব এবং তারপরে এটির উত্তরাধিকারী থেকে শিশু ট্যাগের আচরণের পরিবর্তন করতে CSS সংযুক্তকারীগুলি ব্যবহার করা সম্ভব।

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

আমি উদাহরণের মতো অনেকগুলি স্প্যান ব্যবহার করার পরামর্শ দেব না, তবে এটি ধারণার প্রমাণ মাত্র। এই পদ্ধতিতে সিএসএস প্রয়োগ করার চেষ্টা করার সময় এখনও অনেকগুলি বাগ দেখা দিতে পারে। (উদাহরণস্বরূপ পাঠ্য-সজ্জা প্রকারের পরিবর্তন)।

Answer 22

কম এবং স্যাস হ'ল সিএসএস প্রাক প্রসেসর যা মূল্যবান উপায়ে সিএসএস ভাষা প্রসারিত করে। তারা যে সমস্ত উন্নতি করে তার মধ্যে একটি হ'ল কেবলমাত্র বিকল্প যা আপনি সন্ধান করছেন। কম সহ কয়েকটি খুব ভাল উত্তর রয়েছে এবং আমি সাস সলিউশন যুক্ত করব।

সাসের প্রসারিত বিকল্প রয়েছে যা এক শ্রেণিকে অন্য শ্রেণিতে পুরোপুরি প্রসারিত করতে দেয়। প্রসারিত সম্পর্কে আরও আপনি এই নিবন্ধে পড়তে পারেন

Answer 23

আসলে আপনি যা চাইছেন তা বিদ্যমান - তবে এটি অ্যাড-অন মডিউল হিসাবে সম্পন্ন হয়েছে। উদাহরণস্বরূপ । নেট এ আরও ভাল সিএসএস এ এই প্রশ্নটি দেখুন ।

পরীক্ষা করে দেখুন কম ব্যবহার করে Larsenal এর উত্তর কি এই অ্যাড-অন না একটি ধারণা পেতে।

Answer 24

সিএসএস সত্যিই নেই না কি আপনি বলছি। আপনি যদি এই সম্মিলিত ধারণাটি মাথায় রেখে বিধিগুলি লিখতে চান তবে আপনি কম্পাসটি পরীক্ষা করে দেখতে চাইতে পারেন । এটি একটি স্টাইলশীট কাঠামো যা ইতিমধ্যে উল্লিখিত কমের মতো দেখাচ্ছে।

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

Comments

উপরোক্ত আরো বিস্তারিত জানার যোগ করার পদ্ধতি, কম্পাস ওরফে Sass মাধ্যমে প্রসারিত করে, প্লেসহোল্ডার Mixins বনাম বাড়ান , আরো বিস্তারিত তথ্য সম্পর্কে প্লেসহোল্ডার

— অভিজিৎ

Answer 25

যারা উল্লিখিত (দুর্দান্ত) পোস্টগুলিতে সন্তুষ্ট নন তাদের জন্য আপনি আপনার প্রোগ্রামিং দক্ষতা ব্যবহার করে একটি পরিবর্তনশীল (পিএইচপি বা যে কোনও) তৈরি করতে পারেন এবং এটি একাধিক শ্রেণীর নাম সংরক্ষণ করতে পারে।

এটাই আমার সেরা হ্যাক।

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

তারপরে শ্রেণীর নামগুলি না দিয়ে নিজের পছন্দ মতো উপাদানটিতে গ্লোবাল ভেরিয়েবল প্রয়োগ করুন

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

Answer 26

সিএসএস রচনাটি দেখুন : https://bambielli.com/til/2017-08-11-css-modules-composes/

তাদের মতে:

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

আমি আমার প্রতিক্রিয়া প্রকল্পে এটি ব্যবহার করি।

Answer 27

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

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

যখন কোনও উপাদানকে অ্যাট্রিবিউট দেওয়া হয় class="foo", তখন এটিকে শ্রেণীর কাছ থেকে উত্তরাধিকারসূচক গুণাবলী হিসাবে নয় .foo, তবে গুণাবলী A এবং গুণাবলী বি দ্বারা গুণ করা যায় । অর্থাৎ, উত্তরাধিকারের গ্রাফটি এক স্তরের গভীর, বৈশিষ্ট্য শ্রেণি থেকে প্রাপ্ত উপাদানগুলির সাথে এবং নির্বাচকরা প্রান্তগুলি কোথায় যায় তা নির্দিষ্ট করে এবং প্রতিযোগী বৈশিষ্ট্যগুলি (পদ্ধতি সমাধানের ক্রমের অনুরূপ) যখন প্রাধান্য নির্ধারণ করে তা নির্ধারণ করে।

প্রোগ্রামিংয়ের ব্যবহারিক নিহিততা এটি। আপনি উপরের দেওয়া শৈলী পত্রক আছে বলুন, এবং একটি নতুন শ্রেণী যোগ করতে চান .baz, যেখানে এটি একই থাকতে হবে font-sizeযেমন .foo। নিষ্পাপ সমাধানটি হ'ল:

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

যে কোনও সময় আমাকে দু'বার টাইপ করতে হবে আমি এত পাগল হয়ে যাই! আমাকে কেবল এটি দুবারই লিখতে হবে না, এখন আমার কাছে প্রগতিগতভাবে এটি নির্দেশ করার কোনও উপায় নেই .fooএবং .bazএটি একই হওয়া উচিত font-sizeএবং আমি একটি গোপন নির্ভরতা তৈরি করেছি ! আমার উপরের দৃষ্টান্তটি সুপারিশ করবে যে আমার এট্রিবিউট ক্লাস এfont-size থেকে গুণটি বিমূর্ত করা উচিত :

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

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

Answer 28

আপনি যদি কমের চেয়ে আরও শক্তিশালী পাঠ্য প্রিপ্রোসেসর চান তবে পিপিউইজার্ড দেখুন:

http://dennisbareis.com/ppwizard.htm

ওয়েবসাইটটি সতর্ক করা সত্যই ঘৃণ্য এবং এখানে একটি ছোট শিক্ষার বক্ররেখা রয়েছে তবে এটি ম্যাক্রোর মাধ্যমে সিএসএস এবং এইচটিএমএল কোড উভয়ই তৈরি করার জন্য উপযুক্ত। আমি আরও বুঝতে পারি নি কেন আরও ওয়েব কোডার এটি ব্যবহার করে না।

Comments

ওয়েবসাইট হল সত্যিই অসহ্য।

— ন্যানোফারাড

এইচটিএমএল প্রসেসরের জন্য ওয়েবসাইটটিতে ধরণের ব্যঙ্গাত্মক!

— বেন থারলি

হ্যাঁ, ওয়েবসাইটটি ঘৃণ্য, তবে এটি কেবল তার চেয়ে বেশি। এটি পড়া খুব কঠিন এবং আমার মাথাকেও আঘাত দেয়!

— আর্টঅফ ওয়ারফেয়ার

এটি একটি দুর্দান্ত জিনিস যা এটি উইন্ডোজ 3.1 থেকে XP এর সাথে সামঞ্জস্যপূর্ণ, লোল

— আল্টোর লাগোস

একটি উদ্ভট অ-মানক সরঞ্জাম, পছন্দ নেই।

— বার্কাস

Answer 29

আপনি পিএইচপি এর মাধ্যমে আপনার .css ফাইলগুলিকে প্রিক্রোসেস করেন তবে আপনি যা চান তা অর্জন করতে পারেন। ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...