ЗАДАННЯ СТИЛЮ ТЕКСТУ CSS
Навести курсором, щоб подивитися синтаксис

Стилізація тексту

Звичайний, курсивный, похилий, жирный, звичайний, перекреслений, підкреслений, риска зверху, підкресленість наслідується від батьківського елементу, без підкреслень, перша буква велика, Нижній регістр, Верхній Регістр, нижний регістр як зменшені головні літери, за замовчуванням, міжрядковий інтервал, інтервал між словами , інтервал між буквами, зліва направо, зправа наліво, горизонтальна тінь, діагональна тінь, трохи розмита тінь, червона тінь, червоний текст, зміна розміру за допомогою пікселів, за допомогою відсотків і за допомогою ключового слова, задання шрифту, кастомний шрифт,
Відступ першого рядка, працює лише із блочними об'єктами
вирівнювання по лівому краю, працює лише із блочними об'єктами
вирівнювання по центру, працює лише із блочними об'єктами
вирівнювання по правому краю, працює лише із блочними об'єктами
вирівнювання по ширині, працює лише із блочними об'єктами

Форматування абзаців

Навести курсором, щоб подивитися синтаксис

Перший дочірній абзац элементу div, він буде відображатися зеленого кольору

Другий дочірній абзац элементу div, він буде відображатися чорного кольору, оскільки ніяких правил для нього не задано

Третій і останній дочірній абзац элементу div, він буде відображатися синього кольору.

Маркери

ІКОНКИ

1. Щоб додати іконку на сторінку, необхідно спочатку її знайти в інтернеті на одному із вебсайтів з іконками.
2. Вставити в header посилання на відповідний css-файл. Нижче приведений перелік деяких вебсайтів і посилання на їх css-файли:
fontawesome.com <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Google Material Design Icons <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
getbootstrap.com <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
3. Із сайту скопіювати id або class бажаної іконки і вписати його у відповідний тег іконки.

Приклади форматування:

- так виглядають іконки на сторінці - <i class="fa fa-car"></i>
- додаткова стилізація іконок css - <i class="ico fa fa-car"></i> <style> ico{ color: red; font-size: 100px; } </style>
android - заданий Текст буде відображатися у випадку якщо набір не підключений - <i class="fa fa-car">Текст</i>

Блоки, що розкриваються

Стилі CSS для HTML об'єктів HTML об'єкти Результат
/* приховуємо блоки із їх вмістом*/ .hide {display: none;} .hide + label ~ div {display: none;} /* оформляємо текст label */ .hide + label { border-bottom: 1px dotted; padding: 0; color: green; cursor: pointer; display: inline-block; } <input type="checkbox" id="hd1" class="hide"/> <label for="hd1" >Натисніть тут, щоб побачити прихований текст</label> <div> Прихований текст </div>
Реалізувати це стало можливим завдяки CSS3 псевдокласу :checked, що застосовується до елементів інтерфейсу, таких як перемикачі (checkbox)
/*вид тексту label із відкритими блоками із їх вмістом*/ .hide:checked + label { color: gray; border-bottom: 0; } /*вид блоків із їх вмістом після відкриття*/ .hide:checked + label + div { display: block; width: 300px; background: #efefef; box-shadow: inset 3px 3px 10px #7d8e8f; /*Можливі ще такі ефекти:*/ /*-moz-box-shadow: inset 3px 3px 10px #7d8e8f;*/ /*-webkit-box-shadow: inset 3px 3px 10px #7d8e8f;*/ padding: 10px; }