position
floats
semantics
css3
Box model
Расчет ширины
Место, отводимое под ВЕСЬ элемент рассчитывается следующим образом:
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;}Width & Height
Синтаксис:
значение | проценты | auto | inherit
Не рекомендуется напрямую задавать элементам высоту, поскольку содержимое, как правило, динамическое. Целесообразно задавать высоту только тем элементам, которые содержат статический контент
Дополнительные свойства для работы с шириной и высотой:
min-width минимальная ширина
max-width максимальная ширина
min-height минимальная высота
max-height максимальная высота
Margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
Padding
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
Как запомнить порядок сторон: TRouBLe
p { margin: top right bottom left; }
p { padding: top right bottom left; }
Border
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:
Box- sizing
При значении border-box ширина начинает включать
поля и границы, но не отступы. Таким образом,
подключая box-sizing со значением border-box к
своему стилю, мы можем задавать ширину в
процентах и спокойно указывать border и padding, не
боясь, что изменится ширина блока
Display
определяет, как элемент должен быть показан в документе
Важно! Display не переопределяет блочность/строчность элемента, а всего лишь управляет его свойствами при отображении
Значения:
none - элемент не отображается
block - элемент показывается как блочный
inline - элемент показывается как строчный
inline-block - внутренняя часть форматируется как блочный элемент, а сам элемент - как встроенный
"Табличные" значения (основные):
table
table-row
table-cell
table-column
Visibility
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним
{ visibility: hidden; }
{ visibility: visible; }
{ visibility: collapse; }
Overflow
Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
браузеры поддерживают и свойства overflow-x, overflow-y, которые определяют поведение при переполнении по каждой из осей: x и y.
Float
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
Синтаксис:
float:
left
right
none
What You should know about Float
- У плавающего объекта обязательно должна быть задана ширина
- Если плавающих элементов будет больше, чем ширина окна, следующий из них, который не вмещается, будет перемещен на следующую строку
- Плавающий элемент ведет себя как блочный
- Плавающий элемент выпадает из нормального потока
- "float first" - располагайте плавающий элемент в коде первым
Clear
<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
Свойство 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
Position
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
| static | Элементы отображаются как обычно. Использование атрибутов left, top, right и bottom не приводит к каким-либо результатам. значение по умолчанию |
| fixed | Привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы |
| relative | Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Также устанавливает новую точку привязки для абсолютно позиционированных элементов |
| absolute | Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. |
Position:absolute
Если у родительского элемента
position static
Если у родительского элемента
position relative/absolute/fixed
Элемент позиционируется относительно <body>
Элемент позиционируется относительно родителя
Единицы изменения для координат: пиксели, проценты, em и т.д. В том чисте отрицательные значения
Что нужно знать
- нельзя применять position (кроме static) к элементам с float (не сработает)
- при сдвиге элемента с помощью position:relative остается "дыра" на месте, где элемент должен был находиться в потоке (в отличие от отрицательного margin, который не оставляет пустого места)
- если не задать вертикальную или горизонтальную позицию, элемент останется в месте ДО позиционирования (по соответствующей оси). Absolute без координат не даст эффекта, рекомендуется задать хотя бы по одной координате для каждой оси
- очень желательно указывать ширину элемента для position:absolute
Z-INDEX
позволяет менять способ перекрытия элементов друг другом. Чем значение z-index больше, тем ближе к читателю находится элемент
Работает только если задано position absolute, relative или fixed
Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index
CSS3 == магия?
border-radius
.border-radius {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}border-radius
border-radius - это сокращенная форма описания
border-image
.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;
}- Картинка, используемая как бордер
- Где обрезать картинку
- Определить, повторять центральную секцию или нет
border-image
оригинал картинки, используемой как бордер
CSS3 цвета
CSS3 вводит:
- RGBA цвета
- HSL цвета
- HSLA цвета
- opacity
CSS3 цвета
RGBA цвета
Любой RGBA цвет представлен как: rgba(red, green, blue, alpha).
CSS3 цвета
Opacity
Прозрачность варируется от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50)
Gradient Background
CSS3 имеет два вида градиентов:
-
Линейный градиент (идет вниз/вверх/влево/вправ/diagonally)
-
Радиальный Градиент(идет от центра)
Gradient Background
Линейный градиент
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 */
}Gradient Background
Gradient Background
Радиальный градиент определяется его центром
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 */
}Gradient Background
CSS3 Тени
С помощью CSS3 вы можете добавить тень на текст и другие элементы
- text-shadow
- box-shadow
CSS3 Тени
Text-shadow
CSS3 Тени
Box-shadow
CSS3 Transform
CSS3 поддерживает 2D и 3D трансформации.
CSS3 2D Support
transform: method(properties)
CSS3 Transform
CSS3 2D transformations
The translate() Method
The rotate() Method
The scale() Method
translate(x, y);
rotate(angle);
transform: scale(width, height);
CSS3 Transform
CSS3 2D transformations
The skew() Method
Метод matrix() комбинирует в себе все 2D трансформации.
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):
skew(xAngle, yAngle);
CSS3 Transform
CSS3 3D transformations
transform: method(property);
CSS3 Transform
CSS3 3D transformations
The rotateX() Method
The rotateY() Method
The rotateZ() Method
rotateX(Angle);
rotateY(Angle);
rotateZ(Angle);
CSS3 Transitions
CSS3 transitions позволяют применять свойства постепенно и поэтапно, а также с задержкой.
CSS3 Transitions
Для создания transition эффекта, нужно объявить 2 вещи:
- CSS свойство, на которое вы хотите применить эффект
- длительность эффекта
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}CSS3 Transitions
transition-timing-function
- ease - начинается медленно, затем ускоряется и к концу движения опять замедляется(default)
- linear - одинаковая скорость от начала и до конца
- ease-in - медленно начинается, к концу ускоряется.
- ease-out - начинается быстро, к концу замедляется
- ease-in-out - начинается и заканчивается медленно
- cubic-bezier(n,n,n,n) - задаёт функцию движения в виде кривой Безье
CSS3 Transitions
Задержка эффекта
transition-delay: time;
CSS3 Transitions
Transition + Transformation
transition: width 2s, height 2s, transform 2s;
CSS3 Transitions
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}div {
transition: width 2s linear 1s;
}CSS3 Animations
CSS3 анимации позволяют анимировать большинство HTML элементов без использования JS
CSS3 Animations
@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 - анимация не начнется
CSS3 Animations
@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 правило
CSS3 Animations
animation-delay
CSS3 Animations
Animation-iteration-count
значени "infinite" = анимация будет продолжаться бесконечно
CSS3 Animations
Animation-direction
- reverse
- alternate
CSS3 Animations
Animation-timing-function
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(n,n,n,n)
CSS3 Animations
Animation-timing-function
CSS3 Animations
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;
}Semantics
MUST READ
Семантика — совокупность смысловых отношений.
<dl>
<dt>Семантика</dt>
<dd>совокупность смысловых отношений.</dd>
</dl>семантический HTML код — это верстка с правильным использованием HTML тегов, использованием их по назначению, так как их задумывали разработчики языка HTML и веб стандартов
Уровни семантики
- Применение HTML-элементов
- Именование элементов
- Комбинация именованных элементов*
Id vs. Class
| 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 для веб разработчиков
- чистый код — семантический HTML код чище и меньше по объему, чем не семантический. А чем меньше кода, тем проще найти нужный участок или локализовать ошибку, с ним проще работать.
- понятный (читаемый) код — осмысленные имена классов и идентификаторов дают представление о структуре кода тому кто его читает. Это имеет важное значение, когда над сайтом работает команда разработчиков. Это опять же сокращение времени разработки.
Семантический код для пользователей
- семантический код напрямую влияет на объем HTML кода. Меньше кода —> легче страницы —> быстрей грузятся, меньше требуется оперативной памяти на стороне пользователя, меньше трафика, меньший объем баз данных. Сайт становиться быстрей и менее затратным.
- голосовые браузеры для которых важны теги и их атрибуты, чтобы произнести правильно и с нужной интонацией содержимое, или наоборот не произнести лишнего.
- мобильные устройства которые не на полную мощь поддерживают CSS или скорость интернет-соединения ограничена и поэтому ориентируются в основном на HTML код, отображая его на экране согласно используемым тегам.
- устройства печати даже без дополнительного CSS напечатают информацию качественней (ближе к дизайну), а создание идеальной версии для печати превратится в несколько легких манипуляций с CSS.
- к тому же существуют устройства и плагины, которые позволяют быстро перемещаться по документу .
Семантический HTML для машин
Поисковые системы постоянно совершенствуют методы поиска, чтобы в результатах была та информация, которую действительно ищет пользователь. Семантический HTML способствует этому, т.к. поддается гораздо лучшему анализу — код чище, код логичен (четко видно где заголовки, где навигация, где содержимое).
Position.Floats.Semantics.CSS3
By Victoria Budyonnaya
Position.Floats.Semantics.CSS3
Box model. Display. Float & Clear. Position
