Theory and Tasks for Students - Spring 2019
Примеры стилей CSS

Стили - пара из названия стиля и его значения, применяется ко всем элементам, которые попадают в результирующую выборку селектора и обновляются при изменении документа(добавление новых элементов, удаление старых, изменение классов и идентификаторов и т.д.). Некоторые стили имеют сокращённое название, с помощью которого через пробел можно задать значения для нескольких "длинных" стилей этого семейства. Существует огромное множество различных стилей, подробную информацию по ним можно посмотреть на MDN Web Docs, Web Reference, W3Schools и других современных ресурсах.

Шрифты

Семейство стилей font позволяется указывать название шрифта, его размер, стиль, толщину и вариацию; все значения наследуются дочерними элементами.

  • font-family - список названий семейств шрифтов, использоваться будет самый первый(левый), имеющийся у клиента - также доступны значения: serif шрифт по умолчанию с засечками, sans-serif шрифт без засечек, monospace моноширинный, cursive курсивный/каллиграфический шрифт, fantasy декоративный шрифт, system-ui шрифт системного интерфейса;
  • font-size - размер шрифта, значение по умолчанию может отличаться у разных элементов;
  • font-style - стиль шрифта, normal | italic | oblique;
  • font-weight - толщина шрифта, normal | bold | lighter | bolder; или число сотен - значение normal эквивалентно 400, bold - 700;
  • font-variant - вариация шрифта, обычно применяются только значения normal | small-caps.
.class-1 { font: small-caps 30px FiraSans, fantasy; /* равносильно * font-variant: small-caps; * font-size: 30px; * font-family: FiraSans, fantasy; */ } .class-2 { font-style: italic; } .class-3 { font-family: Verdana; font-weight: bold; font-variant: normal; } <div class="class-1"> class-1 <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-1
class-2
class-3

Высота строки

line-height - задаёт высоту строки текста, безразмерные значения равносильны процентам и задают размер строки относительно размера шрифта. Значение по умолчанию примерно равно 1.2; наследуется дочерними элементами.

.class-1 { line-height: 1; } .class-2 {} .class-3 { line-height: initial; } <div class="class-1"> class-1 <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-1
class-2
class-3

Выравнивание текста

text-align - выравнивает строчные и строчно-блочные дочерние элементы соответственно значениям left | right | center | justify, существуют и другие экспериментальные значения. Значения наследуются дочерними элементами.

.class-1 { text-align: center; } .class-2 {} .class-3 { text-align: right; } <div class="class-1"> class-1 <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-1
class-2
class-3

Капитализация текста

text-transform - позволяет конвертировать символы текста в соответствующие им маленькие или большие, none | capitalize | uppercase | lowercase, значения наследуются дочерними элементами.

.class-1 { text-transform: capitalize; } .class-2 {} .class-3 { text-transform: uppercase; } <div class="class-1"> class-1 <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-1
class-2
class-3

"Украшение" текста

Семейство text-decoration добавляет линию к тексту и позволяет управлять её положением, цветом и стилем, сразу применяется ко всем дочерним элементам:

  • text-decoration-line - положение линии, none | underline | overline | line-through;
  • text-decoration-style - стиль линии, solid | double | dotted | dashed | wavy;
  • text-decoration-color - цвет линии;
.class-1 { text-decoration: underline overline dashed gold; /* равносильно * text-decoration-line: overline underline; * text-decoration-style: dashed; * text-decoration-color: gold; */ } .class-2 { text-decoration: none; } .class-3 { text-decoration: line-through; } <div class="class-1"> class-1 <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-1
class-2
class-3

Цвет текста

color - задаёт цвет шрифта в элементе, наследуется дочерними элементами, а <html> имеет значение black.

.class-1 { color: gold; } .class-2 {} .class-3 { color: #448800; } <div class="class-1"> class-1 <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-1
class-2
class-3

Фон

Семейство background - задаёт фон элемента в виде цвета и/или картинок, позволяет управлять их повторением и позицией, по умолчанию имеет значение none:

  • background-color - цвет фона;
  • background-image - картинка фона - ссылка через функцию url() или градиент;
  • background-position - местоположение картинки, указывается как одно/два значения размера или одно/два слова, обозначающие стороны [top | bottom] | [left | right];
  • background-size - размер фона, один/два значения размера или слова auto | contain | cover;
  • background-repeat - значения repeat | repeat-x | repeat-y | no-repeat - управляет повтором картинки по горизонтали и вертикали;
.class-1 { background: gold; /* равносильно * background-color: gold */ } .class-2 { background: url("./pattern.png") repeat-x bottom right, #282; height: 120px; /* равносильно * background-image: url("./pattern.png"); * background-repeat: repeat-x; * background-position: bottom right; * background-color: #282; */ } .class-3 { background: rgba(0, 0, 255, 0.5); } <div class="class-1"> class-1 <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-1
class-2
class-3

Тень текста

text-shadow - задаёт одну или несколько теней через запятую. Каждая тень определяется смещением по осям X и Y, радиусом размытия и цветом, синтаксис - <offset-X> <offset-Y> [<blur-radius>] <color>.

.class-1 { text-shadow: 8ch 0px 0px gold; } .class-2 {} .class-3 { text-shadow: 0px 0px 2px #fff, 2px -2px 6px black; } <div class="class-1"> class-1 <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-1
class-2
class-3

Тень элементам

box-shadow - задаёт одну или несколько теней "коробки" всего элементам через запятую. Каждая тень определяется смещением по осям X и Y, радиусом размытия, параметром распространения(расширения) и цветом, синтаксис - <offset-X> <offset-Y> [<blur-radius>] [<spread>] <color>.

.class-1 { box-shadow: 0px 0px 10px 10px gold; } .class-2 {} .class-3 { box-shadow: 2px 2px 2px black, -2px -2px 2px red; } <div class="class-1"> class-1 <div class="class-2"> class-2 </div> <div class="class-3"> class-3 </div> </div>
class-1
class-2
class-3