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