Файл: «Способы оформления web-страниц приложения (CSS, Темы)».pdf
Добавлен: 30.06.2023
Просмотров: 66
Скачиваний: 2
- Из-за механизма наследования.
- Когда один или более стилей применяются к одному элементу web-страницы.
Наследование CSS гарантирует, что однородные взаимосвязанные элементы веб-страницы получают стилевые свойства родительских элементов. Это избавляет от необходимости создания отдельных стилей для каждого тега веб-страницы. Поскольку тег может унаследовать свойства любого предка (например, ссылка, наследующая шрифт родительского <p>), определить, почему конкретный тег отформатирован именно так, может быть сложной задачей. Предположим такую ситуацию: к <body> применен определенный шрифт, к <p> — размер шрифта, а для <a> — цвет. Таким образом, любой тег <a> абзаца унаследует свойства <body> и <p>. Другими словами, унаследованные стили будут объединены, сформировав один сложный. CSS-код выглядит следующим образом [7]:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
p {
color: #F30;
}
strong {
font-size: 24px;
}
Тег <strong> вложен в абзац, который, в свою очередь, является вложенным в <body>. Стилевые свойства наследует <strong> у всех элементов-предков, получая начертания шрифта font-family от <body> и цвет color от родительского абзаца. Кроме того, <strong> имеет собственное CSS-свойство, устанавливающее размер шрифта 24 пиксела. Конечный внешний вид тега определяется сочетанием всех трех стилей. Другими словами, <strong> выглядит так, будто для него создали следующий стиль [9]:
strong {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: color: #F30;
font-size: 24px;
}
Единственный стиль, обладающий наивысшим приоритетом, является самым близким предком в «генеалогическом» дереве CSS. Это тот стиль, который напрямую применен к тегу. Предположим, что цвет шрифта устанавливается для <body>, <p> и <strong>. Стиль абзаца <p> является определенным по отношению к <body>, но <strong> — еще более конкретный, чем все остальные. Он форматирует только теги <strong>, отменяя любые конфликтующие свойства, унаследованные от других тегов. Другими словами, свойства стиля, явно определенного для тега, отменяют любые унаследованные [10].
В первой главе курсовой работы были рассмотрены основные понятия, связанные с каскадными таблицами стилей. В рамках данной главы была разобрана структура таблицы стилей, способы размещения CSS, как внутри документа, так и во внешней таблице стилей, рассмотрена структура селектора, определены виды селекторов. Также в данной главе были рассмотрены каскадность и механизмы наследования.
Глава 2 Практическое применение CSS
2.1 Работа с текстом
Для работы с текстом в CSS используется свойство font-family. Данное свойство может иметь вид:
body {font-family: sans-serif;}
Данная конструкция применима ко всем элементам, находящимся в пределах тега <body>. Это будет происходить до тех пор, пока не будет выполнено переопределение. В том случае, если шрифт состоит из нескольких слов, отделенных пробелом или символом, тогда необходимо использовать кавычки [9]. Структура данной конструкции будет иметь вид, представленный на рисунке 11.
Рис. 11. Назначение шрифта для абзаца
Результат выполнения данного правила, показан на рисунке 12.
Рис. 12. Результат выполнения правила
Кроме того, с помощью CSS возможно задать не только шрифт, но и насыщенность шрифта. Одним из примеров является полужирный шрифт, т.е повышенной насыщенности. Структура данного правила имеет вид:
p{ font-weight: normal;}
Данное правило может принимать такие значения: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit. На рисунке 13, показано применение данного правила [10].
Рис. 13. Применение правила font-weight
На рисунке 14, показан результат выполнения данного правила.
Рис. 14. Результат выполнения правила font-weight
Размер шрифта задается с помощью следующей конструкции:
p{ font-size: 12px;}
Это правило может быть представлено следующим образом (рисунок 15).
Рис. 15. Структура правила
На рисунке 16, показан результат выполнения правил.
Рис. 16. Результат выполнения правил
При применении em, как единицы измерения размера шрифта, необходимо помнить, что CSS определяет значение длины em как процентное соотношение, т.е 1em=100%.
2.2 Работа с графикой
С появлением CSS3 разработчики стали предпочитать этот инструмент canvas и svg для рисования иллюстраций. Поддержка анимирования элементов с помощью браузера значительно ускоряет прорисовку и делает ее более плавной, чем реализация ее более старыми методами (например, с помощью jQuery) [12].
Наиболее простой способ использования SVG-графики совпадает со вставкой в HTML-документ любой графики. Для этого, воспользуемся тегом img:
<img src="mySconeVector.svg" alt="Amazing line art of a scone" />
В данном случае, SVG-изображение ведет себя практически так же, как и любое другое изображение.
Использование тега <object>.
Тег <object> является контейнером, рекомендуемым W3C, для содержимого web-страницы, не имеющего, при этом, отношения к HTML. Данный тег позволяет вставить SVG-графику на HTML-страницу:
<object data="img/svgfile.svg" type="image/svg+xml">
<span class="fallback-info">Your browser doesn't support SVG</span>
</object>
С тегом <object> рекомендуется использовать атрибут data и атрибут type. Атрибут data является внешней ссылкой на SVG-ресурс, поведение которого ни чем не отличается от ссылки на любой другой ресурс. С помощью атрибута type дается описание MIME-типа, соответствующего содержимому. В приведенном выше примере image/svg+xml является MIME-типом, который обозначает данные в формате SVG. В том случае, если необходимо задать размер SVG в пределах контейнера, тогда необходимо добавить атрибуты width и height [4].
SVG-графика, вставленная на страницу с помощью тега object, доступна также коду JavaScript. Данный факт является одним из аргументов плюсов данного способа вставки. Однако дополнительным преимуществом использования тега <object> является предоставление им простого механизма действия в случае, если браузер не понимает типа данных. Например, если бы предыдущий элемент <object> просматривался в Internet Explorer 8 (в котором отсутствует поддержка SVG), то на экране просто было бы показано сообщение о том, что браузер не поддерживает SVG. Пространство, в котором обозначено сообщение, можно использовать для предоставления альтернативного изображения в теге <img>. Но, при этом, следует иметь в виду, что, по результатам моего экспресс-тестирования, браузер всегда будет загружать альтернативное изображение независимо от практической надобности в нем. Поэтому, если вы хотите, чтобы сайт загружался как можно быстрее, данный вариант, наверное, будет не самым лучшим выходом из положения [6].
Альтернативным вариантом может стать добавление фонового изображения с помощью CSS-свойства background-image. В приведенном выше коде у альтернативного span-контейнера имеется класс .fallback-info. Что позволит нам воспользоваться данным в CSS для ссылки на подходящее фоновое изображение. Данное фоновое изображение будет загружаться только в случае, когда это действительно необходимо.
Вставка SVG-графики в качестве фонового изображения.
SVG-графика может использоваться в качестве фонового изображения в CSS примерно так же, как и изображение любого другого формата (PNG, JPG, GIF). Структура вставки SVG-графики имеет вид:
.item {
background-image: url('image.svg');
}
Для устаревших браузеров, не поддерживающих SVG, может понадобиться включить альтернативное изображение в более широко поддерживаемом формате (обычно PNG). Одно из решений для Internet Explorer 8 и Android 2 имеет следующий вид [8]:
.item {
background: url('image.png') no-repeat;
background: url('image.svg') left top / auto auto no-repeat;
}
В том случае, если в CSS применяются два одинаковых свойства, то нижестоящим свойствам всегда переписывается то свойство, что стоит выше его. Браузер игнорирует те правила CSS, в которых он не может разобраться. В таких случаях устаревшие браузеры получают изображение в формате PNG, так как они не могут работают с SVG, в то время как новые браузеры, применят нижнее свойство, поскольку для них будет отменено первое свойство [3].
Альтернативные варианты можно предоставить с помощью JavaScript-средства Modernizr, предназначенного для тестирования функциональных возможностей браузера. В Modernizr содержатся отдельные тесты для различных методов вставки SVG-графики, а в следующей версии Modernizr может содержаться что-нибудь более специфичное для SVG в CSS. Для начала сделаем следующее:
.item {
background-image: url('image.png');
}
.svg .item {
background-image: url('image.svg');
}
Или инвертировать логику, если вам так удобнее:
.item {
background-image: url('image.svg');
}
.no-svg .item {
background-image: url('image.png');
}
Когда запросы возможностей (feature queries) получат более полную поддержку, можно будет также сделать следующее:
.item {
background-image: url('image.png');
}
@supports (fill: black) {
.item {
background-image: url('image.svg');
}
}
Правило @supports здесь сработает, поскольку fill является свойством SVG, и, если браузер это понимает, то он предпочтет не верхнее, а нижнее правило. Если ваши потребности в SVG-графике сводятся в основном к статичным фоновым изображениям, значкам. На данный момент широко внедряется SVG-графика в качестве фоновых изображений. Для этого существует множество инструментальных средств, автоматически создающих спрайты изображений или ссылки на ресурсы в таблицах стилей, альтернативные PNG-ресурсы и необходимые таблицы стилей из отдельных создаваемых вами SVG-изображений. Это происходит посредствам включения SVG-графики в виде URI-идентификатора данных. Данный способ использования SVG-графики весьма широко применяется, сами изображения неплохо кэшируются, следовательно, их использование приносит довольно просто реализовать [8].
2.3 Использование CSS для навигации
CSS анимацию целесообразно использовать для реализации популярной техники, так называемого parallax scrolling, когда при прокручивании документа фон и содержимое перемещаются с разной скоростью, создавая эффект трехмерного пространства в WEB-приложении [12].
CSS позволяет преобразовать список ссылок, расположенных вертикально одна за другой, в список с горизонтальным представлением. Существует два распространенных подхода в создании из списка горизонтальной панели навигации. Первый метод основывается на использовании свойства display: inline-block – он прост, но обычно приводит к маленьким расстояниям между кнопками. Если нужна горизонтальная навигационная панель с соприкасающимися кнопками, обратитесь к методу с применением плавающих элементов <ul>, однако для начала необходимо удалить маркеры и левые отступы тегов <ul>. Самый простой метод создания горизонтальной панели навигации заключается в изменении для элементов списка значения block (блочный элемент) свойства display на inline (линейный элемент) [6].
Шаг 1. Первым делом необходимо создать стиль для маркированного списка, чтобы удалить отступы, поля и маркеры (рисунок 17).
Рис. 17 Создание стиля для маркированного списка
Рис. 18. Результат выполнения стиля
Шаг 2. Преобразуем пункты списка в линейные элементы. Линейные элементы не создают переносов строк ни перед элементом, ни после него, как это делают блочные. Установка значения inline свойства display для тегов <li> приведет к отображению элементов списка в одну строку (рисунок 19) [7].
Рис. 19. Стиль для преобразования списка в линейные элементы
Рис. 20. Результат преобразования
Шаг 3. Следующим шагом является стилизация ссылки. Можно убрать подчеркивание под ссылками и вместо этого добавить вокруг них окаймляющую границу. Чтобы обеспечить визуальную глубину и реалистичность настоящих кнопок, нужно изменить цвет фона или добавить рисунок. При необходимости добавьте отступы вокруг текста ссылок. Если требуется разнести кнопки друг от друга, назначьте для них правое поле [4].
На рисунке 21, показан окончательная его структура, а на рисунке 22 показан результат данного кода.