Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...
Особенности сооружения опор в сложных условиях: Сооружение ВЛ в районах с суровыми климатическими и тяжелыми геологическими условиями...
Топ:
Установка замедленного коксования: Чем выше температура и ниже давление, тем место разрыва углеродной цепи всё больше смещается к её концу и значительно возрастает...
История развития методов оптимизации: теорема Куна-Таккера, метод Лагранжа, роль выпуклости в оптимизации...
Марксистская теория происхождения государства: По мнению Маркса и Энгельса, в основе развития общества, происходящих в нем изменений лежит...
Интересное:
Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...
Аура как энергетическое поле: многослойную ауру человека можно представить себе подобным...
Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...
Дисциплины:
 2021-03-17 |
 111 |
из
5.00
|
Заказать работу |
|
|
|
|
Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы 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>
|
|
|
Папиллярные узоры пальцев рук - маркер спортивных способностей: дерматоглифические признаки формируются на 3-5 месяце беременности, не изменяются в течение жизни...
Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...
Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!