Skip to content

README.ru.md

Latest commit

 

History

History
273 lines (203 loc) · 8.15 KB

README.ru.md

File metadata and controls

273 lines (203 loc) · 8.15 KB

CSS

Полезные ссылки

  1. CSS (w3schools)
  2. Валидатор

Подключение и применение

  1. В качестве атрибута в любом html-элементе <span style="…">…</span>
  2. В html-элементе <style>…</style> (чаще всего внутри <head>…</head>)
  3. Во внешнем файле *.css, подключается в HTML с помощью кода <link rel="stylesheet" href="путь/к/файлу.css" />
    • браузер кеширует → быстрее загружается
    • HTML отдельно от CSS → легче читается

Синтаксис

селектор {
	свойство-1: значение-1;
	свойство-2: значение-2;
	свойство-3: значение-3-1 значение-3-2 … значение-3-M;
	…
	свойство-N: значение-N;
}
  1. Селектор — указание на соответствующий HTML-элемент;
  2. Свойство — параметр визуального оформления;
  3. Значение — значение визуального оформления.

Пример

Селекторы Info

Селекторы элементов

  • совпадает с название тега (без угловых скобок);
  • определяет внешний вид для всех заданных элементов.
p {
	…
}

Селекторы классов

  • начинается с .
  • оформляет группу элементов

Пример

.red {
	…
}

ID селекторы

  • наичнаются с #
  • ссылаются на уникальный элемент
  • в HTML не может использоваться больше одного раза

Пример

#info {
	…
}

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

Сложные селекторы Info

Контекстные селекторы

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

Пример

p span {
	…
}

Child-селектор

Выбирает элементы, которые находятся непосредственно внутри другого элемента (прямые потомки).

Пример

p > span {
	…
}

Соседние селекторы

Выбирает элементы, которые стоят за элементом, на одном уровне.

Пример

Ближайший сосед

a + span {
	…
}

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

Абсолютные

  • px (используется чаще всего)
  • cm
  • mm
  • in
  • pt

Относительные

  • em
  • rem
  • %

Пример: размер элемента

<div class="myelmt">…</div>
.myelmt {
	width: 100px;
	height: 50px;
}

Цвета

Системы счисления info

Указание цветов:

  • RGB

    • В HEX формате
      • 6 цифр, пример #AF89D1 или #af89d1
      • 3 цифры (если в каждой паре одинаковые цифры), пример #AA88DD можно предстваить как #A8D или #a8d
    • rgb(N, N, N) c тремя десятичными цифрами
    • rgba(N, N, N, N) c тремя десятичными цифрами и уровнем полупрозрачности (дробное значение от 0 до 1)

  • название цвета

    • red
    • lightblue и т. п.
    • info

Фон info

background: [color] [image] [repeat] [attachment] [position]
  • background
    • color
    • image
    • repeat
    • attachment
    • position
  • background-size (отдельно)

Пример

Текст info

Цвет

color: #FF00AC

Свойства текста

text-align: left|right|center|justify|initial|inherit;
text-decoration: none|underline|overline|line-through|initial|inherit;
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
text-indent: 0|vērtība px/em/rem/% utt.|initial|inherit;

line-height: normal|number|length|initial|inherit;
vertical-align: baseline|vērtība px/em/rem/% utt.|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

letter-spacing: normal|vērtība px/em/rem/% utt.|initial|inherit;
word-spacing: normal|vērtība px/em/rem/% utt.|initial|inherit;

Шрифт info

Общее свойство для указания параметров шрифта.

font: [[font-style] [font-variant] [font-weight]] font-size/line-height font-family|initial|inherit;

Отдельные свойства:

font-style: normal|italic|oblique|initial|inherit;
font-variant: normal|small-caps|initial|inherit;
font-weight: normal|bold|initial|inherit;
font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|vērtība px/em/rem/% utt.|initial|inherit;
font-family: название|"название из нескольких слов"|initial|inherit;

Пример

Списки info

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

list-style: list-style-type list-style-position list-style-image

Отдельные свойства:

  1. list-style-type — тип маркера, возможные значения:
    • для ненумерованных списков: circle, square, disc (по умолчанию)
    • для нумерованных списков: decimal (по умолчанию), lower-alpha, lower-roman, upper-alpha, upper-roman utt. — sk. info
  2. list-style-position — значения: outside (по умолчанию), inside — info
  3. list-style-image — картинка как маркер, info, vērtības: none (по умолчанию) или url("путь/к-файлу.ext")

Piemērs:

<ul class="my-circle">
	<li>Lorem</li>
	<li>Ipsum</li>
	<li>Dolor</li>
</ul>
ul.my-circle {
  list-style-type: circle;
}