Как задать цвет заголовка в html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Как задать цвет в CSS. Основы CSS для начинающих. Урок №8
Всем привет!
В сегодняшнем уроке я расскажу о том, как менять цвет текста, ссылки, таблицы, рамки, фона страницы.
Ну что, вы готовы? Тогда вперед к изучению урока!
В предыдущем уроке я выложил «Коды цветов». Вы их можете смело использовать в сегодняшнем уроке. А можете использовать 9 основных цветов без оттенков:
| #000000 |
| #FF0000 |
| #00FF00 |
| #0000FF |
| #FFFF00 |
| #00FFFF |
| #CCCCCC |
| #FF00FF |
| #FFFFFF |
| #663333 |
Цвет задается по названию цветов, по шестнадцатеричному значению и с помощью RGB.
— по названию цвета:
используя этот метод, нужно знать хорошо английский язык. Знаете название цвета на английском, можете смело вписывать его в код. Например, вот так:
— по шестнадцатеричному значению:
для определения цвета в HTML используются числа в шестнадцатеричном коде: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены на латинские буквы. Например, вот так:
— с помощью RGB:
RGB — это цветовая модель, которую тоже используют при создании графики, дизайнов сайтов, приложений и т.п. Принцип ее действия заключается в следующем: монитор на компьютере состоит из огромного количества маленьких блоков светодиодов. В каждом по три цвета – красный, зелёный, синий ( R ed G reen B lue).
Схема смешивания цветов для моделей RGB:
Интенсивность своего свечения светодиоды могут менять от 0 (не горит) и до «255» (максимально ярко). Если всем трем цветам задать параметр «0», то получится черный цвет, а если всем прописать «255» – будет белый. Меняя интенсивность свечения этих светодиодов, можно получить в итоге каких-то там 16 миллионов цветов
Посмотрите на примерах, как работает все вышеописанное.
Цвет текста
Свойство «COLOR»
Чтобы поменять цвет заголовка ( <h1> — <h6> ), текста <p> и ссылки, воспользуйтесь правилом « color ».
Давайте закрепим выше сказанное и попробуем задать цвет тремя способами:
— по названию цвета:
-по шестнадцатеричному значению:
Теперь давайте я поменяю цвет для заголовка, текста и ссылки.
В HTML добавьте такой код:
Меняем цвет для заголовка (H1, H3, H3) в CSS:
Меняем цвет для текста в CSS:
Меняем цвет ссылки в CSS:
- visited — Стиль для посещенной ссылки
- active — Стиль для нажатой ссылки
- hover — Стиль ссылки при наведении на нее курсора
Цвет рамки
Свойство «BORDER—COLOR»
Чтобы изменить цвет рамки, воспользуйтесь правилом « border-color ».
Сейчас текст обведем рамкой.
Есть еще и сокращенный способ:
Цвет рамки таблицы
Свойство «BORDER—COLOR»
Чтобы изменить цвет рамки таблицы, воспользуйтесь таким же правилом « border-color ».
В HTML добавьте:
Цвет фона
Свойство «BACKGROUND—COLOR»
Чтобы залить другим цветом фон страницы, таблицы, блока, воспользуйтесь правилом « background-color »:
Меняем фон страницы
Если вы хотите поменять цвет фона веб-страницы, то пропишите правило « background-color » к селектору « BODY » можно и к « HTML »
Меняем фон таблицы
Если вы хотите поменять цвет фона таблицы, то пропишите правило « background-color » к селектору « td », « table »
Меняем цвет кнопки
Если нужно поменять цвет кнопки, пропишите любой класс (для примера я прописал класс « submit »):
А в CSS к селектору «submit» прописываем правило « background-color »:
Примечание
Все примеры, указанные выше, непосредственно касались всех элементов веб-страницы. То есть, если я прописал правила к заголовку « h2 », то на всех страницах будет действовать это правило для заголовка « h2 ». Если вы помните урок «Синтаксис CSS», то знаете, что можно задать правило для некоторых веб-страниц в особых моментах. Например, вы хотите только на странице контактов заголовок « h2 » сделать синим цветом.
Для этого пропишите в HTML для первого тега « h2 » класс, например, « stepkiblog ».
В CSS:
Если прописать ID :
То в CSS это будет так:
Надеюсь, что урок был для вас полезен, а самое главное – ПОНЯТНЫМ!
Если вам интересны мои уроки, и вы в дальнейшем хотите по ним обучаться, подписывайтесь на обновления моего блога.
How to Change Text and Background Color in CSS
CSS (Cascading Style Sheets) is a language that allows you to create beautiful web pages.
Thanks to the CSS text color syntax, you can determine the exact color of text on your webpage. This syntax is essential because it increases the usability and accessibility of your website and other marketing collateral.
Whether you’re building from scratch or are using BootStrap CSS, you’ll find the knowledge of HTML and CSS useful. In this article, we’ll examine how to change text and background color in CSS.