Свойства используемые в проекте

• font-size — размер шрифта (величины размера)
• font-weight — толщина шрифта (normal, bold)
• line-height — (1.2)
• letter-spacing — (величины размера)
• text-align — (left, center, right, justify)
• margin — внешний отступ (величины размера)
• color — цвет текста (цветовые величины)

Box Model

Каждый элемент — это коробочка с информацией. И у каждого элемента есть свойства отвечающие за его размер и отступы.

• margin — внешний отступ
• border — обводка
• padding — внутренние отступы
• width — ширина контента
• height — высота контента

Shorthand rules (составные правила)

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

Если внешние отступы (margin) со всех сторон одинаковые

margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;

margin: 20px;

Если внешние отступы по противоположным сторонам одинаковые

margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;

margin: 20px auto;

Если отступы с двух противоположных сторон одинаковые, а с других двух разные

margin-top: 40px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;

margin: 40px auto 20px;

Если все отступы разные

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

margin: 10px 20px 30px 40px;

Комментарии

Это пометки внутри кода, которые не влияют на его отображение.

В разных типах документов комментарии обозначаются по разному, но эти обозначения не обязательно помнить, используйте Cmd + / (Windows: Ctrl + /).

Примеры использования:

• Сообщения читающему код человеку — себе или кому-то другому
• Для визуального разделения кода документа на части
• Чтобы временно выключить какую-то часть кода

DOM — Document Object Model

Когда браузер считывает ваш документ, он создаёт его объектную модель. Существуют несколько терминов используемых в разговорах о структурах.

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

Элементы, стоящие на одном уровне в иерархии, называются сестринскими.

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

Вот что пишет об этом сообщество W3C:

Elements, attributes, and attribute values in HTML are defined (by this specification) to have certain meanings (semantics). For example, the ol element represents an ordered list, and the lang attribute represents the language of the content.

These definitions allow HTML processors, such as Web browsers or search engines, to present and use documents and applications in a wide variety of contexts that the author might not have considered. — W3C

Следующий документ синтаксически будет считаться правильным, будучи абсолютно бессмысленным:

В документе не табличные данные, их не нужно размещать в таблице. Тэгом cite нужно выделять заголовок публикации. Машина, которая работает с семантикой документа не поймёт, что видит перед собой. Ячейки данных в этой таблице никак не связаны друг с другом. Также, программа, которая вытаскивает заголовки публикаций, вытащит имя Zakhar Day, вместо заголовка.

Правильней этот документ лучше было бы описать так:

Какие бывают HTML элементы и как их использовать?
Как известно, самая большая проблема в программировании — это именование. В HTML и CSS мы тоже с ней сталкиваемся, но во многом нам помогает спецификация.

Типы контента
Элементы представляют из себя контент разного типа, осуществляют разную функциональность:

• Metadata content
  base, link, meta, noscript, script, style, template, title
• Flow content
  a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr
• Sectioning content
  article, aside, nav, section
• Heading content
  h1, h2, h3, h4, h5, h6
• Phrasing content
  a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr
• Embedded content
  audio, canvas, embed, iframe, img, math, object, svg, video
• Interactive content
  a, audio, button, embed, iframe, img, input, keygen, label, object, select, textarea, video

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

• The root element
  html
• Document metadata
  head, title, base, link, meta, style
• Sections
  body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, address
• Grouping content
  p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div, main
• Text-level semantics
  a, em, strong, small, s, cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rb, rt, rtc, rp, bdi, bdo, span, br, wbr
• Edits
  ins, del
• Embedded content
  img, iframe, embed, object, param, video, audio, source, track, map, area, svg
• Links
  a, area, link
• Tabular data
  table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th
• Forms
  form, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter, fieldset, legend
• Scripting
  script, noscript, template, canvas

Selectors

Мы уже говорили, что селекторы — это-то типа ссылок или указателей на элементы. Какие они бывают? На что можно указывать?

Воспринимайте это как запрос в поисковой строке гугл. Если запрос не верный, будет написано “к сожалению ничего не найдено”. Так и ваши стили не применятся на ненайденные элементы.

Универсальный селектор (universal selector, wildcard)
Выделяет все элементы.

*

Селекторы типов элементов (type selectors)
Выделяет все элементы типа E в документе.

E

Селекторы потомков (descendant selectors)
Выделяет все элементы типа F, которые являются потомками всех элементов типа E.

E F

Селекторы детей (child selectors)
Выделяет все элементы типа E, которые являются детьми всех элементов типа F.

E > F

Селекторы следующего сестринского элемента (adjacent sibling selectors)
Выделяет все элементы типа F, которые являются сестринским по отношению ко всем элементам типа E и идут сразу после них.

E + F

Селекторы предидущего сестринского элемента (preceding sibling selectors)
Выделяет все элементы типа F, которые являются сестринским по отношению ко всем элементам типа E и идут сразу перед ними.

E ~ F

Селекторы атрибутов (attribute selectors)
Примеры использования

• По наличию атрибута

E[foo]

• По значению атрибута

E[foo="bar"]

• По значению атрибута, который представлен в списке атрибутов, разделённых запятой

E[foo~="bar"]

• По значению атрибута, который представлен в начале списка атрибутов

E[foo|="bar"]

• По значению атрибута, значение которого начинается с “bar”

E[foo^="bar"]

• По значению атрибута, значение которого заканчивается на “bar”

E[foo$="bar"]

• По значению атрибута, значение которого содержит в себе “bar”

E[foo*="bar"]

Селекторы классов (class selectors)
Выделяет все элементы типа E с заданным классом “bar”.

E.bar

Селекторы идентификаторов (ID selectors)
Выделяет все элементы типа E с заданным атрибутом ID, значение которого “bar”.

E#bar

Селекторы псевдоэлементов и псевдоклассов (pseudo-elements and pseudo-classes)

• Псевдокласс корневого элемента
  Выделяет корневой элемент документа.

E:root

• Псевдоклассы первого, последнего и единственного “ребёнка”
  Выделяют все элементы типа E, которые являются первыми или последними внутри каких-либо других элементов.

E:first-child
E:last-child
E:only-child

• Псевдоклассы “ребёнка” по типу

E:first-of-type
E:last-of-type
E:only-of-type

• Порядковые псевдоклассы “детей”
  Можно выделить элемент, находящийся в любом другом элементе и стоящий в определённом месте по порядку. Задаётся одним из порядковых классов с указанием порядкового номера элемента.

E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)

• Псевдокласс пустого элемента

E:empty

• Псевдоклассы “якорных ссылок”
  Если ссылка ссылается на какую-то часть того же документа.

E:target

• Псевдоклассы ссылок
  Непосещённые ссылки имеют псевдокласс :link. После посещения ссылка может быть “посещённой” — :visited.

E:link
E:visited

• Интерактивные псевдоклассы (dynamic pseudo-classes)
  На элементы можно наводить — hover. Элементы могут быть активными. Например, ссылка может быть нажатой в данный момент — active. Элемент может быть в фокусе. Например, в поле может стоять курсор — focus.

E:hover
E:active
E:focus

• Псевдоклассы вкл/выкл
  Кнопки могут быть включены и выключены.

E:enabled
E:disabled

• Псевдокласс “поставленной галочки”
  В вебе есть такие интерактивные элементы, как чекбоксы и радиокнопки. Это то, что вы видите в различных тестах. У них есть состояние checked.

E:checked

• Псевдокласс “не”
  Позволяет использовать практически все селекторы в обратном значении.

E:not(F)
E:not(:checked)

• Псевдокласс языка
  В зависимости от языка документа или элемента можно изменять отображение элементов. Например, размещать текст справа на лево или сверху вниз.

:lang(bar)

• Псевдоэлемент первой строки

E:first-line

• Псевдоэлемент первой буквы

E:first-letter

• Псевдоэлементы до или после элемента

E:before
E:after

• Ещё немного новых псевдоклассов

Импорт других внешних стилей внутрь одного подключенного внешнего стиля

Используется, опять же, для удобства. Можно создать один или несколько (в зависимости от задачи) CSS файлов и ипрортировать в них определённые наборы других CSS файлов.

Например, у вас могут быть отдельные стили для iPhone и iPad, но и тот и другой файлы предназначены для мобильных устройств. В то же время у вас может быть отдельный файл с перечислением других файлов для компьютеров и общий файл для всех устройств.

Таким образом, у вас может быть подобная структура:

|--- stylesheets
     |--- application.css
     |--- basics.css
     |--- desktop.css
     |--- desktop
          |--- desktop-basics.css
          |--- desktop-menu.css
          |--- desktop-typographics.css
     |--- mobile.css
     |--- mobile
          |--- mobile-basics.css
          |--- ipad
               |--- ipad-basics.css
               |--- ipad-menu.css
               |--- ipad-portrait.css
               |--- ipad-landscape.css
          |--- iphone
               |--- iphone-basics.css
               |--- iphone-menu.css
               |--- iphone-portrait.css
               |--- iphone-landscape.css

Пример подключения разных наборов стилей к разным устройствам (псевдокод)

<link rel="stylesheet" href="application.css">

if desktop_device?
  <link rel="stylesheet" href="desktop.css">

if mobile_device?
  <link rel="stylesheet" href="mobile.css">

Пример файла application.css

@import "basics.css";

Пример файла desktop.css

@import "desktop/desktop-basics.css";
@import "desktop/desktop-menu.css";
@import "desktop/desktop-typographics.css";

Пример файла mobile.css

@import "mobile/mobile-basics.css";
@import "mobile/ipad/ipad-basics.css";
@import "mobile/ipad/ipad-menu.css";
@import "mobile/ipad/ipad-portrait.css";
@import "mobile/ipad/ipad-landscape.css";
@import "mobile/iphone/iphone-basics.css";
@import "mobile/iphone/iphone-menu.css";
@import "mobile/iphone/iphone-portrait.css";
@import "mobile/iphone/iphone-landscape.css";

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

|--- Wikimedium
     |--- images
          |--- dom_narkomfina_bg.jpg
     |--- javascripts
          |--- jquery.js
     |--- stylesheets
          |--- style.css
          |--- reset.css
          |--- basics.css
          |--- layout.css
     |--- index.html

URI, URL, Path

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

index.html

Путь к файлу index.html находящийся в той же папке что и ресурс, который ссылается на этот файл.

images/dom_narkomfina_bg.jpg

Путь к изображению dom_narkomfina_bg.jpg на один уровень «внутрь» в файловой структуре, в папке images, которая находится в одной папке с файлом index.html, который ссылается на это изображение.

../images/dom_narkomfina_bg.jpg

Путь к файлу dom_narkomfina_bg.jpg находящийся в сестринской папке, один шаг «вверх» в файловой структуре и один шаг внутрь папки images.

../../typography.css

Путь к файлу стилей typography.css на два уровня выше в файловой структуре.