Css3 уроки: CSS учебник для начинающих c нуля

Введение в CSS — Изучение веб-разработки

CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.

Перед запуском этого модуля вы должны иметь:

1. Базовое знакомство с использованием компьютеров и пассивным использованием Интернета (то есть, просматривая его, потребляя контент).
2. Базовая рабочая среда, описанная в разделе Установка базового программного обеспечения, и понимание того, как создавать файлы и управлять ими, подробно описано в разделе Работа с файлами.
3. Основное знакомство с HTML, как описано в модуле Введение в HTML.

Примечание: Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программах кодирования, таких как JSBin или Thimble.

Этот модуль содержит следующие статьи, в которых вы ознакомитесь со всеми основными теориями CSS и сможете проверить некоторые навыки.

Что такое CSS?

CSS (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.

Начало работы с CSS

В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.

Как структурирован CSS

Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.

Как работает CSS

Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берёт CSS и HTML и превращает их в веб-страницу.

Использование ваших новых знаний

С учётом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам шанс сделать это.

Intermediate Web Literacy 1: Intro to CSS

Отличный базовый курс от Mozilla, в котором рассматриваются и тестируются многие навыки, о которых говорилось в модуле

Введение в CSS. Узнайте о стилях элементов HTML на веб-странице, селекторах CSS, атрибутах и значениях.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 27 окт. 2022 г. by MDN contributors.

Видео курс HTML5 & CSS3 Стартовый

О курсе

В основе работы любого вебсайта находится демонстрация текста, изображений и другого контента в окне специальной программы – веб-браузера. С помощью языка HTML создается начальная разметка (каркас) каждой Интернет-страницы. Затем использование CSS преображает сайт, настраивая способ отображения элементов и придавая ему привлекательный, и эффектный внешний вид. Изучение этих языков является основой для обучения любого верстальщика и веб-разработчика.

На курсе «HTML5 & CSS3 Стартовый» вы познакомитесь с основными конструкциями и принципами использования этих базовых языков работы веб-сайтов. Вы познакомитесь с тем, что такое HTML тэги и как их использовать, с особенностью того, как устроена структура любого сайта, что такое блоки, как формируется текст и отображаются картинки. Узнаете, как работать с таблицами и списками, их правила вложенности, узнаете правила размещения блоков и способы работы с путями для файлов.

Читать дальше…

Этот курс входит в специальности:

Frontend Developer Верстальщик сайтов React Developer UI/UX Designer Python Developer ASP.NET Core Developer ASP.NET MVC Developer PHP Developer Ruby Developer

Предварительные Требования

Курс подойдёт абсолютным новичкам, которые не имеют опыта в IT-разработке

Читать дальше…

Вы научитесь

• Понимать основы использования базовых конструкций языка разметки HTML и языка стилей CSS. 
• Создавать простые одностраничные сайты.
• Реализовать на сайте главное меню сайта.
• Понимать основы адаптивной и кросс браузерной разработки сайтов.
• Создавать блок социальных сетей.
• Создавать карточки товара и подобные им информационные блоки.
• Реализовывать верстку сайта с использованием модуля Flexbox.

Читать дальше…

Скачать материалы курса Для получения материалов курса нужно авторизоваться

Получить сертификат Для получения сертификата нужно авторизоваться

Виталий Мазяр

Front-end Developer

Другие курсы автора

• Длительность: 5 ч 11 м
• Курс создан: 03. 11.2021
• Уроков: 10
• Обновлен: 03.06.2022
• Язык: русский

Что входит в курс

• 10 видео уроков
• Домашние задания
• Тестирование
• Сертификат
• Проверка ДЗ

СМОТРЕТЬ

Для прохождения теста нужно авторизироваться

Войти Регистрация

×

Вы открыли доступ к тесту! Пройти тест

Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео

Войти Регистрация

№1

Введение в HTML

0:31:13

Материалы урокаДомашние заданияТестирование

В начале курса будет рассмотрено что такое HTML, для чего он нужен и как пишутся его элементы. Вы узнаете о тегах, форматировании в HTML, о редакторе, в котором пишется код первоначальной разметки, с использованием которой построена любая веб страница. Также узнаете для чего используются комментарии в коде.

Читать дальше…

Типы элементов и атрибуты

0:28:51

Материалы урокаДомашние заданияТестирование

Ознакомившись со вторым уроком, слушатель узнает, как добавить на страницу картинки, а также различные переходы по ссылкам. Узнает первые типы элементов, их отличия и возможные ошибки при написании кода.

Читать дальше…

Введение в CSS

0:35:54

Материалы урокаДомашние заданияТестирование

На занятии будут рассмотрены способы подключения стилей к странице, виды селекторов, с помощью которых можно привязать стили указным элементам страницы и по каким принципам определяется приоритетность записей в CSS.

Читать дальше…

Определение размеров блоков

0:34:24

Материалы урокаДомашние заданияТестирование

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

Читать дальше…

Работа с отступами, свойство margin

0:27:19

Материалы урокаДомашние заданияТестирование

В этом уроке вы познакомитесь с механикой работы внешних отступов у элементов. Узнаете, что такое проваливание (схлопывание) и в каких случаях оно присутствует. Будут также рассмотрены неявные отступы при работе с строчно-блочными элементами.

Читать дальше…

Работа с текстом и видимостью элементов

0:38:52

Материалы урокаДомашние заданияТестирование

На данном уроке вы познакомитесь с различными правилами CSS для стилизации текста и с тем, как работает наследование стилей для элементов-потомков. Будет рассмотрено то, как возможно скрывать элементы разметки на странице и в чем разница между разными способами.

Читать дальше…

Верстка с использованием Flexbox

0:28:25

Материалы урокаДомашние заданияТестирование

Целью занятия является разобрать основные принципы работы модуля Flexbox и научиться их использовать. Рассматривается возможность задавать гибкое расстояние между блоками и то, как определяются их размеры в некоторых случаях, а также поведение внешних отступов при использовании flexbox.

Читать дальше…

Комбинирование селекторов

0:35:59

Материалы урокаДомашние заданияТестирование

Комбинирование — очень важный момент при написании кода, поскольку большие вложенности необходимо создавать и разбирать постоянно на этапе работы с проектом, что рассмотрено в структуре списков и таблиц. Также рассматриваются возможности обращений к элементам по псевдоклассам и работа приоритета в таких структурах.

Читать дальше…

Работа с фоном, свойство background

0:30:36

Материалы урокаДомашние заданияТестирование

На занятии будут рассмотрены основные способы записи палитры цветов в свойствах, где указывается окрас. Будет рассмотрено в чем разница установки прозрачности элемента через opacity и rgba(). Рассматриваются случаи добавления картинок через css и размещение большого их количества на одном элементе.

Читать дальше…

Семантическая верстка

0:20:23

Материалы урокаДомашние заданияТестирование

Студент узнает новые семантические теги, которые появились с HTML версии 5 и правила их использования. В каких вариациях и комбинациях их можно использовать, а в каких нет. Рассмотрены структуры простых сайтов с использованием семантических тегов.

Читать дальше…

Следующий курс:

Видео курс JavaScript Стартовый — видео курсы ITVDN

ПОКАЗАТЬ ВСЕ

ПОДРОБНЕЕ

ПОДРОБНЕЕ

ПОДРОБНЕЕ

ПОДРОБНЕЕ

Регистрация через

или E-mail

Нажав на кнопку «Зарегистрироваться»,
Вы соглашаетесь с условиями использования.

Уже есть аккаунт

Получите курс бесплатно

Вы выбрали курс для изучения
«»
Чтобы получить доступ к курсу, зарегистрируйтесь на сайте.

РЕГИСТРАЦИЯ

Спасибо за регистрацию

Перейдите на почту и подтвердите Ваш аккаунт,
чтобы получить доступ ко всем
бесплатным урокам и вебинарам на сайте ITVDN.com

ПОДТВЕРДИТЬ ПОЧТУ НАЧАТЬ ОБУЧЕНИЕ

Спасибо за регистрацию

Ваш аккаунт успешно подтвержден.
Начать обучение вы можете через Личный кабинет
пользователя или непосредственно на странице курса.

НАЧАТЬ ОБУЧЕНИЕ

Подтверждение аккаунта

На Ваш номер телефона было отправлено смс с кодом активации аккаунта. Пожалуйста, введите код в поле ввода.

Отправить код еще раз

Изменить номер телефона

Ошибка

Как создать анимацию ключевых кадров CSS3

Рекламные объявления

Функция анимации CSS3 позволяет создавать анимацию ключевых кадров.

Создание анимаций CSS3

В предыдущей главе вы видели, как создавать простые анимации, такие как анимация свойства от одного значения к другому с помощью функции переходов CSS3. Однако переходы CSS3 слабо контролируют ход анимации с течением времени.

Анимации CSS3 делают еще один шаг вперед благодаря анимации на основе ключевых кадров, которая позволяет указывать изменения свойств CSS с течением времени в виде набора ключевых кадров, например, флэш-анимации. Создание CSS-анимации — это двухэтапный процесс, как показано в примере ниже:

• Первым шагом создания анимации CSS является определение отдельных ключевых кадров и присвоение имени анимации с помощью объявления ключевых кадров.
• Второй шаг — обращение к ключевым кадрам по имени с использованием свойства имя-анимации , а также добавление длительность анимации и других необязательных свойств анимации для управления поведением анимации.

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

блок горизонтально из одной позиции в другую с помощью функции анимации CSS3.

Пример

Попробуйте этот код »

 .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    фон: красный;
    положение: родственник;
    /* Хром, Сафари, Опера */
    -webkit-имя-анимации: moveit;
    -webkit-анимация-длительность: 2 с;
    /* Стандартный синтаксис */
    имя-анимации: moveit;
    продолжительность анимации: 2 с;
}
 
/* Хром, Сафари, Опера */
@-webkit-keyframes moveit {
    из {слева: 0;}
    до {слева: 50%;}
}
 
/* Стандартный синтаксис */
@ключевые кадры {
    из {слева: 0;}
    до {слева: 50%;}
} 

Вы должны указать как минимум два свойства имя-анимации и продолжительность анимации (больше 0), чтобы анимация происходила. Однако все остальные свойства анимации являются необязательными, поскольку их значения по умолчанию не препятствуют выполнению анимации.

Примечание: Не все свойства CSS можно анимировать. Как правило, любое свойство CSS, принимающее значения в виде чисел, длины, процентов или цветов, является анимируемым.

---

Определение ключевых кадров

Ключевые кадры используются для указания значений свойств анимации на различных этапах анимации. Ключевые кадры задаются с помощью специального правила CSS — @keyframes . Селектор ключевого кадра для правила стиля ключевого кадра начинается с процента (

% ) или ключевых слов от (то же, что 0%) или от до (то же самое, что 100%). Селектор используется для указания того, где создается ключевой кадр во время анимации.

Проценты представляют собой процент продолжительности анимации, 0 % — начальную точку анимации, 100 % — конечную точку, 50 % — середину и так далее. Это означает, что 50% ключевого кадра в 2-секундной анимации будут 1-секундными в анимации.

Пример

Попробуйте этот код »

 .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    поле: 100 пикселей;
    фон: красный;
    положение: родственник;
    слева: 0;
    /* Хром, Сафари, Опера */
    -webkit-имя-анимации: встряхнуть;
    -webkit-анимация-длительность: 2 с;
    /* Стандартный синтаксис */
    имя-анимации: встряхнуть;
    продолжительность анимации: 2 с;
}
 
/* Хром, Сафари, Опера */
@-webkit-ключевые кадры встряхнуть {
    12,5% {слева: -50px;}
    25% {слева: 50px;}
    37,5% {слева: -25px;}
    50% {слева: 25px;}
    62,5% {слева: -10px;}
    75% {слева: 10px;}
}
 
/* Стандартный синтаксис */
@ключевые кадры встряхнуть {
    12,5% {слева: -50px;}
    25% {слева: 50px;}
    37,5% {слева: -25px;}
    50% {слева: 25px;}
    62,5% {слева: -10px;}
    75% {слева: 10px;}
} 

---

Сокращенное свойство анимации

Существует множество свойств, которые необходимо учитывать при создании анимации. Однако также можно указать все свойства анимации в одном свойстве, чтобы сократить код.

Свойство animation является сокращенным свойством для одновременной установки всех отдельных свойств анимации в указанном порядке. Например:

Пример

Попробуйте этот код »

 .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    фон: красный;
    положение: родственник;
    /* Хром, Сафари, Опера */
    -webkit-анимация: повторять 2с линейно 0с бесконечно чередовать;
    /* Стандартный синтаксис */
    анимация: повторять 2с линейно 0с бесконечно чередовать;
}
 
/* Хром, Сафари, Опера */
@-webkit-ключевые кадры повторяют {
    из {слева: 0;}
    до {слева: 50%;}
}
 
/* Стандартный синтаксис */
@ключевые кадры повторяют {
    из {слева: 0;}
    до {слева: 50%;}
} 

Примечание: Если какое-либо значение отсутствует или не указано, вместо него будет использоваться значение по умолчанию для этого свойства. Это означает, что если значение свойства animation-duration отсутствует, переход не произойдет, поскольку его значение по умолчанию равно 0.

---

Свойства анимации CSS3.

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

Собственность	Описание
анимация	Сокращенное свойство для установки всех свойств анимации в одном объявлении.
имя-анимации	Указывает имя @keyframes определенных анимаций, которые следует применить к выбранному элементу.
продолжительность анимации	Указывает, сколько секунд или миллисекунд требуется анимации для завершения одного цикла анимации.
функция синхронизации анимации	Указывает, как анимация будет развиваться в течение каждого цикла, т. е. функции плавности.
задержка анимации	Указывает, когда начнется анимация.
число итераций анимации	Указывает, сколько раз цикл анимации должен воспроизводиться перед остановкой.
анимация-направление	Указывает, должна ли анимация воспроизводиться в обратном порядке в чередующихся циклах.
режим анимации-заполнения	Указывает, как анимация CSS должна применять стили к своей цели до и после ее выполнения.
состояние воспроизведения анимации	Указывает, запущена анимация или приостановлена.
@ключевые кадры	Задает значения свойств анимации в различных точках анимации.

Предыдущая страница Следующая страница

Учебники по CSS — CSS: Каскадные таблицы стилей

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

На этой странице перечислены все с кратким описанием. Они сгруппированы по сложности, чтобы вы могли выбрать наиболее подходящие для вашего уровня.

Основы CSS

Это руководство предназначено для полных новичков: Вы еще не написали ни строчки кода CSS? — Это вам. Он объясняет основные концепции языка и помогает вам в написании основных таблиц стилей.

Использование нескольких фонов

Фоны имеют основополагающее значение для красивого стиля: CSS позволяет вам установить несколько из них для каждого поля. В этом уроке объясняется, как они взаимодействуют и как добиться хороших эффектов.

Изменение размера фоновых изображений

CSS позволяет изменять размер изображений, используемых в качестве фона элемента. В этом руководстве описывается, как добиться этого простым способом.

Использование медиа-запросов

Размер экранов или типы устройств, таких как сенсорные экраны или печатные листы, в настоящее время сильно различаются. Медиа-запросы являются основными строительными блоками при создании веб-сайтов, которые везде отображаются в наилучшем качестве.

Понимание z-индекса CSS

Управление наложением блоков — это базовая функция, которая очень быстро понадобится веб-разработчикам. Хотя это не так сложно, для этого требуются базовые знания CSS.

После выпуска CSS 2 (уровень 1) в CSS были добавлены новые функции. Некоторые из них причудливые и довольно автономны. Они просты в использовании для любого, кто хорошо знаком с основными понятиями.

Стили счетчиков CSS

Подсчет элементов и страниц — простая задача в CSS. Научитесь использовать counter-reset , counter-increment , counters() и counter() .

CSS-анимации

CSS-анимации позволяют определять конфигурации стиля в виде ключевых кадров и переходить между ними, определяя анимацию.

CSS-переходы

Переходы CSS позволяют вам определить анимацию между несколькими стилями и управлять тем, как происходит этот переход.

Преобразование CSS

Преобразования

позволяют изменять положение элементов, изменяя их координатное пространство: оно позволяет перемещать, вращать и деформировать их в 2D- или 3D-пространствах.

Градиенты CSS

Градиенты — это изображения, которые плавно переходят от одного цвета к другому. В CSS разрешено несколько типов градиентов: линейные или радиальные, повторяющиеся или нет. В этом руководстве описывается, как их использовать.

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

Многоколоночные макеты CSS

CSS3 представляет новый макет, позволяющий легко определять несколько столбцов в элементе.