static/images/html-intro/float-test.png
static/images/html-intro/web-site-ver-7.png
static/images/html-intro/web-site-ver-8.png
static/samples/html-lessons/float-test.html
static/samples/html-lessons/web-site-ver-7.html
static/samples/html-lessons/web-site-ver-8.html
static/samples/html-lessons/web-site-ver-8c.html
@@ -289,8 +289,8 @@ Cambria — новый красивый шрифт, разработанный
<img src="web-site-ver-5.png" width="669" height="416" />
-Дивы, спаны, идентификаторы и классы
-------------------------------------
+Дивы, спаны, классы
+-------------------
Что, если есть немного отличающиеся друг от друга виды заголовков одного уровня? Что, если вы хотите задать оформление для части страницы, которую не обозначишь особым тегом?
@@ -364,42 +364,201 @@ Cambria — новый красивый шрифт, разработанный
Обратите, кстати, внимание, что у одного тега может быть несколько классов, чем мы воспользовались для заголовка второго уровня.
-На пути к настоящему дизайну
-----------------------------
+На пути к дизайну
+-----------------
-(Про float'ы.)
+Как расположить два куска текста бок о бок? На этом базовом знании основывается вёрстка сайтов любой сложности. Нам помогут два магических заклинания CSS: `float: left` и `float: right`.
+Float делает очень простую вещь: заставляет тег прилипнуть в левому (`float: left`) или правому (`float: right`) краю, а остальной текст его обтекать. Давайте посмотрим на пример [float-test.html](/static/samples/html-lessons/float-test.html):
-Прием 1. Уберем неожиданности
------------------------------
+<img src="float-test.png" width="517" height="288" />
+Эта красота получается совсем просто:
-Прием 2. Ограничим ширину страницы. Центровка
+ <html>
+ <head>
+ <title>Причинно-следственные связи во Вселенной</title>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <style>
+ …
+ !.left { float: left; font-size: 3em; line-height: 1; width: 1em;
+ ! background: #000; color: #fff; text-align: center; margin-right: 0.1em; }
+ </style>
+ </head>
+ <body>
+
+ !!!<div class="left">Т</div>!!!<p>еперь я существую в цифровом мире
+ и мучаюсь экзистенциальным вопросом:
+ <i>файл я дрожащий или на браузер право имею?</i></p>
+
+ </body>
+ </html>
+
+Как видно, первую букву «Т» мы выделили в отдельный `<div>` с классом `left`. Мы заставили его «выпасть из текста и прижаться к левому краю» (`float: left`), задали шрифт высотой в~две строки (высота нормальной строки у~нас~1.5em из-за полуторного интервала, значит две строки — это~3em), задали высоту строки равной высоте шрифта (чтобы лишнее пустое место не выпирало вверх и вниз), задали ширину, равную высоте строки (1em, ибо размер шрифта уже изменился и~ширина измеряется в~em'ах нового размера), центрировали текст внутри `<div>`'а (`text-align: center`), написали его белым по чёрному и задали небольшой отступ справа, чтобы текст не залазил на квадрат (`margin-right: 0.1em`).
+
+О-па, мы сделали буквицу.
+
+Здесь хорошо видно, как работает `float`: он «отталкивает» текст от края, но когда плавающий объект заканчивается, текст снова занимает всю ширину. При этом по вертикали плавающий `<div>` и~идущий вслед за~ним~`<p>` начинаются на одном уровне.
+
+Здесь также можно заметить основной недостаток `float`'а: приходится указывать ширину. Правда, эту ширину можно указать в процентах от родителя, так что, не зная ширины, можно выкрутиться, сделав две колонки по 50%.
+
+Настало время разместить текст в две колонки несколькими способами.
+
+
+Две колонки, способ первый: `float` + `margin`
+----------------------------------------------
+
+Этот способ часто применяется для размещения слева (или справа) навигации или какой-нибудь другой колонки фиксированной ширины. Мы к основной колонке добавляет отступ (`margin`), на место которого «приплывает» `float`:
+
+ <html>
+ <head>
+ …
+ <style>
+ !h1, h2 { margin: 0px; padding: 0px; }
+ body { … }
+ h1, h2 { … }
+ h1 { … }
+ h2 { … }
+ !.left-column { float: left; width: 200px; }
+ !.main-column { margin-left: 220px; }
+ </style>
+ </head>
+ <body>
+
+ <h1>Причинно-следственные связи во Вселенной</h1>
+
+ !<div class="left-column">
+ <h2>Посылка</h2>
+ <p>Я — текстовый файл по имени…</p>
+ !</div>
+
+ !<div class="main-column">
+ <h2>Результат</h2>
+ <p>Теперь я существую в цифровом мире…</p>
+ !</div>
+
+ </body>
+ </html>
+
+Левая колонка cделана плавающей и шириной 200px. У правой колонки сделан слева зазор 220px, чтобы хватило места для левой колонки и~еще немного осталось пустого. Результат вполне стоит усилий ([web-site-ver-7.html](/static/samples/html-lessons/web-site-ver-7.html)):
+
+<img src="web-site-ver-7.png" width="669" height="387" />
+
+Обратим еще внимание на первую жирную строчку. Она сбрасывает все отступы, которые по-умолчанию мог назначить заголовкам браузер. (Padding — это тоже отступ, только он, например, зарисовывается фоновым цветом, в отличие от margin'а.)
+
+Зачем вообще нужен отступ у правой колонки? Потому что левая колонка может оказаться короче, а мы не хотим, чтобы при этом правая колонка залезла на место левой.
+
+Конечно же, таким способом можно устроить и три колонки, левая и правая из которых будут фиксированной ширины (а у средней придется поставить `margin-left` и `margin-right`).
+
+
+Две колонки, способ второй: `float` + `float`
---------------------------------------------
+Предлагается назначить `float: left` обеим колонкам. Прелесть этого способа в том, что он позволяет легко создать не только две или три колонки, а любое их количество. Он основан на том, что подряд идущие плавающие блоки с одинаковым `float` разместятся сбоку друг от друга, если им хватит места.
-Прием 3. Состыковываем float'ы
--------------------------------
+Конечно, нужно, чтобы места колонкам хватило, а иначе они окажутся друг под другом. Поэтому или сделайте ширину страницы фиксированной, или укажите ширину колонок в процентах.
+Сайт будет выглядеть почти идентично предыдущей картинке, а вот код несколько другой:
-Прием 4. Float + margin
------------------------
+ <html>
+ <head>
+ …
+ <style>
+ !h1, h2 { margin: 0px; padding: 0px; }
+ body { … }
+ h1, h2 { … }
+ h1 { … }
+ h2 { … }
+ !.container { width: 500px; }
+ .left-column { float: left; width: 200px; !!!margin-right: 20px;!!! }
+ .main-column { !!!float: left; width: 250px;!!! }
+ </style>
+ </head>
+ <body>
+
+ !<div class="container">
+ <h1>Причинно-следственные связи во Вселенной</h1>
+
+ <div class="left-column">
+ <h2>Посылка</h2>
+ <p>Я — текстовый файл по имени…</p>
+ </div>
+
+ <div class="main-column">
+ <h2>Результат</h2>
+ <p>Теперь я существую в цифровом мире…</p>
+ </div>
+ !</div>
+
+ </body>
+ </html>
+
+Ширина задана у обеих колонок, кроме того, отступ между ними сделан отдельно `margin`'ом. Вся страница заключена в `<div class="container">`, чтобы сделать её фиксированной ширины. (Теперь, если окошко браузера окажется слишком узким, появится горизонтальная прокрутка, но~колонки останутся сбоку друг от~друга, как им~положено.)
+
+Единственное отличие страницы от предыдущей — то, что у неё ограничена ширина ([web-site-ver-8.html](/static/samples/html-lessons/web-site-ver-8.html)):
+
+<img src="web-site-ver-8.png" width="669" height="387" />
+
+Раз уж мы сделали страницу фиксированной ширины, давайте выровняем её всю по центру. Это до неприличия просто:
+
+ <style>
+ …
+ .container { width: 500px; !!!margin-left: auto; margin-right: auto;!!! }
+ …
+ </style>
+
+(Результат см. на [web-site-ver-8c.html](/static/samples/html-lessons/web-site-ver-8c.html).)
+
+Правило: текст внутри блока выравнивается стилем `text-align: center`, но~блоки внутри других блоков (например, `div.container` внутри страницы) выравниваются с~помощью назначения левого и~правого отступа `auto`.
Сеточная вёрстка
----------------
-(Сделать пример CSS-сетки прям тут.)
+Красивые веб-страницы получаются, если горизонтали и вертикали в них расположены не беспорядочно.
+
+Обычно делают так: представляют себе некую сетку, по которой всё выравнивается. Сетка может быть самой разной. Профессионалы иногда используют сложную сетку для создания художественного эффекта.
+
+Мы же научимся сейчас использовать простую сетку. У неё, как и у любой другой сетки, есть горизонтали и вертикали.
+
+С горизонталями мы уже имели дело, настраивая размеры шрифта, высоту строк и размер отступов так, чтобы высота всех элементов страницы была кратна 18px. Это и~есть горизонтальная сетка с~шагом~18px. В принципе, никто не заставляет вас делать шаг сетки равным высоте строки. Мы могли~бы взять сетку с~шагом~6px, тогда границы строк всё равно на~неё бы ложились, а все элементы страницы нужно было бы делать высотой, краткой~6px.
+
+Вертикали обычно проводят иначе: разбивают ширину страницы на одинаковые колонки с~отступами между ними. Например, пусть у~вас страница будет шириной 950px (вполне разумная на сегодняшний день величина). Поделим~её на~24~колонки по~30px каждая с~10px~промежутками между ними. Все элементы страницы должны занимать некоторое количество колонок в ширину. (Скажем, картинка шириной 6 колонок будет иметь размер 6~• 30px~+ 5~• 10px~= 230px.)
+
+Всю страницу обрамляют в `<div class="container">`, который фиксирует её ширину (и выравнивает по центру). Дальше реализуем колонки наиборее сподручным способом (где-то удобнее все колонки сделать через `float: left`, где-то удобнее просто отправить направо картинку при помощи `float: right`).
+
+Чтобы выровнять нижний край колонок (и, например, писать ниже на всю ширину или начать другие колонки), их заключают в~общий `<div>` и применяют к нему магический класс `clear`:
+
+ .clear { display:block; }
+ .clear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
+ * html .clear { height:1%; }
+
+Этот CSS-код содержит отдельный хак для Internet Explorer (знаменитый `height: 1%`, устраняющий многие баги~IE) и отдельных хак для других браузеров (добавление невидимой точки к~`<div>`'у, чтобы тот охватил всех своих `float`'ов). Не пытайтесь их понять.
+
+Я не буду здесь воспроизводить пример сеточной вёрстки, потому что он уже есть: [пример из Blueprint CSS](http://www.blueprintcss.org/tests/parts/sample.html). В исходнике той страницы можно увидеть, как подключаются внешние таблицы стилей. Они используют Blueprint — готовую таблицу стилей, определяющую множество готовых классов для быстрой вёрстки.
+
+Если вы всё еще не поняли, как выглядит сетка, загляните сюда: [тест разных тегов с нарисованной сеткой ](http://www.blueprintcss.org/tests/parts/elements.html).
+
+
+Еще несколько вещей
+-------------------
+
+Стили CSS можно написать прямо в самом теге, например:
+
+ <div style="text-align: center">Курочка-ряба</div>
+
+— не следует этим злоупотреблять, однако для разовых стилей вполне сойдёт.
+
+
+Кроме классов, существуют еще идентификаторы. Они совершенно аналогичны, но задаются у тегов атрибутом `id`, а~в~таблице стилей обозначаются решеточкой (`#`). В~отличие от~класса, двух тегов с~одинаковым~`id` быть не~может. В~целом, нет причин использовать идентификаторы, кроме как для ясности кода~— но, встретив~их где-то, не~удивляйтесь.
-Дополнительные уроки
---------------------
+Что дальше?
+-----------
-* Таблицы
+Найдите хороший редактор, который будет предлагать вам варианты тегов и~стилей по~мере ввода. Я~рекомендую Aptana.
-* Списки
+Вы еще не знаете тегов для таблиц и списков, а также много стилей CSS (например, для отрисовки границ).
-* CSS reset
-* Селекторы CSS
pages/rus/html-lessons/index
690a65796b560ca187fd4b3a09bad64316ee52b4
Andrey Tarantsov
andreyvit@gmail.com
http://github.com/andreyvit/tarantsov-com/commit/04067ebd2db2a2cc54e08a9a777c63984afdea04
04067ebd2db2a2cc54e08a9a777c63984afdea04
2009-01-21T23:13:19-08:00
2009-01-21T23:13:19-08:00
HTML lesson done.
a2479f50e6a3fdcde04b4484c7780c613e8650cb
Andrey Tarantsov
andreyvit@gmail.com