Начинающим Web - разработчикам сайтов

Категории
Полезные сайты
Формативание блока
Форматирование текста
Форматирование др. элементов
Позиционирование
Таблица параметров

Формативание блока

Блоком в каскадных листах стилей принято считать фрагмент страницы или ее полный объем, помещенный в контейнеры <P> и <DIV>, а также <BODY> (если страница в целом). Форматированием блока является изменение его параметров, таких как: ширина и высота блока, внешние и внутренние отступы от его границ, присвоение цвета и внешнего вида как отдельных линий (границ), так и общего фона.

Габариты блока в стилях указываются в свойствах width и height , при этом, как и повсеместно в таких случаях нельзя указывать отрицательные значения. В некоторых случаях для дизайна страниц приходится прибегать к переменным габаритам блока. Для этого в CSS предусмотрены свойства min-width, min-height (минимальная ширина и высота блока) и max-widht/max-height (максимальные их значения).

Внешние отступы от блока диктуют параметры: margin (отступы одинаковые), margin-left (отступ только слева), margin-right (отступ справа), margin-top (отступ сверху) и margin-bottom (отступ снизу). Аналогично находит применение свойство padding (отступ внутри блока).

При задании фона блока div нужно применить свойство background-color, выбор значения которого не отличим от общего применения цветов. В случае, если Вы захотите использовать в качестве фона какое-либо изображение, то применяйте свойство background-image, при этом в значении укажите адрес и имя файла нужного изображения. Ограничить повторение изображения в фоне блока можно свойством background-repeat и его значениями: repeat-x (повторение по оси X), repeat-y (по оси Y) и no-repeat (без повторений). При необходимости зафиксировать фоновое изображение, для того, чтобы оно оставалось неподвижным при прокручивании используйте значение fixed в свойстве background-attachment.

Для изменения параметров рамки блока применяются свойства, начинающие со слова BORDER. Так при помощи border-width можно установить одинаковые значения для всех четырёх границ блока, а в значениях border-left-width, border-right-width, border-top-width и border-bottom-width описывается конкретная граница. По аналогичному представлению применяются: border-color (цвет линий рамки блока) и border-style (внешний вид линий). Про последнее свойство нужно добавить, что они имеют несколько, неизученных нами, значений:

  • solid, groove, ridge, double - линии рамки будут сплошными, вдавленными, выпуклыми и двойными соответственно.
  • inset - блок полностью вдавленный.
  • outset - объёмный вид блока.
  • none - нет линий.

Из вышеизложенного можно предположить, что стиль блока может иметь следующий вид:

.box {width: 200px; height: 100px; margin-left: 5px; margin-right: 5px; margin-top: 10px; margin-bottom: 15px; padding: 5px; border-width-left: 1px; border-width-right: 0px; border-width-top: 0px; border-width-bottom: 5px; border-color: #202020; border-style: solid}

Форматирование псевдоклассов и псевдоэлементов

К данной категории относятся элементы Web-страниц, которых сложно отнести к обычным элементам. Псевдоклассы это - ссылки, first-child и lang (язык). В спецификации CSS 2.0 они описаны как:

  • a: link - свойства обычной ссылки.
  • a: active - свойства активной ссылки.
  • a: visited - свойства посещенной ссылки.
  • a: hover - свойства ссылки при наведении на неё мыши.
  • a: focus - свойство ссылки при фокусе
  • first-child - выделяет первый элемент среди последующих.
  • lang - форматирование элементов в зависимости от применения языков на странице.

В каскадных листах стилей при форматировании ссылок применяются те же значения, что и к обычному тексту. При описании других псевдоклассов в CSS перед их значениями указывается символ ">".

К псевдоэлементам в стилях относятся свойства:

  • first-letter - форматирует первый символ для первой строки.
  • first-line - назначается отдельное форматирование первой строки блока текста.
  • after - назначает месторасположения объекта после текущего элемента.
  • before - назначает месторасположения объекта до текущего элемента.
Начинающим Web - разработчикам сайтов
Rambler's Top100 Рейтинг@Mail.ru
Hosted by uCoz