🗊Презентация Листы стилей WEB-страниц Язык описания представлений CSS-cascading style sheets

Листы стилей WEB-страниц Язык описания представлений CSS-cascading style sheets

Свойства, описываемые CSS Свойства шрифта Свойства текста Свойства фона Свойства обрамления Свойства позиционирования Адаптация интерфейса Фильтры Слои

Единицы измерения Относительные размеры Относительные размеры элементов документа HTML задаются при помощи относительных единиц измерения, которые указывают значение длины относительно других элементов документа. Таблицы стилей, которые используют такой тип единиц, намного легче перенастраиваются с одного типа устройств на другой. К относительным единицам измерения относятся: em - размер, относительно размера буквы "m" ex - размер, относительно вертикального размера букв, соответствующего шрифта px - размер, использующий пиксели, относительно устройства вывода % - размер, использующий процентные значения, относительно основного размера Пример: H1 { margin-left: 1.5em } H3 { margin-left: 2ex } span { font-size: 16px } P { font-size: 150%px } Дочерние элементы не наследуют относительные значения, указанные для их родительских элементов.

Единицы измерения Абсолютные размеры Абсолютные единицы измерения полезны только в том случае, когда известны физические параметры устройства вывода. К ним относятся: in - размер, в дюймах, 1 дюйм равен 2.54 сантиметрам. cm - размер, в сантиметрах mm - размер, в миллиметрах pt - размер, в точках, 1 точка равна 1/72 дюйма. pc - размер, в пиках, 1 пика равна 12 точкам. Пример: H1 { margin: 1.5in } H2 { line-height: 5cm } H3 { word-spacing: 3mm } H4 { font-size: 16pt } H4 { font-size: 2pc }

Что такое CSS?

Базовая структура элементов стиля

Пример: В СПб ГУТ вы получите самое полное, лучшее, качественное образование в России с минимальным начальным багажом знаний!

Привязывание страницы стилей к документу

Некоторые атрибуты и варианты значений

Атрибуты цвета

Глобальное определение стиля в документе

Взаимодействие стилей

Использование классов

Псевдо-классы

Использование тегов div и span

Приписывание стилей конкретному элементу

Каскадирование стилей

Дополнительные возможности

Дополнительные возможности - пример

Размещение фрагментов с помощью CSS

Пример размещения блоков

Характеристики границы (border)

Поля и заполнение

Размещение блоков на странице

Дополнительно о размерах блоков

Позиционирование блоков

Позиционирование блоков (продолжение)

Позиционирование блоков (продолжение)

Порядок видимости блоков