Создание html-документа. Добавление абзацев. Назначение стилей элемента body 


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Создание html-документа. Добавление абзацев. Назначение стилей элемента body



- Создайте каркас документа

<html >

<head>

<title>Заголовок</title>

</head>

<body>

</body>

</html>

 

- Введите заголовок и абзац текста

В теле документа (внутри элемента body) введите элемент заголовка первого уровня с текстом:

 Lorem ipsum

Затем введите элемент абзаца - также с произвольным текстом:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

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

- Сохраните документ и откройте в браузере.

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

 Добавление таблицы каскадных стилей

Браузер отображает текст черным цветом на белом фоне, начиная с левого верхнего угла окна (точнее, как правило, делая отступ в 2 пиксела со всех сторон) во всю его ширину.

Изменим этот стиль по умолчанию на собственный.

Добавьте в раздел head элемент style с атрибутом type="text/css". Добавьте в него пустое правило для элемента body:

Теперь по порядку назначим при помощи этого правила элементу body следующий ряд свойств (используем документы Свойства элементов веб и цвета html):

  • цвет фона (неяркий)
  • толстую серую рамку
  • большой отступ - чтобы отдалить рамку от границ окна
  • небольшое поле - чтобы отделить текст от рамки
  • крупный размер шрифта (например, 20px)
  • гарнитуру Comic Sans MS
  • отступ первой строки

Уберем рамку справа и снизу, назначив свойствам border-bottom и border-right значение none.

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


Поделиться:


Последнее изменение этой страницы: 2021-05-27; просмотров: 82; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.19.27.178 (0.005 с.)