HTML\CSSHTML5: Что следует помнить

Каскадность — браузер находит все CSS-правила, а затем комбинирует их и получает итоговый список свойств. Комбинирование свойств производится по правилам, которые опираются на приоритетность и специфичность. Благодаря механизму каскадности, CSS-правила будут комбинироваться, а при конфликте свойств будет применяться механизм приоритетов.

Порядок определяется по:

  • важности;
  • специфичности;
  • порядку в исходном коде.

Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.

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

Читать далее...

HTML\CSSРабота с SVG

.svg — это формат векторной графики, который в отличие от растровой графики, может растягиваться и сжиматься без потери качества; а также “человекопонятный код”. SVG-элементы можно оформить с помощью CSS и добавить им интерактивности с помощью JavaScript.

SVG-элемент вставляется с помощью тега svg, внутри которого находится содержимое:

Читать далее...

HTML\CSSШпаргалка по CSS-селеткорам

Основные селекторы:
* – все элементы, div * — все дочерние элементы
h1 – по тегу
#id — по id
.class — по классу
.class1.class2 – одновременно с двумя классами
p strong — вложенные
ul > li — только первого уровня вложенности
div + p — соседние, первый абзац следующий за div
div ~ p — родственные, все абзацы следующие за div

Читать далее...

HTML\CSSCSS Фильтры

Свойство filter задает фильтры для элемента. CSS-фильтры позволяют применить визуальные эффекты к элементам страницы и обычно применяют к изображениям, фонам или рамкам. К CSS-фильтрам можно применять анимации и плавные переходы.

Количество фильтров влияет на скорость загрузки страницы.

Какие бывают фильтры:

brightness — яркость;
contrast — контрастность;
grayscale — бесцветность;
sepia — сепия;
invert— инверсия цвета;
saturate — цветовая насыщенность;

Читать далее...

HTML\CSSТаблицы на CSS

Из любого элемента можно сделать таблицу в CSS, для нужно ему присвоить свойство display: table. При этом элемент будет вести себя в потоке документа как блок. Если задать свойство display: inline-table — табилца будет располагатьсяв одной строке с другими строчными элементами.

.table { display: table; }
.inline-table { display: inline-table; }
.row { display: table-row; }
.cell { display: table-cell; }
.caption { display: table-caption; caption-side: bottom; }
.colgroup { display: table-column-group; }
.col { display: table-column; }
.thead { display: table-header-group; }
.tbody { display: table-row-group; }
.tfoot { display: table-footer-group; }
Читать далее...