
- •Темы лекции 3
- •Каскадные листы стилей. Основные понятия
- •Синтаксис css
- •Преимущества css верстки
- •Включение в html
- •Селекторы css Базовые селекторы
- •Селекторы классов
- •Селекторы идентификаторов
- •Селекторы атрибутов
- •Селекторы потомков
- •Селекторы детей
- •Селекторы соседей
- •Свойства css
- •Font - универсальный параметр, который позволяет установить одновременно несколько атрибутов стиля шрифта.
- •Height - устанавливает высоту блочных или заменяемых элементов.
- •Max-height - устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height
- •Max-width - устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width
- •Min-height - задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height
- •Width - устанавливает ширину блочных или заменяемых элементов
- •Margin - устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
- •Псевдоэлементы
- •Элемент:before { content: "текст" }
- •Псевдоклассы active - определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
- •Контент
- •Css хаки
- •Условные комментарии
Height - устанавливает высоту блочных или заменяемых элементов.
Max-height - устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height
Max-width - устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width
Min-height - задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных параметров height, max-height и min-height
min-width- устанавливает минимальную ширину элемента. Если окно браузера достигает заданной минимальной ширины элемента, то его ширина остается неизменной и появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных параметров width, max-width и min-width
overflow- управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
overflow: auto | hidden | scroll | visible
visibility- предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойствомdisplay.
visibility: visible | hidden | collapse
Width - устанавливает ширину блочных или заменяемых элементов
position- устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
position:absolute|fixed|relative|static
top, right, bottom, left- устанавливает положение верхнего, правого, нижнего, левого края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметраposition, он обычно принимает значениеrelative(относительное положение) илиabsolute(абсолютное положение).
При относительном позиционировании элемента, отсчет ведется от края исходного положения элемента, а при абсолютном — относительно края окна документа.
z-index- любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет атрибутz-index.
z-index: число | auto
Margin - устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
padding - устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
border-collapse - устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
border-collapse: collapse | separate
border-spacing - задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.
caption-side- определяет положение заголовка таблицы, который задается с помощью тега<caption>, относительно самой таблицы. Параметрcaption-sideвыводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через атрибутtext-align.
caption-side: top | bottom
table-layout- определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
table-layout: auto | fixed
cursor - устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
cursor: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait || url('путь к курсору')
Важность
!important- играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента совпадает, то!importantпозволяет повысить приоритет стилевого параметра.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
!important добавлен в авторский стиль — будет применяться стиль автора.
!important добавлен в пользовательский стиль — будет применяться стиль пользователя.
!important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
!important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.