Команды Emmet — шпаргалка для плагина html редактора Sublime Text

Sublime Text — популярный среди программистов редактор, с использованием Emmet плагина становится еще удобнее.

Эта статья — шпаргалка по Emmet командам, которые можно использовать для ускорения создания HTML документов, верстки и работы с CSS. Читать далее Команды Emmet — шпаргалка для плагина html редактора Sublime Text

Позиционирование элементов

CSS position

Свойство CSS position Устанавливает способ позиционирования html элемента относительно окна браузера или других объектов на веб-странице. Читать далее Позиционирование элементов

CSS — вложенные элементы

Чтобы задать стили, которые применятся к вложенным HTML элементам, в CSS есть два варианта.

Можно использовать запись типа

ul>li>ul{color: red}

Другой вариант:

ul li ul{color: green}

Второй вариант применит зеленый цвет текста к вложенным спискам любого уровня.

Первый — только к спискам первого уровня вложенности. Правда в данном примере стили унаследуются потом и списками нижних уровней :)

CSS — нюансы верстки

Занимаясь версткой, иногда наталкиваешься на поведение некоторых стилей, не соответствующее описанию. Например, если расположить подряд h1 и h2, задав верхнему заголовку margin-bottom, а нижнему — margin-top, то применится только один отступ.

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

Изучаем CSS — принципы верстки

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

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

Два HTML элемента в одном блоке — используем overflow

Для управления тем, как будет накладываться содержимое HTML элементов, расположенных в одном блоке, можно использовать CSS свойство overflow.

Чтобы показать работу overflow на примере, предположим, что у нас есть два HTML блока, расположенные в одном контейнере. В одном блоке у нас текст, во втором — изображение. В примере изображение заменено на красный квадрат, заданный свойствами CSS. Читать далее Два HTML элемента в одном блоке — используем overflow

Overflow

Свойство overflow управляет отображением содержания блочного элемента HTML.

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

По-умолчанию для элементов используется значение visible. Читать далее Overflow