|
|
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ
Часть третья.
НЕСКОЛЬКО ПРИМЕРОВ
Учитывая то, что для некоторых (в силу их характера или склада ума) теория - трудно перевариваемое вещество, а также то, что теория требует определенной "подкованности" в рассматриваемой области, а сайт предназначен
как раз для новичков в ВЕБ-строительстве, я приведу несколько практических примеров использования таблиц стилей. Так сказать, для "разжижения" скучной теории.
На сайте уже есть некоторые образцы в статье "Несвоевременные мысли о CSS" и в ответах на ЧаВо. Напомню еще раз, что
Вы можете "подсмотреть" ХТМЛ-код сайта, в том числе и примеры использования таблиц стилей (если автор не принял специальных мер против этого), кликнув на понравившейся Вам странице правой кнопкой мыши и выбрав "посмотреть в виде ХТМЛ".
Итак, примеры... Я покажу только образцы правил, а способ их использования Вы можете выбрать сами, основываясь на данных изложенных в статье Способы употребления. Все приведенные примеры
используют язык CSS.
Любое правило каскадных таблиц состоит из двух частей: селектора и определения. Селектором может быть любой тег ХТМЛ. Определение задает, каким образом необходимо представлять этот тег. Определение записывается
в фигурных скобках и, в свою очередь, тоже состоит из двух частей: свойства и значения, которые отделяются дуг от друга двоеточием. В одном правиле можно задавать несколько определений, отделяя их друг от друга точкой с запятой.
- Задание вида заголовков.
H1 {text-align: center;
color: coral;
font-size: 34pt;
font-family: "Times New Roman"}
Результат использования такой таблицы
Будет выглядеть так.
Здесь: text-align: center; - задает выравнивание. В данном случае - по центру.
color: coral; - задает цвет.
font-size: 34pt; - размер шрифта.
font-family: "Times New Roman"; - вид шрифта.
- Абзац.
Пример использования таблицы стилей для форматирования текста в отдельном абзаце (или во всех, это уже на Ваше усмотрение). Этот абзац отформатирован при помощи следующих правил:
P style="text-align: center;
color: blue;
font: oblique 12pt/24pt "Times Cyr", serif;"
Свойство oblique в данном случае задает высоту шрифта 12 пунктов и высоту строк - 24 пункта.
- Следующие две таблицы сделаны при помощи таких правил:
border: solid 0.1em red; background-color: teal;
td {border: solid 0.1em red; background-color: khaki;}
причем первая строчка действует только на первую таблицу, так как стоит в теге TABLE, непосредственно создающем таблицу, а вторая - на все таблицы, которые есть на этой странице, так как стоит в теге style в заголовке страницы.
Почтовые спонсоры, с которыми, по-моему, стоит работать.
(Мой ТОР-10)
| WmMail |
| WePaid |
Банеры, по которым желательно кликнуть!
|
|
|
|
Используя эти примеры, вы можете сами поэкспериментировать с таблицами стилей. А в следующих статьях продолжим рассмотрение общих положений при использовании CSS.
|
