Изучаем атрибут стиль для веб элементов HTML

Постигаем HTML стили веб элементов и тегов

29 декабря, 2017 Максим Метелев 21458 просмотров Комментариев нет

Доброго времени суток друзья. В этом уроке я поговорю про html стили страницы. Это вводная часть, в которой мы слегка коснемся CSS. Впереди будет отдельный блок по каскадным таблицам стилей. Так что готовим голову к новой порции знаний по программированию. Погнали!

Содержание

1 Стили элементов HTML
2 Атрибуты HTML стилей
3 Заливка фона HTML
4 HTML цвет текста
5 HTML свойство font
6 Размер текста HTML свойство font-size
7 Выравнивание html элементов alignment
8 Резюме урока
9 Практикум

Стили элементов HTML

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

<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

I am normal

I am red

I am blue

I am big

</body>

</html>

Применение атрибута стилей к элементам html

Атрибуты HTML стилей

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

Он имеет следующий синтаксис:

<tagname style="property:value;">

1	<tagname style="property:value;">

Где property – это свойство, а value – значение. Больше информации вы узнаете из последующих выпусков.

Заливка фона HTML

Свойство background-color определяет цвет фона для элемента HTML. В этом примере фон задается для страницы целиком.

Пример:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

<h1>This is a heading</h1>

This is a paragraph.

</body>

Вот так это выглядит:

Фон страницы залит цветом через атрибут стиля

HTML цвет текста

Свойство color определяет цвет нашего с вами шрифта элемента страницы.

Пример:

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

1 2	<h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>

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

HTML цвет текста через свойство color для заголовка и параграфа

HTML свойство font

Свойство font-family определяет шрифт, а точнее его семейство. Есть шрифт с засечками, который называется serif, а есть без засечек, который называется sans-serif. В интернете для текста предпочтительнее всего семейство шрифтов без засечек. Они лучше воспринимаются.

Пример:

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

1 2	<h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>

Результат:

Свойство font-family: определяем семейство шрифтов для тега заголовка и параграфа

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

Размер текста HTML свойство font-size

Свойство font-size задает размер нашему тексту. Его можно задавать в таких величинах как пиксели (px), em, pt, а также в процентах.

Пример:

Задаем размер текста через свойство font-size

Почему в процентах спросите вы? Это удобно если вы работаете с адаптивной версткой (создаете сайт и элементы в нем под мобильные устройства). Об этом мы тоже поговорим в будущих уроках. Материала очень много.

Выравнивание html элементов alignment

Для выравнивания документов по левой стороне, правой и по центру используется специальное свойство под названием text-align

Пример:

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

1 2	<h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p>

В браузере будет вот так:

Выравнивание элементов с помощью свойства text-align

Резюме урока

Атрибут html style используется для стилизации элементов
Background-color – для придания фона для элементов
Color – для текста html документа
Font-family – для задания семейства шрифта (Verdana, Helvetica, Open Sans, Courier и др.)
Font-size – для размера текста
Text-align – для горизонтального выравнивания (по правому, левому краю и по центру)

Практикум

А теперь проверим насколько вы закрепили все знания. Впереди вас ждет практика. Скачивайте примеры и практикуйтесь на здоровье.

Задание #1

Задание #2

Задание #3

Задание #4

Задание #5

Задание #6

С вами был Макс Метелев. Увидимся с вами уже завтра с новым полезным уроком. Будьте в тренде новой современной востребованной профессии верстальщика сайтов 🙂

Рубрики: Обучение html