
Emmet, шпаргалка сокращений. Шорткоды
Emmet — плагин, с которым быстрее писать HTML и CSS код при помощи различных команд. Здесь собраны основные сокращения и варианты их применения.
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида веб-страниц.
Используется для изменения html
и svg
элементов: расположение, отображение, внешний вид.
Каскадные таблицы стилей придуманы для того, чтобы отделить логическую часть страницы (контент, содержимое) от визуальной (дизайн, внешний вид).
Для того, чтобы стили применились, их нужно связать с элементами, для которых они написаны. Это делается при помощи селекторов.
Подробнее в статье «Основные селекторы CSS»
Подключить стили к элементам можно тремя способами:
html
при помощи тега style
,
link
В подавляющем большинстве случаев используется третий способ.
Разделение логической и визуальной частей делает страницу, и сайт в целом, гибче в управлении отображением. Например, благодаря разделению html и css
, стало возможным создавать адаптивные веб-сайты.
Если хотите детально разобраться в теме, записывайтесь на курс «Базовый Frontend: HTML и CSS»
Или воспользуйтесь подборкой статей.
Emmet — плагин, с которым быстрее писать HTML и CSS код при помощи различных команд. Здесь собраны основные сокращения и варианты их применения.
Илья Бирман написал заметку, в которой затронул вопрос: а нужно ли, чтобы курсор менялся при наведении на кнопку? Правда, без собственного ответа. Я считаю, что курсор при наведении всегда должен меняться на руку с пальцем. И сейчас попробую обосновать свою точку зрения.
Три коротких видео, которые помогут разобраться в основных принципах работы с фотошопом для вёрстки.
Рассмотрим варианты, как сделать треугольник, который смотрит вниз, с помощью CSS, используя псевдоэлемент «after»
webTrip — шоу об истории Всемирной Сети и околотематических событиях.
В этом выпуске: рождение Веба и первого сайта, фотошоп-2, Джон Бардин — изобретатель транзистора и выход на экраны Терминатора-2.
Реализуйте эффект, чтобы строка таблицы изменяла форму при наведении курсора.
Гигиена кода — залог крепкой и надёжной вёрстки. Чеклист помогает не допускать банальных ошибок и освободить голову для решения сложных задач.
Сделайте, чтобы рамке с градиентом добавлялась анимация при наведении на элемент.
Повторите эффект, когда картинка выходит за рамки родительского блока
Селекторы объясняют браузеру, какие стили применить к элементу. Это основа CSS.
Box-shadow добавляет элементу одну или несколько теней
В этой задачке на прокачку нужно подсветить блоки без текста красным и добавить в них надпись.
Emmet — плагин, ускоряющий написание HTML и CSS кода. Статья поможет установить плагин для Sublime text.
Придумал новую задачку, по мотивам прошлой. Думаю, будет легко, но весело. Возникнут сложности — начните с первой 😉
Рассмотрим вёрстку блока с контентом на примере банки с водой: как правильно использовать отступы и не писать лишний код.
Задачка на прокачку — это небольшое упражнение на знание CSS. Времени на решение много не уйдёт, а размяться поможет. Главное условие — соблюдать ограничения. Надеюсь, вам понравится.
Самый простой способ поставить картинку по центру — флекс. Работает одинаково хорошо со всеми тегами: див, спан или чекбокс, не важно.
Используйте ID по прямому назначению: для идентификации элементов. Для полей ввода, якорных ссылок или яваскрипта. Стили через #id не назначайте.