Как изменить цвет текста вашего сайта с помощью CSS

Контроль над вашим сайтом - важный элемент веб-дизайна. В идеальном мире вы должны иметь возможность изменять каждый аспект дизайна своего сайта, не жертвуя готовым продуктом.

Конечно, веб-сайты часто бывают упрямыми. Не всегда можно достичь желаемых результатов, не углубляясь в мир CSS. Давайте посмотрим, как изменить цвет текста с помощью CSS на своем веб-сайте, чтобы понять, как можно добиться большего с помощью CSS.

Изменение цвета текста на веб-сайте с помощью CSS

CSS был тщательно разработан, чтобы дать дизайнерам возможность управлять своими проектами веб-сайтов. Изменить цвет текста на вашем веб-сайте с помощью CSS невероятно просто; для этого достаточно одного правила.

цвет синий;

Конечно, правила CSS не работают сами по себе. Вам необходимо связать их с классами элементов, идентификаторами и идентификаторами, чтобы веб-браузеры знали, к чему применяется этот стиль. Вы можете увидеть примеры использования этого правила с заголовком H1, абзацем P и кнопкой ниже.

h1 {цвет: синий; }
p {цвет: красный; }
кнопка {цвет: красный; }

Это должно дать вам общее представление о том, что нужно сделать, чтобы изменить цвет текста вашего веб-сайта с помощью CSS. Обычно требуется больше, особенно если вы хотите придать разным цветам разный текст на своем веб-сайте.

Связанный: Объяснение блочной модели CSS на примерах

Поиск подходящего класса CSS

Прежде чем вы сможете изменить конкретный текст на своем веб-сайте, вам необходимо знать, как идентифицировать его в своем CSS. Большинство веб-браузеров имеют набор инструментов, предназначенных для помощи разработчикам, и вполне вероятно, что тот, который вы используете, имеет что-то, называемое Инспектор. Это можно использовать для просмотра HTML и другого кода, создающего веб-сайт.

Открытие инспектора

Открытие инспектора отличается в каждом браузере на маркете. Мы рассмотрели несколько самых популярных браузеров ниже, чтобы дать вам фору:

• Гугл Хром: CTRL + Shift + C или Точки меню > Дополнительные инструменты > Инструменты разработчика
• Microsoft Edge: CTRL + Shift + C или Точки меню > Дополнительные инструменты > Инструменты разработчика
• Mozilla Firefox: CTRL + Shift + C или Точки меню > Дополнительные инструменты > Инструменты веб-разработчика
• Apple Safari: Предпочтения > Передовой > Показать меню разработки в строке меню а потом Развивать > Показать веб-инспектор

Поиск правильного стиля текста CSS

Это может сбивать с толку, когда вы впервые открываете Инспектор в браузере. Возможно, вы многого не поймете, но пока вам не стоит об этом беспокоиться. Вам просто нужно найти название стиля текста, который вы пытаетесь изменить.

В качестве примера мы собираемся найти и изменить стиль текста CSS, используемый для основного заголовка в разделе MakeUseOf Programming. Вы можете начать этот процесс, проверив элемент, который нужно изменить.

• Гугл Хром: Щелкните правой кнопкой мыши > Осмотреть
• Microsoft Edge: Щелкните правой кнопкой мыши > Осмотреть
• Mozilla Firefox: Щелкните правой кнопкой мыши > Осмотреть или Q
• Apple Safari: Щелкните правой кнопкой мыши > Проверить элемент

Это заставит окно консоли / инспектора вашего веб-сайта сосредоточиться на элементе, который вы пытаетесь изменить. В Chrome, Safari, Edge и Firefox вы должны увидеть раздел с надписью Стили который содержит весь код CSS для проверяемого элемента.

Вы также должны увидеть свой HTML-элемент, выделенный на панели рядом с ним. Это можно использовать для определения класса или идентификатора изменяемого элемента. В нашем случае мы смотрим на основной заголовок H1 на нашей странице, и он принадлежит классу с именем .listing-title.

На этом этапе вы можете протестировать текстовый стиль CSS, который вы будете добавлять на свой веб-сайт. Верхнюю часть раздела стилей CSS в консоли веб-сайта можно использовать для применения правил к конкретному элементу, на который вы настроили таргетинг. Конечно, это не навсегда.

Связанный: Как создать адаптивную панель навигации с помощью HTML и CSS

Добавление нового CSS

Пришло время добавить новый CSS на ваш сайт. То, как вы это сделаете, будет зависеть от типа платформы веб-сайта, которую вы используете, с такими опциями, как Shopify, требующие расширений, позволяющих добавлять CSS без изменения файлов.

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

.listing-title {
цвет синий;
}

Что делать, если цвет вашего текста не меняется?

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

• Очистка кеша: Веб-сайты часто используют кеширование, чтобы сократить время загрузки. Ваш кеш может мешать вам видеть изменения на веб-сайте, и вам необходимо очистить его, когда вы вносите изменения в CSS.
• Выше в таблице стилей: CSS загружает стили последовательно, а это означает, что первые правила в вашей таблице стилей будут теми, которые отображаются на вашем веб-сайте. Перемещение стилей может быть хорошим способом отдать им приоритет перед другими стилями.
• Использование важных тегов: Следующий вариант не считается оптимальным и лучше всего зарезервировать, когда у вас нет другого выбора. Вы можете добавить важный тег к своим стилям текста CSS, чтобы дать им приоритет над всеми другими стилями, и это можно увидеть ниже:

.listing-title {
цвет: синий! важно;
}

Другие текстовые стили CSS Fun

CSS - невероятно мощный инструмент, дающий вам доступ к множеству различных параметров при работе с текстом и другими элементами на своем веб-сайте. Это не ограничивается цветом текста CSS, и вы можете загружать свой текст, если захотите немного изучить CSS. Вы можете найти еще несколько основных правил стиля текста CSS ниже:

• Размер шрифта: Это изменяет размер текста на вашем веб-сайте, например font-size: 12px;
• Толщина шрифта: Толщина относится к толщине шрифта, жирный шрифт означает высокий вес, а тонкий текст - низкий, например font-weight: 400;
• Выравнивание текста: Это изменяет выравнивание текста, с которым вы работаете, например, text-align: right;
• Текстовая тень: Это позволяет вам добавить тень к вашему тексту с помощью ряда атрибутов, например, text-shadow: 2px 2px 3px black;
• Текстовое преобразование: Это изменяет регистр текста, с которым вы работаете, например, text-transform: uppercase;
• Текст-украшение: Это позволяет добавлять к тексту подчеркивания, дефисы и другие украшения, например, text-decoration: underline;

Это всего лишь малая часть того, что вы можете делать с текстовыми стилями в CSS. В Интернете есть множество руководств, которые могут помочь вам в этом процессе, и всегда полезно провести небольшое исследование, когда вы начнете.

Связанный: Как изменить текст вашего веб-сайта с помощью свойства CSS font-family

Узнайте больше, чем цвет текста CSS

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

10 простых примеров кода CSS, которые вы можете изучить за 10 минут

Нужна помощь с CSS? Для начала попробуйте эти базовые примеры кода CSS, а затем примените их к своим собственным веб-страницам.

Читать далее

Об авторе