Главная Обратная связь

Дисциплины:

Архитектура (936)
Биология (6393)
География (744)
История (25)
Компьютеры (1497)
Кулинария (2184)
Культура (3938)
Литература (5778)
Математика (5918)
Медицина (9278)
Механика (2776)
Образование (13883)
Политика (26404)
Правоведение (321)
Психология (56518)
Религия (1833)
Социология (23400)
Спорт (2350)
Строительство (17942)
Технология (5741)
Транспорт (14634)
Физика (1043)
Философия (440)
Финансы (17336)
Химия (4931)
Экология (6055)
Экономика (9200)
Электроника (7621)






Установка свойств управоения полями



 

Спецификация CSS поддерживает ряд свойств (типа box), которые можно ьзовать для форматирования блока текста, принадлежащего элементу. К этим свойствам относятся следующие:

· свойство margin добавляет невидимое (прозрачное) поле вокруг элемента, снаружи от видимой рамки (если она имеется);

· свойство border отображает видимую рамку - определенного стиля -вокруг элемента, снаружи от просвета (если он имеется);

· свойство padding добавляет просвет непосредственно снаружи от содержимого элемента, но внутри рамки (если она имеется);

· свойства задания размеров height и width устанавливают размеры области содержимого элемента с добавленными просветом и рамкой (см. следующий рисунок);

Рисунок 26. Схема текстовой области

 

· свойства задания позиций float и clear устанавливают положение элемента относительно окружающих элементов.

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

· margin-top;

· margin-right;

· margin-bottom;

· margin-left.

Можно устанавливать для этих свойств любые значения в размерных единицах. Например, следующее правило добавляет поле слева и справа от элемента STANZA. Ширина поля в два раза больше высоты текста элемента:

 

STANZA

{margin-left:2em;

margin-right:2em}

 

Также можно устанавливать величину поля в процентах относительно ширины родительского элемента. Например, следующее правило создает левое поле, равное 1/4 от ширины родительского элемента:

 

STANZA (margin -left: 25%}

 

Можно назначать одинаковые величины полей по всем четырем сторонам элемента путем присвоения одного значения — в размерных единицах или в процентах - свойству margin. В качестве примера возьмем таблицу стилей, представленную в Листинге 1.7, которая присоединена и XМL-документу, представленному в Листинге 1.8. В соответствии с этой таблицей стилей текст отображается без полей.

 

РОЕМ

{font-size:small}

РОЕМ, TITLE, AUTHOR, STANZA, VERSE {display:block}

Листинг 1.7

 

<?xml version=”1.0”?>

<?xml-stylesheet type=”text/css” href=”Ruslud.css”?>

<POEM>

<TITLE>Руслан и Людмила</TITLE>

<AUTHOR>Пушкин Александр Сергеевич</AUTHOR>

<STANZA>

<VERSE>У лукоморья дуб зелёный;</VERSE>



<VERSE>Златая цепь на дубе том:</VERSE>

<VERSE>И днём и ночью кот учёный</VERSE>

<VERSE>Всё ходит по цепи кругом;</VERSE>

<VERSE>Идёт направо &#8212; песнь заводит,</VERSE>

<VERSE>Налево &#8212; сказку говорит,</VERSE>

</STANZA>

<STANZA>

<VERSE>Там чудеса: там леший бродит,</VERSE>

<VERSE>Русалка на ветвях сидит;</VERSE>

<VERSE>Там на неведомых дорожках</VERSE>

<VERSE>Следы невиданных зверей;</VERSE>

<VERSE>Избушка там на курьих ножках</VERSE>

<VERSE>Стоит без окон, без дверей;</VERSE>

</STANZA>

</POEM>

Листинг 1.8

 

Рисунок 27. Вид в браузере документа из листинга 1.8

 

&#8212; есть ссылка на символ для увеличенного тире (-).

Добавив следующее правило в таблицу стилей, которое устанавливает поля в 2,5еm по всем четырем сторонам элементов STANZA, можно получить то, что представлено на рисунке.

 

STANZA {margin:2.5em}

 

Зона полей всегда прозрачна, т.е. через нее видна фоновая заливка или фоновый рисунок родительского элемента (или браузера).

Рисунок 28. Вид в браузере документа из листинга 1.8 с изменёнными полями по всем четырём сторонам элемента STANZA

 


Эта страница нарушает авторские права

allrefrs.ru - 2018 год. Все права принадлежат их авторам!