Css цвет текста 09.04.2013

Здравствуйте! Сегодня наша тема — css цвет текста. Тема довольно интересная и объемная, но что вроде там такого объемного и интересного? А вот читайте пост и узнаете.

Вообщем начнем с основ. Вообще в css, цвет текста задается следующим образом. Допустим вам надо задать цвет для текста который находится внутри тегов <div></div>. У этого тега есть какой нибудь класс. И выглядит это примерно вот так:

<div class="text">

<p>Текст текст текст.</p>

<p>Слова слова слова. </p>

<p>Буквы буквы буквы.</p>

</div>

Для того чтобы нам задать цвет для того текста, нам необходима среди файлов нашего сайта, найти файл style.css и в нем найти вот такую конструкцию:

.text{

здесь наверняка уже будет что то написано

}

И к этой конструкции мы добавляем вот такую команду:

.text{

здесь наверняка уже будет что то написано;

color: rad;

}

И тогда текст, как вы уже догадались, станет красным. Так было изначально, можно было задать blue, green, yellow и т.д. Но естественно словесных обозначений стало не хватать. И придумал обозначать цвет шестнадцатеричной системой исчисления. С символом # перед значением цвета.

И наш пример сейчас можно записать вот так:

.text{

здесь наверняка уже будет что то написано;

color: #ff0000;

}

Это все тот же красный цвет, только в шестнадцатеричной системе. Скажем если вам надо сделать первую, ну или вообще любую букву слова другим цветом это можно сделать с помощью тега <span></span>.

И делается это вот так:

<div class="text">

<p><span>Т</span>екст текст текст.</p>

<p><span>С</span>лова слова слова. </p>

<p><span>Б</span>уквы буквы буквы.</p>

</div>

Выделяем, например, заглавные буквы нашего текста, тегом <span></span> и в файле стилей (style.css) пропишем следующее:

.text p span{

color: #ff0000;

}

Это значит мы с вам сделали заглавные буквы нашего текста, красными.

Это еще не все, идем дальше. Так же css цвет текста можно сделать прозрачным, может для кого то это будет актуально. Для этого мы будем использовать формат rgba. Давайте напишу как это выглядит, а потом объясню, как это мы так сделали.

Скажем наши заглавные буквы будут так же красными, но уже прозрачными на 50%. Запишется это так:

.text p span{

color: rgba (255, 0, 0, 0.5);

}

Первые три цифры у нас обозначают красный цвет, последняя, четвертая обозначает прозрачность, где 1 это 100%, тогда 0,5 соответственно это 50%, думаю логика понятна.

Вы спросите меня, но как нам то эти цвета все узнавать??? Кому то нужен, к примеру, лиловый цвет. И как он выглядит в шестнадцатеричной системе исчисления??? Или того хуже в rgba формате...

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

До встречи на Sayt-Stroy.com

Метки: , ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

Добавить комментарий

ВКонтакте