Цвет шрифта на сайте

#Цветшрифтанасайте , #Цветшрифтасайта , #Цветшрифта

Коды с данной страницы см.здесь - Тема Текст, № 4.

Новые шрифты для сайта – качаем отсюда!

Если вам нужно подобрать соответствующий цвет, то вам сюда

Прежде чем коснуться темы изменения цвета шрифтов, мне хочется сказать вам маленькое напутствие! Изучайте код!

И вам будет все равно, где этот цвет шрифта, либо на сайте, либо в html,  либо в css и т.д.

Цвет шрифта на сайте, изменить,код, примеры.

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

1. а).Создадим новую, простую, пустую страницу, создадим файл css, пропишем в нем класс, напишем на странице текст, и к нему прикрепим наш класс. Где цвет шрифта будет по умолчанию, б). Создадим второй класс, которым напишем второй текст и изменим цвет у этого шрифта. в).И ещё! Мы создадим div и в нем также изменим цвет шрифта!
2. Изменим цвет текста на этой странице! Создаём код css, в нём создадим класс, напишем текст, и прикрепим к нему этот класс!

Надеюсь вы не испугались, лишь от перечисления того, что мы будем делать сегодня!

Приступим к изменению цвета шрифта!

Как изменить цвет шрифта на сайте.

1.а).

Создали новую страницу, назовём её:

Tsvet-shrifta-Primer.html

Создали файл css, назвали его

Tsvet-shrifta-Primer.css

Далее прикрепили css   к этому файлу.

Цвет шрифта по умолчанию на сайте.

Когда мы будем создавать  новый абзац  <p>, то наш текст будет автоматически такого цвета, как в коде ниже!

Не буду далеко ходить и возьму код шрифта, которым написан данный текс:

p{
color:#000000;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

За цвет шрифта в данном коде отвечает строчка:

color:#000000;

В данном случае, мы напишем простой текст, который будет заключён в абзац.

<p>Этот текст, заключён в абзац, и он будет на странице по умолчанию, т.е., как только вы создадите абзац, с текстом, то он будет именно этого цвета!</p>

Единственное -  но!

Если не будет перекрытия другим стилем… к примеру стилем таблицы, у которой будет свой стиль! Обязательно это учитывайте, это мы рассмотрим в самом низу страницы!

1.б).

Измененим цвет текста.

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

Создаём новый класс в документе css, назовём его:

.Tsvet-shrifta-Primer

И к нему скопируем верхний код шрифта, изменив в нём цвет, ну, например, на красный!

.Tsvet-shrifta-Primer{
color: #F50B0E;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

Далее нам нужно написать текст и к нему прикрепить этот класс::

<p class="Tsvet-shrifta-Primer">Этот текст будет написан с именным цветом шрифта на красный.</p>

1.в).

Как изменить цвет шрифта в div.

Далее создадим див, в котором разместим текст, и присвоим ему класс, с другим цветом шрифта, чтобы его можно было отличить от предыдущего текста.

И в следующий раз, если вы сделаете абзац, в этом диве, то вам не нужно, каждый раз прикреплять класс к абзацу! Изменим цвет шрифта, ну, например, на синий!

И добавим после класса, абзац. Объяснение, займёт слишком много времени, поэтому, принимаем на веру!

.Tsvet-shrifta-Primer p{
color: #2E06F9;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

Создаём див, напишем в нем текст:

<div class="Tsvet-shrifta-Primer">
<p>Этот текст наспан в диве, к которому прикреплён класс, с изменённым цветом шрифта на синий.</p>
</div>

Смотрим на наш файл css, который у нас получился.

Смотрим на три текста, в которых изменены цвета шрифтов!

Изменить цвет текста на странице,

К которой уже прикреплён файл css.

По умолчанию, для вот этого текста, который вы читаете, в файле css, прописаны свойства вот так: Перед абзацем добавлен  id дива #rightPan, потому, что этот текст находится в нем!

#rightPan p{
color:#000000;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

Изменим цвет на красный:

color: #F50B0E;

+добавим к нему класс

#rightPan  p.Razmer-shrifta-css-Primer{
color: #F50B0E;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}

Далее нам нужен код стилей, в который мы вставим данный код класса. Вставляем этот код, после тегов, в начале страницы.

<style type="text/css">
<!--
/* CSS Document */
#rightPan  p.Razmer-shrifta-css-Primer{
color: #F50B0E;
font-size: 17px;
letter-spacing: 0.07em;
font-family: "Times New Roman", Times, serif;
text-indent: 25px;
line-height: 1em;
}
-->
</style>        

Далее нам нужно написать, какой то текст.

<p class="Razmer-shrifta-css-Primer">Этот текст написан для примера, он с именным цветом шрифта, на странице, к которой уже прикреплён файл css. Облачим его в абзац, к которому прикрепим класс. Razmer-shrifta-css-Primer</p>

Откроем код страницы и вставим это все в неё и у нас получится изменений цвет шрифта текста.:

Этот текст написан для примера, он с именным цветом шрифта, на странице, к которой уже прикреплён файл css. Облачим его в абзац, к которому прикрепим класс. Razmer-shrifta-css-Primer

Для того, чтобы посмотреть на код данной страницы и как встроены коды нового цвета, нажимаем ctrl + U.