☰ Каталог статей

HTML

• Введение в HTML
• Лучший HTML Редактор 2020 года
• Первый HTML-документ
• Основы HTML
• HTML-теги. Часть 1
• HTML-теги. Часть 2
• HTML-атрибуты
• Структура HTML-документа. Часть 1
• Структура HTML-документа. Часть 2
• HTML-текст
• HTML-ссылки. Часть 1
• HTML-ссылки. Часть 2
• HTML-изображения. Часть 1
• HTML-изображения. Часть 2
• HTML-таблицы. Часть 1
• HTML-таблицы. Часть 2
• HTML-списки
• Спецсимволы HTML

HTML5

• Семантические элементы HTML5. Часть 1
• Семантические элементы HTML5. Часть 2
• Семантические элементы HTML5. Часть 3
• HTML5-аудио
• HTML5-видео
• Необязательные теги HTML5-разметки
• HTML5-формы. Часть 1
• HTML5-формы. Часть 2
• Контентная модель HTML5

CSS

• Основы CSS. Часть 1
• Основы CSS. Часть 2
• CSS блочная модель
• Блочные и строчные элементы. Часть 1
• Блочные и строчные элементы. Часть 2

CSS-позиционирование

• ①Содержащий блок
• ②Выбор схемы позиционирования: свойство position
• ③Смещение блока: свойства top, right, bottom, left
• ④Обтекание: свойство float
• ⑤Управление потоком рядом с плавающими элементами: свойство clear
• ⑥Определение контекста наложения: свойство z-index

CSS-текст

• ①Преобразование текста: свойство text-transform
• ②Обработка пробелов и переносы строк: свойство white-space
• ③Настройка табуляции: свойство tab-size
• ④Разрыв строки и границы слов
• ⑤Выравнивание и выключка строк
• ⑥Промежутки
• ⑦Отступ первой строки: свойство text-indent

CSS-шрифты

• ①Семейство шрифтов: свойство font-family
• ②Насыщенность шрифта: свойство font-weight
• ③Ширина шрифта: свойство font-stretch
• ④Начертание шрифта: свойство font-style
• ⑤Размер шрифта: свойство font-size
• ⑥Относительный размер шрифта: свойство font-size-adjust
• ⑦Сокращенная запись свойств шрифта: свойство font
• ⑧Управление синтезом шрифтов: свойство font-synthesis

CSS-ссылки

• ①Псевдоклассы состояний гипертекстовых ссылок
• ②Выборка отдельных ссылок и подчеркивание ссылок
• ③Изображения для ссылок и ссылки-кнопки
• ④Ссылки-кнопки
• ⑤Примеры оформления ссылок

CSS-таблицы

• ①Границы таблицы border
• ②Как задать ширину, высоту, фон и столбцы таблицы
• ③Как добавить таблице заголовок
• ④Как убрать промежуток между рамками ячеек
• ⑤Как увеличить промежуток между рамками ячеек
• ⑥Как скрыть пустые ячейки таблицы
• ⑦Компоновка макета таблицы с помощью свойства table-layout
• ⑧Примеры макетов таблиц

CSS-списки

• ① Тип маркера списка list-style-type
• ② Изображения для элементов списка list-style-image
• ③ Местоположение маркера списка и краткая форма задания стилей списка
• ④ Примеры красивого оформления списков

CSS-фон

• ① Базовый цвет: свойство background-color
• ② Источник изображения: свойство background-image
• ③ Укладка изображений: свойство background-repeat
• ④ Фиксация изображения: свойство background-attachment
• ⑤ Позиционирование изображений: свойство background-position
• ⑥ Область рисования: свойство background-clip
• ⑦ Область расположения фона: свойство background-origin
• ⑧ Размер изображений: свойство background-size
• ⑨ Краткая запись свойств фона: свойство background
• ⑩ Множественные фоны

CSS-рамка

• ① Стиль рамки border-style
• ② Цвет рамки border-color
• ③ Ширина рамки border-width
• ④ Задание рамки одним свойством и для одной границы элемента

CSS-контент

• ① Свойство content
• ② Добавление специального символа
• ③ Добавление текста и изображения
• ④ Добавление блочного содержимого
• ⑤ Добавление значения атрибута и кавычек
• ⑥ Форматирование кавычек: свойство quotes

CSS-цвета

• ① Приоритетные цвета: свойство color
• ② Значения цвета, основные ключевые слова
• ③ Числовые значения цвета, модели RGB
• ④ Цвета модели RGBA и ключевое слово transparent
• ⑤ HSL-цвета и HSLA-значения цвета
• ⑥ Расширенные ключевые слова цвета и ключевое слово currentColor

CSS3

CSS3-UI

• ① Краткая запись внешнего контура: свойство outline
• ② Толщина внешнего контура: свойство outline-width
• ③ Узор внешнего контура: свойство outline-style
• ④ Цвет внешнего контура: свойство outline-color
• ⑤ Смещение внешнего контура: свойство outline-offset
• ⑥ Изменение размера блоков: свойство resize
• ⑦ Стилизация курсора: свойство cursor
• ⑧ Цвет каретки вставки: свойство caret-color

CSS3-градиент

• ① Линейный градиент
• ② Радиальный градиент
• ③ Повтор градиента
• ④ Кроссбраузерный градиент, комбинация градиента и фонового изображения

CSS3-рамка

• ① Закругление углов
• ② Рамки-изображения
• ③ Ширина и ресурс рамки-изображения
• ④ Элементы рамки-изображения
• ⑤ Повтор рамки-изображения
• ⑥ Смещение рамки-изображения
• ⑦ Градиентная рамка

CSS3-оформление текста

• ① Оформление линии: подчеркивание, обводка и зачеркивание
• ② Вид линии оформления: свойство text-decoration-line
• ③ Стиль линии оформления: свойство text-decoration-style
• ④ Цвет линии оформления: свойство text-decoration-color
• ⑤ Краткая запись свойств линии оформления: свойство text-decoration
• ⑥ Расположение линии оформления: свойство text-underline-position
• ⑦ Тень текста: свойство text-shadow
• ⑧ Примеры тени текста
• ⑨ Эффекты тени при наведении
• ⑩ Анимация тени

CSS3-тень блока

• ① Синтаксис свойства box-shadow
• ② Примеры тени для блока
• ③ Эффекты для тени при наведении и анимация

CSS3-переходы

• ① Название свойства transition-property
• ② Продолжительность перехода transition-duration
• ③ Функция перехода transition-timing-function
• ④ Задержка перехода transition-delay
• ⑤ Краткая запись перехода transition и плавный переход нескольких свойств
• ⑥ Примеры переходов для различных свойств

CSS3-трансформации

• ① Введение в CSS3-трансформации
• ② Функции 2D-трансформации transform
• ③ Точка трансформации transform-origin
• ④ Множественные трансформации и трансформации на практике

CSS3-анимация

• ① Введение в CSS3-анимацию
• ② Ключевые кадры
• ③ Временная функция для ключевых кадров
• ④ Название анимации: свойство animation-name
• ⑤ Продолжительность анимации: свойство animation-duration
• ⑥ Временная функция: свойство animation-timing-function
• ⑦ Повтор анимации: свойство animation-iteration-count
• ⑧ Направление анимации: свойство animation-direction
• ⑨ Проигрывание анимации: свойство animation-play-state
• ⑩ Задержка анимации: свойство animation-delay
• ⑪ Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode
• ⑫ Краткая запись анимации: свойство animation и Множественные анимации

Спасибо, что оставались с нами!

Это и ещё многое другое о веб-разработке вы можете найти в нашем телеграм канале nahtml!