Оформление сайта с помощью CSS
Весь дизайн сайта можно изменять с помощью одного файла css, тем самым отделяя содержимое сайта от его оформления.
Откроем новый документ в Home Site 4.5 и сохраним его с расширением css. Подключим странички сайта с расширением htm к файлу с расширением css .
Рассмотрим некоторые способы оформления цвета, фона и шрифта.
Свойства цвета и фона
| Свойство стиля | Описание свойства | Значения | Значение по умолчанию |
|---|---|---|---|
| font-family | Гарнитура шрифта | список имен шрифтов, перечисленных через убывания предпочтения; список может заканчиваться одним из родовых имен: serif (с засечками, "антиква"), sans-serif (без засечек, "рубленный"), cursive (курсив), fantasy (аллегорический), monospace (моноширинный) | |
| font-size | Размер шрифта | размер, процент, xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller | medium |
| font-style | Начертание шрифта | normal, italic (курсив), oblique (наклонный) | medium |
| font-weight | Насыщенность шрифта | число от 100 до 900 (кратное 100) normal, bold, bolder, lighter | normal |
| font-variant | Может задать вывод капителью (символами, похожими на прописные, но малого размера); капитель есть не во всяком шрифте | normal, small-caps(капитель) | normal |
| font-stretch | Задание нормального, разреженных (expanded)или сжатых (condensed) начертаний из текущей гарнитуры шрифта | normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded | normal |
| font | Стенографическое свойство для одновременного задания нескольких свойств шрифта | список свойств шрифта, разделенных пробелами, в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family |
Пример задания свойства font-family:
{font-family: Arial, Helvetica, san-serif}
Пример задания стенографического свойства font:
{font: italic normal bold 20 px Arial;}
Свойства цвета и фона
| Свойство стиля | Описание свойства | Значения | Значение по умолчанию |
|---|---|---|---|
| color | Цвет текста | цвет | |
| background-color | Цвет фона элемента | Цвет transparent | transparent |
| background-image | Фоновое изображение | URL/URI | |
| background-position | Исходное положение фонового изображения. При использовании значений типа размер и процент указываются отступы по горизонтали и вертикали от левого верхнего угла окна | размер, процент, left, top, center, right, bottom | 0% 0% (верхний левый угол окна) |
| background-attachment | Указывает, будет ли фоновое изображение стационарным или прокручиваемым | scroll, fixed | scroll |
| background-repeat | Тип заполнения элемента фоновым изображением | repeat - повторяется, no-repeat - не повторяется, repeat-х - повторяется по оси х, repeat-у - повторяется по оси у | repeat |
| background | Стенографическое свойство для значения всех свойств фона | список свойств background-color, background-image, background-position, background-attachment, background-repeat, разделенных пробелами, в любом порядке |
Пример задания свойства стенографического свойства background:
{background: blue fixed no-repeat}
