- •Темы лекции 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 хаки
- •Условные комментарии
Css хаки
Для создания универсальной верстки, одинаково отображающейся во всех браузерах, порой приходится играть в грязные игры с программным кодом. Одной из этих игр является использование так называемых css хаков (или фильтров). Css хак - это стилевое правило, которое работает в одном браузере и не работает в другом, чем позволяет создавать разное отображение вашей информации в разных браузерах, или наоборот сглаживать погрешности отображения в разных браузерах.
|
Выражение |
Браузер |
|
селектор {_свойство:значение} |
IE5.5, IE6 |
|
селектор {-свойство:значение} |
IE5.5, IE6 |
|
селектор {свойство:значение\9} |
IE6, IE7, IE8 |
|
* html селектор {свойство:значение} |
IE5.5, IE6 |
|
селектор {\\свойство:значение} |
IE5.5 |
|
селектор {*свойство:значение} |
IE5.5, IE6, IE7 |
|
*+html селектор {свойство:значение} |
IE7 |
|
*:first-child+html селектор {свойство:значение} |
IE7 |
|
селектор {свойство:значение !important;свойство:значение;} |
IE5.5, IE6 |
|
селектор {свойство:значение!important!;свойство:значение;} |
IE7 |
|
@media all and (min-width:0){селектор {свойство:значение}} |
Safari, FireFox, Chrome |
|
html:root селектор {свойство:значение} |
Safari, FireFox, Chrome, Opera |
|
@media screen and (-webkit-min-device-pixel-ratio:0){селектор {свойство:значение}} |
Safari, Chrome |
|
@-moz-document url-prefix(){селектор {свойство:значение}} |
FireFox |
|
селектор, x:-moz-any-link{свойство:значение} |
FireFox, IE7 |
|
:root *> селектор {свойство:значение} |
Safari, FireFox, Chrome, Opera |
|
*|html[xmlns*=""] селектор {свойство:значение} |
Opera |
|
селектор:not(:root:root) {свойство:значение} |
Safari |
|
html>/**/body селектор {свойство:значение} |
Safari, FireFox, Chrome, Opera, IE8 |
|
@media not all and (-webkit-min-device-pixel-ratio){селектор {свойство:значение}} |
Opera |
|
html[xmlns*=""] селектор {свойство:значение} |
Opera, IE7, IE8 |
|
html[xmlns*=""] селектор {свойство:значение\9;]свойство:default} |
IE8 |
|
@media screen and (-webkit-min-device-pixel-ratio:0){селектор {свойство:значение для Хрома}селектор:not(:root:root) {свойство:компенсирующее значение для Сафари}} |
Chrome |
|
селектор {]свойство:значение} |
IE5.5, IE6, IE7 |
|
* html селектор {свойство:значение;\\значение:default} |
IE6 |
Пример работы хаков
<style type="text/css">
.div {padding:10px;margin:0 0 2px 0;font:10px Tahoma, Verdana;background-color:#eee;color:#777;}
.bd1,.bd2,.bd3,.bd4,.bd5,.bd6,.bd7,.bd0 {display:none;text-align:center;font-weight:bold;}
@media screen and (-webkit-min-device-pixel-ratio:0){.bd0 {display:block}.bd0:not(:root:root){display:none}} /*хромой*/
.bd2:not(:root:root) {display:block} /* сафари */
*|html[xmlns*=""] .bd1 {display:block} /* опера */
@-moz-document url-prefix(){.bd3 {display:block}} /* лиса */
html[xmlns*=""] .bd4 {display:block\9;]display:default} /* IE8 */
*+html .bd5 {display:block} /* IE7 */
* html .bd6 {display:block;\\display:default} /* IE6 */
.bd7 {\\display:block} /* IE5.5 */
</style>
<div class='bd0 div'>Ваш браузер - Google Chrome</div>
<div class='bd1 div'>Ваш браузер - Opera</div>
<div class='bd2 div'>Ваш браузер - Safari</div>
<div class='bd3 div'>Ваш браузер - FireFox</div>
<div class='bd4 div'>Ваш браузер - IE8</div>
<div class='bd5 div'>Ваш браузер - IE7</div>
<div class='bd6 div'>Ваш браузер - IE6</div>
<div class='bd7 div'>Ваш браузер - IE5.5</div>