Шаг 3: CSS

С помощью css стилей можно менять все параметры отображения тегов. Класс это связка типа селектор { правила  }. В фигурных скобках перечисляются правила вида имя правила через » : » (двоеточие) значение и в конце » ; » (точка с запятой).

div{
	width: 100%;
	height: 200px;
	padding: 5px;
}

Селектор — сообщает браузеру какой html объект использовать, к тегу можно обратится по:

  • по имени тега, например: div{ .. }
  • по классу (атрибут class) через символ » . » (точка) например: .email{ … }
  • по ид (атрибут id) через символ # (решетка) например: #email{ … }
  • по любому другому атрибуту [name=«email»]{ … }

Вот как выглядит html код:

<div class="email" id="email" name="email">

В фигурных скобках указывается правила которые будут применены к данному html элементу. Если правил несколько, то они разделяются пробелами. Если правило состоит из нескольких слов (например название шрифта), или пути (например для задания картинки фона), то эти правила берутся в кавычки « «. Эти правила наследуются, т.е. их принимают дочерние (вложенные) элементы, если для них не указаны другие правила. Например span наследует размер шрифта (20px) родительского div, а b установили явно 14px:

div{ font-size: 20px; }
b{ font-size: 14px; }
<div>
    <span> Я спан </span>
    <b> А я жирный </b>
</div>

Значения которые могут приобретать правила:

  • текстовое значение правила, например none или left
  • px — пикселях
  • % — процентах
  • em — символах, равен размеру шрифта в данного элемента например если размер шрифта 16px значит 1em=16px
  • #19a0f0 или #20f — hex представление цвета в 16-тиричной системе (от 0 до f), соответствует примеси цветов в порядке rgb: r- красный, g — зеленый, b — синий. Каждому цвету может соответствовать либо 1 либо 2 символа, в нашем примере: красному соответствует 19 или 2, зеленому — a0 или a и красному f или f0.
  • rgb(255,100,51) или rgba(10,200,100,0.5) — другое представление цвета цифровое от 0 до 255, порядок цифр соответствует цветам как в предыдущем примере. a на конце rgba, указывает прозрачность (альфа) в числовом представлении процентов, т.е. от 0 (полностью прозрачный) до 1 (не прозрачный), в нашем примере прозрачность 0.5 — 50%. Важно учитывать прозрачность через символ . (точка), т.к. запятая используется как разделитель между правилами (как в функции).

Вот имена правил которые можно менять:

  • width — ширина блока, в (px,%)
    • mix-width и max-width — устанавливают предельные размеры елемента.
  • height — высота блока, идентичен width 
  • color — цвет текста (hex, rgb)
  • background — цвет фона, может принимать в качестве значения путь до изображения url().
  • border — граница
  • margin — отступ снаружи блока, значения указываются в (px,%,em) имеет 3 вида значения 1, 2 и 4:
    • margin: 10px; — отступ со всех 4х сторон
    • margin: 20px 30px; — первое значение отступов сверху и снизу (20px), второе слева и справа (30px).
    • margin: 5px 10px 15px 20px; — перечисление всех сторон по кругу (по часово стрелки) сверху, справа, снизу, слева.
  • margin-left, margin-right, margin-top, margin-bottom — принимает 1 значение указывает соответствующий отступ.
  • padding — отступ внутри блока, идентичен margin.
  • font — имеет множество разновидностей заполнения. Обязательно нужно передать 2 параметр размер и название шрифта, дополнительно можно указать жирность, курсив, межстрочное расстояние: 
    • font: bold italic 12px/14px «Times new Roman» — жирный курсивный 12 размера 14 межстрочный интервал, шрифт семейства «Times new Roman».
    • font-family: «Arial, serif» — указывает семейство шрифта, можно несколько, если вдруг у пользователя данный шрифт отсутствует или не загрузился по каким либо причинам
    • font-size: 1.2em — размер шрифта, в нашем случае увеличить на 20% от размера родительского шрифта
    • font-weight — жирность шрифта, можно указать числом (200, 400, 700), а можно и названием (bold, normal, bolder).

Все что есть у html элемента можно изменить, в том числе и его тип. Например можно сделать таблицу из <div> блоков, полностью соответствующую <table>. Это приводит нас к тому, что html для нас всего лишь заготовки, из которых мы лепим очередной «шедевр».

Стили следует устанавливать до загрузки элементов html. Обычно их устанавливают в head. Также стили можно указать непосредственно через атрибут style=»«.

<div style=» width: 100px; height: 50px; «> </div>

Задание:

  • Найти правила для background, в том числе вписание, позиционирование и градиент.
  • Найти правила для margin, padding, border и разобраться с отличием.
  • Найти правила для font.