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