Как покрасить буквы в слове?
Письмо от подписчика:
Серёга, привет. Написал в теме письма, что вопрос по материалам сайта, просто потому, что не нашел другой подходящей категории.
Мой вопрос касается стилей css, ты же мастер 
У меня есть сайт на вордпресс (знаю, ты ими не занимаешься), но мой вопрос по стилям.
Заголовок моего сайта из 12 букв, мне надо чтобы он был трехцветным, то есть первые три буквы - белые (#ffffff), следующие пять букв - синие (#0060ff), и последние четыре - красные (#ff0000).
Как мне все это изобразить, ниже вставил в письмо код заголовка в файле style.css шаблона темы:
.site-title {
font-family: Georgia, 'ubuntu', sans-serif;
font-size: 44px;
font-weight: bold;
margin: 30px 0 0 16px;
}
.site-title a {
color: #cc0000;
text-decoration: none;
}
.site-title a:hover {
color: #ffd700;
}
Что мне надо там прописать, и можно ли вообще прописать каждую букву своим цветом? Искал информацию в сети по этой теме, ничего не нашел.
Раньше у меня была темка шаблона, где одна буква (первая) прописывалась своим цветом:
/*заголовок сайта*/
.logo a{font-size:50px;width:600px;height:40px;line-height:36px;display:block;margin:30px
0 0 165px;padding:0;float:left;color:#ff000;font-family:Century Gothic,Verdana,Monotype
Corsiva,Garamond,Tahoma;font-weight:normal;font-style:normal;text-shadow:3px 3px 3px
#000000;text-decoration:none}
.logo a:first-letter {color:#ff0000;}
Может мой вопрос и лоховский... я не спец... Поможешь, скажу СПАСИБО.
Ответ на вопрос:
Привет Юра. В стилях можно задать отдельные значения как для первого символа так и для первой строки. Но если тебе надо покрасить в разный цвет буквы или слова в предложении. Рекомендую использовать парный тег <span> </span>
<SPAN>
- это так сказать "пустой" тег строчного типа. То есть оформление у него по умолчанию отсутствует и он идеально подходит для таких вот задач. Вот пример:
Исходный код:
<!-- Красим надпись www.Master-CSS.com -->
<style>
.blue {color: blue;}
.red {color: red;}
.green{color: green}
</style>
<span class="blue">www.</span>
<span class="red">Master-CSS</span>
<span class="green">.com</span>
В итоге получаем вот такую надпись (шрифт увеличил, что бы было лучше видно):
www.Master-CSS.com
Если остались вопросы - задавайте в комментариях.
