Хотите сделать номер в упорядоченном списке другого цвета и размера - PullRequest
Новая
       8

Хотите сделать номер в упорядоченном списке другого цвета и размера

0 голосов
/ 29 ноября 2018

Поэтому мне было интересно, как я могу изменить цвет, размер и шрифт номеров упорядоченного списка.Я знаю, как сделать цвет другим, но мне интересно, как сделать цвет другим.Вот код, который у меня есть до сих пор 

/* Color scheme: #6FC2F0 (Blue) #74E2AE(Green) and #ff00ff (Fuchsia or purple) #FC913A (Orange)*/


/* Fonts: Alegreya Sans, Kalam and Actor */

.topnav {
  background-color: #6FC2F0;
  overflow: hidden;
  font-size: 20px;
  font: 'Alegreya Sans', sans-serif;
}

.topnav a {
  float: left;
  color: #ffffff;
  text-decoration: none;
  padding: 20px;
}

.topnav a:hover {
  background-color: #74E2AE;
  color: #ffffff;
}

.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 10px;
  margin-right: 16px;
  font-size: 20px;
  border-radius: 25px;
}

.rectitle {
  font-size: 50px;
  font: 'Actor', cursive;
  margin-left: 5px;
  margin-top: 15px;
}

.byx {
  font-size: 20px;
  float: left;
  display: block;
  color: #8C8C8C;
  margin-left: 5px;
}

.byx a {
  color: #FC913A;
}

.ingred {
  float: left;
  font-size: 18px;
  color: #000000;
  display: block;
  margin-left: 5px;
  margin-top: 20px;
  font: 'Actor', sans-serif;
}

.ingredients {
  font-size: 18px;
  display: block;
  margin-left: 5px;
  margin-top: 20px;
}

.serv {
  font-size: 20px;
  font: 'Alegreya Sans', sans-serif;
  margin-left: 5px;
  margin-top: -20px;
}

.instructions {
  display: inline-block;
  font-size: 18px;
}

.ol li {
  color: #ff00ff;
}
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Actor|Alegreya+Sans|Kalam" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="recipe.css">
</head>

<body>
  <div class="topnav">
    <a href="#home">Home</a>
    <a href="#contact">Contact Us</a>
    <a href="#about">About Us</a>
    <a href="#wheel">Wheel</a>
    <input type="text" placeholder="Search..">
  </div>
  <div class="rectitle">
    Easy 3 Step Honey-Sriracha Salmon
  </div>
  <div class="byx">
    By: Varun J -- Read more
    <a href="#aboutus">Here</a>
  </div>
  <div class="ingredients">
    <h1>Ingredients:</h1>
  </div>
  <div class="serv">
    Serves 1 person
  </div>
  <div style="clear:both"></div>
  <div class="ingred">
    <p>Salmon:</p>
    <p>1 Medium sized Salmon</p>
    <p>Salt and Pepper (to taste)</p>
    <p>Sauce:</p>
    <p>1 tablespoon Sriracha</p>
    <p>1 tablespoon Honey</p>
    <p>1/2 tablespoon Lime Juice</p>
  </div>
  <div style="clear:both"></div>
  <div class="instructions">
    <h1>Preperation:</h1>
  </div>
  <div class="prep">
    <ol>
      <li class="listi"><span style="color: black">test</span></li>
    </ol>
  </div>
</body>

</html>

JSFiddle: https://jsfiddle.net/JSSSSS/y3mcp2t8/1/

Пожалуйста, потерпите меня, поскольку я не совсем лучший HTML / CSS-кодер.

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Та же методика, использующая вложенные интервалы для сохранения автонумерации и разрешения стиля чисел и текста: 

.preplist {
  color: blue;
  font-size: 16px;
}
.preplist2 {
  color: red;
  font-size: 24px;
}
.listobject {
  color: green;
  font-size: 10px;
}
<div>
    <ol>
        <span class="preplist"><li><span class="listobject">test</span></li></span>
        <span class="preplist2"><li><span class="listobject">test2</span></li></span>
    </ol>
</div>
0 голосов
/ 29 ноября 2018

Это то, что вы можете сделать.

В файле CSS: 

ol li {
  list-style: none;
}

.number {
   color: red;
}

В HTML: 

<ol>
  <li><span class="number">1. </span>item</li>
</ol>

Как видите, выдолжны написать числа.То есть они больше не будут генерироваться автоматически.Но могут быть более сложные решения этой проблемы.См. Здесь: Как раскрасить автоматически сгенерированные числа в стиле списка?

[Код также здесь: https://jsfiddle.net/asifmeh/5dmr8zfL/3/]

...