Читайте также:
|
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" > <title> Подключение стиля </title> <style> H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } </style> </head> <body> <h1 style="font-size: 36px; font-family: Times, serif; color: red" > Заголовок 1 </h1> <h1> Заголовок 2 </h1> </body></html>
В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зелёным цветом через таблицу глобальных стилей (рис. 3.3).
Рис. 3.3. Результат применения стилей
19. Основной формат правила CSS (селектор, свойства): синтаксис. Виды селекторов (селектор типа, селектор класса, ID-селектор, контекстные селекторы).
Правило CSS - это структурная единица таблицы стилей, которая содержит описание стилей для определенного элемента. Правило состоит из селектора, который всегда располагается слева, и блока объявления стилей, который заключается в фигурные скобки и следует непосредственно за селектором (рисунок). Каждое объявление в свою очередь состоит из свойства и его значения. Именно свойство и определяет вид стиля, который будет применяться к элементу.
Правило может содержать несколько объявлений, отделенных точкой с запятой. После последнего объявления точку с запятой можно не ставить.
Для удобства чтения и редактирования таблиц стилей ее правила обычно записывают таким образом, чтобы каждое объявление располагалось на отдельной строке. Например:
| H2 { color: purple; font: bold 16pt Verdana, sans-serif; } |
Селектор типа определяет HTML-элементы, к которым будет применен стиль. Следующее правило, к примеру, задает синий цвет текста для всех заголовков первого уровня:
| h1 { color: blue; } |
Теперь рассмотрим два селектора, для которых сразу необходимо отметить, в чем их отличие, дабы впоследствии не возникало путаницы. Селектор id используется для описания свойств элемента, который встречается в документе только один раз (то есть является уникальным). Двух тегов с одинаковым значением селектора id быть не может.
Чаще всего селекторы id применяются к основному тегу блочной верстки div. Синтаксис использования идентификатора может быть осуществлен двумя способами, в одном из которых упоминается непосредственно тег:
Однако, поскольку идентификатор id применяется только к уникальным элементам, название тега спереди можно опустить и в подавляющем количестве случаев запись селектора с набором определенных свойств выглядит так:
Поэтому, если вы увидите спереди знак решетки #, то знайте, что имеете дело с селектором id.
Если селектор id задает свойства CSS для уникального элемента, то классы (class) дают возможность определить стиль отображения для сколь угодно большого числа элементов. То есть различным тегам может соответствовать один и тот же селектор class, которому соответствуют определенные стили.
Синтаксис для классов следующий:
Но, как в случае с идентификатором, обычно название тега спереди опускается и запись для данного селектора начинается с точки:
Таким образом, если вы вдруг встретите в файле CSS запись с точкой впереди селектора, будете знать, что данные свойства присвоены элементам вебстраницы, атрибутами тегов которых является class.
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определённом контексте. Например, задать стиль для тега <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.
Контекстный селектор состоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий.
Тег1 Тег2 {... }В этом случае стиль будет применяться к Тегу2 когда он размещается внутри Тега1, как показано ниже.
<Тег1> <Тег2>... </Тег2></Тег1>
20. Виды таблиц CSS: внедренные таблицы стилей с помощью атрибута style (синтаксис, примеры), внутренние таблицы стилей с помощью элемента STYLE (синтаксис, примеры), внешние таблицы стилей с помощью элемента LINK (синтаксис, примеры).
Смотреть 18 вопрос
21. Наследование стилей CSS: определения «предок», «потомок». Иерархия элементов HTML-документа. Синтаксис значения свойства inherit. Пример.
Термин " наследование " перекочевал в CSS, очевидно, из объектно-ориентированных языков. В общем-то, это довольно понятный и на обывательском уровне термин. Каждый из нас унаследовал от своих предков некие качества. Кто-то красивые глаза от мамы и сильный характер от папы, кто-то фигуру от бабушки, а цвет волос от дедушки. Кроме этого, каждый из нас передаст какие-то качества свои детям, внукам и правнукам, в общем, своим потомкам.
Аналогично некоторые свойства CSS могут наследоваться от элементов-предков. Предком в данном случае называется элемент, стоящий в дереве документа уровнем выше, чем исходный элемент. Непосредственным предком называется элемент, стоящий ровно на один уровень выше в дереве. Аналогично определяется и непосредственный потомок - это элемент, стоящий на уровень ниже в дереве элементов.
Например, в дереве, показанном на рисунке ниже, элемент LI является потомком элементов OL и BODY, но непосредственным потомком только элемента OL. Элемент OL в этом случае называется непосредственным предком элемента LI. У элемента Р два непосредственных потомка: ЕМ и STRONG.
Для каждого свойства CSS указывается, является оно наследуемым или нет. Например, к наследуемым свойствам относится цвет, задаваемый ключевым словом color. Рассмотрим пример, когда внутри элемента P располагается выделение ЕМ.
<Р>Создаем <ЕМ>выделение</ЕМ> внутри абзаца</Р>
Пусть для элемента Р задан стиль:
| P { color: blue } |
Тогда элемент унаследует цвет от своего предка, и текст внутри элемента ЕМ также будет синим, как и во всем абзаце. Воспользовавшись свойством наследования, можно задать общие для всего документа параметры оформления, указав их в самом старшем элементе документа, которыми могут быть или HTML или BODY.
| BODY { color: brown; font-size: 12pt } |
Тем самым мы задали коричневый цвет для всего текста на странице и размер шрифта, равный 12 пунктам. Эти значения могут быть переопределены по более специфичными правилам, например на основе классов или идентификаторов.
Надо заметить, что это правило с селектором BODY будет работать, даже если в коде страницы элемент BODY явно не указан, что вполне допустимо. В этом случае синтаксический анализатор сам его сгенерирует и все равно включит этот элемент в дерево документа.
Кроме этого, для каждого свойства может быть задано значение inherit, которое означает, что это свойство должно наследоваться.
| Р { color: inherit;} |
В результате цвет текста абзаца будет наследоваться от предка. Это общие принципы наследования, поэтому при написании CSS-правил следует учитывать, какие свойства являются наследуемыми, а какие нет. Свойство color, например, является наследуемым и так, поэтому предыдущее правило не имеет особого смысла.
22. Каскадирование стилей: разработчик таблицы стилей, пользователь таблицы стилей, таблица стилей браузера. Наивысший, средний и низкий приоритеты правил таблицы. Директива! important. Пример.
Итак, мы имеем три субъекта, которые могут предоставлять таблицы стилей для оформления документов.
4. Автор-разработчик Web-страницы. Он может написать таблицы стилей и использовать их согласно правилам, т.е. помещать внутрь документа или подключать из внешнего файла.
5. Пользователь или посетитель Web-страницы. Он может самостоятельно создать таблицу стилей для конкретного документа, и если браузер поддерживает такую возможность, для просмотра документа пользователь может использовать собственную таблицу стилей.
6. Браузер. В соответствии со спецификацией, браузеры должны сначала применить к HTML-документу собственную таблицу стилей, используемую по умолчанию, и только потом применять остальные таблицы стилей.
Области действия таблиц, созданных любым из трех субъектов, могут пересекаться, например в каждой таблице может существовать правило, определяющее внешний вид текста для абзаца. В этом случае выбор приоритетного CSS-правила осуществляется в соответствии с принципами каскадирования. При наличии нескольких правил для одного и того же элемента преимущество имеет правило с наибольшим приоритетом.
По умолчанию правила в таблицах стилей, созданных разработчиками страницы, имеют больший приоритет, чем правила, созданные пользователем. И все правила разработчика и пользователя имеют больший приоритет, чем правила в таблице стилей браузера, используемой по умолчанию. Таким образом, наименее приоритетна - таблица стилей браузера, затем идет таблица стилей пользователя, и самой приоритетной является таблица стилей, созданная разработчиком.
Этот порядок можно просто изменить или же, не меняя его, указать директиву! important для какого-то отдельного правила - тогда правило с такой директивой становится более приоритетным. Если, например, в таблице пользователя написано:
| Р { color: blue!important } а в таблице разработчика написано P { color: red } |
то более приоритетным будет первое правило, т.е. цвет текста абзацев будет синим. Если же правило с директивой! important будет существовать и в таблице пользователя, и в таблице разработчика, то приоритетнее будет таблица разработчика.
Таблицы стилей, подключаемые из внешних источников, также каскадируются, и их приоритетность определяется порядком подключения таблиц. Сначала применяется таблица стилей по умолчанию, затем ее правила переопределяются первой подключенной таблицей, потом подключается следующая, которая переопределяет правила предыдущей, и т.д. Поэтому подключайте таблицы стилей в порядке возрастания их важности, поскольку этот порядок здесь имеет значение.
Рассмотрим пример использования в документе трех внешних таблиц стилей, содержимое которых представлено в таблице
| Три внешние таблицы стилей | ||
| Style1.css | Style2.css | Style3.css |
| P { color: red } | P { color: green!important } | P { color: blue } |
Если сначала подключить таблицу style1, а затем style3:
| <LINK href ="style1.css" rel="stylesheet" type="text/css"> <LINK href ="style3.css" rel="stylesheet" type="text/css"> |
то цвет текста в абзацах будет синим, так как последней подключена третья таблица. Если же поменять их местами, то цвет будет красным.
В случае подключения всех трех таблиц по порядку:
| <LINK href="stylel.css" rel="stylesheet" type="text/css"> <LINK href="style2.css" rel="stylesheet" type="text/css"> <LINK href="style3.css" rel="stylesheet" type="text/css"> |
цвет текста в абзацах будет зеленым, поскольку это свойство помечено директивой important и, следовательно, имеет больший приоритет.
То же относится и к правилам, записанным внутри одной таблицы стилей. Каждое следующее правило переопределяет предыдущее, естественно, если эти правила написаны дя одного селектора:
| <STYLE> Р{ color: red } Р{ color: green! important } P{ color: blue } </STYLE> |
В этом случае текст абзацев также будет зеленым. Третье правило для P не будет применено, так как во втором присутствует пометка! important. Если эту пометку убрать, то цвет текста абзацев станет синим.
23. Свойства CSS: синтаксис описания стиля, группы (свойства шрифта: font-family, font-weight, font-size, font-style, font-variant, font-height): атрибуты и их значения, синтаксис, примеры.
Font-family
Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.
Синтаксис
font-family: имя шрифта [, имя шрифта[,...]] | inherit
Значения
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
· serif — шрифты с засечками (антиквенные), типа Times;
· sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
· cursive — курсивные шрифты;
· fantasy — декоративные шрифты;
· monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
Font-weight
Описание
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.
Синтаксис
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Значения
Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
Font-size
Описание
Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задает размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.
Другой набор констант (larger, smaller) устанавливает относительные размеры шрифта. Поскольку размер унаследован от родительского элемента, эти относительные размеры применяются к родительскому элементу, чтобы определить размер шрифта текущего элемента.
В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.
Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.
Синтаксис
font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Значения
Для задания абсолютного размера используются следующие значения: xx-small, x-small, small, medium, large, x-large, xx-large. Их соответствие с размером шрифта в HTML приведено в табл. 1.
| Табл. 1. Размер шрифта в CSS и HTML | ||||||||
| CSS | xx-small | x-small | small | medium | large | x-large | xx-large | |
| HTML |
Относительный размер шрифта задается значениями larger и smaller.
Также разрешается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др. За 100% берется размер шрифта родительского элемента. Отрицательные значения не допускаются.
Font-style
Описание
Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста. Результат и качество при этом могут получиться неудовлетворительными, особенно при печати документа.
Синтаксис
font-style: normal | italic | oblique | inherit
Значения
Normal Обычное начертание текста.
Italic Курсивное начертание.
Oblique Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путем наклона обычных знаков вправо.
Font-variant
Описание
Определяет, как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера. Такой способ изменения символов называется капителью.
Синтаксис
font-variant: normal | small-caps | inherit
Значения
Normal Оставляет регистр символов исходным, заданным по умолчанию.
small-caps Модифицирует все строчные символы как заглавные уменьшенного размера,
Font-height
Описание
Устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически. Отрицательное значение межстрочного расстояния не допускается.
Синтаксис
line-height: множитель | значение | проценты | normal | inherit
Значения
Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пикселы (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.
Normal Расстояние между строк вычисляется автоматически.
24. Свойства CSS: синтаксис описания стиля, группы (свойства цвета и фона: background-color, background-image, background-attachment, background-repeat, background-position): атрибуты и их значения, синтаксис, примеры.
background-color
Описание
Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.
Синтаксис
background-color: <цвет> | transparent | inherit
Значения
См. цвет
Transparent Устанавливает прозрачный фон.
Inherit Наследует значение родителя.
Дата добавления: 2015-10-26; просмотров: 87 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Ускорение загрузки сайта | | | Превращение строчных элементов в блочные |