Историки об Елизавете Петровне: Елизавета попала между двумя встречными культурными течениями, воспитывалась среди новых европейских веяний и преданий...
Архитектура электронного правительства: Единая архитектура – это методологический подход при создании системы управления государства, который строится...
Топ:
Когда производится ограждение поезда, остановившегося на перегоне: Во всех случаях немедленно должно быть ограждено место препятствия для движения поездов на смежном пути двухпутного...
Оценка эффективности инструментов коммуникационной политики: Внешние коммуникации - обмен информацией между организацией и её внешней средой...
Устройство и оснащение процедурного кабинета: Решающая роль в обеспечении правильного лечения пациентов отводится процедурной медсестре...
Интересное:
Берегоукрепление оползневых склонов: На прибрежных склонах основной причиной развития оползневых процессов является подмыв водами рек естественных склонов...
Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...
Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...
Дисциплины:
 2021-03-17 |
 229 |
из
5.00
|
Заказать работу |
|
|
|
|
Каскадные таблицы стилей
Общие положения
H1 {color: blue}
Любое правило каскадных таблиц стилей состоит из двух частей: селектора (H 1) и объявления (color: blue), которое состоит из двух частей: свойства (color) и значения (blue).
Связывание таблиц стилей с документом
Существует четыре способа связывания документа и таблицы стилей:
1. Связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц HTML
2. Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом документе
3. Импортирование – позволяет встраивать в документ таблицу стилей, расположенную на любом сервере в сети
4. Встраивание в теги документа – позволяет изменять форматирование конкретных элементов страницы
Связывание (рекомендуемый) позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тега <LINK>, задаваемого в головной секции <HEAD>:
<LINK REL="stylesheet" TYPE="text/css" HREF="mystyles.css">
При внедрении таблицы стилей в документ правила, ее составляющие, задаются в элементе, определяемом тегами <STYLE TYPE="text/css"> и </STYLE>, который должен размещаться в секции <HEAD> документа:
<HEAD>
<STYLE TYPE="text/css">
<!--
B { text-transform: uppercase; }
P { background-color: lightgrey;
text-align:center; }
-->
</STYLE>
</HEAD>
В теге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css);
Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил (после — не рассматриваются, а просто пропускаются!). Значением свойства @import является URL-адрес файла таблицы стилей.
Последний способ задания значений свойств таблицы стилей предназначен для оперативного форматирования определенного элемента документа и называется встраивание.
|
|
<H1 STYLE="color: red">Заголовок отображается шрифтом красного цвета</H1>
Группирование и наследование
Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило. Например, следующие правила
H1 {font-family: Arial}
H2 {font-family: Arial}
H3 {font-family: Arial}
можно сгруппировать и задать в виде одного правила со списком селекторов через запятую
H1, H2, H3 {font-family: Arial}
Аналогично группируются определения, только в списке они разделяются точками с запятой (;). Следующие правила форматирования заголовка первого уровня
H1 {font-weight: bold}
H1 {font-size: 14pt}
H1 {font-family: Arial}
можно задать в виде одного правила, сгруппировав определения:
H1 {font-weight: bold;
font-size: 14pt;
font-family: Arial;
}
Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном (стенографическое свойство). Например, предыдущий пример при использовании свойства 'font' запишется так:
H1 {font: bold 14pt Arial}
В HTML некоторые элементы могут содержать другие. В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. Некоторые свойства не наследуются вложенными элементами от своих родителей, например свойство background-color, но по умолчанию вложенные элементы будут отображаться с фоном родительского элемента, так как это свойство по умолчанию имеет значение transparent.
BODY {
color: black;
font-family: "Times New Roman";
background: url(texture.gif) white;
}
Селекторы
Правила каскадных таблиц стилей, в которых в качестве селектора используются теги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчеркивания все элементы-ссылки (тег <A>) в документе:
<STYLE TYPE="text/css">
<!--
A { text-decoration:none; }
-->
</STYLE>
А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в теге, а можно применить атрибут CLASS, добавленный в HTML 4.0 в качестве стандарта для всех тегов. Значением атрибута CLASS является ссылка на класс, задаваемый в таблице стилей.
|
|
Селектор CLASS
Класс позволяет задать разные правила форматирования для одного элемента определенного типа или всех элементов документа.
<STYLE TYPE="text/css">
<!--
H1.red { color: red; }
H1.blueBgrd { color: red; background-color: blue}
-->
</STYLE>
В тексте документа ссылка на соответствующий класс задается в атрибуте CLASS:
<H1 CLASS="red">Красный шрифт</H1>
<H1 CLASS="blueBgrd">Красный шрифт на синем фоне</H1>
Если класс должен применяться ко всем элементам документа, то в селекторе задается просто имя класса с лидирующей точкой без указания конкретного элемента:
<STYLE TYPE="text/css"><!--
.red { color: red; }
.blueBgrd { color: red; background-color: blue}
--></STYLE>
Теперь два класса red и blueBgrd можно применять к любым элементам документа:
<P ClASS=red>Первый параграф</P>
<P ClASS=blueBgrd>Второй параграф</P>
Селектор ID
Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но он задает уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Атрибут ID можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом '#':
<STYLE TYPE="text/css"><!--
#par24 { letter-spacing: 1em; }
H1#form3 { color: red; background-color: blue}
--></STYLE>
<BODY>
<P ID=par24>Разреженные слова в параграфе</P>
<H1 ID=form2>Черный шрифт</H1>
Контекстные селекторы
При разработке страниц HTML часто приходится одни элементы "вкладывать" в другие, например, выделять слова тегом <EM> в каком-нибудь параграфе, задаваемом тегом <P>. В этом случае говорят, что элемент 'P' порождает элемент 'EM' и является его "предком", а сам элемент 'EM' является "потомком" элемента 'P'. Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство 'color'). Чтобы вложенные элементы отображались со своими значениями свойств, можно определить для них правила форматирования, как показано ниже:
<P> {color: blue}
<EM> {color: yellow}
Однако это приведет к тому, что все выделяемые в документе элементы будут отображаться шрифтом желтого цвета. А если необходимо, чтобы выделяемые только в параграфе элементы отображались желтым цветом, а в других частях документа каким-то другим цветом? Здесь помогут контекстные селекторы. Поставленную задачу решит следующее правило:
|
|
P EM {color: yellow}
Псевдоклассы
Обычно правила форматирования присоединяются к элементу страницы, имеющему определенное положение в структуре документа. Концепция псевдоклассов и псевдоэлементов расширяет адресацию правил форматирования, позволяя внешней информации влиять на процесс форматирования.
Псевдоклассы и псевдоэлементы можно использовать в селекторах правил форматирования, однако реально они не существуют в исходном тексте документа HTML. Вернее, они как бы "вставляются" браузером при определенных условиях в документ, и на них можно ссылаться в таблицах стилей. Их называют "классами" и "элементами", так как это удобный способ описания их поведения. Говоря точнее, их поведение определяется фиктивной последовательностью тегов.
Псевдоклассы связей
Уровень 1 каскадных таблиц стилей регламентирует правила для отображения связей через псевдоклассы элемента 'A':
A:link { color: red } /* непосещенная связь */
A:visited { color: blue } /* посещенная связь */
A:active { color: green } /* активная связь */
A:hover { color: lime } /* связь, на которой расположен указатель мыши */
Примечание
Псевдокласс hover включен в каскадные таблицы стилей, уровень 2, который частично реализован в Internet Explorer 4.01.
Внимание
Браузер Internet Explorer 4.01 правильно реализует псевдоклассы связей, тогда как Netscape Navigator 4.0 не воспринимает псевдоклассы active и hover.
Так как псевдоклассы применяются к единственному типу элементов 'A', то при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны:
A:link { color: red } /* не посещенная связь */
:link { color: red } /* не посещенная связь */
Применение таблиц стилей
Как взаимодействуют правила, определяющие форматирование одинаковых элементов и заданные в разных таблицах? Может, например, оказаться, что в связанной таблице цвет шрифта определен как черный, в импортируемой как красный, а во встроенной как синий, – какой цвет шрифта будет иметь документ, отображаемый в браузере? Подобные конфликты разрешаются с использованием принципа приоритетности разных таблиц стилей. Таблицы выстраиваются в цепочку приоритетности (от низшего к наивысшему), образуют "каскад", по которому документ "прокатывается" и постепенно форматируется на основе правил таблиц стилей, образующих "каскад".
|
|
Говорят, что правила, определенные в таблице с большим приоритетом, имеют больший вес.
Приоритетность импортируемых таблиц стилей зависит от порядка их импортирования в документ. В таблице стилей можно использовать несколько операторов @import. Каждый последующий оператор импортирует таблицу стилей с более высоким приоритетом по отношению к предыдущим, и поэтому ее правила имеют больший вес.
Любые правила, определенные непосредственно в самом документе, перекрывают правила импортируемых таблиц стилей.
Можно увеличить вес правила с помощью значения important, которое задается после значения свойства, вес которого необходимо увеличить:
H1 {color: red! important; background: white! important}
Для определения значения комбинации элемент-свойство используется следующий механизм:
1. Ищутся все определения, применяемые к рассматриваемой комбинации элемент-свойство. Определения применяются, только если селектор соответствует рассматриваемому элементу. Если невозможно применить ни одно определение, используется наследуемое значение свойства. Если не определено наследуемое значение (это справедливо в случае элементов HTML и свойств, которые не могут наследоваться), используется начальное значение.
2. Определения сортируются по явно заданным весам: определения со значением 'important' имеют больший вес по сравнению с нормальным (без увеличения веса) определением.
3. Определения сортируются по своему происхождению: авторские таблицы стилей перекрывают таблицы стилей читателя, которые, в свою очередь, перекрывают установки значений свойств по умолчанию браузера. Импортируемая таблица стилей имеет одинаковое происхождение с таблицей, из которой она импортирована.
4. Определения сортируются по специфичности селектора: селектор с большим числом специфичности перекрывает селектор с меньшим числом специфичности. Для определения числа специфичности селектора определения подсчитывают количество атрибутов ID (a), атрибутов CLASS (b) и названий тегов (c) в селекторе. Составляется число 'abc', которое и определяет специфичность данного определения. Несколько примеров, взятых из рекомендаций REC-CSS1-19990111, приведено ниже:
LI {...} /* a=0 b=0 c=1 --> специфичность = 1 */
|
|
UL LI {...} /* a=0 b=0 c=2 --> специфичность = 2 */
UL OL LI {...} /* a=0 b=0 c=3 --> специфичность = 3 */
LI.red {...} /* a=0 b=1 c=1 --> специфичность = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 --> специфичность = 13 */
#x34y {...} /* a=1 b=0 c=0 --> специфичность = 100 */
5. Определения сортируются по порядку их задания в таблице стилей: если два правила имеют одинаковый вес, заданное позже правило имеет приоритет. Правила в импортированных таблицах стилей считаются задаваемыми до любого правила в таблице стилей, из которой она импортируется.
Можно просто запомнить следующую приоритетность правил (от низшего к высшему): связанная таблица стилей, импортируемая таблица стилей, правило с элементом HTML в качестве селектора, правило с атрибутом CLASS в качестве селектора, правило с атрибутом ID в качестве селектора, встроенное в тег HTML правило.
Модель форматирования
Для правильного применения правил форматирования следует представлять, как в каскадных таблицах стилей происходит форматирование элементов, т.е. на что можно влиять и что можно изменять в отображении элемента.
Модель форматирования каскадных таблицей стилей ориентирована на представление любого элемента HTML окруженным вложенными прямоугольными блоками, как показано на рис. 2.2.
Блок содержимого элемента (самый внутренний блок) отделен от границы отступами. Самым внешним блоком является поле. Свойства таблиц стилей позволяют устанавливать размеры и цвета всех блоков, составляющих в сумме отображаемый элемент. Поле всегда является прозрачным прямоугольником, поэтому его цвет наследует цвет родителя элемента (для параграфа это элемент BODY). Отступ всегда имеет цвет фона самого элемента.
Все перечисленные блоки в совокупности составляют блок форматирования, или отображения элемента, т.е. видимое в окне браузера изображение элемента. Размеры блока форматирования элемента складываются из размеров самого элемента и размеров отступов, границы и полей.
С точки зрения процесса форматирования документа существуют два типа элементов: блоковые и встроенные.
Блоковые элементы
Каждый элемент в модели форматирования имеет свойство display, значение которого определяет, отображается или не отображается (none) элемент, является ли он блоком (block), списком (list-item) или встроенным элементом (inline).
Элементы со значением свойства display равным block или list-item, а также элементы со значением свойства float, отличным от none (не "плавающие" элементы), являются блоковыми элементами. Их форматирование связано с установкой значений соответствующих параметров вложенных блоков, составляющих элемент в целом. На рис. 2.3 показаны все параметры, доступные в модели форматирования каскадных таблиц стилей для блоковых элементов.
Ширина (width) элемента – это ширина блока содержимого, и определяется как расстояние между левым и правым внутренними краями. Высота (height) элемента – расстояние между внутренним верхом и низом.
При вертикальном форматировании блоковых, не "плавающих" элементов значения параметров "верхнее поле" и "нижнее поле" определяют минимальное расстояние до границ блоков окружающих их элементов. Если у двух примыкающих элементов определены не нулевые значения параметров полей, то при вертикальном форматировании поля двух элементов сливаются в одно со значением, равным максимальной высоте поля одного из двух элементов. Подобное слияние можно наблюдать для элементов 'LI' списка 'UL' или 'OL'.
Горизонтальное форматирование элемента определяется значениями семи свойств: левое поле (margin-left), левая граница (border-left), левый отступ (padding-left), ширина ('width'), правый отступ (padding‑right), правая граница (border-right) и правое поле (margin-right). Сумма значений этих семи параметров всегда равняется ширине элемента-родителя или ширине окна браузера, если элемент не вложен в другой элемент.
По умолчанию параметр width имеет значение auto. Если элемент не является замещаемым (в теге элемента задан атрибут SRC), то браузер вычисляет ширину элемента из условия равенства суммы значений семи указанных выше параметров ширине элемента-родителя. Для замещаемого элемента значение ширины автоматически заменяется шириной замещаемого элемента, если только значение ширины установлено в 'auto'. В противном случае размер замещаемого элемента подгоняется под заданную в параметре ширину (процедура подгонки зависит от браузера).
Чтобы удовлетворить условию равенства суммы значений семи параметров ширине элемента-родителя или окна браузера, в рекомендациях Консорциума W3 определено, в каких случаях значения каких параметров устанавливаются браузером в auto.
Свойство float может переводить любой элемент в разряд "плавающих". Это приводит к тому, что указанный элемент выводится из нормального потока отображения и форматируется как блоковый элемент. Например, установка свойства float элемента <IMG> равным left позволяет создать "буквицу" при выводе параграфа текста, как показано на рис. 2.4.
При значении свойства float равным left, элемент сдвигается влево до поля, отступа или границы другого блокового элемента, а нормальный поток отображения будет обтекать его с правой стороны. Текст файла HTML для приведенного примера представлен ниже:
Пример 2.1 "Буквица" в тексте
<HEAD>
<STYLE TYPE="text/css"><!--
IMG {float: left}
--></STYLE>
</HEAD>
<P><IMG SRC=Ж.gif>
или-были в далекие времена далеко на Севере
большие и сильные люди. При одном только их виде
дрожали все, обитавшие в округе племена.
</P>
Встроенные элементы
Элементы, которые не форматируются как блоковые, являются встроенными (inline) элементами. Они совместно с другими элементами используют область строки. Обычно, выделяемые в строке элементы (EM, STRONG, B и т.д.) классифицируются как встроенные.
Рассмотрим пример задания встроенных элементов в блоковый элемент абзац P:
Пример 2.2 Встроенные элементы
<P>В абзац можно помещать
<B >встраиваемые элементы</B>.
Их может быть
<EM >несколько</EM>.</P>
Шрифты
Свойство font-family
Свойство font-family задает приоритетный список семейств шрифтов и/или типовых семейств шрифтов.
BODY { font-family: TimesDL, "Times New", serif}
Понятие типовых семейств шрифтов введено в каскадные таблицы стилей с целью реализации наихудшего варианта отображения страницы, если не найдены специально использованные автором шрифты. В любой реализации каскадных таблиц стилей должны существовать пять типовых семейств шрифтов, которые соответствуют реальным шрифтам, обычно устанавливаемым на большинстве компьютеров:
· serif (например, Times)
· sans-serif (например, Helvetica)
· cursive (например, Zapf-Chancery)
· fantasy (например, Western)
· monospace (например, Courier)
Имена шрифтов, состоящих из нескольких слов, должны заключаться в кавычки:
BODY {font-family: "Times New Roman", serif}
<BODY STYLE="font-family: 'Times New Roman', serif">
Свойство font-style
Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный (normal), курсивный (italic) или наклонный (oblique).
Обычно в базе шрифтов браузера все шрифты, в именах которых встречаются слова Oblique, Slanted или Incline отмечены как наклонные (oblique) шрифты. Шрифты, в названиях которых присутствуют слова Italic, Cursive или Kursiv, отождествляются браузером с курсивными (italic).
H1 {font-style: italic}
H1 EM {font-style: normal}
Свойство font-variant
Каскадные таблицы стилей реализуют еще одну вариацию шрифта выбранного семейства – капитель (small-caps). В шрифте этого стиля все строчные буквы выглядят как прописные, но меньшего размера и с немного измененными пропорциями.
Значение normal свойства font-variant не изменяет вида шрифта, а значение small-caps выбирает вариант капитель шрифта.
H4 {font-variant: small-caps}
EM {font-style: oblique}
Свойство font-weight
Это свойство выбирает из заданного семейства шрифт определенной жирности. В рекомендациях регламентируется 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует самому "бледному" шрифту, тогда как 900 – самому "жирному".
Для задания нормального шрифта используется ключевое слово normal, что соответствует цифровому значению 400. Значение bold применяется для выбора общепринятого полужирного начертания шрифта и его цифровым эквивалентом является 700.
Свойство font-size
Это свойство определяет размер шрифта. Его значение может быть абсолютным или относительным.
Абсолютное значение можно задать одним из следующих ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large, которые являются индексами в таблице размеров шрифтов, поддерживаемой браузером. Масштабирующий множитель соседних значений в уровне 1 каскадных таблицах стилей определялся как 1.5, а в уровне 2 его значение рекомендовано равным 1.2. По умолчанию браузер использует значение medium.
Абсолютное значение можно задать и в виде абсолютного значения длины, например 10pt, но в этом случае высота шрифта не зависит от хранимой таблицы размеров шрифтов браузера.
Ключевые слова для задания относительного размера шрифта интерпретируются относительно таблицы размеров шрифтов и размера шрифта элемента-родителя. Возможными значениями могут быть: larger и smaller. Например, если родитель имеет размер шрифта medium, то значение larger сделает шрифт текущего элемента равным large.
Относительный размер шрифта можно задать также в процентах к размеру шрифта родителя или в относительных единицах длины:
P {font-size: 10pt}
EM {font-size: 120%}
EM {font-size: 1.2em}
Свойство font
Основное назначение свойства font – установить в одном определении значения свойств font-style, font‑variant, font-weight, font-size, line-height и font-family. Все значения перечисленных свойств задаются через пробелы в том порядке, как они перечислены выше. Первые три свойства могут не задаваться, что соответствует установке их значений в normal. Размер шрифта и высота строки (свойство line-height) задаются через косую черту. Элементы списка семейств шрифтов свойства font-family задаются через запятую:
P {font: oblique 12pt/14pt "Times Cyr", serif}
Свойство @font-face
Это свойство введено в каскадные таблицы стилей в рекомендациях уровня 2. Оно предназначено для задания семейства шрифта. Если указанный шрифт отсутствует на компьютере пользователя, то он загружается из сети по заданному вторым параметром URL-адресу:
@font-face {font-family: CoolFont; src:url(http://myserver.com/CoolFont.eot);}
Примечание
Все свойства шрифтов являются наследуемыми и применяются ко всем элементам документа HTML.
Цвет и фон
Свойства этой категории определяют цвет и фон элемента. Фон можно задать в виде цвета или изображения. В случае изображения указывается его положение, как оно повторяется и фиксировано ли оно или прокручивается вместе с прокруткой содержимого окна браузера.
Свойство color
Для установки цвета текста элемента существует единственное свойство color. Его значением является цвет, задаваемый с помощью ключевых слов или rgb-функции:
<P> {color: blue}
<EM> {color: rgb(0,0,255)}
Оба правила в примере устанавливают синий цвет текста соответствующих элементов.
Для установки параметров фона элемента существует несколько свойств, задающих значения индивидуальных параметров фона, и свойство background, в котором можно установить одновременно все значения параметров фона.
Свойство background-color
Цвет фона определяется значением свойства background-color. Начальным значением свойства background-color является transparent, которое определяет фон элемента как прозрачный.
Свойство background-image
Изображение, используемое в качестве фона, задается свойством background-image. Значением свойства background-image является абсолютный или относительный адрес файла изображения, используемого в качестве фона. Если это свойство определено, то рекомендуется задать также и цвет фона, который будет использоваться в случае недоступности файла изображения.
BODY {background-color: lightsteelblue;
background-image: url(/image/image.gif);}
<P> {background-image: none}
Свойство background-repeat
Если фон задан в виде изображения, то свойство background-repeat определяет его повторяемость и способы повторяемости. Допустимыми значениями являются repeat (повторяемость и по вертикали, и по горизонтали), repeat-x и repeat-y (повторяемость соответственно по горизонтали или вертикали) и no‑repeat (изображение не повторяется).
BODY {background-color: lightsteelblue;
background-image: url(/image/image.gif);
background-repeat: repeat-y;}
Свойство background
Свойство background позволяет одновременно устанавливать значения свойств background-color, background-image, background-repeat и background-attachment. Все допустимые значения индивидуальных свойств задаются в виде списка, элементы которого отделены пробелами. Если значение какого-либо свойства не задано, то оно устанавливается в начальное значение, определяемое браузером:
BODY {background: lightsteelblue url(/image/image.gif) center}
Примечание
Свойство color наследуется по обычным правилам. Все свойства, определяющие параметры фона, не наследуются, но фон элемента-родителя будет отображаться по умолчанию, так как начальным значением свойства background-color является transparent (прозрачный).
Форматирование текста
Свойство letter-spacing
Свойство letter-spacing влияет на расстояние между символами при отображении текста. Его значение, задаваемое в единицах длины, определяет пробел, добавляемый к установленному по умолчанию пробелу между символами.
<P STYLE="letter-spacing: 0.5em">
Слово слово слово слово слово
</P>
Свойство text-transform
Каскадные таблицы стилей позволяют преобразовывать текст. Если значение свойства text-transform равно capitalize, то все слова отображаются с прописной буквы. Значения uppercase и lowercase этого свойства приводят, соответственно, к преобразованию всех букв в прописные или строчные, независимо от их задания в тексте документа HTML.
Свойство text-decoration
Свойство text-decoration задает подчеркивание, надчеркивание или перечеркивание текста. Соответствующие значения этого свойства следующие: underline, overline и line-through.
Свойство text-align
Выравнивание текста в блоке содержимого элемента определяется значением свойства text-align. Текст выравнивается по левому краю при значении left, по правому краю – при значении right, по центру – при значении center и по ширине блока содержимого элемента – при значении justify.
Внимание
Текст выравнивается относительно блока содержимого элемента, а не относительно окна отображения браузера.
Свойство text-indent
Отступ первой строки элемента задается значением свойства text-indent, которое определяет величину отступа в абсолютных или относительных единицах длины.
Свойство vertical-align
Свойство vertical-align определяет положение элемента по вертикали относительно элемента-родителя. Его значением может быть любое ключевое слово из таблицы 4.
Таблица 4 Ключевые значения выравнивания по вертикали
| Значение | Результат |
| baseline | Выравнивание базовой линии элемента (или низа, если элемент не имеет базовой линии) по базовой линии родителя |
| middle | Выравнивание средней точки элемента (обычно изображения) на уровне базовой линии родителя плюс половина ширины блока содержимого родителя |
| sub | Элемент отображается в виде нижнего индекса |
| super | Элемент отображается в виде верхнего индекса |
| text-top | Выравнивание верха элемента с верхом шрифта элемента-родителя |
| text-bottom | Выравнивание низа элемента с низом шрифта элемента-родителя |
| top | Выравнивание верха элемента с верхом самого высокого элемента строки |
| bottom | Выравнивание низа элемента с ниже всех расположенным элементом строки |
Значения этого свойства, заданные в виде процентов, вычисляются относительно высоты строки (свойство line-height) самого элемента. Они поднимают базовую линию (или низ элемента, если он не имеет базовой линии) на заданную высоту относительно базовой линии элемента-родителя, если значение положительно, и опускают, если значение отрицательно.
Свойство line-height
Расстояние между базовыми линиями двух соседних строк (высота строки) задается установкой значения свойства line-height. Числовое значение этого свойства определяет высоту строки, вычисляемую умножением размера шрифта текущего элемента на заданное число.
Примечание
Все текстовые свойства, кроме свойств text-decoration и vertical-align, наследуются элементами-потомками от родителей.
Блоки
Свойства этой категории устанавливают параметры блоковых элементов. Среди них можно выделить три больших группы, форматирующих блоки полей, границ и отступов, причем группу, работающую с границей, можно подразделить еще на четыре группы, устанавливающие значения цвета, стиля, ширины и одновременно всех перечисленных свойств границы. Все эти группы отличает то, что в них включены свойства для задания параметров верхних, нижних, правых, левых и одновременно всех четырех частей соответствующих блоков форматирования элемента.
Свойства поля
В группу форматирования поля входят свойства, устанавливающие ширину верхнего (margin-top), правого (margin-right), нижнего (margin-bottom) и левого (margin-left) поля элемента. В свойстве margin можно одновременно установить значения всех четырех параметров поля элемента.
Ширина соответствующих полей задается значением длины или в процентах от ширины ближайшего элемента-родителя. Начальные значения всех полей равны 0.
Если в свойстве margin заданы четыре значения, то они, соответственно, относятся к верхнему, правому, нижнему и левому полю. Если определено только одно значение, то оно применяется ко всем сторонам поля элемента. При задании двух или трех значений недостающие значения берутся из установок противоположных сторон. Например:
BODY {margin: 1em 2em} /* верх и низ = 1em, право и лево = 2em */
Свойства отступа
Ширина верхнего, правого, нижнего и левого отступа определяется значением, соответственно, свойств 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. Типы границ, соответствующих всем перечисленным значениям, представлены в таблице 5.
Таблица 5 Типы линий границы
| Ключевой параметр | Тип границы |
| none | Граница не отображается (несмотря на значение свойства 'border-width') |
| solid | Граница отображается сплошной линией |
| double | Граница отображается двойной линией (сумма толщины двух линий и промежутка между ними равна значению свойства 'border-width') |
| groove | Граница отображается, как будто она вдавлена в лист ("желобок") |
| ridge | Граница отображается, как будто она выдавлена из листа ("барельеф") |
| inset | Весь блок элемента отображается, как будто он вдавлен в лист |
| outset | Весь блок элемента отображается, как будто он выдавлен из листа ("барельеф") |
Последняя большая группа свойств позволяет установить ширину, тип и цвет частей границы или всей границы в целом. Свойства border-top, border-right, border-bottom и border-left определяют ширину, тип и цвет, соответственно, верхней, правой, нижней и левой границы. Свойство border определяет одновременно параметры всех частей границы. В отличие от аналогичных свойств, задающих параметры полей и отступов, данное свойство устанавливает одинаковые значения для всех частей границы.
Визуальное форматирование
Свойство position
Свойство position элемента позволяет определить способ его позиционирования на странице: статический, относительный или абсолютный.
Значения static, relative и absolute свойства position определяют соответствующий способ позиционирования элемента, который, в конечном счете, складывается из значения указанного свойства элемента, его положения в иерархической структуре документа, местом его определения в исходном файле HTML и значениями его свойств top и left. Эти последние свойства определяют смещение вниз и вправо левого верхнего угла блока отображения элемента.
Абсолютное позиционирование
Абсолютно позиционированный элемент и все его потомки изымаются из естественного потока отображения элементов и позиционируются независимо, причем сам элемент или его потомки могут перекрывать ранее отображенные элементы.
Чтобы определить точку отсчета местоположения элемента следует найти его ближайшего родителя, позиционированного абсолютно или относительно. Положение левой верхней вершины блока этого элемента и будет точкой отсчета для абсолютно позиционированного элемента. Если процесс поиска подобного родителя (следует пропускать все позиционированные статически элементы) дойдет до элемента <BODY>, то тело документа и будет тем элементом, относительно которого позиционируется исходный элемент.
Следующий фрагмент страницы HTML иллюстрирует абсолютное позиционирование элемента:
<SPAN STYLE="position:static;
background-color:#90EE90">
Родитель, позиционированный статически!
<IMG SRC="Ж.gif" STYLE="position:absolute; top:60px; left:60px;">
</SPAN>
а) б)
в) г)
Свойства top и left
Значения свойств top и left влияют на начало отсчета положения абсолютно позиционированного элемента. Если их значения установлены, то именно они и используются для смещения элемента относительно начала позиционированного элемента-родителя. Если значение свойства top не задано или установлено равным auto, то верхний край элемента совмещается с верхом последней строки текста родителя, если последний содержит текст, или выравнивается по верхнему краю родителя, если последний является изображением. Аналогично, если значение свойства left не задано или установлено равным auto, то левый край элемента совмещается с концом последней строки текста родителя, если последний содержит текст, или выравнивается по правому краю родителя, если последний является изображением.
Свойства width и height
Еще два параметра, влияющие на отображение абсолютно позиционированного элемента, – это свойства width и height элемента. Как отмечалось, при абсолютном позиционировании элемент изымается из стандартного потока и отображается сам
|
|
|
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...
История развития хранилищ для нефти: Первые склады нефти появились в XVII веке. Они представляли собой землянные ямы-амбара глубиной 4…5 м...
Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!