HTML/CSS

HyperText Markup Language — язык гипертекстовой разметки. задаёт структуру содержимого и его смысл

CSS (Cascading Style Sheets "каскадные таблицы стилей") - это набор правил, описывающих способы отображения и расположения элемента.

 

HTML описывает контент, а таблицы стилей определяют, как документ выглядит.

Подключение CSS

  1. Инлайновый (внутренний стиль для элемента)
    С помощью атрибута style задаются стилевые параметры конкретного элемента
  2. Глобальные стили
    C помощью тега <style> таблица внедряется в любую часть HTML-документа
  3. Через внешний файл (подключается в <head>)
    Таблица стилей хранится в отдельном файле с расширением  .css, который связывается с HTML-документом с помощью тега <link>
  4.  Через правило @import внутри CSS

Семантика

Семантика в HTML является практикой предоставления смысла и структуры содержимого на странице с помощью соответствующего элемента.

семантический HTML код — это верстка с правильным использованием HTML тегов, использованием их по назначению, так как их задумывали разработчики языка HTML и веб стандартов

Именование

1. список слов

2. правила

 скрыть блок содержимого на странице

<!-- Хорошо -->
<div hidden>...</div>
<!-- Со значением -->
<a href="twitter-logo.png" download="Logo">Twitter Logo</a>

download говорит браузеру незамедлительно скачать файл

<a href="legal.html" rel="copyright">Правила использования</a> 
<a href="toc.html" rel="contents">Содержание</a>

 rel определяет отношение между текущим документом и документом, на который ведёт ссылка.

  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag

Некоторые популярные значения атрибута rel включают в себя:

Микроданные — это расширение HTML с вложенными группами пар имя-значение, которые позволяют машинам, в том числе браузерам и поисковым системам, собирать дополнительную семантику и информацию для структурированного содержимого

Определяются с помощью трёх основных атрибутов — itemscope, itemtype и itemprop.

itemscope объявляет область каждого элемента микроданных. Добавьте этот атрибут к родительскому элементу, в котором должна находиться вся информация микроданных

После этого, добавьте атрибут itemtype, чтобы указать, какой словарь микроданных следует использовать.

далее мб установлены свойства. Эти свойства включают атрибут itemprop. Значение этого атрибута определяет, на что указывает свойство, а содержимое внутри самого элемента обычно задаёт значение свойства.

<section itemscope itemtype="http://schema.org/Person">
  <h1 itemprop="name">Шэй Хоу</h1>
</section>

Расширение веб-страниц дополнительной семантикой с помощью пар имя-значение из пользовательских словарей

<section itemscope itemtype="http://schema.org/Event">
  <a itemprop="url" href="#">
    <span itemprop="name">Styles Conference</span>
  </a>
  <time itemprop="startDate" datetime="2014-08-24T09:00">Воскресенье, 24 августа 2014 в 9:00</time>
  <div itemprop="location" itemscope itemtype="http://schema.org/Place">
    <a itemprop="url" href="http://www.thechicagotheatre.com/">Chicago Theatre</a>
    <address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <div itemprop="streetAddress">175 N. State St.</div>
      <span itemprop="addressLocality">Chicago</span>,
      <abbr itemprop="addressRegion" title="Illinois">IL</abbr>
      <span itemprop="postalCode">60601</span>
    </address>
  </div>
</section>

WAI-ARIA является спецификацией, которая помогает сделать веб-страницы и приложения более доступными для людей с ограниченными возможностями. В частности, WAI-ARIA помогает определить роли (что блоки содержимого делают), состояния (как блоки содержимого настроены), а также дополнительные свойства для поддержки вспомогательных технологий.

Роли WAI-ARIA делятся на четыре различные категории: абстрактные, виджеты, структура документа и ориентиры. Роль структуры документа определяет организационную структуру содержимого на странице,ориентиры определяют регионы страницы.

Роли структуры документа

  • article
  • columnheader
  • definition
  • directory
  • document
  • group
  • heading
  • img
  • list
  • listitem
  • math
  • note
  • presentation
  • region
  • row
  • rowheader
  • separator
  • toolbar

Ориентиры

  • application
  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • search

w3

main - main form -form search- search form

В сочетании с ролями WAI-ARIA существуют также состояния и свойства, которые помогают информировать вспомогательные технологии, как настроено содержимое. Подобно ролям, состояния и свойства разбиты на четыре категории, в том числе атрибуты виджета, атрибуты живого региона, атрибуты drag-and-drop и атрибуты отношений.

Атрибуты виджета поддерживают роли виджетов и являются специфическими для пользовательского интерфейса и там, где от пользователя требуются действия. Атрибуты живого региона могут быть применены к любому элементу и используются для обозначения изменений содержимого для вспомогательных технологий, к примеру, на странице предупреждений и уведомлений. Атрибуты drag-and-drop информируют об элементах drag-and-drop и обеспечивают альтернативное поведение для вспомогательных технологий. И, наконец, атрибуты отношений описывают отношения между элементами, когда структура документа не может быть определена.

aria-label позволяет задать дополнительную текстовую метку, которая будет пояснять назначение данного блока

Уровни семантики

  • Применение HTML-элементов
  • Именование элементов
  • Комбинация именованных элементов

Применение HTML-элементов

особенности применения элемента и смысловые связи, которые образует с остальными элементами, расписаны в спецификации, остаётся только научиться использовать эту информацию

 

Подобное использование HTML-элементов по их назначению, получило название POSH (Plain Old Semantic HTML) — проще говоря, «старый добрый семантический HTML»

Именование элементов

  • Имя элемента характеризует его функциональность или содержимое: упорядоченный список(первый уровень семантики) комментариев (второй уровень семантики)
  • Семантически верное именование HTML-элементов при помощи атрибутов id и class, помимо самой семантики, привносит упорядоченность не только в сам документ, а ещё и в процесс разработки
  • при использовании последовательной и логичной политики именования элементов, а также отступов, формирующих дерево документа, практически полностью отпадает необходимость разметки кода HTML-комментариями

Комбинация именованных элементов

создание смысловых связей между семантическими единицами в документе

микроформат - способ семантической разметки сведений о разнообразных сущностях (событиях, организациях, людях, товарах и так далее) на веб-страницах с использованием стандартных элементов языка HTML (или XHTML). Пользователь-человек может воспринимать страницу с микроформатом как обычную веб-страницу (через браузер), тогда как программы-обработчики способны извлечь из такой страницы структурированную информацию, следуя определённым соглашениям

Плюсы использования

  • для разработчиков
  • для пользователей
  • для машин

Семантический HTML для разработчиков

  • чистый код — семантический HTML код чище и меньше по объему, чем не семантический. А чем меньше кода, тем проще найти нужный участок или локализовать ошибку, с ним проще работать.
  • понятный (читаемый) код — осмысленные имена классов и идентификаторов дают представление о структуре кода тому кто его читает. Это имеет важное значение, когда над сайтом работает команда разработчиков. Это опять же сокращение времени разработки.

Семантический код для пользователей

  • семантический код напрямую влияет на объем HTML кода. Меньше кода —> легче страницы —> быстрей грузятся, меньше требуется оперативной памяти на стороне пользователя, меньше трафика, меньший объем баз данных. Сайт становиться быстрей и менее затратным.
  • голосовые браузеры для которых важны теги и их атрибуты, чтобы произнести правильно и с нужной интонацией содержимое, или наоборот не произнести лишнего.
  • мобильные устройства которые не на полную мощь поддерживают CSS и поэтому ориентируются в основном на HTML код, отображая его на экране согласно используемым тегам.
  • устройства печати даже без дополнительного CSS напечатают информацию качественней (ближе к дизайну), а создание идеальной версии для печати превратится в несколько легких манипуляций с CSS.
  • к тому же существуют устройства и плагины, которые позволяют быстро перемещаться по документу .

Семантический HTML для машин

Поисковые системы постоянно совершенствуют методы поиска, чтобы в результатах была та информация, которую действительно ищет пользователь. Семантический HTML способствует этому, т.к. поддается гораздо лучшему анализу — код чище, код логичен (четко видно где заголовки, где навигация, где содержимое).

  1. семантическая верстка рекомендация с выгодами
  2. семантическая верстка часть 1
  3. семантическая верстка часть 2

READ

Блочный

Эти элементы отображаются как прямоугольники, идущие друг за другом сверху вниз.
Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Строчный

Это такие элементы документа, которые являются непосредственной частью строки.
Эти элементы располагаются друг за другом в одной строке, если не помещаются, то переносится на другую строку.

Типы тегов:

Свойства блочных элементов

  •  блоки располагаются по вертикали друг под другом
  •  у блочных тегов можно управлять шириной и высотой: width, height
  •  у блочных тегов можно управлять CSS-свойством margin-top и margin-bottom (внешние отступы)
  •  блочные теги занимают всю ширину, например если задать им фон, то фон займет всю ширину родительского элемента.
  •  так как блочные теги занимают всю ширину родительского элемента, то объектами находящимися внутри блочного тега, можно управлять с помощью горизонтального выравнивания: left, right, center, justyfy
  •  внутри блочных тегов можно размещать другие блочные теги, а также строчные теги (<p> не позволяет вставлять внутрь себя блочные элементы)
  •   на блочные элементы не действуют свойства, предназначенные для строчных элементов, например как vertical-align.

начинаются с новой строки, накладываются друг на друга и занимают всю доступную ширину. Блочные элементы могут быть вложены друг в друга и обёртывать строчные элементы.

Свойства строчных элем-ов

  •  внутрь строчных элементов разрешено вставлять текст или другие строчные элементы.
  •   в строчные элементы запрещено вставлять блочные элементы (в HTML5 можно)
  •  свойство height не применяется
  •  ширина равна содержимому (если есть отступы и бордеры - они добавляются к ширине)
  •   элементы располагаются друг за другом в одной строке, при необходимости строка переносится
  •  на строчные элементы действуют свойства  vertical-align.

Строчные элементы не начинаются с новой строки. Они попадают в обычный поток документа, выстраиваются друг за другом, а их ширина основана на их содержимом. Строчные элементы могут быть вложены друг в друга, однако, они не могут обёртывать блочные элементы.

  •  нет таких тегов, которые будут изначально содержать данное свойство.
  •  - внутрь строчно-блочных элементов допустимо помещать текст, строчные или блочные элементы.
  •  - высота элемента вычисляется браузером автоматически, исходя из содержимого блока.
  •  - ширина равна содержимому плюс значения отступов, полей и границ.
  •  - несколько элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
  •  - можно выравнивать контент по вертикали с помощью свойства vertical-align.
  •  - разрешено задавать ширину и высоту.
  •  - эффект схлопывания отступов не действует.

Строчно-блочные элементы

Теги по назначению

Поток - порядок отображения элементов на странице.

Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже. Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им.

Списки

Атрибуты нумерованных списков:

  • start

  • reversed

  • value

<ol start="30" (reversed)>
  <li>Пройдите по Абрикосовой улице</li>
  <li value="9">Сверните на Виноградную</li>
  <li>Остановитесь на Тенистой улице</li>
</ol>

<dl>
  <dd>Посвящение времени и внимания для получения знаний по преподаваемому предмету, особенно с помощью книг.</dd>
  <dt>проект</dt>
  <dd>Представленный план или чертёж</dd>
  <dd>Существующие цели, планы или намерения</dd>
  <dt>бизнес</dt>
  <dt>работа</dt>
  <dd>Регулярные занятия человека, профессия или ремесло.</dd>
</dl>

list-style: [list-style-type] [list-style-position] [list-style-image];

Стилизация ol

link

ol{
  counter-reset: myCounter;
}

li{
  list-style: none;
}

li:before {
  counter-increment: myCounter;
  content:counter(myCounter);
  color: white;
  background: #2980B9;
  display: inline-block;
  text-align: center;
  margin: 5px 10px;
  line-height: 40px;
  width: 40px;
  height: 40px;
}
  • li::before – создает внутри списка псевдоэлемент, который становится на место первого потомка.
  • counter-reset:myCounter; – обнуляет css-счетчик myCounter внутри каждого <ol>.
  • counter-increment: myCounter; – инкрементирует css-счетчик myCounter для каждого псевдоэлемента::before.
  • content:counter(myCounter); – выводит текущее значение счетчика myCounter внутри псевдоэлемента::before.
<table>
 <caption>Книги по дизайну и фронтенд-разработке</caption>// название таблицы
 <thead>// шапка
  <tr>
    <th scope="col">Название</th>// заголовки для столбоцов, мб row
    <th scope="col">Наличие</th>
    <th scope="col">Кол-во</th>
    <th scope="col">Цена</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Не заставляйте меня думать Стив Круг</td>
    <td>На складе</td>
    <td>1</td>
    <td>$30.02</td>
  </tr>
  <tr>
    <td>UX-дизайн</td>
    <td>На складе</td>
    <td>2</td>
    <td>$52.94 ($26.47 × 2)</td>
  </tr>
  </tbody>
  <tfoot>
   <tr>
     <td colspan="3">Итого</td>// colspan одной ячейки 
    из нескольких столбцов в таблице,rowspan - для строк
     <td>$148.90</td>
   </tr>
  </tfoot>
</table>

border-collapse определяет модель границы в таблице.

       separate все разные границы складываются друг с другом(2+2=4)

       collapse сжимает границы в одну, выбирая ячейку таблицы в качестве основной.

border-spacing задаёт, какое расстояние отображается между этими границами( только для separate)

border-spacing: 5px 10px ( горизонтальное, вертикальное)

Формы <form>

Форма — это набор полей для ввода текста, командные кнопки, флажки и т.п., содержимое которых возвращается серверу по указанию пользователя. Сервер в дальнейшем обрабатывает информацию и, если необходимо, возвращает пользователю ответы.

Форма предназначена для обмена данными между пользователем и сервером. Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма.

Атрибуты и элементы формы

<form

        method – определяет метод отправки данных на сервер ( get: получения требуемой информации и передачи данных в адресной строке, post: посылает на сервер данные в запросе браузера)

        action – адрес обработчика формы(URL куда отправляется)

        name – имя формы (если несколько форм на странице) >

  <legend></legend> - заголовок группы элементов формы

  <fieldset></fieldset> - для группирования элементов формы

  <label for="#id"></label> -  устанавливает связь между текстом и элементом

  <input type="" name=""/> - флажки, переключатели, поле с паролем и т.д.

  <button name"">text</button> - кнопки

  <textarea name="">Text</textarea> - поля ввода

  <select name="day" multiple>

              <option value="friday"></option>

  </select>

</form>

<input type="...">

<input type="radio" name="day" value="Friday" checked> Пятница
<input type="radio" name="day" value="Saturday"> Суббота
<input type="radio" name="day" value="Sunday"> Воскресенье


<input type="checkbox" name="day" value="Friday" checked> Пятница
<input type="checkbox" name="day" value="Saturday"> Суббота
<input type="checkbox" name="day" value="Sunday"> Воскресенье

<input type="submit" name="submit" value="Отправить">

Использование тега <label>

Используется, чтобы изменять значение переключателей и флажков при нажатии курсором мыши на текст.

 Существует два способа связывания объекта и метки:

1. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>.

2. При втором способе элемент формы помещается внутрь контейнера <label>.

<body>
    <input id="идентификатор"><label for="идентификатор">Текст</label>   <!-- 1й способ-->
    <label><input type="..."> Текст </label>                             <!-- 2й способ-->
</body>

Логическое форматирование текста

Теги логической разметки отвечают за значение элемента больше, чем за внешний вид. Некоторые из них не влияют на отображение текста браузером, другие выполняют действия, аналогичные тегам физического форматирования. Разные браузеры толкуют одни и те же теги логических стилей по-разному. Теги являются парными.

<abbr> и <acronym title=“расшифровка аббревиатуры”> - аббревиатура
<cite> - цитата (отображается курсивом) </cite>
<code> - оформление исходных текстов программ (моноширинный шрифт) </code>
<dfn> - новые символы и понятия (отображается курсивом) </dfn>
<strong> - выделение важного фрагмента (полужирный) </strong>
<em> - выделение важного фрагмента (курсив) </em>
<blockquote> текст выводится на экран с увеличенным левым полем </blockquote>
<bdo> - изменение направления текста. Используется с атрибутом dir.
<bdo dir="rtl">текст, направление которого меняется</bdo>
<marquee> - текст представляется в виде бегущей строки. Для определения движения текста слева направо или справа налево используется атрибутdirection=“left, right” </marquee

Физическое форматирование текста

семантически означает стилистическое выделение текста

<b>…</b> - полужирный
<i>…</i> - курсивный
<tt>…</tt> - телетайпный (пишущая машинка)
<big>…</big> - увеличенный размер
<small>…</small> - уменьшенный размер
<u>…</u> - подчеркнутый
<s>…</s> или <strike>…</strike> - зачеркнутый
<sub>…</sub> - нижний индекс
<sup>…</sup> - верхний индекс

Добавление цитат

  • <cite>: применяется для указания на творческую работу, автора или ресурс;
  • <q>: применяется для коротких, встроенных цитат;
  • <blockquote>: применяется для наиболее длинных внешних цитат.
<p>Книга <cite><a href="http://www.amazon.com/Steve-Jobs>Стив Джобс</a></cite> действительно вдохновляет.</p>


<p><a href="http://www.businessweek.com">Стив Джобс</a> однажды сказал: 
<q cite="http://www.businessweek.com">Один хоум-ран гораздо лучше, чем два дабла</q>.</p>


<blockquote cite="http://money.cnn.com">
  <p>«В понимании большинства людей дизайн — это внешний лоск. Это украшение интерьера. 
     Это ткань штор, ткань дивана. Но для меня, всё это далеко от смысла дизайна. 
     Дизайн — это основа души человеческого творчества, что в конечном итоге выражает 
     себя в последующих внешних слоях продукта.»</p>
  <p><cite>Стив Джобс в <a href="http://money.cnn.com">
     журнале Fortune</a></cite></p>
</blockquote>

HTML5

<header> - «шапка» сайта или раздела

<nav> - навигация по сайту

<main> - предназначен для основного содержимого документа

<article> - новости, статьи, записи блога, форума

<section> -  раздел документа, который может включать в себя заголовки, шапку, подвал и текст

<time datetime pubdate> - помечает текст внутри тега как дата и/или время

<address> - адрес

<canvas> - cоздает область, в которой при помощи JavaScript можно рисовать

<source> - вставляет звуковой или видеофайл для тегов <audio> и <video>

<video> - добавляет, воспроизводит и управляет настройками видеоролика на веб-странице

<audio> - добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице

<figure> - идентификация и охватывание незвасимого контента, часто в видео медиа

<figurecaption> - подпись для figure

<aside> - для размещения рубрик, ссылок на архив, меток и другой информации

<footer> - «подвал» сайта или раздела

Header

Элемент <header> применяется для идентификации верхней части страницы, статьи, раздела, или другого сегмента страницы. В общем, <header> может включать в себя заголовок, вводный текст и даже навигацию.

Навигация

Элемент <nav> определяет блок основных навигационных ссылок на странице. Данный элемент должен быть зарезервирован только для главных разделов навигации, таких как глобальная навигация, оглавление, предыдущая/следующая ссылки или других заслуживающих внимания групп навигационных ссылок.

Article

Элемент <article> применяется для идентификации независимого, самостоятельного раздела содержимого, который можно классифицировать как изолированный или повторно используемый. Мы часто используем элемент <article> для разметки постов блога, газетных статей, контента добавляемого пользователями и тому подобное.

При принятии решения, следует ли использовать элемент <article>, мы должны определить, может ли содержимое элемента быть повторено в других местах без какой-либо путаницы. Если содержимое элемента<article> было удалено из контекста страницы и помещено, к примеру, в электронную почту или печатную работу, то в содержимом по прежнему должен остаться смысл.

Section

Элемент <section> применяется для идентификации тематической группы содержимого, которая, как правило, но не всегда, включает в себя заголовок. Группа контента внутри <section> может носить общий характер, но полезно определить всё содержимое как связанное между собой.

Элемент <section> обычно используется для разделения страницы и обеспечения на ней иерархии.

Aside

Элемент <aside> содержит контент, такой как боковые панели, вставки или краткие пояснения, который косвенно связан к окружающим его содержимым. К примеру, при использовании внутри элемента <article>, <aside> может определить содержимое, связанное с автором статьи.

Мы можем инстинктивно думать об элементе <aside> в качестве элемента, который отображается слева или справа на странице. Однако мы должны помнить, что все структурные элементы, включая <aside>, являются блочными и как таковые выводятся с новой строки и занимают всю доступную ширину страницы или элемента, в который они вложены, также известного как их родительский элемент.

Footer

Элемент <footer> определяет завершение или конец страницы, статьи, раздела или другого сегмента страницы. Обычно элемент <footer> находится в нижней части его родителя. Содержимое внутри <footer> должно быть связанной информацией и не должно расходиться с документом или разделом, внутри которого находится.

Figure

Блочный элемент <figure> применяется для идентификации и охватывания независимого содержимого, часто в виде медиа-контента. Он может окружать изображения, аудиоклипы, видео, блоки кода, диаграммы, рисунки или другой самостоятельный медиа-контент. Внутри <figure> одновременно может содержаться более одного независимого содержимого, вроде нескольких изображений и видео

 

Чтобы добавить подпись или пояснение к элементу <figure> применяется элемент <figcaption>

<figure>
  <img src="dog.jpg">
  <figcaption>Красивая чёрно-бело-коричневая дворняга с надетым на неё платком.</figcaption>
</figure>

CSS

Селекторы

Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили

* - все элементы
 .class-name - элементы с одинаковым классом

tag-name - элементы с одинаковым тэгом

#id

 

element, element

element element селекторы потомков

element > element дочерний селектор

element + element соседний селектор

element1 ~ element все элементы после эл1

element [attribute]

element [attribute='value']

element [attribute^='value']  begin

element [attribute$='value'] end

element [data-name='value']

Псевдоэлементы

:before,:after !Свойство content:" " обязательно!, в js обратиться низзя

:first-letter применяется к первой букве элемента селектора

:first-line применяется к первой линии элемента селектора

:first-child применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа.

:last-child применяется к последнему дочернему элементу

:nth-child(n) любой дочерний элемент. Отсчет ведется с 1.

:only-child позволяет вам выбрать элементы, которые являются единственными дочерними

:not(selector) помогает исключить тот элемент, который указывается в скобках

ссылка

Специфичность селекторов

Определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.

Правила вычисления специфичности селекторов:
1. Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.
2. Второе место занимает присутствие #id в селекторе.
3. Далее идут все атрибуты (в том числе и атрибут class) в селекторе (.class).
4. Самый низкий приоритет у селекторов с именами элементов (просто название тега)

Все 4 правила сводятся в одну систему a-b-c-d
(где а - наивысший приоритет) и образуют специфичность
p.bright em.dark {color: red}             /* специфичность 0, 0, 2, 2 */

!important

имеет приоритет над правилами наследования

Недостатки !important

 - нарушает стандартные правила наследования таблиц стилей.  - работа с такой стилевой таблицей (поиск ошибок, модернизация) будет более трудоемкой;
 - динамически (с помощью JavaScript) нет возможности переопределить свойство (это можно обойти, если менять не свойство, а класс).

Старайтесь избегать применения правила !important.

Инлайновые стили - ЗЛО!

-исключают возможность поменять внешний вид компонента без изменения кода самого компонента

- увеличивают размер итоговой страницы

- если нет доступа к HTML, придется использовать !important

Идея семантического HTML и CSS заключается в разделении структуры и стилей. Помните, всегда храните стили в таблицы стилей.

Единицы измерения

Абсолютные:

cm - сантиметр
mm - миллиметр
pt - типографская величина =1/72дюйма

px - пиксель

Относительные:

% - процент от другого свойства
em - текущий размер шрифта.по умолчанию имеет размер 16px

ex - высота символа x
rem - равен значению <html>

! Дробная часть отделяется ТОЧКОЙ

ЕИ относительно размера экрана

vw — 1% ширины окна
vh — 1% высоты окна
vmin — наименьшее из (vw, vh), в IE9 обозначается vm
vmax — наибольшее из (vw, vh)

em vs. %

em всегда привязан к шрифту, а % могут зависить и от других свойств, такие как отступы, ширина/высота элемента

<div style="font-size: 200%"> будет 32px
    <div style="font-size: 200%"> будет 64px </div>
</div>

em vs. rem

Блочная модель

 каждый элемент на странице представляет собой прямоугольный блок и может иметь ширину, высоту, поля, границы и отступы.

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Width & Height

Дополнительные свойства для работы с шириной и высотой:

min-width    минимальная ширина

max-width   максимальная ширина

min-height   минимальная высота

max-height  максимальная высота

значение | проценты | auto | inherit

Margin

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента

Padding

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое

Box- sizing

позволяет нам менять, как блочная модель работает и как вычисляются размеры элемента

content-box значением по умолчаниюб width, height

padding-box -width/height+ paddings

border-box width/height+ paddings+ border

Таким образом, подключая box-sizing со значением border-box к своему стилю, мы можем задавать ширину в
процентах  и спокойно указывать border и padding, не
боясь, что изменится ширина блока

Display

определяет, как элемент должен быть показан в документе

! Display не переопределяет блочность/строчность элемента, а всего лишь управляет его свойствами при отображении

Visability

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним

Позиционирование

Float

берёт элемент, убирает его из обычного потока страницы и позиционирует слева или справа от родительского элемента. Все остальные элементы на странице будут обтекать такой элемент.

Проблемы

  • ​элемент установлен обтекаемым, то он убирается из обычного потока страницы и, как результат, стили элементов вокруг этого обтекаемого элемента могут получить негативное влияние.
  • иногда нежелательный контент начинает обтекать элемент с float.

сделать очистку float и вернуть страницу в её обычный поток

Что нужно знать о Float

  • У плавающего объекта обязательно должна быть задана ширина
  • Если плавающих элементов будет больше, чем ширина окна, следующий из них, который не вмещается, будет перемещен на следующую строку
  • Плавающий элемент ведет себя как блочный
  • Плавающий элемент выпадает из нормального потока
  • "float first" - располагайте плавающий элемент в коде первым

Очистка

  •  clear к элементу, указанному после обтекаемых элементов
  • ​используя псевдоэлемент :after
  • clearfix
  • overflow: auto родительскому элементу
.parent:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.group::before,
.group::after {
  content: "";
  display: table;
}
.group::after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
.box-set {
  overflow: auto;
}

Position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

static Элементы отображаются как обычно. Использование атрибутов left, top, right и bottom не приводит к каким-либо результатам. значение по умолчанию
relative положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Также устанавливает новую точку привязки для абсолютно позиционированных элементов
absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента.
fixed Привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы

Что нужно знать

  • нельзя применять position (кроме static) к элементам с float(не сработает)
  • при сдвиге элемента с помощью position:relative остается "дыра" на месте, где элемент должен был находиться в потоке (в отличие от отрицательного margin, который не оставляет пустого места)
  • если не задать вертикальную или горизонтальную позицию, элемент останется в месте ДО позиционирования (по соответствующей оси). Absolute без координат не даст эффекта, рекомендуется задать хотя бы по одной координате для каждой оси
  • очень желательно указывать ширину элемента дляposition:absolute

Немного о шрифтах

font-style (стиль шрифта): italic; normal, oblique

font-varient (капитель): normal, small-caps
font-weight (насыщенность шрифта): bold; normal; 100-900
font-size (Размер шрифта): px; pt, px, em, %
line-height (Высота строки): px; pt, px, em, %
font-family (Семейство шрифтов): Georgia, serif;}
Краткая запись: font: font-style font-variant font-weight font-size/line-height font-family

Краткая запись: { font: italic small-caps bold 16px/30px Georgia; }

СВОЙСТВА ТЕКСТА:
text-align (Горизонтальное выравнивание ): left, right, center, justify
text-decoration (Оформление): none;

              underline - подчеркивает текст (по умолчанию для тегов <a>, <ins> и <u>);
              overline - черта сверху текста;
              line-through - зачеркивает текст (по умолчанию для тегов <del>, <s> и <strike>);
              blink - мигание текста (отсутствует в IE, Chrome)
text-transform (Преобразование регистра ): none; (по умолчанию)
             capitalize - преобразует первую букву каждого слова текста в верхний регистр;
             uppercase - преобразует все символы текста в верхний регистр;
             lowercase - в нижний регистр
word-spacing (Дополнительное расстояние между словами ): px;
letter-spacing (Дополнительное расстояние между буквами): px;
text-indent (Красная строка): px;

 

text-shadow Первые три значения — это размер, а последнее значение — цвет.

1- горизонт. смещение

2. вертикальное

3. радиус размытия

Задаем фон

background-color: #fff;
background-image: url("image.jpg");
background-repeat: repeat, repeat-x,
repeat-y, no-repeat;
background-position: right bottom;
50px 50px; 25% 25%;

background-attachment: fixed;
Краткая запись:
background: #fff url("image.gif") no-repeat fixed right bottom;

 background: url("foreground.png") 0 0 no-repeat, 
             url("middle-ground.png") 0 0 no-repeat, 
             url("background.png") 0 0 no-repeat;

background: #67b11c;
 background: url("tick.png") 20px 50% no-repeat, linear-gradient(#72c41f, #5c9e19);

 background-size: auto 75%;

background-size: изменяет размер изображения

%, px, cover, contain

cover- закрывает всю w/h, мб обрезано

contain -целое изображние, мб не всё про-во

background-clip: площадь поверхности, которая охватывает изображение(ум. border-box)

background-origin: откуда начинается b-position

 border-box, padding-box и content-box

Градиент

линейный градиент движется с верхней до нижней части элемента, плавно переходя между первым и вторым значением цвета.

Изменение направления: градусы или ключ слова

 background: linear-gradient(to right bottom, #648880, #293f50);
 background: radial-gradient(#648880, #293f50);

Рецепты

Verical Align  влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы)

Центрирование

Горизонтальное

- inline-* text-align: center;

- block margin: 0 auto;

Вертикальное

- inline-*

         1. padding

         2. line-height

         3. display: flex; justify-content: center; flex-direction: column;

         4. display: inline-block;  before: vertical-align: middle

         5. position: absolute;  top: 50%; transform: translate(-50%)

- block

       height known

          1.position: absolute;  top: 50%; margin-top: -height/2

          2.position: absolute;  top(l, r, b): 0%; margin: auto

       unknown height

       1. position: absolute;  top: 50%; transform: translate(-50%)

          2. display: flex; justify-content: center; flex-direction: column;

 

Read

2

3

 display: flex;
  justify-content: center;
  align-items: center;

Обрезка текста с многоточием

.child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

1 строка

многострочный текст

overflow:hidden;
text-overflow-multiline:ellipsis;

Прикрепление футера

1 способ Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты html элемента на 100%, для body - min-height: 100%. При этом контентному блоку .container нужно указать нижний отступ, который равен или больше высоты подвала

2 способ Footer прижимается вниз за счет вытягивания блока контента и его родительских элементов на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.

3 способ Использовании CSS-функции calc() и единицы измерения vh, которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.

html 
	height: 100%;

body 
	min-height: 100%;
	height: auto;
	position: relative;

.container 
	padding-bottom: 45px;

footer 
	position: absolute;
	bottom: 0;
	height: 45px;

html,
body,
.wrapper 
  height: 100%;

.content 
  min-height: 100%;
  padding-bottom: 90px;

.footer 
	height: 80px;
	margin-top: -80px;

.content 
  min-height: calc(100vh - 80px);

.footer 
	height: 80px;


* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex: 0 0 auto;
}

4

Колонки с разной высотой

.flex-center {
  display: flex;
  justify-content: center;
}
<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>
#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Горизонтальное меню

1 способ:  li: inline-block;

2 способ: li: float

3 способ. ul: display: flex;

Для всех a : display: block;

Стилизация чекбоксов

<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox">Я переключаю чекбокс</label>


input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label:before {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label:before{
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Img with background

.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}
background: 
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

.red:after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  top: 0;
  left: 0;
  background: rgba(255, 0, 0, 0.5);
}

Верстка писем

  • На мобильных устройствах лучше работают одноколоночные шаблоны не шире 500-600 пикселей
  • Минимальная целевая область кнопок и ссылок должна составлять 44 x 44 пикселя.
  • Шрифт не меньше 13px
  • border=«0» — толщина рамки в пикселах;
    cellpadding=«0» — отступ от рамки до содержимого ячейки;
    cellspacing=«0» — расстояние между ячейками;
    style=«margin:0; padding:0» — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:

пример  

от а до я

how to

осн правила

адаптивная верстка

Made with Slides.com