Чтобы изучить верстку интернет-страничек, необходимо на примере почувствовать влияние каскадных таблиц стилей на отображение содержания в окне браузера. Поэтому продолжим знакомство с HTML и CSS на практике.

Создание структуры сайта или шаблона

Статьи этого самоучителя по HTML и CSS подведут вас к созданию не просто сайтов, а шаблонов для сайтов, которые в будущем вы сможете "натянуть" на системы управления контентом, чтобы содержимое выводилось так, как вы и запланировали.

 

Сделать это без знания CSS и HTML не представляется возможным и я предлагаю вместе со мной пробежаться по азам создания простого сайта, структура каталогов и файлов которого может быть в дальнейшем перенесена на какую-нибудь систему.

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

Структура сайтаОткрывайте ваш редактор текста, выбирайте синтаксис HTML и сохраните документ в папку (папка с названием сайта) test.ru/www вашего виртуального веб-сервера (денвер) под именем index.html.

Подробная инструкция по настройке денвера и подключению виртуальных хостов читать здесь.

Рядом с ним создайте два каталога «css» и «images». В папку «css» сохраните еще один документ и обзовите его style.css, синтаксис выставьте соответственно «css».

Напомню, что синтаксис меняется в программе «Notepad++» в меню «Синтаксис» путем выбора соответствующего стиля. Если у нового файла выбран определенный синтаксис (например css), то при сохранении он уже автоматически присвоит файлу нужное расширение.

Подключаем CSSСоздание основы сайта

Итак, у вас открыто два основных текстовых файла: index.html и style.css. Вот с ними мы и будем работать. Привыкайте, чтобы кодировка была выставлена у гипертекстового файла UTF-8. В настройках редактора можно отметить, чтобы файлы создавались по умолчанию в юникоде (кодировка UTF-8). Настройки редактора приведены в статье «Настройка Notepad++».

В принципе, минимальная структура сайта или шаблона сайта выглядит именно так. В дальнейшем могут быть созданы еще каталоги с названиями: "html" для других страничек сайта, "js" для скриптов JavaScripts и другие.

Шаблон файла XHTML 1.0 Transitional

Ниже приведен шаблон чистого html-файла, его вы можете применять для создания своих сайтов или шаблонов оформления ко многим системам управления контентом. Использовать мы будем стандарт XHTML 1.0 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
    </head>
    <body>
        Test.ru - сайт для тестеров
    </body>
</html>

Структура файла index.html

Первой строчкой объявляем тип документа и используемый стандарт, которому свойственны определенные правила кода.  В дальнейшем в обучении мы будем использовать только такой формат, и только юникод.

Затем идет два больших блока (заголовок - title) и (тело документа - body), расположенных в общем блоке . Вам уже должны быть знакомы эти контейнеры из прошлого занятия.

В заголовке содержится скрытая «мета-информация». Это и описание страницы (Description) и ключевые слова (Keywords), это и присоединенные файлы скриптов и таблиц стилей, это и указания использованной кодировки, команд поисковому роботу и многое другое. Все это мы обязательно изучим по мере прохождения страниц самоучителя CSS и HTML. Пока же это все лишнее, ведь сначала нам нужно научиться верстать.

В теле документа будет располагаться основная информация нашего сайта, оформленная по нашему желанию и желанию заказчика.

Подключение таблиц стилей CSS и HTML

Существует три способа использования таблиц стилей CSS в HTML-файлах:

  • Указание стилей в элементе разметки
  • Указание стилей в заголовке страницы
  • Подключение отдельного CSS-файла (или файлов)

Первый способ нужный, но очень узкий, так как применим лишь к конкретному элементу. Фактически он расширяет или заменяет стандартные атрибуты конкретного тега. Указание стиля происходит путем описания стилей в значении атрибута «style». Сразу приведу пример написания и не будем на этом зацикливаться.

<body style="color:#0000ff;background-color:red;text-align:justify;">

или

<a href="http://seoskop.ru" style="text-decoration:none;color:#000000;">

В первом примере мы поменяли цвет текста, цвет фона и поставили растягивание текста «по ширине» ко всему документу. Во втором примере опять же определили цвет конкретной ссылки и ее декорирование (ссылки изначально синие и подчеркнутые, а мы сделали ее черной и без подчеркивания).

Второй способ гораздо шире, так как задает стиль для всего документа (всей страницы). Неудобство этого способа - громоздкие файлы *.html, ведь в заголовке будет много строк описания стилей элементов. Если у нас многостраничный сайт, то в каждом файле придется снова прописывать целиком все стили заново.

Указание стилей происходит следующим способом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
        <style type="text/css">
            body{
                color:#0000ff; /*цвет текста документа*/
                background-color:red; /*цвет фона*/
                text-align:justify; /*выравнивание текста по ширине*/
            }
            a{
                text-decoration:none; /*отмена подчеркивания*/
                color:#000000; /*черный цвет ссылок*/
            }
        </style>
    </head>
    <body>
        Test.ru - сайт для тестеров
    </body>
</html>

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

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

Третий способ наиболее популярен, так как мы указываем на всех страницах сайта отдельный файл со стилями. Выглядит это следующим способом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
        <link rel="stylesheet" href="/css/style.css" type="text/css" /> <!--подключаем файл CSS-->
    </head>
    <body>
        Test.ru - сайт для тестеров
    </body>
</html>

Тогда для получения того же результата, что и ранее в файле стилей style.css нужно прописать код:

body{
    color:#0000ff; /*цвет текста документа*/
    background-color:red; /*цвет фона*/
    text-align:justify; /*выравнивание текста по ширине*/
}
a{
    text-decoration:none; /*отмена подчеркивания*/
    color:#000000; /*черный цвет ссылок*/
}

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

Файл ".htaccess"

Создайте текстовый файл в корне вашего сайта и обзовите его .htaccess. В него добавьте строчку

AddDefaultCharset utf-8

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

 

Возможно, что сам эксплорер (проводник) вам не разрешит так обозвать файл и скажет, что у файла должно быть не только расширение, но и имя файла. Пользуйтесь нормальным файловым менеджером, например  TotalCommander.

 

Теперь можно запустить денвер и набрать в строке браузера имя нашего сайта. У меня это test.ru. Из нашего примера мы получим жуткое, но заметное! сочетание цветов. Не обращайте на это внимание, сейчас не в этом соль статьи.

 

Приоритеты таблиц стилей CSS

Все три способа указания стилей имеют разные приоритеты, поэтому необходимо научиться правильно это использовать в боевых условиях при создании и отладке сайта.

 

Чтобы выяснить приоритеты нам придется прибегнуть к исследованиям, то есть применить к одному документу все три способа и оценить результаты. Поиграем с документом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
        <link rel="stylesheet" href="/css/style.css" type="text/css" />
        <style type="text/css">
            body{
                color:#ff00ff;
                background-color:grey;
                text-align:center;
            }
            a{
                text-decoration:underline;
                color:red;
            }
        </style>
    </head>
    <body>
        <a href="http://test.ru"> Test.ru - сайт для тестеров </a>
        <p>
            Test.ru - сайт для тестеров
        </p>
    </body>
</html>

Для эксперимента я добавил стиль вторым способом ниже, чем подключил CSS-файл и к элементам применил совсем другие настройки. В результате у меня оказался серый фон, сиреневый текст по центру страницы и красная ссылка с подчеркиванием. Получается, что стили из файла style.css проигнорированы, а применены те, что описаны в заголовке страницы.

Если вы поменяете последовательность стилей, то есть пропишете строчку подключения файла CSS ниже стилей в заголовке, то заметите, что все кардинально поменялось и применен стиль из файла style.css. Это означает, что порядок расположения стилей в каком бы то ни было виде влияет на результат, иными словами - последний стиль будет решающим. Но всегда ли?

Давайте изменим файл еще раз:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
        <link rel="stylesheet" href="/css/style.css" type="text/css" />
        <style type="text/css">
            body{
                color:#ff00ff;
                background-color:grey;
                text-align:center;
            }
            a{
                text-decoration:underline;
                color:red;
            }
        </style>
    </head>
    <body>
        <a style="color:green;" href="http://test.ru"> Test.ru - сайт для тестеров </a>
        <p>
            Test.ru - сайт для тестеров
        </p>
    </body>
</html>

После такого поворота событий браузер будет вынужден применить стиль, указанный прямо внутри элемента. В данном случае наша ссылка станет зеленой, так как мы указали это внутри тега <a>. Но и это еще не все. Внесите изменения в  файл style.css:

body{
    color:#0000ff;
    background-color:red;
    text-align:justify;
}
a{
    text-decoration:none;
    color:#000000 !important;
}

Обратите внимание, что в стилях я использовал дополнительный параметр !important, который сделал свойство приоритетным по сравнению с другими, даже при условии того, что описан он раньше других и должен быть по идее заменен.

Пользуясь данными навыками вы уже сможете грамотно привязать стили к вашему документу или внести изменения в существующий сайт. И помните: не нужно бояться экспериментировать, но предварительно сделайте резервную копию накопленных результатов.

В следующей статье мы продолжим изучать связку таблиц стилей и html и будем приближаться к намеченной цели – блочной верстке на элементах

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле