ИнтернетПохожие презентации:
Тема 1.3.2 Каскадные таблицы стилей
1. Основы web-технологий Каскадные таблицы стилей (CSS)
2.
Единицы измеренияВ CSS имеются два вида единиц измерения:
Абсолютные – имеют фиксированный размер и не зависят от
устройства или браузера пользователя: px, cm, mm, pt, pc, In
Относительные – имеют значения относительно других
величин: %, em, rem, ex, ch, vh, vw, vmin, vmax
3.
Абсолютные единицы измеренияpx (пиксели) – физические пиксели экрана.
cm (сантиметры) – 38 пикселей равны одному сантиметру.
mm (миллиметры) – 3,8 пикселей равны одному миллиметру.
pt (пункты) – 4/3 пикселя равны одному пункту.
pc (пики) – 16 пикселей равны одному пику.
in (дюймы) – 96 пикселей равны одному дюйму.
Чаще всего используются пиксели (px).
4.
Относительные единицы измерения% – проценты, размер элемента определяется в процентах от
размера родительского элемента.
em – значение относительно текущего размера шрифта.
Часто используется для задания размера шрифта.
rem – значение относительно размера шрифта (font-size)
корневого элемента (<html>). Используется по аналогии с em.
ex – значение относительно высоты символа «x».
ch – значение относительно ширины символа «0».
5.
Относительные единицы измеренияvh – значение относительно высоты области просмотра
(viewport), значения от 0 до 100.
vw – значение относительно ширины области просмотра
(viewport), значения от 0 до 100.
vmin – значение относительно меньшего значения vh или vw,
значения от 0 до 100.
vmax – значение относительно большего значения vh или vw,
значения от 0 до 100.
6.
Селекторы по атрибутуСелектор по атрибуту отбирают элементы по наличию
атрибута или его значения:
[attr] – обозначает элемент с атрибутом по имени attr
[attr=value] – обозначает элемент с атрибутом по имени attr и
значением value
[attr~=value] – обозначает элемент с атрибутом по имени attr,
значением которого является набор слов, одно из которых
равно value
7.
Селекторы по атрибуту[attr|=value] – обозначает элемент с атрибутом по имени attr,
значение которого является value или value- .
[attr^=value] – обозначает элемент с именем атрибута attr,
значение которого начинается с “value”
[attr$=value] – обозначает элемент с именем атрибута attr,
значение которого заканчивается на “value”
[attr*=value] – обозначает элемент с именем атрибута attr,
значение которого имеет одно вхождение строки “value” как
подстроки
8.
ПсевдоклассыПсевдоклассы – это специальные ключевые слова, которые
позволяют применять стили к определенным состояниям,
характеристикам или положению элементов на веб-странице.
Пример:
a:hover {
background-color: blue;
color: white;
}
При наведении курсора на ссылку – фон станет синим, а
текст белым
9.
ПсевдоэлементыПсевдоэлементы – это специальные ключевые слова,
которые используются стилизации указанных частей
элемента.
Пример:
p::before {
content: "Примечание: ";
font-weight: bold;
color: red;
}
10.
Псевдоэлементы::before — вставка контента перед содержимым элемента;
::after — вставка контента после содержимого элемента;
::first-line — применение стилей к первой строке текста;
::first-letter — применение стилей к первой букве текста;
::placeholder — стилизация текста в элементах <input> и
<textarea>;
::selection — стилизация выделения текста.
11.
DOMDOM-дерево (Document Object Model) – это структура, которая
представляет собой иерархическое представление HTMLдокумента, состоящее из узлов и связей между ними.
Узел – это элемент на HTML-странице, имеющий набор свойств
методов, доступные через API DOM.
Связи – это отношения между узлами:
(родитель-потомок), соседние (соседние узлы).
иерархические
12.
13.
КаскадКаскад – это алгоритм разрешения конфликтов, когда к
элементу HTML применяется несколько правил CSS.
Этапы каскадного алгоритма:
1. Положение и порядок появления
2. Специфичность
3. Оригинал
4. Важность (important)
14.
Свойства по умолчаниюСвойства по умолчанию (user agent) – это стандартные
значения, которые применяются к элементам до того, как будут
заданы свои собственные стили.
Свойство initial является начальным значением, не зависит от
типа HTML-элемента.
Браузеры имеют свои стили, применяемые HTML-элементам без
значений CSS-свойств.
Свойство inherit позволяет применить унаследованные значения
от родительского элемента.
15.
СпецифичностьКаждое правило селектора оценивается в баллах. Если у
селектора больше баллов, чем у текущего правила – оно
отменяется.
Система расчета: 0.0.0
Селекторы по идентификатору увеличивают первую цифру
Селекторы по классу, атрибуту или псевдоклассу увеличивают
вторую цифру
Селекторы по тегу или псевдоэлемент увеличивают третью
цифру
16.
Наследование стилейНаследование стилей CSS – это механизм, при котором
вложенные элементы могут наследовать стили своих элементовконтейнеров.
Потомок – это элемент, который находится внутри другого
элемента (родителя). Может иметь стили родителя и свои
собственные.
Родитель – это элемент, который содержит потомков.
17.
18.
Свойства по умолчаниюНеобходимо расписать следующие пункты:
1. Ключевое слово unset, разница между inherit и initial
2. Ключевое слово revert