br 8eb34


search

Свойства CSS для изменения графики

cssimagesПосле изменения стилей текстовых элементов, можно перейти к изучению настроек внешнего вида интернет-ресурса с помощью 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: 2px ridge #000;
border-bottom: 1px solid black;

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.

Добавить комментарий

Защитный код
Обновить

Комментарии