, для определения различных частей — фрагментов. Ниже приведен код HTML простой веб-страницы:
Введение
19не распознают новые теги HTML5. Чтобы внести в этих версиях в теги стиль с помощью CSS, нужно будет воспользоваться кодом JavaScript. Как вывести старые браузеры на современный уровень, будет показано далее.
Независимо от предпочитаемого типа документа, объявляемого с помощью doctype
, важно, чтобы использовалось объявление хотя бы одного из них. Без этого ваши стра- ницы будут выглядеть по-разному в зависимости от браузера, применямого вашим посетителем, поскольку браузеры, не имеющие в качестве руководства объявления doctype
, по-разному отображают информацию, которая стилизована с помощью CSS.
Каждое doctype
-объявление требует от вас написания HTML-кода определенным образом. Например, тег для разбиения строк имеет в HTML 4.01 следующий вид:
Но в xHTML у этого тега следующий вид:
И здесь проявляется еще одно преимущество HTML5: он допускает применение любого из этих вариантов.
Как работают HTML-тегиВ приведенном выше примере, как и в HTML-коде
любой веб-страницы, большин- ство команд-тегов используются парами, начиная и завершая какой-то фрагмент — блок текста или другие команды. Будучи заключенными в скобки, эти теги пред- ставляют собой команды, которые говорят браузеру, каким образом отображать веб-страницу. Теги являются разметочной (markup) частью гипертекстового языка разметки — Hypertext Markup Language.
Открывающий тег каждой пары показывает браузеру, где команда начинается, а закрывающий — где заканчивается. Закрывающий тег всегда предваряется пря- мым слешем (
/
) после первого символа скобки (
<
).
На любой веб-странице обычно имеются как минимум следующие четыре эле- мента.
Самая первая строка примера содержит объявление типа документа — doctype
, рассмотренное в предыдущем разделе.
Тег
требуется в начале веб-страницы и (с добавленным слешем) в конце:
. Этот тег говорит браузеру, что документ является программным кодом на языке HTML. Все содержимое страницы, включая остальные теги, находит- ся между открывающим и закрывающим
Если
представить веб-страницу в виде дерева, то
будет его стволом. Две основные части любой веб-страницы — заголовок и тело — представляют собой ветви.
Заголовок (head) веб-страницы включает в себя ее название. Здесь также может содержаться другая информация, невидимая при просмотре веб-страницы, на- пример описание страницы, которая предназначена для браузеров и поисковых машин. Раздел заголовка заключается в открывающий и закрывающий
Открывающий тег
Теперь вы добавите селектор CSS, обозначающий начало вашего первого стиля.
3. Щелкните кнопкой мыши между открывающим и закрывающим тегами
7. Сохраните страницу и просмотрите ее в браузере.
Вы можете сделать это так, как описано в третьем шаге, или, если страница все еще открыта в окне браузера с предыдущего раза, просто нажмите кнопку пере- загрузки страницы (
Reload
(Обновить)).
Теперь добавим другой стиль.
62 Часть 1. Основы CSS
ПРИМЕЧАНИЕ
Никогда не забывайте добавлять закрывающий тег в конце внутренней таблицы стилей .
Если вы не сделаете этого, браузер отобразит на экране код стилей CSS, за которым
последует сама веб-страница без всякого форматирования, а может быть и такое, что браузер вообще не покажет содержимого веб-страницы.
8. Переключитесь обратно в программу редактирования, установите курсор после закрывающей фигурной скобки стиля h1
, который вы только что создали, на- жмите
Enter и добавьте следующий стиль:
p {
color: #616161;
line-height: 150%;
margin-top: 10px;
margin-left: 80px;
}
Этот стиль форматирует все абзацы веб-страницы. Не переживайте, что пока не знаете, что делает каждое из описываемых свойств CSS. В последующих главах эти свойства будут описаны подробно. А пока просто потренируйтесь правильно набирать код и прочувствуйте, каково это — добавлять CSS на страницу.
9. Просмотрите страницу в браузере (рис. 2.3). Вы видите, как изменяется стили- стическая направленность абзаца под первым заголовком? Можете посмотреть окончательную версию этой части примера, открыв файл internal.html из папки
02_finished
Рис. 2.3. CSS легко и творчески справляется с форматированием текста, позволяя изменять начертание, размер, цвет шрифтов текста и даже добавляя декоративные рамки и подчеркивание
Скачать 20.28 Mb.