После изменения стилей текстовых элементов, можно перейти к изучению настроек внешнего вида интернет-ресурса с помощью CSS. Во время верстки страниц сайта применяют такие свойства CSS для изменения графики, как установка фона, добавление рамки, цвета... Если используются изображения, то желательно их держать в корне сайта в папке images (путь будет иметь вид - "/images/file.jpg") или в папке с шаблоном в аналогичной папке (путь - "../images/file.jpg").
Свойство Background
background - универсальное свойство, в котором может быть описано до пяти характеристик фона, это выбор изображения и цвета фона, определение положения картинки и её поведения в элементе, возможность повтора:
background: url("/images/1.jpg") no-repeat fixed 0 center #FFFFFF;
background-attachment - служит для установки поведения изображения относительно элементов страницы. При значении scroll - прокручивается, если задано fixed - остаётся неподвижным:
background-attachment: fixed;
background-color - задает цвет фона, указывая значения вида #000000 или black или RGB (0,0,0). Если написать transparent - фон будет прозрачным.
background-color: #CCC000;
background-image - выбор фонового изображения, указывая абсолютный или относительный путь к файлу, значение none - без фонового изображения.
background-image: yellow;
background-position - определение положения изображения с помощью двух значений: 1-е - по горизонтали, 2-е - по вертикали. Задаются через пробел, с помощью ключевых слов, абсолютных или относительных единиц:
background-position: center 20px;
background-repeat - устанавливает возможности повтора фонового изображения. Может быть по горизонтали - repeat-x, вертикали - repeat-y, repeat - по всем сторонам, или не повторять - no-repeat.
background-repeat: repeat-x;
background-size - возможность изменения размеров изображения на новые, указав их размеры в пикселях, процентах или автоматически (auto). Значение cover - сохраняет пропорции изображения так, чтобы оно вписывалось по высоте или ширине в блок. Значение contain обеспечивает позицию всего изображения в блоке, с сохранением пропорциональности.
- Для Mazilla Firefox старых версий свойство выглядит так - -moz-background-size
- Для Chrome и Safari - -webkit-background-size
- Для Opera до версии 10.53 - -o-background-size
background-size: 100px auto; -moz-background-size: contain;
Свойство Border
border - универсальное свойство для задания толщины границы, её стиля и цвета. Можно задавать для определенной стороны, указывая её (top, left, bottom, right) через дефис.
border-collapse - служит для задания границ ячейки в таблице. Есть два значения:
- separate - для каждой ячейки своя рамка
- collapse - между ячейками только одна линия
border-color - устанавливает цвет границы
border-color: blue;
border-radius - для установки углов скругления рамки. Можно указывать значения для каждой стороны через пробел. Кстати, если рамка отсутствует, это свойство можно применять для скругления углов фонового изображения.
- Для Mazilla Firefox до 4-й версии свойство выглядит так - -moz-border-radius
- Для Safari и Chrome свойство имеет вид - -webkit-border-radius
border-radius: 10px 15px 10px 15px; -moz-border-radius: 20px;
border-style - для задания стиля границы, которых есть 8 видов: dotted (в виде точек), dashed (пунктиры), solid (сплошная), double (двойная), ridge (объемная), groove (объемнаяя вдавленная), inset (вдавленная) и outset (выпуклая). Кроме этих значений можно скрыть границу, с помощью hidden и none.
border-style: ridge;
border-width - для настройки толщины границы. Можно задавать с помощью числовых значений или ключевых слов - thin (~2px), medium (~4px) и thick (~6px)
border-width: 1px;
Свойство Outline
outline - универсальное свойство для задания цвета, толщины и стиля границы элемента. Свойство по назначению схоже с предыдущим, но отличается тем, что не влияет на ширину и положение блока.
outline: #CCC solid 2px;
Также существуют значения по отдельности - outline-color, outline-width и outline-style которые по своим назначению и переменным схожи со свойствами border.
