Ответы на вопросы компания MindK на тему HTML/CSS

  • Понимаю принцип каскадности таблиц стилей.

Это механизм, благодаря которому к элементу HTML-документа может применяться более чем одно правило CSS

  • Знаю основные HTML-элементы, такие как:span, div, ul, ol, thead, tfoot, p, a, и применял их на практике.
span – строчный элемент
div – блочный элемент
ul – список
ol – нумерованный список
thead – шапка таблицы
tfoot – футер таблицы
p – абзац
a - ссылка
  • Владею CSS-селекторами и понимаю, как они работают, такими как: #id.class; .class + .class; .class ~ div[attr], .div:not(:checked), div[attr*=”lorem”].
#id.class – выбираем в ид такой-то класc
.class + .class – выбрать элементы class внутри первого class
.class ~ div[attr] – выбрать все блоки div[attr] одного родителя class
.div:not(:checked) – выбрать элементы с классом div которые не отмечены <input class=div type=checkbox />
div[attr*=”lorem”] – выбираем блок с атрибутом который содержит текст lorem
  • Понимаю как определяется приоритетность/вес CSS-селекторов.
*                                 	0-0-0-0 
li                                  0-0-0-1             
li:first-line                     	0-0-0-2             
ul li                              	0-0-0-2             
ul ol+li                          	0-0-0-3 
form + *[type=text]        			0-0-1-1 
table tr td.second         			0-0-1-3             
h2.block.title.               		0-0-2-1 
#xyz                             	0-1-0-0             
style=" "                       	1-0-0-0  
  • Проверял верстку на валидность, знаю основные правила валидного HTML, использовал средства валидации и знаю обязательные атрибуты HTML элементов.

https://validator.w3.org/ . Обязательные атрибуты это !DOCTYPE, html, head, title, body.

  • Применял на практике HTML5 элементы и знаю их назначение, такие как: article, aside, footer, header, nav, section.
article - задает содержание сайта вроде новости, статьи, записи блога, форума или др.
aside - определяет блок сбоку от контента для размещения рубрик, ссылок на архив
footer – определяет подвал сайта
header – определяет шапку сайта
nav – определяет навигацию сайта
section - задаёт раздел документа, может применяться для блока новостей, контактной информации и др.
  • Применял на практике CSS3 свойства, такие как: box-sizing,  animation, transform, translate.

box-sizing – применяется для изменения алгоритма расчета ширины и высоты элемента ( border-box – по границе, content-box – по контенту )

transform – трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций

translate – одна из функций transform, позволяет перемещать элемент.

  • Использовал на практике хотя бы один из подходов clearfix, знаю зачем они нужны и как работают.

Это способ борьбы с проблемой контейнера нулевой высоты для плавающих элементов

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
  • Реализовывал тянущуюся верстку, знаю принципы и возможные проблемы.
.col1 { left: 0; right: 50%; margin-right: 100px; }
.col2 { width: 200px; left: 50%; margin-left: -100px; }
.col3 { left: 50%; right: 0; margin-left: 100px; }

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

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

Ctrl+Shift+I

  • Знаю один из markup frame work (Bootstrap CSS / Compass CSS / Foundation CSS Material UI / Semantic UI / Знакомство с LESS, SASS).

https://getbootstrap.com/

sass – препроцессор css

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *

Scroll Up