Урок 3. CSS. Каскадные таблицы стилей
В листе стилей код называют правилами. Каждое правило состоит из селектора и объявления. Объявление, в свою очередь, состоит из свойства и значения.
Рассмотрим пример:
p {color: #000;}
Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь “р” — это атрибут, а то, что находится в фигурных скобках и есть Объявление правила для этого атрибута. Слово color является Свойством объявления, а “решётка” с тремя нулями — Значением. В данном случае значение записано в виде шестнадцатиричного числа, обозначающего цвет. Почему всего три нуля, ведь в данном обозначении должно быть шесть цифр
Правило можно писать как угодно — в строку или в столбик — это роли не играет. Важно не забывать две вещи:
1. После каждого Свойства необходимо ставить двоеточие.
2. После каждого Значения — точку с запятой.
Создадим файл style.css в папке сайта и зададим общие правила для его страниц
* {
margin: 0;
padding: 0;
border: 0;
}
В этом правиле звёздочка означает не что иное, как всю страницу разом. Сама звёздочка — это не тэг и нигде потом в коде страницы не указывается. Браузеры прекрасно понимают её значение и применяют данные с ней правила ко всей странице. В правиле мы указали последовательно:
Отступы — 0,
Поля — 0,
Рамка — 0.
Это нужно для того, чтобы ни поля, ни отступы, ни рамки не появлялись там, где нам не нужно. Значения указываются либо в процентах, либо в пикселах. Если стоит ноль, то единицу измерения не нужно указывать.
body {
padding: 2% 0 0 0; background: #fff; color: #333;
font-family: «Comic Sans MS», Verdana, Arial, Helvetica, sans-serif;
}
Мы задали для тела (body) страницы следующие указания: поля — сверху 2%, с боков и снизу по нулям. Это значит, что текст наших страниц не будет «лепиться» к верхней границе окна браузера, а отступит от него на 2% размера окна. Здесь значения идут подряд без запятых и только после последнего ставится точка с запятой. Вместо процентов можно использовать пиксели и поля можно задать так: 15px 0 0 0.
Можно задать отступы от всех границ: 5px 10px 15px 20px; — сверху будет поле в 5 пикселов, справа 10, снизу 15, слева 20.
background: #fff; означает фон белого цвета, цвет шрифта тёмно-серый (#333 или #333333), ниже перечислены в порядке предпочтения используемые семейства шрифтов. Если имя шрифта состоит более чем из одного слова, то его нужно взять целиком в кавычки. Например: «Times New Roman»
#container {
width: 760px;
margin: 0 auto;
}
# перед блоком container означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице. Сам контейнер нужен затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. Это означает, что при любом размере экрана наш сайт всегда будет строго по центру (автовыравнивание). Ширина страницы при этом равна 760 пикселям.
Вообще в каскадных листах стилей принято некое упорядоченное расположение правил. Вначале указываются общие правила для всей страницы, а потом идут в той очерёдности, в которой появляются элементы на странице сверху вниз. Мы пока указали не все общие элементы. Нет заголовков, списков, ссылок (тэги h, ul, ol, a). Их мы добавим позже, а пока начнём «прицеплять» что-то весомое к нашей странице.
Из созданного в графическом редакторе макета вырежем шапку (будет использовать как фон).
Создадим картинку размерами 760Х200
и сохраним её в папке
C:\WebServers\home\site\www\img\header.jpg
Далее в листе стилей запишем правило для “шапки” (header):
#header {
background: url(img/header.jpg) no-repeat;
width: 760px;
height: 200px;
}
Мы указали, что вся наша шапка залита фоном-картинкой с размерами 760х200 пикселей url(img/header.jpg) — это ссылка на картинку. Запись no-repeat означает, что картинка не должна повторяться. По умолчанию браузеры любой фон множат на экране до бесконечности. Если бы нам потребовалось размножить фон только по горизонтали то вместо no-repeat мы должны будем записать repeat-x, а если только по вертикали, то соответственно repeat-y.
Сохраним наш лист стилей.