স্প্যান ব্যবহার না করে কোনও HTML তালিকার বুলেটের রঙ পরিবর্তন করুন color

Question 1

আমি ভাবছিলাম যে কোনও তালিকার বুলেটের রঙ পরিবর্তন করার কোনও উপায় আছে কিনা।

আমার এই মত একটি তালিকা আছে:

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

লি'র মতো 'স্প্যান' ও 'এ' পি'র মতো কিছু inোকানো আমার পক্ষে সম্ভব নয়। তাহলে আমি কি বুলেটগুলির রঙ পরিবর্তন করতে পারি তবে কিছু স্মার্ট উপায়ে পাঠ্যটি নয়?

Question 2

আপনি যদি কোনও চিত্র ব্যবহার করতে পারেন তবে আপনি এটি করতে পারেন। এবং কোনও চিত্র ছাড়া আপনি কেবল বুলেটগুলির রঙ পরিবর্তন করতে পারবেন না পাঠ্যটিও।

একটি ইমেজ ব্যবহার করা

li { list-style-image: url(images/yourimage.jpg); }

দেখা

তালিকা-শৈলী-চিত্র

কোনও ছবি ব্যবহার না করেই

তারপরে আপনাকে এইচটিএমএল মার্কআপ সম্পাদনা করতে হবে এবং তালিকার ভিতরে একটি স্প্যান অন্তর্ভুক্ত করতে হবে এবং বিভিন্ন রঙের সাথে লি এবং স্প্যানটি রঙ করতে হবে।

Question 3

আমি মার্কআপ যোগ না করে এটি পরিচালনা করেছি, তবে পরিবর্তে ব্যবহার করছি li:before। স্পষ্টতই এর সমস্ত সীমাবদ্ধতা রয়েছে :before(কোনও পুরানো আইআই সমর্থন নেই) তবে এটি খুব সীমিত পরীক্ষার পরে আইই 8, ফায়ারফক্স এবং ক্রোমের সাথে কাজ করছে বলে মনে হচ্ছে। বুলেট শৈলী ইউনিকোডে যা রয়েছে তার দ্বারাও সীমাবদ্ধ।

li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

স্নিপেট প্রসারিত করুন

Question 4

আমরা এস এর list-style-imageসাথে একত্রিত করতে svgপারি, যা আমরা সিএসএসে ইনলাইন করতে পারি ! এই পদ্ধতিটি "বুলেটগুলি" এর উপর অবিশ্বাস্য নিয়ন্ত্রণ সরবরাহ করে, যা যে কোনও কিছু হতে পারে।

একটি লাল বৃত্ত পেতে, কেবল নিম্নলিখিত সিএসএস ব্যবহার করুন:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

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

কোড স্নিপেট দেখান

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

স্নিপেট প্রসারিত করুন

প্রস্থ / উচ্চতার বৈশিষ্ট্য

কিছু ব্রাউজারের প্রয়োজন হয় widthএবং heightএট্রিবিউট সেট করা থাকে <svg>, বা তারা কিছুই প্রদর্শন করে না। লেখার সময় ফায়ারফক্সের সাম্প্রতিক সংস্করণগুলি এই সমস্যাটি প্রদর্শন করে। উদাহরণগুলিতে আমি দুটি বৈশিষ্ট্যই স্থির করেছি।

এনকোডিংস

সাম্প্রতিক একটি মন্তব্য আমাকে ডেটা-ইউরির জন্য এনকোডিংগুলি স্মরণ করিয়ে দিয়েছে। এটি আমার জন্য সম্প্রতি ব্যথার বিষয় ছিল এবং আমি যে গবেষণা করেছি তার কিছুটা ভাগ করে নিতে পারি।

ডেটা-URI বৈশিষ্ট , যা রেফারেন্স কোনো URI বৈশিষ্ট , বলছেন যে SVG অনুযায়ী এনকোড করা উচিত কোনো URI বৈশিষ্ট । মানে অক্ষর সমস্ত প্রকারের এনকোড করা উচিত যে, যেমন <হয়ে %3C।

কিছু উত্স বেস 64৪ টি এনকোডিংয়ের পরামর্শ দেয়, যা এনকোডিংয়ের সমস্যাগুলি ঠিক করতে হবে, তবে এটি অযথা এসভিজির আকার বাড়িয়ে তুলবে, যেখানে ইউআরআই এনকোডিং হবে না। আমি ইউআরআই এনকোডিংয়ের প্রস্তাব দিই।

অধিক তথ্য:

ব্রাউজার-সমর্থন: > ie8

এসএসজিজে সিএসএস ট্রিকস

এমডিএন এসভিএজেজে

Question 5

@ মার্কের সমাধানটি বন্ধ করে দেওয়া - যেহেতু বুলেট চরিত্রটি বিভিন্ন ফন্ট এবং ব্রাউজারগুলির সাথে আলাদাভাবে রেন্ডার করা হয়, তাই আমি একটি বুলেট তৈরি করতে সীমানা ব্যাসার্ধের সাথে নিম্নলিখিত সিএস 3 কৌশলটি ব্যবহার করেছি: যার উপরে আমার আরও নিয়ন্ত্রণ রয়েছে:

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}

Question 6

আমি জানি এটি একটি সত্যই, সত্যই, পুরানো প্রশ্ন তবে আমি এটি নিয়ে ঘুরে বেড়াচ্ছিলাম এবং এমন একটি উপায় নিয়ে এসেছি যা আমি পোস্ট দেখিনি। তালিকাটিকে একটি রঙ দিন এবং তারপরে ::first-lineনির্বাচক ব্যবহার করে পাঠ্য রঙটি ওভাররাইট করুন । আমি কোনও বিশেষজ্ঞ নই তাই সম্ভবত এই পদ্ধতির সাথে আমার কিছু ভুল আছে যা আমি অনুপস্থিত, তবে মনে হয় এটি কার্যকর হবে।

li {
  color: blue;
}

li::first-line {
  color: black;
}

<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

স্নিপেট প্রসারিত করুন

Question 7

@ মার্ক এবং @ জেসিকা সমাধান উভয়ই বন্ধ করে দেওয়া - এটিই আমি ব্যবহার করি যে সমাধান:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

আমি emহরফ আকারের জন্য ব্যবহার করি তাই যদি আপনি নিজের topমানটি সেট করে থাকেন তবে .5emএটি সর্বদা আপনার পাঠ্যের প্রথম লাইনের মধ্য বিন্দুতে স্থাপন করা হবে। আমি ব্যবহার করেছি left:-20pxকারণ এটি ব্রাউজারগুলিতে বুলেটগুলির ডিফল্ট অবস্থান: পিতামাতা padding/2

Question 8

আমি মার্কের উত্তরটিও সত্যিই পছন্দ করেছি - আমার বিভিন্ন বর্ণের ইউএলগুলির একটি সেট প্রয়োজন ছিল এবং সম্ভবত একটি শ্রেণি ব্যবহার করা সহজ হবে। উদাহরণস্বরূপ, আমি কমলার জন্য যা ব্যবহার করেছি তা এখানে is

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

এছাড়াও, আমি দেখতে পেয়েছি যে আমি "কন্টেন্ট:" এর জন্য ব্যবহৃত হেক্স কোডটি মার্কের চেয়ে আলাদা ছিল (যে হেক্স্স বৃত্তটি কিছুটা বেশি উঁচুতে বসেছে)। আমি যেটি ব্যবহার করেছিলাম তা মাঝখানে পুরোপুরি বসে আছে। আমিও বেশ কয়েকটি আকার পাওয়া (স্কোয়ার, ত্রিভুজ, চেনাশোনা, ইত্যাদি) এখানে ডান

Question 9

আমার জন্য সর্বোত্তম বিকল্প হ'ল সিএসএস সিউডো উপাদানগুলি ব্যবহার করা, সুতরাং discবুলেট স্টাইলিংয়ের জন্য এটি দেখতে এরকম দেখাবে:

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

স্নিপেট প্রসারিত করুন

মন্তব্য:

widthএবং heightসমান মান পয়েন্টার বৃত্তাকার রাখার থাকা উচিত
আপনি border-radiusযদি squareতালিকা বুলেট রাখতে চান তবে আপনি শূন্যতে সেট করতে পারেন

বুলেট শৈলীর জন্য আপনি অন্যান্য CSS আকার ব্যবহার করতে পারেন https://css-tricks.com/example/ShapesOfCSS/ (এটি বেছে নিন যার জন্য ছদ্ম উপাদানগুলির প্রয়োজন হয় না, উদাহরণস্বরূপ ত্রিভুজগুলি)

Question 10

:: চিহ্নিতকারী

আপনি ::markerকোনও তালিকা আইটেমের মার্কার বক্স নির্বাচন করতে সিএসএস সিউডো-এলিমেন্ট ব্যবহার করতে পারেন (যেমন বুলেট বা সংখ্যা)।

ul li::marker {
  color: red;
}

দ্রষ্টব্য: এই উত্তর পোস্ট করার সময়, এটি পরীক্ষামূলক প্রযুক্তি হিসাবে বিবেচনা করা হয় এবং এটি কেবল ফায়ারফক্স এবং সাফারি (এখনও অবধি) প্রয়োগ করা হয়েছে।

Question 11

@ Ddilsaver এর উত্তরে বিল্ডিং। আমি বুলেটটির জন্য একটি স্প্রাইট ব্যবহার করতে সক্ষম হতে চেয়েছিলাম। এটি কাজ করে বলে মনে হচ্ছে:

li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}

Question 12

আমি আজ এটি চেষ্টা করেছি এবং এটি টাইপ
করেছি : আমার তালিকাগুলিতে (বুলেট এবং সংখ্যা উভয়) রঙিন মার্কার প্রদর্শন করা দরকার। আমি এই উপর এসেছিল ডগা এবং আমার স্টাইলশীট সাথে থাক বৈশিষ্ট্য mutualization মধ্যে লিখেছিলেন:

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

আমি এখানে বুলেট প্রদর্শন করার জন্য একটি আলাদা চরিত্র বেছে নিয়েছি । আমার প্রান্তিকভাবে মার্জিনটি সামঞ্জস্য করা দরকার, সম্ভবত আপনি যে ফন্টটি বেছে নিয়েছেন তার সাথে মানগুলি প্রয়োগ করা হবে না (সংখ্যাগুলি আপনার ওয়েবফন্ট ব্যবহার করে)।

Question 13

পরিবর্তে এটি ব্যবহার করার চেষ্টা করুন:

ul {
  color: red;
}

Question 14

ইনলাইন সংস্করণ, আউটলুক ডেস্কটপের জন্য কাজ করে:

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>

জেএসফিডাল ।