» »

Изменяем цвет текста для сайте


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

Если вы сами хотите сделать через теги на подобие FONT, SPAN и DIV, то здесь все очень просто, но в этом случай вам только нужно знать цвета. Вы на самом сайте можете увидеть прописные цвета, как "red, green, blue" но больше всего вам попадется 16-ричном код, который вам представлен ниже. И лучше безусловно его делать на фотошоп, как там вы просто видите курсор и смотрите какой оттенок и код автоматически появляется. Есть и скрипты оттенков, и там можно что то подобрать, но вам виднее будет.

Скрипт для использования в CSS:

Код
* {color:blue} // весь текст на странице будет синим  
body {color:#FF0000} //текст BODY будет красным  
.class_element {color:green} //для элемента с определенным классом  
#div_element {color:green} //для элемента с определенным ID


Ставим его и настраиваем как вам нужно.

Как изменить цвет текста на сайте

Но также давайте разберем такую ситуацию, что к примеру вам нужно где то в дизайн поставить красную или синее запись и здесь без тега не обойтись.

Код
<font color="red">Красный текст</font>


Здесь вы даже в этом случай можете использовать сам стиль и получиться так.

Код
<font style="color:#0000FF">Синий текст</font>


Оттенок цвета как #0000FF он и является является 16-ричным кодом.

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

PS - а так кто в стилях немного понимает, он может просто найти тот кусок, который будет отвечать за гамму. Просто сайт построен на многих оттенках, и у него нет одного главного, под каждую запись идет свой оригинальный. И без всяких стилей вы в ручном режиме можете изменить.

Оформление текста на сайте



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

Размеры шрифта:



Код
<font style="font-size:13pt;"> Шрифт размером 13 пунктов </font>
<font style="font-size:15pt;"> Шрифт размером 15 пунктов </font>
<font style="font-size:9px;"> Шрифт размером 9 пикселей </font>
<font style="font-size:12px;"> Шрифт размером 12 пикселей </font>
<font style="font-size:15px;"> Шрифт размером 15 пикселей </font>
<font size="2"> Шрифт 2-го размера (может быть от 1-го до 7-го) </font>
<font size="4"> Шрифт 4-го размера </font>
<font size="+1"> Шрифт на 1 размер больше обычного </font>


Заголовки:



Код
<h1> Заголовок 1-го уровня </h1>
<h2> Заголовок 2-го уровня </h2>
<h3> Заголовок 3-го уровня </h3>
<h4> Заголовок 4-го уровня </h4>
<h5> Заголовок 5-го уровня </h5>
<h6> Заголовок 6-го уровня </h6>


Оформление текста с помощью шрифтов:



Код
<font style="font-family:Comic Sans Ms;"> Шрифт Comic Sans Ms </font>
<font style="font-family:Monotype Corsiva;"> Шрифт Monotype Corsiva </font>
<font style="font-family:Tahoma; font-size:13pt;"> Tahoma, 13 пикселей </font>


Оформление текста с помощью цвета:



Код
<font color="#0000ff"> Синий текст </font>
* Цифра #0000ff означает синий цвет в RGB палитре.

<font color="red"> Красный текст </font>
* Можно пользоваться стандартными словесными обозначениями цветов: Red, Green, Blue и т.д.

<div style="background-color:#eeeeff;"> Голубой фон </div>
* У фона тоже можно менять цвет. Обратите внимание, что атрибут style использует синтаксис CSS.

<div style="background-color:lightgray; color:#0000ff;"> Синий текст, серый фон </div>


Некоторые предопределённые цвета



Код
Black White Red Green Blue Purple Firebrick Maroon OrangeRed MidnightBlue CornflowerBlue
Cyan Yellow Magenta DarkGreen DarkGoldenrod Gold Orchid BlueViolet Burlywood PeachPuff

Некоторые цвета в шестнадцатиричном коде — интенсивность красного, зелёного и синего (RRGGBB):

#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #990000 #FF3030 #000080 #000066 #0000CD #AFEEEE #006400 #66FF00 #00B800 #DAA520 #FFCC33 #FFA500 #C71585 #8B008B #CC33FF


Оформление текста с использованием тени/подсветки:

Свойство text-shadow имеет четыре параметра: X Y амплитуда цвет.
X — горизонтальное смещение тени/подсветки к тексту. Положительное значение — смещение вправо, отрицательное значение — смещение влево.
Y — вертикально смещение тени/подсветки к тексту. Положительное значение — смещение вниз, отрицательное значение — смещение вверх.
Амплитуда — чем выше значение, тем больше степень размытия.
Цвет — тёмные тона дадут тень, светлые тона — «подсветку».



Код
<font style="text-shadow: black 0 0 10px; color:white;">
Только тень </font>

<font style="text-shadow: 1px 1px 1px #000; color: #f9f5ed;">
Tahoma с тенью </font>

<font style="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; color: #ddcca3;">
Tahoma с контуром </font>

<font style="text-shadow: -1px -1px #666, 1px 1px #FFF; color: #ddcca3;">
Tahoma вдавленный </font>

<font style="text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; color:#ddcca3;">
Tahoma объёмный </font>

<font style="text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; color:DarkGray;">
Tahoma неоновый </font>

<font style="text-shadow: 0 0 0.2em #8F7; color:DarkGray;">
Tahoma неоновый </font>

<font style="text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F; color:Black;">
Tahoma неоновый </font>

<font style="text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;">
Tahoma, много оттенков </font>


Выравнивание текста и форматирование параграфов





Код
<p align="left"> Выравнивание текста по левой стороне </p>

<p align="center"> Выравнивание текста по центру </p>

<center> Отцентрированный текст </center>
<p align="right"> Выравнивание текста по правой стороне </p>

<p align="justify"> Выравнивание текстов по обеим сторонам — для текстов, имеющих длину более одной строки </p>

<p style="text-align:justify;"> Вариант выравнивания текстов по обеим сторонам с использованием параметра форматирования CSS </p>
20.06.2016 Просмотров: 431 Комментарий: (7)

Поделиться в социальных сетях

Материал разместил

Комментарий: 6
Scheme
Scheme 21.06.2016 16:181
0
А что уже на визуальном нельзя все сделать. Но если под дизайн, то здесь согласен, но есть под статью оформлять, то все можно на визуальном все сделать.
Maryges
Maryges 21.06.2016 16:202
0
Стили эти как понял подобраны на весь сайт, или как. Просто там много можно найти color, не знаю, если на тестовом попробовать.
Сопрано
Сопрано 21.06.2016 16:223
0
Там же в стилях все написано, что за какой элемент отвечает.
Scheme
Scheme 21.06.2016 17:434
0
Так в том то дело, сделано под определенное, а не на весь сайт.
Сопрано
Сопрано 25.06.2016 21:185
0
Что то не заметил, как раз нужно было, да и пригодится всегда.
Сафрон
Сафрон 25.06.2016 21:246
0
Вот это нормально, а то через фотошоп каждый сможет подобрать, а здесь еще на стилях.
avatar