Урок 19 из 26
В прогрессе

19) Вёрстка блок team, calc, псевдоэлементы

1) Вёрстка блока team

2) calc

3) псевдоэлементы


calc

Описание

Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер. Это позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений, например, можно задать 100% — 20px. Если значение не может быть вычислено, оно игнорируется.

Синтаксис

свойство: calc(выражение)

Значения

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

  • + — сложение (width: calc(20px + 20px));
  • — — вычитание (padding: calc(10% — 10px););
  • * — умножение (height: calc(20%*2);)
  • / — деление. На ноль делить запрещено (width: calc(100%/3);).

Знаки плюс и минус должны отбиваться пробелами с двух сторон.

Пример:

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>		
   div {
    border: 1px solid #000;
    height: 200px;
    background: url(images/figure.jpg) no-repeat;
    background-position: calc(100% - 20px) 0;
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

 

Псевдоэлементы

Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца.

p::first-line {
  color: blue;
  text-transform: uppercase;
}

::first-letter (:first-letter)

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

/* Стили для первой буквы элемента <p> */
p::first-letter {
  font-size: 130%;
}

::marker

Псевдоэлемент ::marker применяет стили к маркеру элемента списка, которые обычно содержит значок или номер. Работает с любым элементом или псевдоэлементом, к которого установлен display: list-item, например, у такого как <li> или <summary>.

::marker {
  color: blue;
  font-size: 1.2em;
}

Задание

Вёрстка блок team