Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Свойства форматирования цвета и фона элемента




Свойства этой категории определяют цвет и фон элемента. Фон можно задать в виде цвета или изображения. В случае изображения указывается его положение, как оно повторяется, фиксировано ли оно или прокручивается вместе с прокруткой содержимого окна браузера.

Для установки цвета текста элемента существует единственное свойство color. Его значением является цвет, задаваемый с помощью ключевых слов или rgb-функции.

Цвет фона элемента определяется значением свойства background-color, а изображение, используемое в качестве фонового, задается свойством background-image. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Если это свойство определено, то рекомендуется задать также и цвет фона, который будет использоваться в случае недоступности файла изображения.

Если фон задан в виде изображения, то свойство background-repeat определяет его повторяемость и способы повторяемости. Допустимыми значениями являются:

· repeat – повторяемость и по вертикали, и по горизонтали, значение по умолчанию;

· repeat-x и repeat-y – повторяемость, соответственно, по горизонтали или вертикали;

· no-repeat – изображение не повторяется.

В следующем примере:

BODY { background-color: lighsteelblue; background-image:

url(«/image/image.gif»); background-repeat: repeat-y;}

задается повторяемость изображения фона по вертикали.

Свойство background-attachment определяет, будет ли фон, на котором отображается документ, оставаться неподвижным при прокрутке содержимого окна браузера или он будет прокручиваться вместе с документом. В первом случае реализуется эффект перемещения содержимого окна над неподвижным рисунком. Значение fixed оставляет фон неподвижным, а значение scroll заставляет его перемещаться вместе с содержимым документа при прокрутке.

Свойство background-position определяет начальное положение изображения, используемого в качестве фона, в блоке содержимого элемента. Чаще всего под блоком содержимого элемента будем понимать окно браузера. Значением этого свойства являются координаты привязки определенных точек изображения и блока содержимого. Их можно задавать в процентах, в абсолютных единицах длины, а также с использованием комбинаций ключевых значений. Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Вторая пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных, например 10% 80%, помещает левый верхний угол изображения в точку, отступающую на расстояние, равное 10% ширины блока от левого края и на расстояние, равное 80% высоты блока от верхнего края блока содержимого. Например, значение (50% 0% 100% 50%) разместит изображение в верхней правой четверти блока.

Имеется возможность задания значений большинства параметров в одном. Свойство background позволяет одновременно устанавливать значения свойств background-color, background-image, background-repeat и background-attachment. Все допустимые значения индивидуальных свойств задаются в виде списка, элементы которого отделены пробелами. Если значение какого-либо свойства не задано, то оно устанавливается в начальное значение определяемое браузером:

BODY {background: lightsteelblue url(«/image/image.gif») center;}

Это правило устанавливает цвет и изображение фона, а также положение изображения в окне браузера. Остальные свойства фона принимают начальные значения.

Свойства форматирования текста

Свойства данной категории влияют на отображение символов, слов и абзацев. Свойство letter-spacing влияет на расстояние между символами при отображении текста. Его значение, задаваемое в единицах длины, определяет пробел, добавляемый к установленному по умолчанию пробелу между символами.

Каскадные таблицы стилей позволяют преобразовывать текст. Если значение свойства text-transform равно capitalize, то все слова отображаются с прописной буквы. Значения uppercase и lowercase этого свойства приводят, соответственно, к преобразованию всех букв в прописные (большие) или строчные (малые), независимо от их задания в тексте документа HTML.

Свойство text-decoration задает подчеркивание, надчеркивание или перечеркивание текста. Соответствующие значения этого свойства следующие: underline, overline и line-throgh.

Выравнивание текста в блоке содержимого элемента определяется значением свойства text-align. Текст выравнивается по левому краю при значении left, по правому краю – при значении right и по центру – при значении center.

Отступ первой строки элемента задается значением свойства text-indent, которое определяет величину отступа в абсолютных или относительных единицах длины. Свойство vertical-align определяет положение элемента по вертикали относительно элемента-родителя.

Блоки

Тэги <DIV> и <SPAN> позволяют выделять фрагменты HTML-документа и задавать их характеристики. В дальнейшем подобные фрагменты будем называть блоками. Рассмотрим свойства, позволяющие задавать параметры блоков.

Все свойства можно разделить на три большие группы, задающие параметры полей, границ и отступов блоков, причем группу, работающую с границей, можно подразделить еще на четыре группы, устанавливающие значения цвета, стиля, ширины и одновременно всех перечисленных свойств границы. Рассмотрим более подробно свойства каждой из перечисленных групп.

В группу форматирования поля входят свойства, устанавливающие ширину верхнего (margin-top), правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырех параметров поля элемента. Ширина соответствующих полей задается значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0. Если в свойстве margin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определено только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трех значений недостающие значения берутся из установок противоположных сторон.

Имеется возможность задавать отступы от краев блока. Ширина верхнего, правого, нижнего и левого отступа определяется значением, соответственно, свойств padding-top, padding-right, padding-bottom и padding-left. Свойство padding позволяет одновременно установить значения всех четырех отступов элемента. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству.

Ширину верхней, правой, нижней или левой границы задают соответственно свойствами border-top-width, border-right-width, border-bottom-width и border-left-width. Значения свойства border-width определяют ширину границы элемента для всех перечисленных ее частей. Все, что было сказано о задании значений для одновременной установки полей, относится и к этому свойству. Значениями этих свойств могут быть ключевые слова thin, medium и thick или значение длины. Ширина границы, определяемая ключевыми параметрами, зависит от браузера. Единственное, что можно гарантировать, – это то, что ширина thin не больше ширины medium, которая, в свою очередь, не больше ширины thick.

Цвета частей границы задаются значениями свойств border-top-color, border-right-color, border-bottom-color и border-left-color. Свойство border-color определяет цвета всех частей границы. Четыре параметра цвета подчиняются все тем же правилам, описанным при задании полей элемента. Если задан тип границы, но не задан цвет границы, то по умолчанию используется цвет самого элемента. Все предыдущие установки свойств границы не будут иметь никакого воздействия на отображение элемента, если не установлен тип границы, так как по умолчанию тип границы не определен, и она не отображается.

Для задания типа любой из четырех частей границы применяются свойства border-top-style, border-right-style, border-bottom-style и border-left-style. Свойство border-style определяет одновременно типы всех частей границы. Значениями этих свойств могут быть ключевые параметры none, solid, double, groove, ridge, inset, outset.

Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left определяют ширину, тип и цвет, соответственно, верхней, правой, нижней и левой границы. Свойство border определяет одновременно параметры всех частей границы. В отличие от аналогичных свойств, задающих параметры полей и отступов, данное свойство устанавливает одинаковые значения для всех частей границы.

Визуальное форматирование

В некоторых случаях при создании Web-страницы требуется изменить естественный порядок отображения элементов. В этом случае можно воспользоваться свойством position элемента, которое позволяет определить способ его позиционирования на странице. Это свойство задает один из способов расположения элемента на странице: статический, относительный или абсолютный.

Работу этих способов можно представить следующим образом. Элементы, которые нужно разметить на Web-странице, можно представить в виде очереди, из которой браузер берет по одному элементу и размещает в соответствии с заданными параметрами. Статический способ, используемый по умолчанию, не изменяет принятых установок браузера в отношении расположения элементов Web-страницы. Относительный способ похож на статический, только здесь можно сместить следующий элемент относительно предыдущего. Абсолютный способ исключает элемент из очереди и отображает его в соответствии с указанными параметрами.

Значения static, relative и absolute свойства position определяют соответствующий способ позиционирования элемента, который, в конечном счете, складывается из значения указанного свойства элемента и значений его свойств top и left. Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента.

Обычно элемент, появляющийся позже другого в исходном тексте документа HTML, перекрывает ранее отображенные элементы. Свойство z-index задает слой, в котором располагается элемент при отображении. Если слой расположен ближе к пользователю (значение свойства z-index больше), то элемент перекрывает любой другой элемент с меньшим значением слоя, даже если последний и отображается позже.

Если значением свойства z-index является auto, то элемент перекрывает все элементы с таким же значением этого свойства, но его перекрывает любой элемент со значением свойства z-index, отличным от auto.

Свойство visibility управляет отображением элемента. Если его значение равно visible (значение по умолчанию), то элемент отображается, если оно установлено равным hidden, то элемент не отображается. Когда для скрытия элемента используется его свойство visibility, то элемент не изымается из потока отображения. Это означает, что соответствующий ему блок занимает надлежащее положение на странице, но содержимое этого блока (элемент) не отображается.

Подобное поведение отличается от поведения объекта со свойством display равным none. В последнем случае элемент не только не отображается, но и изымается из потока отображения, и на странице нет пустого блока, соответствующего этому элементу.

Свойство clip позволяет обрезать видимое изображение абсолютно позиционированного элемента. Каждый такой элемент отображается в прямоугольном блоке определенной ширины и высоты, которые определяются либо шириной и высотой самого элемента, либо его свойствами width и height. Та часть элемента, которая отображается в блоке, является его видимым изображением. Блок отображения не обязательно должен соответствовать размерам самого элемента: он может вмещать весь элемент, а может только его часть. Например, блок отображения элемента <IMG> может быть меньше размеров графического изображения, представляемого этим элементом. Свойство clip воздействует только на блок отображения элемента. Его значением может быть auto (никакого отсечения не производится). Также можно задавать координаты прямоугольника, в котором будет отображаться элемент. Прямоугольник задается с помощью параметра rect(<top> <right> <bottom> <left>), где величины <top>, <right>, <bottom> и <left> определяют, соответственно, верхнюю, правую, нижнюю и левую границы видимого изображения элемента относительно блока отображения.

Список задач

Действия с числами

1.1 Составить программу, проверяющую, будут ли взаимно просты два натуральных (целых) числа.

1.2 Составить программу, проверяющую, будет ли простым данное натуральное число.

1.3 Напишите программу, которая выводит на экран все простые числа из интервала 1...N, используя решето Эратосфена.

1.4 Написать программу, которая выводит на экран первые N простых чисел.

1.5 Найти все делители натурального числа N.

1.6 Разложить целое число на простые множители. Вывести на экран все простые множители (в порядке возрастания) и их порядки.

1.7 Натуральное число называется совершенным, если оно равно сумме всех своих делителей, включая единицу. Вывести первые N (N<5) совершенных чисел на экран.

1.8 Проверить, какие нечетные натуральные числа из интервала N...M можно представить в виде суммы трех простых чисел.

1.9 Проверить, будет ли данное число числом Фибоначчи.

1.10. Вычислить (N)!!, где (2N)!! = 2*4*...*(2N), (2N+1)!! = 1*3*...*(2N+1).

1.11 Найти все различные пифагоровы тройки из интервала от N до М.

1.12 Написать программу умножения (деления) двух данных рациональных чисел. Ответ должен быть несократимой дробью.

1.13 Написать программу сложения (вычитания) двух данных рациональных чисел. Ответ должен быть несократимой дробью.

1.14 Найти все целые числа из интервала от N до M, которые делятся на каждую из своих цифр.

1.15 Найти все целые числа из интервала от N до M, которые делятся на сумму всех своих цифр.

1.16 Проверить, являются ли два числа дружественными (сумма делителей одного числа равна другому числу). Например, сумма делителей числа 220 равна: 1 + 2 + 4 + 5 + 10 + 11 + 20 + 22 + 44 + 55 + 110 = 284, а сумма делителей числа 284 равна: 1 + 2 + 4 + 71 + 142 = 220, поэтому числа 220 и 284 - дружественные.

1.17 Составить программу перевода чисел из непозиционной, например, римской системы счисления в десятичную.

1.18 Определить, можно ли представить данное число в виде суммы квадратов двух (трех) целых чисел.

1.19 Определить, можно ли представить данное число в виде суммы кубов двух (трех) целых чисел.

1.20 Определить, можно ли представить число А в виде линейной целочисленной комбинации чисел B и C.

1.21 Определим операцию # так, что A#B = A – B + A mod B. Найти все числа из интервала от N до M, для которых эта операция коммутативна.

1.22 Характером натурального числа назовем сумму всех его делителей, не равных единице, и самому числу. Характером простого числа будем считать нуль. Написать программу, которая вычисляет характер числа.

1.23 Составить алгоритм, находящий по целым числам А, В и С такие целые Х и Y, что А * Х + В * Y = С (если такие Х и Y существуют).

1.24 Составить программу поиска среди чисел n, n+1,..., 2*n так называемых близнецов, т.е. двух простых чисел, разность между которыми равна двум.

1.25 Число из n цифр называется числом Армстронга, если сумма его цифр в степени n равна самому числу. Например: 1634 = 14 + 64 + 34 + 44. Составить программу, находящую все числа Армстронга из двух и трех цифр.

1.26 Составить программу, находящую все трехзначные числа abc такие, что abc = a! + b! + c!.

1.27 Гипотеза Симона о факториале состоит в следующем: только четыре факториала являются произведениями трех последовательных целых чисел. Вот два из них: 4! = 2*3*4, 5! = 4*5*6. Составить программу, находящую следующее число, обладающее указанным свойством. Не смогли бы вы опровергнуть эту гипотезу?

1.28 Число называется абсолютно простым, если при любой перестановке его цифр также образуется простое число. Найти все абсолютно простые числа из интервала [n,m].

1.29 Простое число Мерсенна - это число, которое может быть представлено в виде: 2n – 1, где n тоже простое. Составить программу, находящую числа Мерсенна.

1.30 Сформировать и вывести на экран в порядке возрастания все числа из четырех цифр, причем внутри числа не должно быть двух одинаковых цифр. Например, такими числами являются 123(0123), 2715 и т.д. Число 24 таким не является (24 = 0024).

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...