Все тексты, представленные в данном разделе, являются плодом нашего интеллектуального труда. Перевод уроков осуществлялся вручную, по возможности сохранялся стиль автора и особенности оригинального языка.
Исходя из вышесказанного – огромная просьба к вам, коллеги web-мастера: пожалуйста, уважайте наш труд, при использовании любых материалов нашего сайта и, в частности, данного раздела ставьте ссылку на сайт www.bcat.com.ua. Заранее спасибо!
Прежде, чем мы сможем говорить о CSS, нам придется разобраться разметкой HTML. Основным требованием, для создания страниц, успешно работающих с CSS, является создание чистой, валидной разметки.
Важнейшим правилом, которое необходимо запомнить является то, что за исключением нескольких особых HTML тегов, все теги нужно закрывать. Подумайте, что случится, если по ошибке вы оставите тег <td> открытым; ваша таблица и вся ваша страница развалятся, верно? Если вы начнете использовать CSS, забывая закрывать теги, – ваши страницы будут выглядеть очень забавно.
В этом отношении наиболее распространенной ошибкой является использование тега <p> для увеличения расстояния между строками. Если вы хотите прервать текущую строку и оставить следующую строку пустой – используйте два тега <br>. Да, <br> как раз является одним из тегов, которые можно оставлять «открытыми»; другими такими тегами, которые вы, возможно, будете регулярно использовать, являются теги <hr> и <img>.
Как сохранять «опрятность» кода? Одним из способов является отделение различных сегментов кода пробелами или выделение структуры кода отступами. просмотрите исходный код этой страницы, то увидите, что ее логическая структура представлена визуально, с помощью отступов. Это значительно облегчает поиск ошибок в коде страницы. Другим способом является использование HTML Tidy (см. страницу Инструментов).
От вас может потребоваться небольшое изменение образа мышления. Прекратите думать о HTML - тегах как о чем-то, что вы ставите в документ, чтобы повлиять на конечный результат. Лучше, считайте их контейнерами. Например, до сих пор вы, возможно, использовали что-то в этом роде:
<p>Дальше идет текст, который я хочу сделать абзацем. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Вышеупомянутый абзац отобразится шрифтом браузера, установленным по умолчанию, так как он не закрыт закрывающим тегом </p>, указывающим на то, что абзац закончен.
Так что вашим первым заданием будет привыкнуть к написанию чистого HTML, и ЗАКРЫВАТЬ ВАШИ ТЕГИ!
Визуальные теги – это теги управляющие внешним видом результирующих страниц. Наиболее очевидным визуальным тегом является тег <font>, но есть другие, такие, как <center> и <blink>. Избавиться от большинства, если не от всех осуждаемых (deprecated) тегов будет очень хорошей идеей, даже если они все еще есть в вашем любимом редакторе HTML. "Осуждаемые" означает «больше не являющиеся частью языка HTML». На этой странице приведен список осуждаемых тэгов. Постарайтесь максимально упростить свои страницы.
Прежде, чем мы наконец перейдем к CSS - еще одна важная вещь, которую нужно знать о HTML.
Важно понять концепцию того, что есть три основных типа html-тегов: теги, обозначающие блочный элемент (block-level), строчный (inline) элемент, и заменяемые (replaced) теги. Расценивайте элементы блочного уровня, как блоки, до и после которых имеются разрывы строк. Тег <p> - хороший пример элемента блочного уровня: как вы знаете, до и после каждого абзаца всегда имеется разрыв строки и пробел. Мы исследуем природу блочных элементов в более поздних уроках, а пока – просто запомните это правило. Элементы блочного уровня - это те элементы, к которым вы чаще всего будете применять правила CSS и сценарии.
Строчные элементы наоборот, не имеют разрывов строки. Строчные элементы используются в рамках строки: хорошим примером будет тег <b> </b> выделяющий фрагмент текста жирным шрифтом.
Третий вид html-тегов называют заменяемыми тегами. Не могу сказать наверняка, почему их назвали "заменяемыми" (мой разум работает несколько не так, как у людей, которые пишут спецификации) (достаточно красноречивое название: заменяемый тег - в результирующей странице тег заменяется внешним объектом, например изображением из файла [Черный Кот]), на самом деле эти элементы просто имеют установленную ширину и высоту.
Наиболее часто используемый заменяемый тег - <img>, с которым вы, вероятно, хорошо знакомы: обычно в атрибутах этого тега необходимо указывать высоту и ширину.
Идем дальше: основы синтаксиса CSS.
