Теперь давайте вернёмся к нашему примеру и рассмотрим все наглядно. Снова открываем созданную ранее страничку в блокноте и изменяем цвет шрифта:

Обновляем HTML страницу и проверяем то, что получилось:

Результат: Первая строка стала синего цвета, а вторая осталась по умолчанию - черной.

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

2. часть

Сейчас мы зададим цвет всему тексту документа . Делается это очень легко. Давайте вспомним нашу третью статью. В ней мы говорили, что все, что будит видно в браузере, прописывается в теге ... , тоесть в "туловище" нашего документа.

И так, как мы знаем, ... - тоже тег, поэтому, мы можем ему, так же как и тегу ... , задать необходимые атрибуты.

Цвет в этом случае задается в открывающемся теге , и запись будит выглядеть так:Весь текст вашего документа

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

Теперь рассмотрим эту часть статьи на примере. Присвоим всему тексту документа красный цвет, а тот текст, который мы в 1 части сделали синим, таким и оставим. Для этого просто прописываем код открывающемуся тегу :

Затем, как всегда перед просмотром, сохраняем документ:

И, наконец, обновляем HTML страницу в браузере:

Результат: Мы научились задавать всему тексту документа необходимый цвет, а так же делать часть текста другого цвета.

Инструкция

Поместите заголовки разных уровней между соответствующими открывающими и закрывающими тегами, если это еще не сделано в исходном коде веб-страницы. Например, самый важный заголовок (первый уровень) должен находиться между тегами

и

Заголовок

и

и

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

Впишите между открывающим и закрывающим тегами style описания стилей для заголовков каждого уровня, внешний вид которого вы хотите изменить. Например, если надо изменить только внешний вид заголовков первого уровня, то этот код может выглядеть так:Здесь h1 указывает, что описание в фигурных скобках относится к тегу h1 и называется «селектором». Параметр color задает цвет текста, параметр font-size - размер шрифта, font-style со значением italic - наклонное начертание букв, font-weight со значением bold - , margin-top - , margin-bottom - отступ снизу. Для заголовков второго уровня надо добавить аналогичный блок с селектором h2 и т.д.

Используйте сокращенный синтаксис, если уровней надо описать достаточно много. Например, описания шрифтов можно поместить в один параметр, как и описание размеров отступов. Образец:В параметре margin отступы надо указывать по часовой стрелке, начиная с верхнего отступа, через пробел (сверху справа снизу слева).

Видео по теме

Вам понадобится

• Компьютер, интернет, доступ к содержимому сайта.

Инструкция

Если ваши приоритеты поменялись, и это сказалось на темах сайта, обязательно отразите изменения в заголовке. Выбирая новое название, планируйте, чтобы имя сайта могло стать брендом, если не мировым, то хотя бы для постоянных читателей ресурса. В общем, «как вы яхту назовете, так она и поплывет».

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

Смените заголовок на сайте. Современные бесплатные платформы и разнообразные конструкторы для создания сайтов, как правило, имеют простое визуальное управление, не требующее знания языков программирования. Зайдите в панель управления сайтом в роли администратора.

Найдите на открывшейся странице вкладку, которая называется «Параметры» или «Настройки», или «Общие». И там поищите окошко «Название сайта», куда можно вписывать текст.

Внесите свое новое название в это окошечко. Обязательно нажмите кнопку сохранения, которая на разных web-движках именуется по-разному – «Сохранить», «Опубликовать», «Обновить».

С чего лучше начинать новичкам.
Где же в Интернете деньги или стратегия заработка в сети

Инструкция создания сайта за 5 минут. Основы html и пошаговое создание сайта

Как стать веб дизайнером и научиться создавать сайты на высоком уровне.

Как заработать на своем сайте, как раскрутить сайт и получать прибыль на автопилоте

У вас есть сайт, но он не приносит прибыль? Обзор сервисов по монетизации

Не знаете куда вложить деньги,
чтобы получить прибыль? Это уникальная информация

О форексе вообще. Как правильно вложить свой капитал или заработок 50$ в день на автопилоте

Как и где купить домен и хостинг. Как загрузить сайт в интернет

Как перенести домен к другому регистратору, чтобы сэкономить на продлении

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

Html код который у нас уже есть:

Содержимое моего сайта.

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

Измените тег следующим образом: text="#FF0000" > , то есть для изменения html цвета текста, нужно добавить параметр text= и указать его значение "#FF0000".

Значение параметра определяет цвет, то есть "#FF0000" – красный цвет. Здесь действует закон трех цветов.

Например, "#00FF00" – зеленый html цвет, "#0000FF" – синий html цвет текста. При смешивании, эти три цвета образуют новые оттенки и html цвета. Например, "#3715FB".

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

Содержимое моего сайта.
Я прохожу уроки создания сайта.

(Синим цветом будут выделены новые участки html кода)

Должно получиться следующее > измененный .

Теперь разберемся, как задавать html цвет отдельных фрагментов текста. Если вам нужно чтобы часть текста имела другой html цвет, проделайте следующие действия:

Заключите нужный текст между тегами . Это новый html тег, он является парным.

Затем, введите параметр color= со значением "#00FF00", то есть так color="#00FF00" > текст другого цвета .

Применим знания на нашем html коде и изменим фрагмент текста.

Содержимое моего сайта.
Я прохожу уроки создания сайта.

Должно получиться следующие > меняем .

Цвет фона html

Теперь изменим цвет фона html , для этого нужно задать в теге параметр bgcolor= со значением "#494949", то есть bgcolor="#494949" > .

Цвет фона html не обязательно брать "#494949", можно взять любой другой.

Давайте внесем изменения в наш код и изменим цвет фона html.

Содержимое моего сайта.
Я прохожу уроки создания сайта.

Теперь посмотрим, что получилось > изменение

Задача

Изменить цвет текста заголовка и фона под ним.

Решение

Для изменения цвета фона под текстом используется универсальное свойство background , которое следует добавить к селектору h1 . Цвет заголовка меняется с помощью свойства color , которое также добавляется к этому селектору (пример 1).

Пример 1. Цвет фона под заголовком

HTML5 CSS 2.1 IE Cr Op Sa Fx

Закон внешнего мира

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

Результат данного примера показан на рис. 1.

Рис. 1. Цвет фона под заголовком текста

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

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега

Нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style , который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

• Имя цвета - В HTML имеется большой список и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
• HEX-код цвета - Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета - красный, зеленый и синий. HEX-код - это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

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

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

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style . Общий синтаксис следующий:

<тег style= "color:имя цвета" >... - указание цвета текста по имени.

<тег style= "color:#HEX-код" >... - указание цвета текста по коду.

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

Пример изменения цвета текста

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Результат в браузере

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style . Общий синтаксис такой:

<тег style= "background:имя цвета" >... - указание цвета фона по имени.

<тег style= "background:#HEX-код" >... - указание цвета фона по коду.

Пример изменения цвета фона

Заголовок.

Параграф.

Жирный текст. Обычный текст.

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

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

Домашнее задание.

1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи - 22px, а у подзаголовков по 19px.
3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков - #CC3366.
4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).