Форматирование текста
Форматирование др. элементов
Позиционирование
Таблица параметров
Формативание блока
Блоком в каскадных листах стилей принято считать фрагмент страницы
или ее полный объем, помещенный в контейнеры
<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
- назначает месторасположения объекта до текущего элемента.
|
