×
Фото CSS — стили

CSS — стили

Гораздо позднее, чем HTML, появились каскадные таблицы стилей — CSS. Во времена беззакония и хаоса, когда у каждого браузера были свои свистелки и способы «сделать красиво», консорциум W3C принял рекомендацию CSS1.

Гораздо позднее, чем HTML, появились каскадные таблицы стилей — CSS. Во времена беззакония и хаоса, когда у каждого браузера были свои свистелки и способы «сделать красиво», консорциум W3C принял рекомендацию CSS1.

Особенностью CSS были:

  1. Независимость от браузера (свободная).
  2. Каскадность — то есть свойства наследовались на дочерние теги (те, что лежали внутри тех, на которые написаны правила).

Вернёмся к инструментам веб-разработчика и обратим внимание на вкладку «Styles».

Там будут те самые описания стилей — CSS, которые применены к выбранном элементу (тегу). Например, там есть простое правило, задающее цвет фона тега <body> — то есть самой страницы:

body {
  background: #f1f1f1;
}

Пару слов о цвете

Цвет задан в шестнадцатеричном коде. Его можно разбить на 3 части: «f1», «f1», «f1». Каждая из этих частей отвечает за насыщенность определённого цвета спектра RGB — красный, зелёный и синий.

Таким образом, самый красный цвет, который вы можете использовать —  #FF0000, зелёный — #00FF00, синий — #0000FF. Сумма их — это белый — #FFFFFF.

То есть наш фон «почти белый, слегка сероватый».

Наследование правил CSS

Хорошо, предположим, мы написали следующий html-код:

<div style="color: #22cc66; border: 1px solid black; padding: 10px;">
  Просто текст цвета div-правила.
  
  <h3>Пример наследования цвета текста</h3>
 
  <p style="color: #555555">
    Пример переопределения цвета.
  </p>
</div>

Получим:

Просто текст цвета div-правила.

Пример наследования цвета текста

Пример переопределения цвета.

Давайте разбираться, что же мы написали:

  1. Элемент «пустышка» div — не имеет никакого семантического смысла, используется, когда надо сделать какой-то блок, но в рамках документа он не представляет какого-то глубокого смысла. Тот же h3 — заголовок, p — параграф, а div… просто блок.
    • В div-е мы написали атрибут style, который используется для указания CSS-стилей элемента в самом элементе (inline описание). В атрибуте style мы указали 3 css правила:
      1. color: #22cc66 — цвет текста внутри элемента (светло-зелёный);
      2. border: 1px solid black — рамка элемента, в данном случае — составное правило, означающее: рамка толщиной в 1 пиксель, цельная, чёрного цвета (да, вместо #000000 можно написать black);
      3. padding: 10px — сделать отступ внутри элемента, чтобы до рамки было 10 пикселей.
  2. Текст внутри div, который, как мы и заказывали — зелёный.
  3. Заголовок 3-го уровня (h3). Он без стилей, лежит в div со стилем ⇒ наследует цвет. border и padding он не наследовал от div потому что… так придумали создатели CSS. Вы скоро привыкнете.
  4. Параграф (p), в нём задан атрибут style, где определён color (серенький). Но <p> лежит в <div>, который тоже определяет color… Побеждает тот, кто последний определил, то есть <p>.

Домашнее задание:

Узнать, как использовать следующие css-правила (часто используемые) и применить их на своей соц. страничке, которую мы верстали на первом занятии. То есть перейти от табличной вёрстки к div-ной.

text-align

Выравнивание текста по горизонтали в пределах данного элемента

margin

Задает величину  отступа от каждого края элемента

font-family

Определяет, каким шрифтом (например, «Times New Roman») будет оформлен текст

font-size

Задается размер шрифта (например, 14px)

font-style

Это свойство определяет какой будет шрифт — обычный курсив или наклонный

height

Задает высоту данного блока (например, img)

widht

Задает ширину данного блока (например, img)

max-height

Задает максимальную высоту данного элемента

max-widht

Задает максимальную ширину данного элемента

min-height

Задает минимальную высоту данного элемента

min-widht

Задает минимальную ширину данного элемента

border-radius

Добавляет скругленные уголки данному элементу (скруглённое фото — это модно!)

padding

Данное свойство определяет размер отступа вокруг элемента

 

Будь первым – оставь комментарий!

Фото HTML — базовая верстка
Предыдущая запись:
HTML — базовая верстка
Фото Расположение элементов на странице
Следующая запись:
Расположение элементов на странице