Как покрасить буквы в слове?

Письмо от подписчика:

Серёга, привет. Написал в теме письма, что вопрос по материалам сайта, просто потому, что не нашел другой подходящей категории.

Мой вопрос касается стилей css, ты же мастер grin У меня есть сайт на вордпресс (знаю, ты ими не занимаешься), но мой вопрос по стилям.

Заголовок моего сайта из 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

Если остались вопросы - задавайте в комментариях.

Комментариев: 5 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 5
  •  Юрий | 20 сентября 2015 в 05:32:03

    Сергей здравствуй.

    Ничего у меня не получилось, стили стилями, но надо же наверное вносить какие-то изменения заголовка в файл header.php моего шаблона.

    Ну вставил я в header.php вот это:

    www.

    Master-CSS

    .com

    Естественно со своим названием.

    А в style.css это:

    .blue {color: blue;}

    .red {color: red;}

    .green{color: green;}

    Вылезло трехцветное название моего сайта слева вверху, дополнительно к заголовку.

    Я то хотел, чтобы изменился стиль заголовка, а h1 и ссылка в заголовке остались.

    Может, что-то не то сделал?

    Искал еще информацию в сети по этой теме, нашел вот это:

    http://shpargalkablog.ru/2011/04/kak-sdelat-raznyi-stil-u-bukv-css.html

    http://www.artlebedev.ru/tools/technogrette/js/gradient-text/

    Вот ссылка на мою тему вордпресс http://themezhut.com/themes/awaken/

    Это на тот случай, если будет время или будет интересно)))

    Спасибо, что ответил.

  •  Евгений | 11 марта 2016 в 00:10:47

    День добрый!

    Объясните, как найти исходный код файла и как им пользоваться

    •  Джама | 14 мая 2016 в 00:36:42

      советую пользоваться firebug-ом

  •  Евгений | 11 марта 2016 в 01:16:07

    Как найти код шаблона и как им правильно пользоваться

    Подскажите

  •  Серёга | 16 мая 2016 в 08:32:32

    Ребята, я обычно пользуюсь кодом посмотра в Chrome. Нажимаешь F12 и весь код как на ладони. Показываются размеры, отступы и ошибки.