HTML
.pdf
Наложение и порядок слоёв
<style>
#layer1, #layer2 { position: relative; width: 100px; height: 100px;
}
#layer1{
background: #808080; top: 155px;
left: 55px; z-index: 2;
}
#layer2 {
background: #d6d6d6; z-index: 1;
}
</style>
<body>
<div id="layer1">Слой 1</div> <div id="layer2">Слой 2</div> </body>
Универсальный селектор
Иногда требуется установить одновременно один стиль для всех элементов вебстраницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.
*{ Описание правил стиля }
Внекоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.
Универсальный селектор обычно включают в стиль, в комбинации с другими селекторами. Так, если требуется изменить стиль всех элементов в форме, то следует использовать контекстный селектор FORM *
<style type="text/css">
FORM P * { border: 1px solid #333; background: #ffe;
}
</style>
<form action="handler.php"> <p><input type="text" /></p> <p><input type="submit" /></p> </form>
CSS. Каскадирование
Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены определенные приоритеты.
Ниже приведены приоритеты браузеров, которыми они руководствуются при обработке стилевых правил. Чем выше в списке находится пункт, тем ниже его приоритет, и наоборот.
1.Стиль браузера.
2.Стиль пользователя.
3.Стиль автора.
4.Стиль автора с добавлением !important.
5.Стиль пользователя с добавлением !important.
Самым низким приоритетом обладает стиль браузера — оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.
!important
Ключевое слово !important играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не
совпадает, то !important позволяет повысить приоритет стиля или его важность, иными словами.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
!important добавлен в авторский стиль — будет применяться стиль автора.
!important добавлен в пользовательский стиль — будет применяться стиль пользователя. !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
!important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.
Синтаксис
Свойство: значение !important;
Специфичность
Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Суммируя указанные значения, получим значение специфичности для данного селектора.
*{} /* a=0 b=0 c=0 -> специфичность = 0 */ li {} /* a=0 b=0 c=1 -> специфичность = 1 */
li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2*/ ul li {} /* a=0 b=0 c=2 -> специфичность = 2*/
ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3*/ ul li.red{} /* a=0 b=1 c=2 -> специфичность = 12 */
li.red.level{} /* a=0 b=2 c=1 -> специфичность = 21 */ #t34{} /* a=1 b=0 c=0 -> специфичность = 100 */
#content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */
Встроенный стиль, добавляемый к тегу через атрибут style, имеет специфичность 1000, поэтому всегда перекрывает связанные и глобальные стили. Однако добавление ! important перекрывает в том числе и встроенные стили. Если два селектора имеют одинаковую специфичность, то применяться будет тот стиль, что определен в коде ниже.
Специфичность
<head>
<style type="text/css"> #menu ul li { color: green;}
.two { color: red;} </style>
</head>
<body>
<div id="menu"> <ul> <li>Первый</li>
<li class="two">Второй</li> <li>Третий</li>
</ul>
</div>
</body>
Типовые макеты
Макет это способ организации материалов на веб-странице. Самих макетов существует огромное количество, но их, тем не менее, можно систематизировать по ряду признаков, например, по ширине, по количеству колонок, по расположению элементов, по устройствам на которые они ориентированы и др. Наиболее популярным является деление макетов по ширине и количеству колонок.
Макеты по ширине
Фиксированные - макет обычно располагается по центру окна браузера, а его ширина ограничивается заданными размерами в пикселах;
Резиновые - ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера. При изменении размеров окна или другом разрешении монитора макет подстраивается под них;
Эластичные - размер элементов задаётся не в пикселах и процентах, а в em, привязанному к размеру шрифта. Значение em можно использовать не для всех элементов, оставляя ширину некоторых фиксированной.;
Адаптивные - подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста;
Комбинированные - использование разной ширины для отдельных частей страницы.
Типовые макеты
Макеты по колонкам
Колонки в веб-дизайн пришли из полиграфии, где они используются в качестве способа разбивки широкого текста на более узкие фрагменты, а также для разделения различной информации. На сайтах текст всегда идёт одной колонкой, потому что универсальных способов для создания многоколоночного текста пока не существует.
Колонки преимущественно применяются для смыслового деления материала. Например, одна колонка содержит контент, другая навигацию, а третья рекламный баннер.
●В одну колонку
●В две колонки
●В три колонки
●...
Табличная верстка
Таблицы выступают в качестве многоколонной модульной сетки, каждая ячейка представляет собой отдельную колонку. Это позволяет легко создавать двух- и трехколонный макет документа. При изменении размера окна браузера, колонки сохраняют свой исходный вид, а не переносятся как слои друг под друга. К тому же высота разных колонок при использовании таблиц остается одинаковой, независимо от объема их содержимого.
Таблицы удачно подходят для «резинового» макета, ширина которого привязана к ширине окна браузера. Благодаря тому, что размер таблицы можно задавать в процентах, она занимает все отведенное ей свободное пространство.
Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение. Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.
В ячейки таблицы разрешается добавлять фоновый рисунок, в зависимости от размеров ячейки он может повторяться по горизонтали, вертикали или сразу в двух направлениях. За счет этого приема на странице создаются разные декоративные элементы.
Содержимое ячеек можно одновременно выравнивать по горизонтали и по вертикали, за счет чего расширяются возможности по размещению элементов относительно друг друга и на странице в целом.
Макет из двух колонок.
Табличная верстка
<style type="text/css"> #maket { width: 100%; }
TD { vertical-align: top; padding: 5px; } TD#leftcol {
width: 100px; height: 400px; background: #ccc;
border-right: 1px dashed #000;
}
TD#rightcol { background: #fc3;
}
</style>
<body>
<table cellspacing="0" id="maket"> <tr>
<td id="leftcol">Левая колонка</td> <td id="rightcol">Правая колонка</td> </tr>
</table>
</body>