43.Единицы измерения css, порядок применения стилей, свободное позиционирование. Применение стилей для различных устройств.
При использовании таблиц стилей у автора имеется возможность позаботиться о том, чтобы страницы сайта одинаково хорошо обрабатывались самыми различными устройствами. Это достигается созданием таблиц, которые используются, если просмотр осуществляется с помощью заданного устройства. Особенность заключается в том, что в указании нужного значения атрибута media элемента link или style.
Атрибут может принимать в качестве значения список одного или более следующих строковых идентификаторов:
All – для всех устройств
Aural – для речевых синтезаторов
Braille – для устройств, используемых для людей с ослабленным зрением
Handled – для устройств с небольшим экраном
Print – для принтеров
Projection – для отображения страниц с помощью проектора
Screen – стандартный экран
Tty – телетайпы, терминалы и др.
Tv – экран телевизора
Единицы изме6рения Css
Единица |
Описание |
Пиксель (px) |
Обозначение точки устройства отображения, является абсолютной единицей |
Миллиметр (mm) |
Абсолютная единица |
Пика (pc) |
Типографическая единица измерения. Абсолютная единица |
Сантиметр(cm) |
Абсолютная единица |
Дюйм (in) |
Абсолютная единица |
Ширина буквы m (em) |
Относительная единица. Зависит от конкретного шрифта |
Высота буквы x (ex) |
Относительная единица. Зависит от конкретного шрифта |
Процент (%) |
Относительная единица. Доля от высоты и ширины доступного пространства |
Сокрытие стилей
Рассмотрим прием, который позволяет документам со встроенными таблицами стилей корректно отображаться браузерами не поддерживающими таблицы стилей.
Чтобы браузер точно не показал таблицу стилей, как текст документа, содержимое CSS заключается в комментарий HTML.
44.Применение стилей к фрагментам документа. Элементы Div и Span.Сокрытие таблиц стилей.
Существует возможность применять каскадные таблицы стилей. Каскадирование проявляется при наличии при наличии в одной или нескольких используемых документом таблицы стилей заданий разных значений одного и того же свойства определенного элемента или стилевого класса
Стили, заданные для HTML-элементов, стилевые классы и встроенные стили каскадируются следующим образом:
Стили, заданные для HTML-элементов
стилевые классы
встроенные стили.
сначала применяются стили браузера по умолчанию;
стили браузера по умолчанию переопределяются прилинкованными стилями (элемент LINK заголовка документа);
прилинкованные стили переопределяются описаниями стилей в элементе STYLE;
стили элемента STYLE переопределяются атрибутом STYLE в любом из элементов.
Группирование
Начало формы
Конец формы
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.
Свободное позиционирование
При использовании CSS появляется возможность задавать произвольное положение практически любого элемента страницы. Для этого при задании стиля элемента указываются свойства: display, visibility, Left, top, position, height, width, z-index. Значения этих свойств можно посмотреть в таблице.
Пример: <img src=” right.gif” style=” position: absolute; left: 30; top: 30” border=”1”>
Блочные элементы
Блоком в каскадных листах стилей принято считать фрагмент страницы или ее полный объем, помещенный в контейнеры <P> и <DIV>, а также <BODY> (если страница в целом). Форматированием блока является изменение его параметров, таких как: ширина и высота блока, внешние и внутренние отступы от его границ, присвоение цвета и внешнего вида как отдельных линий (границ), так и общего фона.
Элемент <div> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.