Место, отводимое под ВЕСЬ элемент рассчитывается следующим образом:
15px + 1px + 10px + 100px + 10px + 1px + 15px
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
Фактическая ширина элемента:
1px + 10px + 100px + 10px + 1px (чтобы визуально получить 100рх по ширине, в стилях следует указать ширину с вычетом border-ов и padding-ов: width: 78px)
border-left + padding-left + width + padding-right + border-right
.element {
width: 100px;
padding: 20px 10px;
margin: 5px 15px;
border: 1px solid #000;}
Синтаксис:
значение | проценты | auto | inherit
Не рекомендуется напрямую задавать элементам высоту, поскольку содержимое, как правило, динамическое. Целесообразно задавать высоту только тем элементам, которые содержат статический контент
Дополнительные свойства для работы с шириной и высотой:
min-width минимальная ширина
max-width максимальная ширина
min-height минимальная высота
max-height максимальная высота
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
Как запомнить порядок сторон: TRouBLe
p { margin: top right bottom left; }
p { padding: top right bottom left; }
div {
border-width: 4px;
border-color: #fff
border-style: solid
}
Краткая запись:
div { border: 4px solid #fff;}
Для одной стороны -
border-top, border-bottom, border-left, border-right
Варианты border-style:
При значении border-box ширина начинает включать
поля и границы, но не отступы. Таким образом,
подключая box-sizing со значением border-box к
своему стилю, мы можем задавать ширину в
процентах и спокойно указывать border и padding, не
боясь, что изменится ширина блока
определяет, как элемент должен быть показан в документе
Важно! Display не переопределяет блочность/строчность элемента, а всего лишь управляет его свойствами при отображении
Значения:
none - элемент не отображается
block - элемент показывается как блочный
inline - элемент показывается как строчный
inline-block - внутренняя часть форматируется как блочный элемент, а сам элемент - как встроенный
"Табличные" значения (основные):
table
table-row
table-cell
table-column
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним
{ visibility: hidden; }
{ visibility: visible; }
{ visibility: collapse; }
Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
браузеры поддерживают и свойства overflow-x, overflow-y, которые определяют поведение при переполнении по каждой из осей: x и y.
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
Синтаксис:
float:
left
right
none
<div id="container">
<img src="image.gif" />
<img src="image.gif" />
<img src="image.gif" />
</div>
#container {
width: 260px;
margin: 0 auto;
padding: 10px 0 10px 10px;
background: #aaa;
border: 1px solid #999;
}
img {
float: left;
margin: 0 5px 0 0;
}
Проблема, возникающая при float
Необходимо очистить поток
Свойство clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
Синтаксис:
clear:
none
left
right
both
дополнительный элемент, помещенный в конце блока родителя со свойством clea
<div class="parent">
<div class="floatBlock">Этот блок с float: left;</div>
текст, который задаст высоту родителю
<div class="clear"></div>
</div>
<div class="nextStaticBlock">Это следующий блок в общем потоке</div>
.clear {
clear:both
}
.parent {
overflow: hidden;
zoom: 1; /* for IE */
}
добавить правило overflow: hidden родителю, который содержит плавающие элементы:
<div class="parent">
<div class="floatBlock">Этот блок с float: left;</div>
текст, который задаст высоту родителю
</div>
<div class="nextStaticBlock">Это следующий блок в общем потоке</div>
.parent:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.parent {
zoom: 1; /* set hasLayout */
display: block; /* resets display for IE/Win */
}
Для IE:
используя псевдоэлемент :after
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
static | Элементы отображаются как обычно. Использование атрибутов left, top, right и bottom не приводит к каким-либо результатам. значение по умолчанию |
fixed | Привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы |
relative | Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Также устанавливает новую точку привязки для абсолютно позиционированных элементов |
absolute | Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. |
Если у родительского элемента
position static
Если у родительского элемента
position relative/absolute/fixed
Элемент позиционируется относительно <body>
Элемент позиционируется относительно родителя
Единицы изменения для координат: пиксели, проценты, em и т.д. В том чисте отрицательные значения
позволяет менять способ перекрытия элементов друг другом. Чем значение z-index больше, тем ближе к читателю находится элемент
Работает только если задано position absolute, relative или fixed
Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index
.border-radius {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
border-radius - это сокращенная форма описания
.border-image {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
-webkit-border-image: url(border.png) 30 round;
-o-border-image: url(border.png) 30 round;
}
оригинал картинки, используемой как бордер
CSS3 вводит:
RGBA цвета
Любой RGBA цвет представлен как: rgba(red, green, blue, alpha).
Opacity
Прозрачность варируется от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50)
CSS3 имеет два вида градиентов:
Линейный градиент (идет вниз/вверх/влево/вправ/diagonally)
Радиальный Градиент(идет от центра)
Линейный градиент
background: linear-gradient(direction, color-stop1, color-stop2, ...);
.linear-gradient {
background: red; /* For browsers that do not support gradients */
background: linear-gradient(to right, red , yellow); /* Standard syntax */
}
Радиальный градиент определяется его центром
background: radial-gradient(shape size at position, start-color, ..., last-color);
.radial-gradient {
background: red; /* For browsers that do not support gradients */
background: radial-gradient(red, yellow, green); /* Standard syntax */
}
С помощью CSS3 вы можете добавить тень на текст и другие элементы
Text-shadow
Box-shadow
CSS3 поддерживает 2D и 3D трансформации.
CSS3 2D Support
transform: method(properties)
CSS3 2D transformations
The translate() Method
The rotate() Method
The scale() Method
translate(x, y);
rotate(angle);
transform: scale(width, height);
CSS3 2D transformations
The skew() Method
Метод matrix() комбинирует в себе все 2D трансформации.
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):
skew(xAngle, yAngle);
CSS3 3D transformations
transform: method(property);
CSS3 3D transformations
The rotateX() Method
The rotateY() Method
The rotateZ() Method
rotateX(Angle);
rotateY(Angle);
rotateZ(Angle);
CSS3 transitions позволяют применять свойства постепенно и поэтапно, а также с задержкой.
Для создания transition эффекта, нужно объявить 2 вещи:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
transition-timing-function
Задержка эффекта
transition-delay: time;
Transition + Transformation
transition: width 2s, height 2s, transform 2s;
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
div {
transition: width 2s linear 1s;
}
CSS3 анимации позволяют анимировать большинство HTML элементов без использования JS
@keyframes правило
@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Если отсутствует свойство animation-duration property - анимация не начнется
@keyframes example {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: yellow;
}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes правило
animation-delay
Animation-iteration-count
значени "infinite" = анимация будет продолжаться бесконечно
Animation-direction
Animation-timing-function
Animation-timing-function
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Сокращенная запись
div {
animation: example 5s linear 2s infinite alternate;
}
MUST READ
Семантика — совокупность смысловых отношений.
<dl>
<dt>Семантика</dt>
<dd>совокупность смысловых отношений.</dd>
</dl>
семантический HTML код — это верстка с правильным использованием HTML тегов, использованием их по назначению, так как их задумывали разработчики языка HTML и веб стандартов
Id используются на странице 1 раз | Class можно задавать много раз |
Id у элемента только один | у одного элемента может быть несколько классовб возможны комбинации |
у id бОльший вес для CSS |
Class для CSS
ID для JavaScript
создание смысловых связей между семантическими единицами в документе
Пример: микроформаты
микроформат - способ семантической разметки сведений о разнообразных сущностях (событиях, организациях, людях, товарах и так далее) на веб-страницах с использованием стандартных элементов языка HTML (или XHTML). Пользователь-человек может воспринимать страницу с микроформатом как обычную веб-страницу (через браузер), тогда как программы-обработчики способны извлечь из такой страницы структурированную информацию, следуя определённым соглашениям
<div>
<div>Василий Пупкин</div>
<div>Рога и Копыта</div>
<div>495-564-1234</div>
<a href="http://example.com/">
Мой сайт</a>
</div>
<div class="vcard">
<div class="fn">Василий Пупкин</div>
<div class="org">Рога и Копыта</div>
<div class="tel">
<span class="type">Work</span>
<span class="value">495-564-1234</span>
</div>
<a class="url" href="http://example.com/">Мой сайт</a>
</div>
Поисковые системы постоянно совершенствуют методы поиска, чтобы в результатах была та информация, которую действительно ищет пользователь. Семантический HTML способствует этому, т.к. поддается гораздо лучшему анализу — код чище, код логичен (четко видно где заголовки, где навигация, где содержимое).