Этот сайт является учебным примером сайта, сделанного на дизайне "Святой Грааль"
Это ни в коем случае не полный справочник по CSS. Здесь содержатся только такие минимальные сведения по CSS, которые необходимы для понимания структуры Святого Грааля.
Технология CSS (Cascading Style Sheets - Таблицы Каскадных Стилей) применяется когда Вам надо определить стили оформления каких-нибудь элементов html-страницы для того, чтобы описать все эти стили только один раз в одном месте, а при написании кодов html-стронички не загромождать их повторным описанием всех этих стилей.
Например, допустим, что одни абзацы <p>...</p> на Вашем сайте должны быть выделены жирным красным маленьким шрифтом со сдвигом вправо, а другие абзацы должны быть черными с наклоном и с большими буквами с выравниванием по левому краю. Тогда Вы в одном месте определяете два стиля оформления. Один стиль с жирным красным маленьким шрифтом и сдвигом вправо, а другой стиль написания с черными большими наклонными буквами и выравниванием по левому краю. Чтобы различать оба стиля и обращаться к ним, Вы даете названия этим двум стилям. Теперь, когда в тексте надо применить первый стиль, Вы просто указываете, что это абзац первого стиля, а когда надо чтобы текст был оформлен по второму стилю, Вы указываете, что это абзац второго стиля. Вот собственно и вся основная идея CSS.
Замечу, что можно не только создавать разные стили, которые могут применяться к одному и тому же элементу html-страницы, но и просто переопределить сам элемент другим стилем без других вариантов. Например, если на сайте все абзацы <p>...</p> должны быть только красным цветом и никогда черными, то можно не создавать новый стиль с красным цветом, а просто переопределить тэг <p> как тэг, который постоянно выводит на экран браузера текст только красного цвета. Наконец, один и тот же новый созданный стиль может применяться к разным элементам html-страницы, не только к тексту внутри контейнера <p>...</p>, но например можно указать, что первый или второй стиль нужно применить внутри контейнера <h1>...</h1> или <ul>...</ul> и т.д.
Из-за того, что эти стили могут применяться сразу ко всем страницам сайта, появляется возможность менять внешний вид сайта редактируя только один файл. Это приводит к существенному увеличению производительности труда иэб-мастера, когда на сайте десятки и сотни страниц.
Итак технология CSS дает два важных преимущества:
Если стили относятся только к одной страницы сайта, то блок <head>...</head> должен содержать контейнер
<style>...</style> в котором описаны стили этой страницы. Мы этот случай рассматривать не будем. Нам более
интересно, когда стили описаны в одном отдельном файле. Если Вы скачали шаблон Святого Грааля по ссылке на этом
сайте, то файл стилей имеет имя style.css. Откройте файл какой-нибудь страницы из скаченного шаблона, например,
файл index.html (или index.php) и Вы увидите, что контейнер <head>...</head> содержит одинарный тэг
<link> со следующими атрибутами
<link rel="stylesheet" type="text/css" href="style.css">
Этот тэг присоединяет к нашей странице файл стилей так, что текст файла стилей не выводится в то место, где стоит тэг <link>, но к этому файлу браузер обращается каждый раз, когда встречает в тексте страницы упоминание какого-нибудь стиля или html-элемента переопределенного в этом файле.
Атрибуты тэга <link> следующие:
Теперь посмотрим на устройство самого файла style.css.
У нас он содержит два вида элементов. Это или определения стилей или переопределения элементов. Если это определение нового стиля, то сначала стоит точка, потом название стиля, которое Вы захотели ему дать, затем в фигурных скобках перечисляются характеристики этого стиля через точку с запятой, если характеристик больше одной. Если это переопределение элемента, то сначала стоит имя тэга (или через запятую несколько имен), затем в фигурных скобках перечисляются новые переопределенные характеристики этого стиля через точку с запятой, если характеристик больше одной. Не переопределенные характеристики элемента сохраняются такими же как по умолчанию.
В нашем файле Вы видите, что введены новые стили all, header, center, left, right и footer, а также переопределены абзацы (<p>...</p>), два вида списков (<ul>...</ul>, <ol>...</ol>) и элементы списка (<li>...</li>).
Переопределенные элементы html-страницы пишутся на странице как обычно. Например, если мы хотим создать абзац, то мы так и пишем обычные тэги <p>...</p>. А браузер выведет текст в этом контейнере в соответствии с тем, как он переопределен в файле style.css. А в этом файле мы видим четыре переопределения. Размер букв будет 15px (font-size:15px), отступы от краев 10px и 5px (margin:10px 5px), все строки будут растянуты на всю ширину (text-align:justify) и первая строка будет начинаться с красной строки (text-indent:2em). Ничего другого в этом элементе переопределяться не будет. Например, цвет текста остался черным и без наклона, как и должно быть по умолчанию, так как эти характеристики не были переопределены.
Все на этом с переопределенными элементами закончили. Описание характеристик и их значений можно найти в любом справочнике по CSS.
А вот чтобы применить какой-нибудь стиль к какому-нибудь элементу, надо в тэге этого элеметна указать атрибут class, а в качестве значения этого атрибута указать имя стиля. Посмотрите на страницах скаченного Вами шаблона элементы слоев <div>...</div>. Им присвоены разные стили, например, слой <div class="left">...</div> выводится на экран браузера в стиле left.
Обратите внимание, как относительно друг друга выводятся слои center и left. Смотрим в стиле center характеристику margin. Эта характеристика показывает отступ от краев: верхний, правый, нижний и левый. Если стиль применяется к слоям <div>...</div>, то имеется в виду отступы от краев экрана монитора или от элемента, который включает в себя данный слой. В нашем случае слой со стилем center включен в слой со стилем all. Поэтому в характеристике margin для слоя со стилем center имеется в виду отступы от границ слоя стиля all. Слева имеется отстур 210 пиксел. Этот отступ как раз и нужен, чтобы туда потом запихать левую колонку. Другие отступы нулевые, но сверху и снизу сидят слои стилей header и footer, которые занимают всю ширину и не дают выйти слою стиля center к верхнему и нижнему краю слоя стиля all.
К правому краю слоя стиля all слой стиля center не может выйти из-за своей ограниченной ширины, которая задается характеристикой width равной 480 пиксел.
Далее характеристика float задает обтекание, например, обтекание рисунка текстом. В нашем случае характеристика float имеет значение left, значит элемент с этим стилем будет обтекаться со всех сторон, креме левой стороны. То есть наш слой стиля center будет другими слоями обтекаться со всех сторон, кроме левой.
А далее идет самое интересное. Смотрите, справа от слоя стиля center есть место для следующего слоя стиля left. Слой стиля left имеет ширину как раз 200 пиксел, чтобы войти справа от слоя стиля center. А войти он должен справа, а не снизу, так как слой стиля center должен обтекаться.
Но стиль left имеет в характеристике margin отрицательный отступ от левого края на 692 пиксела. Отрицательное значение отступа означает то, что отступ надо делать не налево, а, наоборот, в другую сторону (но по прежнему от левой границы). И, таким образом, слой стиля left как раз и садится в ту самую "дырку" слева от слоя стиля center. Именно так и происходит замена местами двух слоев и поэтому текст физически расположенный "после" оказывается на экране монитора расположен "перед".
Здесь было рассказано о технологии CSS только в тех пределах, которые нужны для понимания шаблона Святой Грааль. Для более полного ознакомления с CSS используйте ссылку в правой колонке для бесплатного скачивания HTML-редактора, в хэлпе которого Вы найдете очень подробный справочник по CSS.
Скачать шаблон сайта на Святом Граале
Посмотреть другие простые шаблоны
Скачать бесплатный html-редактор со встроенными учебниками и справочниками по написанию сайтов
Скачать бесплатно FTP-клиент FileZilla Client для копирования файлов на свой сайт и в файлообменники
Скачать бесплатно Полезные скрипты для сайта