См. также "Руководство по написанию JavaScript-кода от Airbnb" Общие принципы написания качественного кода DRY (Don't Repeat Yourself) - не повторяться при написании кода: всё в проекте должно быть определено только один раз. При несоблюдении этого принципа: изменения придется вносить в Читать дальше ...
Рубрика: CSS, HTML
Особенности тегов HTML
Элементы макета документа HTML Структура HTML документа
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тестовая страница</title> </head> <body> <p>Это — моя страница</p> </body> </html> |
Разделы HTML документа: <!DOCTYPE html>: объявление типа документа. <html></html>: "корневой элемент", содержит в себе всё наполнение страницы. <head></head>: выступает в качестве контейнера для содержимого HTML документа, которое не показывается посетителям страницы, и Читать дальше ...
Свойство CSS flex
Свойство flex Свойство CSS flex - это сокращённое свойство, определяющее CSS-способность элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. При этом у родительского элемента должно быть установлено свойство display : flex (родительский элемент должен являться flex-контейнером). На практике Читать дальше ...
Структура таблицы HTML
Элементы структуры таблицы HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<table> <caption> Это таблица </caption> <colgroup> <!-- цвет фона для первого столбца таблицы--> <col span="1" style="background: Khaki" /> <!-- цвет фона для следующего (одного) столбца таблицы--> <col style="background-color: LightCyan" /> </colgroup> <thead> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tfoot> <tr> <td></td> <td></td> <td></td> </tr> </tfoot> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> |
где <table></table> является контейнером для всех элементов таблицы (все остальные элементы должны находиться внутри него). <caption></caption> создает заголовок таблицы. Добавляется непосредственно после тега <table>, вне строки <tr> или ячейки <td>. <colgroup></colgroup> группирует один или более Читать дальше ...
Работа с CSS через Javascript
Получение всех CSS-свойств элемента ( метод window.getComputedStyle() ) Метод window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента после применения всех активных таблиц стилей и завершения базовых вычислений значений, которые они могут содержать. Синтаксис метода window.getComputedStyle():
1 |
let style = window.getComputedStyle(element [, pseudoElt]); |
где element - элемент Читать дальше ...
Использование Sass
Подробнее по ссылке https://sass-scss.ru/documentation/ Директивы Sass Миксины Миксины (примеси) позволяют определить стили, которые могут быть использованы повторно в любом месте документа (это повторяющиеся участки кода, которые можно включать в различные селекторы). Миксины могут: содержать CSS правила или что-либо другое, разрешённое Читать дальше ...