Основы CSS

Учебник CSS: · Что такое CSS?
· Структура html-страницы
· Шрифт: размер и гарнитура
· Выравнивание и пробелы
· Начертание шрифта
· Оформление ссылок
· Форматирование списков
· Классы
· Изображения
· Справочник атрибутов CSS

Основы HTML

Основы CSS3

Структура html-страницы

HTML и CSS тесно взаимосвязаны, поэтому, будем рассматривать их в комплексе (частично повторяя информацию, представленную в ветке "HTML"). Начнем сначала.

Что такое HTML-страница?

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

Например:

---
<p> - открывающий тег абзаца;
</p> - закрывающий тег абзаца;
тег <b>жирного текста</b> - как выглядит показано ниже:
---

тег жирного текста

Любая HTML-страница должна состоять из обязательного набора тегов. Вот пример пустой HTML-страницы с обязательными тегами:

---
<html>
<head>
	<title>Untitled</title>
</head>

<body>



</body>
</html>
---

Более подробно останавливаться на тегах больше не будем, т.к. она подробно рассмотрена в ветке "HTML".

Перейдем к конкретным примерам. Заполним тело HTML-страницы информацией для нашего учебного сайта. Информацию возьмем из Энциклопедии "Кирилла и Мефодия", посвященную Золотому кольцу России.

Как выглядит страница: Пример №1

HTML-код страницы:

<html>
<head>
	<title>Untitled</title>
</head>

<body>
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

Туристический маршрут (действует с начала 1970), проложенный по историческим городам, проходит по территории пяти областей — Московской, Ярославской, Костромской, Ивановской, Владимирской. Древние города этих земель имеют свою судьбу, свое прошлое. Они проделали сложный путь в своем историческом развитии от первых дней рождения до дня сегодняшнего. Многое безвозвратно утеряно на этом долгом пути. Равнодушие и небрежность приводят к частичному или полному уничтожению уникальных построек, тому пример города Калязин, Молога, Углич. При постройке Угличской ГЭС взорван и ушел под воду древний Покровский монастырь с уникальными памятниками 15-17 вв. Половина церквей Углича была снесена, разобраны ограды монастырей, что разрушило их ансамблевую целостность. Усилиями реставраторов удалось вывести из аварийного состояния и спасти от гибели десятки объектов старинной архитектуры, казалось, непоправимо утраченных. Возвращены к жизни в своем первозданном виде: архитектурный ансамбль Воскресенского монастыря (1674-77) Углича, храм Покрова на Нерли (12 в.), Дмитриевский собор (12 в.) и «Золотые ворота» Владимира, Георгиевский собор (12 в.) Юрьева-Польского, памятники древнего Суздаля, где велись комплексные работы по реставрации исторической застройки в пределах всего города, города-музея. Вновь создавались целые архитектурные комплексы Музеев деревянного зодчества в Костроме, Суздале. Все это — творения рук человеческих, прикоснувшихся к заповедным территориям Земли Русской.

Принято считать, что массовое заселение этих земель славянами началось в 9 в. Первым из городов, возникших в Залесье, был Ростов Великий, который упоминается в летописи уже во второй половине 9 в. К началу 12 в. существовали уже все основные города Северо-Восточной Руси: Переславль-Залесский, Ярославль, Владимир-на-Клязьме, Суздаль.

История этих земель связана с жизнью и деятельностью Владимира Мономаха, Юрия Долгорукого, Андрея Боголюбского, Александра Невского, Ивана Сусанина, А. В. Суворова, Н. А. Некрасова, Е. А. Баратынского, Ф. И. Тютчева, М. А. Врубеля, В. М. Васнецова, И. И. Левитана, Ф. Г. Волкова, Л. В. Собинова и многих других представителей русской истории и культуры.

Н. Г. Прохоров
</body>
</html>

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

Как выглядит страница: Пример №2

HTML-код страницы:

<html>
<head>
	<title>Untitled</title>
</head>

<body>
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

Туристический маршрут (действует с начала 1970), проложенный по историческим городам, проходит по территории пяти областей — Московской, Ярославской, Костромской, Ивановской, Владимирской. Древние города этих земель имеют свою судьбу, свое прошлое. Они проделали сложный путь в своем историческом развитии от первых дней рождения до дня сегодняшнего. Многое безвозвратно утеряно на этом долгом пути. Равнодушие и небрежность приводят к частичному или полному уничтожению уникальных построек, тому пример города Калязин, Молога, Углич. При постройке Угличской ГЭС взорван и ушел под воду древний Покровский монастырь с уникальными памятниками 15-17 вв. Половина церквей Углича была снесена, разобраны ограды монастырей, что разрушило их ансамблевую целостность. Усилиями реставраторов удалось вывести из аварийного состояния и спасти от гибели десятки объектов старинной архитектуры, казалось, непоправимо утраченных. Возвращены к жизни в своем первозданном виде: архитектурный ансамбль Воскресенского монастыря (1674-77) Углича, храм Покрова на Нерли (12 в.), Дмитриевский собор (12 в.) и «Золотые ворота» Владимира, Георгиевский собор (12 в.) Юрьева-Польского, памятники древнего Суздаля, где велись комплексные работы по реставрации исторической застройки в пределах всего города, города-музея. Вновь создавались целые архитектурные комплексы Музеев деревянного зодчества в Костроме, Суздале. Все это — творения рук человеческих, прикоснувшихся к заповедным территориям Земли Русской.
 
Принято считать, что массовое заселение этих земель славянами началось в 9 в. Первым из городов, возникших в Залесье, был Ростов Великий, который упоминается в летописи уже во второй половине 9 в. К началу 12 в. существовали уже все основные города Северо-Восточной Руси: Переславль-Залесский, Ярославль, Владимир-на-Клязьме, Суздаль.
 
История этих земель связана с жизнью и деятельностью Владимира Мономаха, Юрия Долгорукого, Андрея Боголюбского, Александра Невского, Ивана Сусанина, А. В. Суворова, Н. А. Некрасова, Е. А. Баратынского, Ф. И. Тютчева, М. А. Врубеля, В. М. Васнецова, И. И. Левитана, Ф. Г. Волкова, Л. В. Собинова и многих других представителей русской истории и культуры.

Н. Г. Прохоров
</body>
</html>

Обратите внимание, как изменился текст страницы - теперь он стал более удобным для восприятия.

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

<div></div> - блок текста, заключенный в DIV, заканчивается переводом строки, это производится автоматически. При использовании DIV (в отличие от P) в начале тега не вставляется абзац.
 - область документа, в пределах которой будут применены параметры форматирования. В отличие от DIV м P этот тег можно применять к любым элементам, даже, к отдельным буквам.

Пример использования тегов DIV и SPAN: Пример №2a

HTML-код страницы:

В начало страницы