Хотите изменить цвет и размер числа в упорядоченном списке
Поэтому мне было интересно, как я могу изменить цвет, размер и шрифт номеров упорядоченного списка. Я знаю, как сделать цвет другим, но мне интересно, как сделать цвет другим. Вот код, который у меня есть
/* 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.
HTML / CSS не позволяет раскрашивать номера стилей списка. Сказав, что есть обходной путь, который я только что нашел здесь: w3.org/Style/Examples/007/color-bullets.en.html ... попробуйте.
Добро пожаловать в Stack Overflow. Замечательно, что вы добавили код в свой вопрос. Это всегда помогает получить быстрые ответы. Было бы даже лучше, если бы в будущем вы показывали нам только самую актуальную часть кода, а не целиком. Ровно столько, сколько необходимо для воспроизведения проблемы, с которой вы столкнулись. (Кроме того, в вашем первом абзаце должно быть пропущено одно или два слова. Пожалуйста, исправьте.)
Ответы 2
Вот что ты можешь сделать.
В файле 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/]
Та же техника, с использованием вложенных промежутков для автоматической нумерации и позволяющей стилизовать числа и текст:
.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>
Не могли бы вы подробнее пояснить, в чем проблема? Я считаю, что у вас есть орфографическая ошибка, когда вы написали: «Я знаю, как сделать цвет другим, но мне интересно, как сделать цвет другим».