1. CSS Кольори
1.1. CSS Background Color - Колір фону
Hello World
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum, deleniti. Voluptate fugit quo quasi dignissimos delectus odio recusandae molestiae doloribus excepturi quia ullam tempora adipisci consequuntur corrupti deleniti, exercitationem corporis.
1.2. CSS Text Color - Колір тексту
Hello World
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nobis aut quis, voluptatibus atque ratione beatae consectetur vero nesciunt, tempore inventore minus explicabo. Voluptatum dolores ex magni voluptates similique vel?
Ut wisi enim...
1.3. CSS Border Color - Колір межі
Hello World
Hello World
Hello World
1.4. CSS Значення кольору
...
...
...
...
...
2. CSS Фони
2.1. Opacity / Transparency - Непрозорість / Прозорість
opacity 0.1
opacity 0.3
opacity 0.6
opacity 1 (за замовчуванням)
2.2. Прозорість з використанням RGBA
10% opacity
30% opacity
60% opacity
За замовчуванням
2.3. CSS background-image
Цей блок має зображення як тло!
3. CSS Межі
3.1. Стиль CSS Межі
Крапкова межа.
Пунктирна межа.
Суцільна межа.
Подвійна межа.
Рифлена межа. Ефект залежить від значення кольору межі.
Ребриста межа. Ефект залежить від значення кольору межі.
Вставна межа. Ефект залежить від значення кольору межі.
Випукла межа. Ефект залежить від значення кольору межі.
Немає межі.
Прихована межа.
Змішана межа.
3.2. CSS Border Width - Ширина межі
5px border-width
medium border-width
2px border-width
thick border-width
3.3. CSS Колір межі
Червона межа
Зелена межа
Синя межа
3.4. CSS Border - Окремі сторони
Різні стилі межі
3.5. CSS Закруглені межі
Звичайна межа
Закруглена межа
Більш закруглена межа
Ще більш закруглена межа
4. CSS Поля
4.1. Margin - Окремі сторони
Цей елемент div має верхнє поле 100px, праве поле 150px, нижнє поле 100px та ліве поле 80px.
4.2. Margin - Скорочена властивість
Цей елемент div має верхнє поле 25px, праве поле 50px, нижнє поле 75px та ліве поле 100px.
4.3. Margin - Значення auto
Цей div центруватиме по горизонталі, тому що в ньому margin: auto;
5. CSS Внутрішній відступ
5.1. Padding - Окремі сторони
Цей елемент div має верхній відступ 50 пікселів, правий відступ 30 пікселів, нижній відступ
50 пікселів та лівий відступ 80 пікселів.
5.2. Padding - Скорочена властивість
Цей елемент div має верхній відступ 25 пікселів, правий відступ 50 пікселів, нижній відступ
75 пікселів та лівий відступ 100 пікселів.
5.3. Padding та Width
Цей div має ширину 300 пікселів.
Ширина цього div складає 350 пікселів, хоча CSS він визначений як 300 пікселів.
6. CSS Висота, ширина і максимальна ширина
6.1. CSS Значення height/width
Цей елемент має висоту 100 пікселів і ширину 500 пікселів.
6.2. Встановлення максимальної ширини - max-width
Цей елемент має висоту 100 пікселів і максимальну ширину 500 пікселів.
7. CSS Блочна модель
7.1. CSS Блочна модель
Цей безглуздий текст є вмістом блоку. Ми додали відступ 50 пікселів, поле 20 пікселів та
зелений кордон 15 пікселів. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor у reprehenderit в voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
7.2. Ширина і висота елемента
Зображення вище має ширину 350 пікселів. Загальна ширина цього елемента також становить 350
пікселів.
8. CSS Іконки
8.1. Font Awesome Іконки
8.2. Google Іконки
cloud favorite attachment computer traffic9. CSS Посилання
9.1. Стилізація посилань
Посилання9.2. Text Decoration - Оформлення тексту
Посилання9.3. Background Color - Колір фону
Посилання9.4. Кнопки-посилання
Посилання10. CSS Списки
10.1. Різні маркери списку
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
10.2. Зображення як маркер елемента списку
- Coffee
- Tea
- Coca Cola
10.3. Розташування маркерів елементів списку
list-style-position: outside (за замовчуванням):
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum alias cumque nostrum, recusandae modi, excepturi vero tempora est neque culpa omnis harum, mollitia iusto quisquam aliquam deleniti assumenda magnam non.
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias eveniet obcaecati recusandae voluptates laborum ducimus veniam, perspiciatis quia quos nostrum, expedita fugit quaerat, eius praesentium repellat numquam unde exercitationem est.
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio, nostrum corrupti ab quam deleniti eos provident laborum dolorum odit quisquam harum doloremque reiciendis iusto dignissimos a praesentium totam deserunt.
list-style-position: inside:
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi obcaecati voluptatem, adipisci sunt saepe nisi magnam ad similique nihil aspernatur alias inventore mollitia, nemo error quidem perspiciatis dolores, nostrum facilis!
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque natus, perferendis ipsam corrupti molestias placeat libero harum vitae distinctio soluta optio quaerat possimus quos accusamus! Odio deleniti ad saepe sint.
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum soluta ratione maxime unde! Consectetur fuga inventore impedit deleniti veritatis, recusandae cupiditate praesentium ducimus aut corporis possimus quia. Ipsa, nisi animi?
10.4. Видалення налаштувань за замовчуванням
Список за замовчуванням:
- Coffee
- Tea
- Coca Cola
Видалені маркери, поля та відступи:
- Coffee
- Tea
- Coca Cola
10.5. Список стилів з кольорами
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
11. CSS Таблиці
11.1. Межі таблиці
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
11.2. Таблиця на всю ширину
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
11.3. Згорнути межі таблиці
| Firstname | Lastname |
|---|---|
| Peter | Griffin |
| Lois | Griffin |
11.4. Ширина та висота таблиці
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
11.5. Горизонтальне вирівнювання в таблиці
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
11.6. Вертикальне вирівнювання в таблиці
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
11.7. Відступи в таблиці - padding
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
11.8. Горизонтальні роздільники в таблиці
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
11.9. Виділення рядків таблиці при наведенні
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
11.10. Смугаста таблиця
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
11.11. Колір таблиці
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
11.12. Адаптивна таблиця
| Firstname | Lastname | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
| Cleveland | Brown | $250 |
CSS Продвинутий
1. CSS Закруглені кути
1.1. CSS властивість border-radius
Закруглені кути!
Закруглені кути!
Закруглені кути!
1.2. CSS border-radius - Вкажіть кожен кут
Чотири значення - border-radius: 15px 50px 30px 5px:
Три значення - border-radius: 15px 50px 30px:
Два значення - border-radius: 15px 50px:
Одне значення - border-radius: 15px:
2. CSS Анімації
2.1. Правило @keyframes (ключові кадри)
2.2. Затримка анімації
2.3. Встановіть, скільки разів анімація має запускатися
2.4. Запустіть анімацію в зворотньому напрямку або альтернативних циклах
2.5. Вкажіть криву швидкості анімації
linear
ease
ease-in
ease-out
ease-in-out
2. CSS Підказка
2.1. Основна (базова) підказка
Наведіть на мене
Текст підказки
2.2. Позиціонування виринаючих підказок
Наведіть на мене
Текст підказки
Наведіть на мене
Текст підказки
2.3. Підказка зі стрілкою
Наведіть на мене
Текст підказки
2.4. Виринаючі підказки (анімація)
Наведіть на мене
Текст підказки
3. CSS Кнопки
3.1. Основні стилі кнопок
Кнопка посилання3.2. Кольори кнопок
3.3. Розмір кнопок
3.4. Округлі кнопки
3.5. Кольорові межі кнопки
3.6. Кнопки при наведенні миші
3.7. Тінь кнопок
3.8. Відключені кнопки
3.9. Ширина кнопок
3.10. Групи кнопок
3.11. Група кнопок з межами
3.12. Вертикальна група кнопок
3.13. Анімовані кнопки
4. CSS Пагінація
4.1. Проста нумерація вебсторінок
4.2. Активна і при наведенні курсору нумерація сторінок
4.3. Округлі активні та при наведенні курсору кнопки
4.4. Ефект переходу при наведенні
4.5. Межі нумерації сторінок
4.6. Округлі межі
4.7. Простір між посиланнями
4.8. Розмір пагінації
5. CSS Кілька стовпців
5.1. CSS Створити кілька стовпців
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.
5.2. CSS Визначити розрив між стовпцями
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.
5.3. CSS Роздільник між стовпцями
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.
5.4. Визначити ширину стовпця
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum.
6. CSS Випадаючи списки
6.1. Основний випадаючий список
Наведіть на мене курсор!
Hello World!
6.2. Випадаюче меню
6.3. Вирівняний по правому краю випадаючий контент
7. CSS Ключові слова кольору
7.1. Ключове слово transparent (прозорість)
Цей div має світло-зелений фон.
Цей div має прозорий фон.
7.2. Ключове слово currentcolor (поточний колір)
Цей елемент div має синій колір текста і синю межу.
Колір тла цього div встановлено на поточне значення кольору основного елемента.
Для кольору межі та кольору тіні цього div встановлено значення кольору основного елемента.
7.3. Ключове слово inherit (наслідування)
Тут налаштування межі елемента span також буде
успадковані від батьківського елемента.
8. CSS Ефекти тіні
Ефект тіні тексту!
Ефект тіні тексту!
Межа навколо тексту!
8. CSS Box Shadow
8.1. CSS властивість box-shadow
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo aspernatur blanditiis, ex enim
ullam beatae perspiciatis nesciunt praesentium! Alias ab et maiores excepturi numquam quidem dolorum,
cupiditate commodi eos sit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo aspernatur blanditiis, ex enim
ullam beatae perspiciatis nesciunt praesentium! Alias ab et maiores excepturi numquam quidem dolorum,
cupiditate commodi eos sit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo aspernatur blanditiis, ex enim
ullam beatae perspiciatis nesciunt praesentium! Alias ab et maiores excepturi numquam quidem dolorum,
cupiditate commodi eos sit.
8.2. Карточки
1
Січень 1, 2023
Hardanger, Norway
9. CSS Переходи
Наведіть мишку
Наведіть мишку
10. CSS Ефекти тексту
10.1. CSS text-overflow - Переповнення
text-overflow: clip:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem nulla eaque distinctio error porro sunt iusto ducimus cum numquam, qui eligendi eum consectetur, perspiciatis maxime est iste necessitatibus, tempora suscipit!
text-overflow: ellipsis:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim distinctio natus ratione repellat dicta laboriosam omnis eos voluptas, debitis cupiditate voluptate, at repudiandae. Neque dolor laudantium, nam a aliquam eveniet.
10.2. CSS word-wrap - Перенесення слів
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus praesentium assumenda commodi fugiat, labore exercitationem optio doloribus molestias aut ex error et veritatis enim itaque delectus quibusdam quod corrupti possimus.