Skip to content

Latest commit

 

History

History
731 lines (471 loc) · 45.7 KB

CSSPart1.md

File metadata and controls

731 lines (471 loc) · 45.7 KB
Raw

CSS Part-1

  • Основы CSS.

    ⦁ Объявление стилей

    ⦁ Способы задания стилей

    ⦁ Комментарии в CSS

  • Селекторы CSS

    ⦁ Псевдоклассы

    ⦁ Структурные псевдоклассы

    ⦁ Структурные псевдоэлементы

    ⦁ Комбинирование и группировка селекторов

    ⦁ Наследование свойств

    ⦁ Каскад (“вес селекторов”)

  • Текст. Форматирование текста

    ⦁ Подключение внешних шрифтов

  • Списки

  • Фон

  • Вставка видео- и аудио- файлов

  • Таблицы

  • Единицы измерения

☘ 1. Основы CSS (часть 1)

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

Объявление стиля состоит из двух частей: элемента веб-страницы — селектора, и команды форматирования — блока объявления.

НЕТ ИЗОБРАЖЕНИЯ

Вы можете прочитать это так: кто { что: как; }

Такой блок называется «CSS-правило». Каждое CSS-правило содержит хотя бы один селектор и свойство.

CSS представляет собой процесс из трех частей:

⦁ селектор определяет, на какой элемент или элементы нацелиться;

⦁ свойство определяет характеристики для изменения;❗

⦁ значение определяет, как изменить эту характеристику.

h2 {
		    font-size: 28px;
	 }

❗ значение отделяется от имени двоеточием;

❗ каждая пара свойство: значение заканчивается точкой с запятой;

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

👉Пример:

<nav class="main-menu">
    <a href="#">About</a>
    <a href="#">Team</a>
    <a href="#">Contacts</a>
</nav>
.main-menu {
   background-color: black;
   font-family: Arial;
   font-size: 16px;
}
.main-menu a {
   text-decoration: none;
   color: white;
}

Здесь для элемента с классом main-menu установлен черный цвет фона ( background-color: black ), семейство шрифта (font-family: Arial ) и размер шрифта (font-size: 16px)

Для дочерних элементов <a> элемента с классом main-menu отменяется подчеркивание текста ( text-decoration: none ) и устанавливается белый цвет текста ( color: white ) и размер шрифта ( font-size )

☘ Способы задания стилей:

⦁ Внешняя таблица стилей - текстовый файл с расширением .css, в котором находится набор CSS-стилей элементов. Она подключается к веб-странице с помощью тега <link>. Лучше подключать стили внутри <head>, но это необязательно. Тег <link> будет работать и в другом месте страницы.
К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя последовательно несколько тегов <link>, указав в атрибуте тега media назначение данной таблицы стилей (https://msiter.ru/references/html-reference/link/media). rel="stylesheet" указывает тип ссылки (ссылка на таблицу стилей).

<head>
<link media="all" rel="stylesheet" href="css/main.css">
<link media="all" rel="stylesheet" href="css/assets.css">
	</head>

Преимущества внешних CSS:

⦁ Меньший размер страницы HTML и более чистая структура файла.

⦁ Быстрая скорость загрузки.

⦁ Для разных страниц может быть использован один и тот же .css файл.

Недостатки внешних CSS:

⦁ Страница может некорректно отображаться до полной загрузки внешнего CSS.

  1. Внутренние стили - встраиваются в раздел <head></head> HTML-документа и определяются внутри тега <style></style>. Внутренние стили имеют приоритет над внешними, но уступают встроенным стилям (заданным через атрибут style).
<head>
   <style>
		    h2 {
		        font-size: 28px;
		        line-height: 32px;
		    }
	</style>
</head>

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

  1. Встроенные (инлайновые) - CSS-код в HTML-файле непосредственно внутри тега элемента с помощью атрибута style:
<h2 style="font-size: 32px;">Heading 2</h2>

☘ Комментарии в CSS:

Как и в HTML может быть удобно писать комментарии CSS:

👉/* Это комментарий CSS */
q,
blockquote {
  background: #fff;
  color: #fff;
}

/*
  Комментарии предназначены только для чтения людьми   и компьютер их разбирать не будет
*/

☘ 2. Селекторы CSS

Селекторы указывают на элементы веб-страницы, к которым будут применены атрибуты стиля, заключенные в фигурных скобках

Какие бывают селекторы:

⦁ универсальными

⦁ теговый селектор (селектором элемента)

⦁ классовый селектор

⦁ селектор идентификатора

⦁ селектор потомка

⦁ дочерний селектор

⦁ соседний селектор

⦁ родственный селектор

⦁ селектор атрибута

⦁ селектор псевдокласса

⦁ селектор псевдоэлементов

Селекторы можно комбинировать, записывая последовательно, без пробела:

⦁ .c1.c2 – элементы одновременно с двумя классами c1 и c2

⦁ a#id.c1.c2:visited – элемент a с данным id, классами c1 и c2, и псевдоклассом visited

Почитать еще можно тут

⦁ ➥ Универсальный селектор (*)

Соответствует любому HTML-элементу. Например, * {margin: 0;} - обнулит внешние отступы для всех элементов сайта.

Также селектор может использоваться в комбинации с псевдоклассом или псевдоэлементом: *:after {CSS-стили}, *:checked {CSS-стили}.

2 ➥ Теговый (селектор элемента) - позволяет задавать стили для всеx элементов данного типа (тега);

Синтаксис: a

ul {
	    background-color: black;
	}

3 ➥ Селектор класса - позволяет задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы. !!! Вы можете использовать любое имя для вашего класса, но оно не должно начинаться с цифры. Синтаксис: .a

html:   <div class=”main-nav”>...</div>
css       .main-nav {
	 	   background-color: black;
		}

4 ➥ Селектор идентификатора - позволяет задавать стили для конкретного элемента (id должен быть уникальным!);

Синтаксис: #a

html:   <div id=”nav”>...</div>
css       #nav {
 		        background-color: black;
		}

5 ➥ Селектор потомка - позволяет задавать стили к элементам, расположенным внутри элемента-контейнера;

Синтаксис: a b

html:   <div class=”main-nav”>
<a href=”#”>Link</a>
</div>
css 	.main-nav a {
		    background-color: black;
		}

6 ➥ Дочерний селектор - позволяет задавать стили к элементам, которые являются прямыми потомкам (т.е. идут сразу за родительским элементом и между ними нет других элементов);

Синтаксис: a > b

html:   <div class=”wrap”>
<p>text with font-size 28px</p>
<div>
	    <p>text</p>
</div>
</div>
css:	.wrap > p {
		    font-size: 28px;
		}

7 ➥ Cоседние селекторы - выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.

Синтаксис: a + b
Пример: селектор ul + li выберет любой <li> элемент, который находится непосредственно после элемента <ul>.

8 ➥ Родственные селекторы - выбирает элементы, которые находятся после указанного элемента, если у них общий родитель.

Синтаксис: a ~ b
Пример: p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя.

9 ➥ Cелектор атрибута - позволяет задавать стили к элементам на основе имени атрибута или значения атрибута;

Синтаксис: a[attr=”value”]

input[type=”text”] {
 	font-size: 28px;
	}

❗ Селекторы можно объединять, группировать, чтобы добиться желаемого результата

Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:

. .
[атрибут] все элементы, содержащие указанный атрибут, [alt] — все элементы, для которых задан атрибут alt
селектор[атрибут] элементы данного типа, содержащие указанный атрибут, img[alt] — только картинки, для которых задан атрибут alt;
селектор[атрибут="значение"] элементы данного типа, содержащие указанный атрибут с конкретным значением, img[title="flower"] — все картинки, название которых содержит слово flower;
селектор[атрибу~="значение"] элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p[class~="feature"] — абзацы, имя класса которых содержит feature;
селектор[атрибут|="значение"] элементы, список значений атрибута которых начинается с указанного слова, p[class|="feature"] — абзацы, имя класса которых feature или начинается на feature;
селектор[атрибут^="значение"] элементы, значение атрибута которых начинается с указанного значения, a[href^="http://"] — все ссылки, начинающиеся на http://;
селектор[атрибут$="значение"] элементы, значение атрибута которых заканчивается указанным значением, img[src$=".png"] — все картинки в формате png
селектор[атрибут*="значение"] элементы, значение атрибута которых содержит в любом месте указанное слово, a[href*="book"] — все ссылки, название которых содержит book.

☘ Псевдоклассы

Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Примеры псевдоклассов:

⦁ :link — не посещенная ссылка;

⦁ :visited — посещенная ссылка;

⦁ :hover — любой элемент, по которому проводят курсором мыши;

⦁ :focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

⦁:disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

⦁ :not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not([type="submit"]);

⦁ :checked — выделенные (выбранные пользователем) элементы формы.

☘ Структурные псевдоклассы

Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром. ⦁ :nth-child(odd) — нечётные дочерние элементы;

⦁ :nth-child(even) — чётные дочерние элементы;

⦁ :nth-child(3n) — каждый третий элемент среди дочерних;

⦁ :nth-child(n+2) — выбирает все элементы, начиная со второго;

⦁ :nth-child(-n+2) - первые 2

⦁ :nth-child(3) — выбирает третий дочерний элемент;

⦁ :first-child — позволяет оформить только самый первый дочерний элемент тега;

⦁ :last-child — позволяет форматировать последний дочерний элемент тега;

⦁ :only-child — выбирает элемент, являющийся единственным дочерним элементом;

⦁ :empty — выбирает элементы, у которых нет дочерних элементов;

Почитать можно и тут

Потренироваться в использовании можно тут

☘ Структурные псевдоэлементы

⦁ ::first-letter — выбирает первую букву каждого абзаца;

⦁ ::first-line — выбирает первую строку текста элемента;

⦁ ::before — вставляет генерируемое содержимое перед элементом;

⦁ ::after — добавляет генерируемое содержимое после элемента.

 p:before {
    		content: 'read-this';
   		display: block;
	}

☘ Комбинирование и группировка селекторов Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

a[href][title] {
	    color: red;
	}

Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:

p,
	span {
  	  color: black;
	}

Иерархия селекторов

Пробел в селекторе определяет отношение предок/потомок. Скажем, мы хотим, чтобы ссылки в нашем заголовке были красного цвета:

header a {
		color: red;
	}

Это можно читать справа налево как: «выбрать все элементы <a>, которые находятся внутри элемента <header>». Это заставит все другие ссылки (которые не в заголовке) оставаться неизменными.

Чем длиннее ряд селекторов, тем дольше обрабатывается CSS-свойства.

☘ 4. Наследование

Наследование - механизм, с помощью которого определенные свойства передаются от предка (родителя) к его потомкам. Наследуются свойства, относящихся к текстовому содержимому страницы, таких как color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform...

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

☘ Каскад (”вес” селекторов)

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

1) правило !important (самый сильный приоритет):

h3 {
 		font-size: 20px !important;
	}

2) специфичность (”вес” селектора):

. . .
/* tag name - 1 */ /* class - 10 */ /* id - 100 */
p {font-size: 20px;} .class {font-size: 20px;} #id {font-size: 20px;}

3) порядок - чем ниже находится селектор по коду, тем его вес выше

p {
		font-size: 20px;  
	}

	p {
  		 font-size: 22px;  
	}

☘ 6. Текст. Форматирование текста.

https://html5book.ru/css-text/

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

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

👉Горизонтальное выравнивание - text-align

(пример можно посмотреть тут: https://codepen.io/OlgaMaslova/pen/KJGRqO?editors=1100)

. .
left Выравнивание по левому краю элемента. Значение по умолчанию для языков, в которых чтение происходит слева-направо.
right Выравнивание по правому краю элемента.
center Выравнивание по центру элемента, управляет выравниванием содержимого, а не самих элементов. Центрирует каждую строчку текста элемента.
justify Выравнивание по ширине элемента. В выровненном по ширине тексте оба конца строки прижимаются к левому и правому краям родительского элемента. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
Свойство выравнивает строки текста внутри блока по ширине относительно его границ. 
p {text-align: left;}
	  p {text-align: right;}
	  p {text-align: center;}
👉Высота строки line-height

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

Допустимые значения: px / число / % / normal / initial / inherit

h1 {
    		font-size: 16px;
   		 line-height: 20px;
	}

НЕТ ИЗОБРАЖЕНИЯ

👉Вертикальное выравнивание - vertical-align

(пример можно посмотреть тут: https://codepen.io/OlgaMaslova/pen/omadZe?editors=1100)

Применяется только к строчным элементам, к изображениям и полям форм. Не выравнивает содержимое блочного элемента.

Допустимые значения: baseline / sub / super / top / text-top / middle / bottom / text-bottom / длина / initial / inherit

👉Обработка пробелов white-space

Свойство обрабатывает пробелы между словами и переносы строк внутри элемента. Не наследуется.

Возможные значения .
normal Значение по умолчанию.Повторяющиеся пробелы и разрывы строк игнорируются, текст переносится по обычным правилам
nowral Повторяющиеся пробелы и разрывы строк игнорируются, причем разрывы строк подавляются даже тогда, когда текст выходит за границы контейнера
pre Текст выводится "как есть", т.е. выводятся повторяющиеся пробелы и переводы строк, а перевод строки при переполнении ширины контейнера не работает
pre-line Повторяющиеся пробелы игнорируются, текст переносится по обычным правилам, но перевод строки учитывается. В старых версиях браузеров поддержка не полная
pre-wrap Аналогично значению pre за исключением того, что строка переносится при переполнении ширины контейнера
👉 text-overflow

(пример можно посмотреть тут: https://codepen.io/OlgaMaslova/pen/eadEOa)

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

Для того, чтобы текст, выходящий за границу контенера, не отображался, устанавливаем значения атрибутов:

⦁ white-space: nowrap

⦁ overflow: hidden

Теперь используем атрибут text-overflow: ellipsis;

👉 Шрифты

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

Безопасными шрифтами (web-wonts) называют шрифты, вероятность поддержки которых на любом компьютере с любой установленной ОС близка к 100%.

Список безопасных шрифтов:

⦁ Arial

⦁ Arial Black

⦁ Courier New

⦁ Comic Sans MS

⦁ Georgia

⦁ Impact

⦁ Times New Roman

⦁ Trebuchet MS

⦁ Verdana

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

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

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

Например:

h2 {
      font-family:Verdana, Arial, sans-serif;
}

В CSS шрифты делятся на следующие "семейства":

⦁ Serif шрифты данного семейства имеют небольшие засечки на концах символов. Примеры шрифтов данного семейства: Times New Roman, Georgia.

⦁ Sans-Serif шрифты данного семейства не имеют засечек. Примеры: Arial, Arial Black, Trebuchet MS, Verdana.

⦁ Monospace все символы шрифтов данного семейства занимают одинаковую ширину. Примеры: Courier New.

⦁ Fantasy семейство "причудливых" шрифтов использующихся в основном для создания красочных заголовков. Примеры: Impact

⦁ Cursive семейство шрифтов рукописного начертания. Примеры: Comic Sans MS.

Свойство font-style позволяет сделать шрифт HTML элемента курсивным.

Свойство font-weight позволяет изменять толщину шрифта.

Например:

h2 {font-style:italic;}
h3 {font-weight:bold;}

Свойство font-size позволяет регулировать размер шрифта.

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

font-style_font-weight_font-size/line-hight_font-family

☘ Подключение внешних шрифтов

По умолчанию браузер может отображать только те шрифты, которые находятся в папке fonts операционной системы. Технология "@font-face" позволяет изменить путь к файлам шрифтов. Таким образом, поместив файлы шрифтов в папку с проектом и указав к ним путь, мы можем обойти существующее ограничение и использовать в проекте любые шрифты.

К сожалению, браузеры имеют не только разные представления об отображении шрифтов, но и поддерживают разные форматы: ttf, eot, woff, svg

Поэтому, что бы сделать "@font-face" кроссбраузерным, нам нужны файлы каждого шрифта в четырех форматах.

Для конвертации шрифтов мы используем специализированный сервис http://www.fontsquirrel.com, ориентированный на "@font-face". Он способен конвертировать шрифты в из форматов ttf или otf во все необходимые форматы сразу. Кроме того, Вы получаете CSS-код для подключения шрифта и рабочий пример.

Полученные шрифты складываем в отдельную папку, а в css-файле прописываем подключение к ним (учитывая путь к папке):

НЕТ ИЗОБРАЖЕНИЯ

Fonts.com - это сервис, который предоставляет шрифты в аренду из своей коллекции. Для работы с сервисом нужно зарегистрироваться. Есть небольшой набор бесплатных шрифтов, но за большую часть нужно платить. Сервис работает по технологии @font-face, единственное отличие в том, что файлы шрифта будут храниться на сервере Fonts.com.

Преимущества Fonts.com

⦁ нам больше не нужны файлы шрифтов ни на этапе конвертации ни в самом проекте;

⦁ большая коллекция платных шрифтов;

⦁ есть небольшой набор бесплатных шрифтов.

Недостатки Fonts.com

⦁ платный сервис;

⦁ шрифты подключенные с fonts.com будут работать только при просмотре с сервера и только с того домена что указан в настройках аккаунта;

⦁ для настройки необходим доступ к аккаунту клиента;

Google fonts - это открытый сервис, который предоставляет доступ к своей библиотеке бесплатных шрифтов. Сервис работает по технологии @font-face, единственное отличие в том, что файлы шрифта будут храниться на сервере Google fonts.

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

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

Код подключения сервис генерирует самостоятельно.

Преимущества google-fonts

⦁ нам больше не нужны файлы шрифтов ни на этапе конвертации, ни в самом проекте;

⦁ бесплатно.

Недостатки google-fonts

⦁ небольшая коллекция шрифтов;

Обратите внимание, что при подключении нескольких шрифтов, они разделяются символом "|". Этот код по этой причине невалиден . Этот символ можно заменить на "%7С" тогда это будет валидно.

Typekit - это сервис, который предоставляет шрифты в аренду из своей коллекции. Для работы с сервисом нужно зарегистрироваться. Есть небольшой набор бесплатных шрифтов, но за большую часть нужно платить. Сервис работает по технологии @font-face, единственное отличие в том, что файлы шрифта будут храниться на сервере Typekit.

Достоинства Typekit:

⦁ нам больше не нужны файлы шрифтов ни на этапе конвертации ни в самом проекте;

⦁ большая коллекция платных шрифтов;

⦁ есть небольшой набор бесплатных шрифтов;

Недостатки Typekit:

⦁ платный сервис;

⦁ шрифты будут работать только при просмотре с сервера и только с того домена что указан в настройках аккаунта;

⦁ для настройки необходим доступ к аккаунту клиента; https://www.w3schools.com/cssref/css_websafe_fonts.asp - тут можно посмотреть список шрифтов Web Safe Font . При написании стилей для свойства font-family должно содержать несколько имен шрифтов в качестве «резервной» системы, чтобы обеспечить максимальную совместимость между браузерами / операционными системами. Если браузер не поддерживает первый шрифт, он пытается следующий шрифт

Читаем подробнее:
https://learn.javascript.ru/css-units
https://habr.com/ru/post/280125/

☘ 7. Фон

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

property: comment
background-color Свойство устанавливает цветную заливку для любого HTML-элемента. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.
background-image Свойство устанавливает изображение в качестве фона для элемента. Фоновым изображением может быть картинка или градиент.
background-repeat Свойство определяет, каким образом будет повторяться фоновый рисунок.
background-position Свойство управляет точным расположением фонового изображения. Можно определить начальную позицию фонового изображения в виде горизонтальной и вертикальной координат посредством ключевых слов, точных абсолютных и процентных значений.
background-size Свойство позволяет масштабировать фоновое изображение по вертикали и горизонтали (background-image). Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область. С помощью этого свойства изображение также можно уменьшать по ширине и по высоте.
... ...

Для краткой записи оформления фона элементов в CSS предусмотрено свойство background.

При использовании стенографической формы записи соблюдайте следующий порядок следования свойств:

⦁ background-color

⦁ background-image

⦁ background-repeat

⦁ background-attachment

⦁ background-position

Обратите внимание: Вы можете пропускать неиспользуемые значения.

https://html5book.ru/css-background/ - тут написано о фоне все подробненько

8. ☘ Единицы измерения

⦁ px – абсолютные, чёткие, понятные;

⦁ em – относительно размера шрифта родителя;

⦁ rem - задаёт размер относительно размера шрифта элемента ;

⦁ % – относительно такого же свойства родителя;

⦁ vw – 1% ширины окна;

⦁ vh – 1% высоты окна.

При разрешении 1x одна точка равна 1 пикселю ( 1pt = 1px ) При разрешении 2x 1pt = 4px, потому что ширина 2px умножается на высоту 2px При разрешении 3x 1pt = 9px ( 3px умножается на 3px ) ... и так далее

Преимущество относительных единиц измерения rem и em заключается в том, что можно задавать внутренние и внешние отступы относительно размеров шрифта

При использовании rem все отступы будут пропорциональны базовому размеру шрифта ( заданному для корневого элемента ), т.е. отступы будут единообразны по всей странице

Если же нужно создать модуль, в котором будет свой собственный масштаб, то мы устанавливаем размер шрифта для контейнера ( родительского элемента ), а все остальные размеры задаем с помощью em

Подробнее: https://html5book.ru/edinicy-izmereniya-vh-vw-vmin-vmax/

Required: Уровень 1 (Обязательно)

⦁ Пройдите тест (!!! последние 4 вопроса есть в лекции, но о них не успели проговорить во время занятия. Можете прочитать лекцию и попробовать ответить или оставить неотвеченными).

⦁ Создайте новый проект с HTML и CSS файлами. Вставьте на страницу блок с цитатой (о теге читем тут).

Подключите CSS на созданной вами странице 3-мя способами (с помощью тега style, атрибута style и файла стилей style.css): задайте цитате 3 разных варианта цвета (синий, красный и зеленый соответственно). Проанализируйте, какой из стилей имеет наивысший приоритет.

Additionally: Уровень 2 (дополнительно к предыдущему заданию)

Создайте список <ul><li><a href=”#”>Text</a></li>...</ul> ( из 10 пунктов!). Используя стили для тегов, псевдоселекторов/псевдоклассов, сделайте так чтобы:

  • убрать list-style (чтобы перед
  • не было “точек”)
  •     первый пункт был зеленого цвета (color);

⦁ все четные элементы <li> имели ⦁ размер шрифта (font-size) 20px, остальные - 18px; ⦁ у каждого третьего элемента (начиная с 1-го !) был желтый фон (background);

⦁ уберите underline (подчеркивание) у ссылок. Пропишите стили на ховер (:hover) на ваше усмотрение

⦁ с помощью псевдоэлемента перед каждым пунктом списка <li> вставить “-”

Результат должен выглядеть так:

НЕТ ИЗОБРАЖЕНИЯ

Additionally: Уровень 3 (дополнительно к предыдущему заданию)

Создать блок.

НЕТ ИЗОБРАЖЕНИЯ

По сути это будет все большая ссылка (имага+текст). Текст - псевдоэлемент, который при ховере меняет свое значение. При ховере блок имеет вид так тут Ссылка на лого тут

Проверяем на валидаицю и отправляем ))