Вернуться   Форум ChatPlanet.ru > Сервис «Мой чат» aka «Август» > Уроки

Важная информация

Ответ
 
Опции темы Опции просмотра
Старый 13.12.2009, 19:13   #1
 
Регистрация: 06.05.2007
Сообщений: 939
Вы сказали Спасибо: 271
Поблагодарили 2,651 раз
Репутация: 2546
Отправить сообщение для Mickeleangelo с помощью ICQ
Mickeleangelo вне форума
По умолчанию Изучаем HTML. Часть 9 — Блочная модель, примеры css

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

Все html элементы делятся на 2 группы: блоки (block) и встроенные (inline).

Блочные элементы всегда начинаются с новой строки, а также заканчиваются ею. Т.е. если расположить несколько таких элементов друг за другом, то они будут идти вертикально. Самые часто употребляемые — это <div>, <p>, <h1>…<h6>, <ul>, <ol>, <li>.

Встроенные элементы не создают переносов строк. Яркие представители: <a>, <span>, <img>, <i>, <strong>.

Более специализированным языком можно сказать, что блочные элементы создают новые потоки (контент форматирования), а встроенные — нет.

Очень важным правилом является то, что блочные элементы нельзя вставлять внутрь встроенных.

Вернемся к блочным элементам. По-сути они ничем не отличаются друг от друга. Если помните, в предыдущей части я говорил, что стиль отображения элементов страницы, в том числе, определяется заданными в браузере стилями «по-умолчанию». Так вот, разница в этих элементах лишь в том, что для <h1> в стиле по-умолчанию задан большой размер шрифта и полу-жирность, а для <p> обычный размер и небольшие отступы между блоками.

Для любого блочного элемента можно задать следующие параметры:
  • Отступы вокруг
  • Граница
  • Отступы внутри
  • Ширина и высота
Рассмотрим их по порядку, а заодно и посмотрим, как они задаются в стилях.

Отступы вокруг элемента

Определяется параметром margin. Примеры:
Код HTML:
<style type="text/css">
H1 {
    margin: 10px;
}

P {
    margin: 0 5px;
}

.mysuperclass {
    margin: 1px 2px 3px 4px;
}

.anotherclass {
     margin-top: 1px;
     margin-right: 2px;
     margin-bottom: 3px;
     margin-left: 4px;
}

.someclass {
    margin: 5px 20px 10px;
}
</style>
Для заголовков h1 задан общий внешний отступ в 10 пикселей; для параграфов верхний и нижний отступы равны нулю, а правый и левый по 5 пикселей; отступы у классов mysuperclass и anotherclass одинаковы (в пикселях): верхний 1, правый 2, нижний 3, левый 4; а у класса someclass (в пикселях): верхний 5, правый 20, нижний 10, левый 20. Запомнить очень просто: параметром margin (а также всеми другими аналогичными) стили задаются по часовой стрелке, начиная с верхнего. Если не указано только 1 число, то это общий для всех стиль. Не указанные параметры для низа и лева берутся из верха и права, соответственно. В примерах я использовал только пиксели, хотя существуют и другие единицы.
  • px — пиксели
  • pt — типографские пункты (обычно 12pt = 16px)
  • em — ширина заглавной буквы M в шрифте
  • ex — высота строчной буквы x в шрифте
  • pc — пики (12 пунктов)
  • in — дюймы
  • cm — сантиметры
  • mm — миллиметры
  • % — проценты от значения родительского элемента
На практике используются px, pt, em и %. Остальное лично я не встречал в вебе. Глупо указывать отступы в сантиметрах, которые на мониторах разного размера и при разных разрешениях будут смотреться по-разному, а вот в версии для печати — вполне можно использовать.

Итак, отступы вокруг элементов. Есть у них одно очень интересное свойство: они «схлопываются». Например, есть 2 идущих подряд элемента:
Код HTML:
<div style="margin: 30px;"></div><div style="margin: 20px;"></div>
Расстояние между ними будет не 50 пикселей, а всего 30. Отступы не суммируются. Для определения расстояния между элементами выбирается наибольший отступ. Это я и назвал «схлопыванием».

Граница вокруг элемента

Не смотря на то, что границы используются всё реже и реже (дизайнеры радуют нас всё больше и больше), знать о них надо. Лучше всего, как всегда, на примерах:
Код HTML:
<style type="text/css">
H1 {
    border: 1px solid #ff0000;
}

P {
    border-width: thin medium  thick 1px;
    border-style: dotted solid dashed solid;
    border-color: #ffffff green #000000 transparent;
}

.mysuperclass {
    border-top: 1px inset #ff0;
      border-right: 2px outset #0f0;
      border-bottom: 3px double #0ff;
      border-left: 4px groove #000;
 }

.anotherclass {
    border-top-width: 1mm;
    border-left-style: dotted;
    border-bottom-color: red;
}
</style>
Самый простой вариант: border: [размер] [стиль] [цвет]; можно в развернуть в отдельные определения размера (border-width), стиля (border-style), цвета (border-color), в отдельные определения границ для сторон (border-top, border-left) или вообще в отдельные элементы (border-top-width, border-left-style, border-bottom-color). К обычным размерам добавляется 3 варианта: thin (толстый) medium (средний) thick (тонкий). Стили рамки:
  • none — отсутствует
  • hidden — невидимая
  • dotted — точечная
  • dashed — пунктирная
  • dot-dash — «точка-пунктир»
  • dot-dot-dash — «точка-точка-пунктир»
  • solid — сплошная линия
  • double — двойная линия
  • groove — вогнутая рамка
  • ridge — выпуклая рамка
  • inset — вогнутая поверхность
  • outset — выпуклая поверхность
  • wave — волнистая
Отступы внутри элемента

Определяются параметром padding, абсолютно так же, как и margin:
Код HTML:
<style type="text/css">
H1 {
    padding: 10px;
}

P {
    padding: 0 5px;
}

.mysuperclass {
    padding: 1px 2px 3px 4px;
}

.anotherclass {
     padding-top: 1px;
     padding-right: 2px;
     padding-bottom: 3px;
     padding-left: 4px;
}

.someclass {
    padding: 5px 20px 10px;
}
</style>
В отличие от отступов вокруг элемента, не «схлопываются», в них отображается фон блока.

Высота и ширина


С одной стороны, тут всё просто. 2 свойства: width и height.
Код HTML:
<style type="text/css">
 H1 {
     width: 100%;
 }
 
 P {
     width: 400px;
 }
 
 .mysuperclass {
    width: 150px;
    height: 100px;
 }
 </style>
Самое интересное начинается, когда для блоков задаются и отступы и размеры.
Код HTML:
<div style="margin: 20px; padding: 10px; border:1px solid red; width: 500px; background: yellow;">Тут какой-то текст</div>
Вопрос: как будет нарисован такой блок?
Начнем с очевидного: вокруг будут отступы в 20 пикселей, потом черная однопиксельная рамка, фон блока желтый, отступы от рамки в 10 пикселей, внутри текст… но какой будет ширина блока? 500? 520 522? 560? Согласно спецификации, атрибуты width и height определяют размеры, которые отводятся под контент. Это значит, что все нормальные браузеры отобразят блок следующим образом: общая ширина желтой области будет 520 пикселей (width + padding-left + padding-right), вокруг которой будет однопиксельная рамка. Итого общая ширина видимого блока будет 522 пикселя, а отступы в 20 пикселей будут уже вокруг этих 522.

Почему в предыдущем абзаце я написал «нормальные браузеры»? Да потому что всеми любимый IE как всегда отличается умом и сообразительностью. Еще в 4 и 5 версии ослика неправильно обрабатывалось это свойство и параметр width определял общую ширину блока (контент + внутренние отступы + граница). IE старших поколений перенял эту «традицию», но в тоже время предоставил возможность заставить вести себя как все. Чтобы усмирить ишака либо используют css-хаки, либо условные комментарии (о тех и других расскажу в другой раз), либо идут по самому правильному пути, задавая режим рендеринга.

Режимы рендеринга html документов


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

Как вы знаете, существуют стандарты, по которым браузеры должны отображать содержимое страниц. На данный момент актуальной является спецификация HTML 4.01. В ней, например, тег <font> является устаревшим (еще с версии HTML 4.0 от 1997 года!). Но вы его хотите использовать)) Чтобы сказать браузеру, в каком режиме следует отображать html документ, в самое начало помещают специальную строку — DOCTYPE, в которой и указывается режим. Варианты для спецификации HTML 4.01:

Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
Строгий режим. Не содержит запрещенных и устаревших элементов, таблицы только для табличных данных, полное отделение содержимого от стилей (через css).

Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
Переходный режим. Некий компромисс между строгими ограничениями предыдущего варианта и вседозволенностью. Что-то уже нельзя, а что-то еще можно. Но, что важно, уже в этом режиме IE ведет себя как нормальный браузер при вычислении размеров блоков.

Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Документ с фреймами.

Если DOCTYPE не указывать вовсе, то браузеры переходят в т.н. режим несовместимости (quirks mode). Можно сказать (хотя это не совсем так), что браузеры начинают вести себя как устаревшие, вылезают непонятные глюки.

Кроме стандарта HTML есть еще и стандарт XHTML. Не смотря на почти одинаковое название, он довольно сильно отличается, так как основан на стандартах xml, в нем намного больше ограничений. Для XHTML есть следующие доктайпы:

Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Переходный режим.

Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">>
Строгий режим.

Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Документ с фреймами.

Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.1 — модульный.

Да, конечно, если ваша страница (к примеру, стартовая) представляет собой большую фоновую картинку + простую форму входа в чат, то все эти проблемы с багами IE, режимами рендеринга и прочим вас не будут касаться. Но как только вы попытаетесь сделать что-то более-менее сложное, да так, чтобы в разных браузерах всё выглядело одинаково, то без доктайпа будет сложно. Самый простой вариант — использование традиционного режима:

Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Заголовок страницы</title>
</head>
<body></body>
</html>
В следующей части будет пример верстки несложной стартовой страницы.

© Mickeleangelo
__________________

Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два.
Report Post
Ответить с цитированием
Эти 16 пользователя(ей) сказали Спасибо Mickeleangelo за это полезное сообщение:
Dolphin (02.08.2010), Domino (12.01.2011), Evgeny aKa СгУщЕнКa (02.08.2010), eXandr (13.12.2009), Heartbeat (07.08.2012), Mistik (13.12.2009), Pusiketka (14.12.2009), Rebel Yell (13.12.2009), Star (13.12.2009), Vice (13.12.2009), xxx (21.06.2010), Альп (13.10.2011), Ламия (14.12.2009), Леди Стерва (14.12.2009), плюха (06.08.2010), ~Нафанька~ (14.12.2009)
Старый 02.08.2010, 11:56   #2
 
Регистрация: 11.04.2009
Сообщений: 1
Вы сказали Спасибо: 9
Поблагодарили 1 раз в 1 сообщении
Репутация: 11
Evgeny aKa СгУщЕнКa вне форума
По умолчанию

где же этот самый пример?) напишите, пожалуста! очень интересно!!)
Report Post
Ответить с цитированием
Этот пользователь сказал Спасибо Evgeny aKa СгУщЕнКa за это полезное сообщение:
Charm~El` (20.06.2012)
Старый 07.08.2012, 02:05   #3
 
Регистрация: 04.08.2010
Сообщений: 43
Вы сказали Спасибо: 75
Поблагодарили 103 раз
Репутация: 113
Heartbeat вне форума
По умолчанию

Тоже жду примера )
Report Post
Ответить с цитированием
Старый 08.08.2012, 08:15   #4
 
Регистрация: 08.08.2012
Сообщений: 10
Вы сказали Спасибо: 0
Поблагодарили 26 раз
Репутация: 36
kaktoos вне форума
По умолчанию

Дамам могу попробовать объяснить в скайпе, а парни.. уж давайте сами, там ничего сложного.
Report Post
Ответить с цитированием
Этот пользователь сказал Спасибо kaktoos за это полезное сообщение:
Heartbeat (08.08.2012)
Старый 08.08.2012, 14:33   #5
 
Регистрация: 04.08.2010
Сообщений: 43
Вы сказали Спасибо: 75
Поблагодарили 103 раз
Репутация: 113
Heartbeat вне форума
По умолчанию

Цитата:
Сообщение от kaktoos Посмотреть сообщение
Дамам могу попробовать объяснить в скайпе
Любезно с вашей стороны, но лучше предоставить возможность всем сразу попробовать...
Report Post
Ответить с цитированием
Старый 08.08.2012, 18:49   #6
 
Регистрация: 08.08.2012
Сообщений: 10
Вы сказали Спасибо: 0
Поблагодарили 26 раз
Репутация: 36
kaktoos вне форума
По умолчанию

Цитата:
Сообщение от Heartbeat Посмотреть сообщение
предоставить возможность всем сразу попробовать...
У вас есть эта возможность. Для этого не надо действовать по уроку, все необходимые знания вы получили из предыдущих статей. В своё время я начал с того, что просто попробовал переделать чужую страницу, а всю нужную информацию искал в интернете. Но вы либо боитесь чего-то, либо просто ждете готового.

И да, очень тяжело сделать урок верстки в текстовом варианте, лучше будет если вы всё это увидите. Посмотрите на YouTube видео по запросу "уроки верстки". Это, конечно, не верстка стартовых страниц для чатов, но основы понять можно. Дальше дело за Августовскими мелочами.
Report Post
Ответить с цитированием
Этот пользователь сказал Спасибо kaktoos за это полезное сообщение:
Heartbeat (09.08.2012)
Старый 09.08.2012, 00:49   #7
 
Регистрация: 04.08.2010
Сообщений: 43
Вы сказали Спасибо: 75
Поблагодарили 103 раз
Репутация: 113
Heartbeat вне форума
По умолчанию

Report Post
Ответить с цитированием
Старый 09.08.2012, 05:13   #8
 
Регистрация: 08.08.2012
Сообщений: 10
Вы сказали Спасибо: 0
Поблагодарили 26 раз
Репутация: 36
kaktoos вне форума
По умолчанию

Понятно теперь почему вы ждете готового.
Report Post
Ответить с цитированием
Старый 10.08.2012, 03:21   #9
 
Регистрация: 04.08.2010
Сообщений: 43
Вы сказали Спасибо: 75
Поблагодарили 103 раз
Репутация: 113
Heartbeat вне форума
По умолчанию

Вы меня не поняли, мне понравилась идея с переделкой страницы, и я тоже решила попробовать ))
Report Post
Ответить с цитированием
Старый 10.08.2012, 04:30   #10
 
Регистрация: 08.08.2012
Сообщений: 10
Вы сказали Спасибо: 0
Поблагодарили 26 раз
Репутация: 36
kaktoos вне форума
По умолчанию

Что же, желаю успехов в таком случае.
Report Post
Ответить с цитированием
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изучаем HTML. Часть 7 — Таблицы Mickeleangelo Уроки 4 21.02.2010 12:41
Изучаем HTML. Часть 8 — Что такое CSS Mickeleangelo Уроки 6 31.10.2009 13:15
Изучаем HTML. Часть 6 — Списки Mickeleangelo Уроки 0 20.03.2009 00:19
Изучаем HTML. Часть 5 — Ссылки Mickeleangelo Уроки 0 14.03.2009 16:57
Изучаем HTML. Часть 1 — Основы Mickeleangelo Уроки 0 06.03.2009 12:56


Текущее время: 02:20. Часовой пояс GMT +4.


Рейтинг Chat Planet Top
Посетителей всего
Просмотров сегодня
Посетителей сегодня
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot
При перепечатке материалов форума обязательна активная ссылка на тему — источник информации.