Урок 2. Код CSS. Селекторы. Родительские и дочерние элементы. Блочная модель.
Css (от англ. Cascading Style Sheets) - каскадные таблицы стилей. Язык, на котором описываются свойства HTML элементов. С помощью css можно изменить цвет, размер и т.д.
Вставка кода css html документ.
Код css вставляется в Html документ следующими способами:
1. С помощью атрибута style в html тэг:
<p style="color:red;">Этот параграф с красным шрифтом.</p>
2. С помощью тэга style в голове документа (в нутрии тэга <head>):
<head>
<style>
h1 {
color:brown;
}
</style>
</head>
3. Подключением отдельного файла css:
Сам файл содержащий код css:
Подключение файла css производится с помощью тэга link в голове html документа:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Здесь атрибут rel указывает, что подключается файл css, атрибут href указывает url (адрес) файла.
Синтаксис языка css.
Код css состоит из следующих элементов:
1. Селектор (от англ. select - выбирать) – буква, слово или сочетание слов, указывающие на элемент html документа. В следующей конструкции селектором является буква p.
p {
color:aqua;
}
Буква p говорит о том, что свойства css надо применить ко всему тексту, который находится внутри всех тэгов <p>.
2. Свойства. В предыдущем примере слово color – это свойство, a слово aqua – значение, которое присваивается этому свойству.
3. Фигурные скобки нужны для объединения всех свойств одного селектора.
4. Так же обратите внимание на то, как и где используются двоеточие и точка с запятой. Двоеточие разделяет свойство и значение. Точка с запятой разделяет несколько свойств, должна ставиться обязательно, даже если одно свойство. Пример:
p {
color:aqua;
background-color: azure;
}
Описание свойств для нескольких html элементов идут один за другим:
h1 {
color:brown;
}
p {
color:aqua;
background-color: azure;
}
Селекторы.
Селекторы бывают самые разные. Они позволяют указать абсолютно на любой html элемент, а так же группу элементов. На данном этапе изучим только два.
Классы.
Классы позволяют применить css свойства ко множеству html элементов. Делается это следующим образом. В html тэге указываем атрибут class и присваиваем ему какое либо имя:
<p class = "red-paragraphs">Этот параграф с красным шрифтом.</p>
<p class = "red-paragraphs">Этот параграф то же с красным шрифтом.</p>
Далее в css коде селектор будет выглядеть так:
.red-paragraphs {
color: red;
}
Т.е. ставиться точка и пишется имя класса.
Классы позволяют создавать элементы на одних и тех же тэгах, но с разными свойствами.
<p class = "red-paragraphs">Этот параграф с красным шрифтом.</p>
<p class = "red-paragraphs">Этот параграф то же с красным шрифтом.</p>
<p class = "blue-paragraphs">Этот параграф с синим шрифтом.</p>
<p class = "blue-paragraphs">Этот параграф то же с синим шрифтом.</p>
.red-paragraphs {
color: red;
}
.blue-paragraphs {
color: blue;
}
Так же можно создать элементы на разных тэгах, но с одинаковыми свойствами.
<h1 class="red-element">Это красный заголовок</h1>
<p class="red-element">Это красный параграф</p>
.red-element {
color: red;
}
Плюсом ко всему один элемент может принять свойства нескольких классов, для этого в атрибуте class необходимо перечислить классы через пробел.
<p class = "blue-paragraphs font">Этот параграф принимает свойства нескольких классов</p>
.blue-paragraphs {
color: blue;
}
.font {
font-family: Georgia, "Times New Roman", serif;
}
ID (идентификаторы)
Помимо классов существуют идентификаторы. Они позволяют присвоить те или иные свойства только одному html элементу.
Для этого существует атрибут id, которому нужно присвоить уникальное имя:
<p id="unique-paragraph">Это уникальный параграф</p>
В коде css id селектор начинается с символа #(шарп или решетка), после которого пишется уникальное имя элемента:
#unique-paraphraph {
color:cyan;
}
Свойства, отвечающие за отображение текста.
Свойство | Значения | Описание | Пример |
color | цвет | Цвет текста элемента. | .red-element { color: red; } |
font-family | Названия шрифтов через запятую. Так же можно указать одно из следующих названий группы шрифтов: serif, sans-serif, monospace, fantasy, cursive. | Устанавливает шрифт, которым будет отображаться текст. Если указать несколько через запятую, то при отсутствии на компьютере пользователя первого шрифта, отображаться будет вторым. Если плюсом указана группа шрифтов, то браузер выберет шрифт из этой группы самостоятельно. Пример: font-family: Times New Roman, Times, serif; | .font { font-family: Georgia, "Times New Roman", serif; }
|
font-size | larger | Размер шрифта больше или меньше основного соответственно. | font-size: larger; |
smaller | font-size: smaller; | ||
Одно из следующих значений: xx-small, x-small, small, medium, large, x-large, xx-large. | Размер шрифта будет установлен в соответствии с приведёнными значениями. | font-size: x-small; | |
Размер | Размер шрифта будет установлен в соответствии с числом. Примечание em – ширина одной буквы основного шрифта, ex – высота одной буквы основного шрифта. in, cm, mm – размер в дюймах, сантиметрах и миллиметрах соответственно. | font-size: 15px; | |
font-style | normal | Обычный шрифт. | font-style: normal; |
italic | Курсивный шрифт. | font-style: italic; | |
oblique | Наклонный шрифт. | font-style: oblique; | |
font-variant | normal | Обычный шрифт. |
|
small-caps | Шрифт, в котором маленькие буквы выглядят так же как большие. Например маленькая буква А будет выглядеть так же как большая. |
| |
font-weight | normal | Нормальный шрифт. |
|
bold | Полужирный шрифт. |
| |
bolder | Шрифт жирнее обычного. |
| |
lighter | Шрифт менее жирный обычного. |
| |
Число в диапазоне от 100 до 900 шагом в 100. | Шрифт будет установленной «жирности». Нормальный шрифт имеет «жирность» равную 700. Будет работать только, если загружены соотвтетствующие каждому числу шрифты. |
| |
letter-spacing | normal | Автоматическая установка интервала между буквами в строке. |
|
Размер | Интервал между буквами в строке устанавливается в зависимости от указанного значения. |
| |
line-height | normal | Обычный интервал между строк. |
|
число | Если указано просто число, то браузер умножит его на установленный интервал между строк, после чего установит этот интервал равным получившемуся числу. |
| |
Размер | Интервал между строками будет установлен в соответствии с указанным значением. |
| |
word-spacing | Размер | Расстояние между словами. |
|
text-indent | Размер | Отступ первой строки элемента. (Красная строка). |
|
text-align | left | Выравнивание элемента по левому краю его границ. |
|
right | Выравнивание элемента по правому краю его границ. |
| |
center | Выравнивание элемента по центру от его границ. |
| |
justify | Выравнивание элемента по ширине от его границ. |
| |
text-decoration | none | Ни как не выделенный шрифт |
|
underline | Подчёркнутый снизу шрифт. | text-decoration: underline; | |
overline | Подчёркнутый сверху шрифт |
| |
line-through | Подчёркнутый посередине шрифт (зачёркнутый). |
| |
blink | Мигающий шрифт. |
| |
text-decoration-style | solid | Одинарная линия (пример). |
|
double | Двойная линия (пример). | text-decoration-style: double; | |
dotted | Точечная линия (пример). |
| |
dashed | Пунктирная линия (пример). |
| |
wavy | Волнистая линия. |
|
Размеры в css.
Пиксели. Обозначают количество точек на экране компьютера.
.font {
font-size: 15px;
}
auto. Всегда можно задать размер словом auto. В таком случае размер будет вычислен автоматически в зависимости от ситуации.
em – размер относительно размера шрифта в родительском элементе. Если к примеру размер шрифта в родительском элемента 10px, то 0.5em будет означать 5px.
font-size: 1.5em;
rem – размер относительно базового размера шрифта документа. Т.е. если у html документа в целом базовый размер шрифта 10px, то 0.5rem будет означать 5px независимо от того, где этот элемент находится. Базовый размер шрифта устанавливается у тэга <html>
html {
font-size: 30px;
}
.font {
font-size: 2rem;
}
В данном примере все элементы с классом font будут иметь размер шрифта 60px независимо от того внутри каких других элементов они находятся.
Проценты. Процент от родительского элемента. Если ширина родительского элементы 500px, то 50% будет означать 250px.
width: 50%;
Родительские, дочерние элементы.
Тэги в html могут быть вложены друг в друга. В следующем примере тэг <h1> вложен в <body>.
<body>
<h1 class="red-element">Это красный заголовок</h1>
</body>
Получается, что h1 по отношению к body является дочерним, и наоборот тэг body по отношению к h1 является родительским.
Блочная модель.
Каждый элемент html заключен в блок. Поэтому у него есть, говоря простым языком, следующие вещи:
- padding – отступ о содержимого до рамки;
- border – рамка;
- margin – отступ от рамки до другого элемента.
Каждая эта вещь имеет свойства css для настройки:
<head>
<style>
#html-element-1 {
background-color:chocolate;
padding: 10px;
border: solid red 5px;
margin: 20px;
}
</style>
</head>
<body>
<p id = "html-element-1">Это html элемент.</p>
</body>
Результат кода:
Свойства, управляющие размерами блочной модели.
Свойство | Описание свойства | Значения | Описание значения |
height | Абсолютные размеры элемента | Размер | Задаёт высоту, ширину прямоугольного блока элемента. |
width | |||
max-height | Максимально возможная высота. | ||
max-width | Максимально возможная ширина. | ||
min-height | Минимально возможная высота. | ||
min-width | Минимально возможная ширина. | ||
height | fit-content | Рассчитать на основании контента. При использовании этого значения, внутренний элемент можно адекватно растянуть на всю высоту этого элемента heigh:100% | |
margin-bottom | Только нижний | Размер | Нижняя невидимая область. |
margin-left | Только левый | Левая невидимая область. | |
margin-right | Только правый | Правая невидимая область. | |
margin-top | Только верхний | Верхняя невидимая область. | |
margin | Размер отступа от рамки до следующего элемента | Размер всей невидимой области. Можно задать от одного до 4 чисел, при этом будут заданы соответствующие стороны области margin. | |
padding-bottom | Только нижний | Размер | Нижняя область между рамкой и содержанием элемента. |
padding -left | Только левый | Левая область между рамкой и содержанием элемента. | |
padding -right | Только правый | Правая область между рамкой и содержанием элемента. | |
padding -top | Только верхний | Верхняя область между рамкой и содержанием элемента. | |
padding | Размер от содержимого до рамки | Размер всей области между рамкой и содержанием элемента. Можно задать от одного до 4 чисел, при этом будут заданы соответствующие стороны области padding. |
Рамка.
Примечание: прежде чем работать с рамкой, необходимо настроить свойство border-style, определив какой она должна быть. Иначе рамка отображаться не будет.
Свойство | Значения | Описание |
border-style | none | Рамка не отображается. Значение по умолчанию. |
solid | Рамка в виде сплошной линии. | |
double | Рамка из двух сплошных линий. | |
dotted | Рамка из точек. | |
dashed | Рамка в виде пунктирной линии. | |
groove | Разновидности объёмных рамок | |
ridge | ||
inset | ||
outset | ||
border-color | Цвет | Устанавливает цвет рамки. Можно указать от 1 до 4 значений, при этом будут установлены разные цвета соответствующим сторонам. |
border-width | Число в px либо thin (тонкая рамка) либо medium (средняя) либо thick (толстая). | Толщина рамки. Можно указать от 1 до 4 значений, при этом будет установлена различная толщина у соответствующих сторон рамки. |
border | Значения через пробел как у свойств border-style, border-color, border-width. | Устанавливает за раз три предыдущих свойства. С помощью этого свойства можно настроить только всю рамку целиком. Пример: border: solid red 5px; |
border-left-style | Все значения как у свойства border-style | Устанавливают стиль отдельно левой, правой, верхней и нижней сторон рамки соотвтетственно. |
border-right-style | ||
border-top-style | ||
border-bottom-style | ||
border-left-color | Цвет | Устанавливают отдельно цвет каждой стороны рамки. |
border-right-color | ||
border-top-color | ||
border-bottom-color | ||
border-left-width | Число в px либо thin (тонкая рамка) либо medium (средняя) либо thick (толстая). | Устанавливают отдельно толщину каждой стороны рамки. |
border-right-width | ||
border-top-width | ||
border-bottom-width | ||
border-left | Значения как у свойства border | Позволяют разом задать три свойства каждой стороны в отдельности |
border-right | ||
border-top | ||
border-bottom | ||
border-radius | Число в px или другом | Округление углов элемента. Число задаёт радиус округления. Задать можно как одно число, так и несколько. В зависимости от количества чисел будут округлены соответствующие углы. |
Два числа в px через символ «/» | Форма элемента превращается в эллипс. | |
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius |
| То же что и border-radius, только отдельно для каждого угла. |
border-collapse | collapse | Соседние элементы будут иметь общую рамку. |
separate | У каждой соседней ячейки будет своя рамка. | |
border-spacing | Число в px. | Расстояние между рамками соседних элементов. Работает только при border-collapse: separate. |
border-image |
| Делает рамку из изобржения. http://htmlbook.ru/css/border-image |
<head>
<style>
#html-element-1 {
background-color:chocolate;
padding: 10px;
border: solid red 5px;
margin: 20px;
}
#html-element-2 {
background-color: darkgreen;
padding-top: 10px;
padding-bottom: 4px;
padding-left: 3px;
padding-right: 2px;
border: dashed blue 6px;
margin-top: 10px;
margin-bottom: 4px;
margin-left: 3px;
margin-right: 2px;
}
</style>
</head>
<body>
<p id = "html-element-1">Это html элемент.</p>
<p id = "html-element-2">Это html элемент.</p>
</body>
Примечание: по каждому свойству css можно найти подробное описание и примеры в интернете. Так же стоит отметить, что не все свойства здесь приведены.
Схлопывание margin.
Существует один важный нюанс. Маржины имеют свойство схлопываться. Что это значит: маржины двух рядом стоящих элементов не складываются, а берется максимальный из них. Т.е. если у, например, верхнего параграфа margin-bottom 40px, а у ниже стоящего 5px, то отступ между ними будет 40px.
<head>
<style>
.paragraph-margin-40px {
background-color:chocolate;
margin:40px;
}
.paragraph-margin-5px {
background-color:chocolate;
margin:5px;
}
</style>
</head>
<body>
<p class = "paragraph-margin-40px">Параграф 1. Margin 40px</p>
<p class = "paragraph-margin-40px">Параграф 2. Margin 40px</p>
<p class = "paragraph-margin-5px">Параграф 3. Margin 5px</p>
<p class = "paragraph-margin-5px">Параграф 4. Margin 5px</p>
</body>
Результат:
Как видно из результата, отступ между вторым и третьим параграфами 40px.
Background (фон элемента).
Каждому элементу можно задать фон. Для этого существует свойства представленные в таблице:
Примечание: фон элемента находится только в области ограниченной рамкой. В области margin фон всегда будет от родительского элемента.
Свойство |
| Значения | Описание |
background-color | Цвет фона элемента | Цвет | Цвет фона элемента |
transparent | Прозрачный фон. | ||
inherit | Наследует от родителя. | ||
background-image | Фоновое изображение | url ('url адрес') | Задаёт фоновое изображение. В css3 можно указывать несколько изображений, тогда для их настройки в других свойствах можно указать несколько значений через запятую. |
none | Отменяет фоновое изображение | ||
inherit | Наследует от родителя | ||
background-attachment | устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. | scroll | Фоновое изображение будет прокручиваться вместе с окном |
fixed | Фоновое изображение будет зафиксировано, и с окном прокручиваться не будет. | ||
inherit | Наследует значение родителя. | ||
local | Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте. | ||
background-origin | Определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed | padding-box | Фон позиционируется относительно края элемента с учетом толщины границы. |
border-box | Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение. | ||
content-box | Фон позиционируется относительно содержимого элемента. | ||
background-repeat | как будет повторяться фоновое изображение. Если указать два значения, то первое – по горизонтали, второе – по вертикали.
| repeat | Если изображение меньше размера элемента, то оно будет размножено для заполнения всего фона. |
no-repeat | Изображение вставляется в единственном экземпляре не зависимо от размеров элемента. | ||
repeat-x | Изображение размножается по оси X (по горизонтали). | ||
repeat-y | Изображение размножается по оси Y (по вертикали). | ||
space | Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство. | ||
round | Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются. | ||
inherit | Наследует значение родителя | ||
background-position | Начальное положение фонового изображения.
| Два числа в px или в %. | Первое число – позиция изображения по оси X, второе – по оси Y. |
Одно число в px или в %. | Позиция изображения по оси X. Позиция по оси Y берётся равной 50%. | ||
left (center, right) top (center, bottom) | С лева (по центруб с права) с верху (по середине, с низу). Можно использовать два слова через пробел. | ||
background-position-x | То же самое, только для x и y отдельно |
|
|
background-position-y |
|
| |
background-size | Размер фонового изображения. Одно значение – ширина, при этом высота auto, два значения – ширина и высота. | Размер в любых единицах |
|
% |
| ||
auto | Если указано для ширины и высоты, то размеры остаются исходными. Если только для ширины или высоты, то вычисляется исходя из пропорций. | ||
cover | Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. | ||
contain | Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. | ||
background |
| Все предыдущие значения. | Позволяет за раз задать все предыдущие свойства. Значения перечисляются через пробел в произвольном порядке. Пример: background:url('bg_Img.bmp') no-repeat right bottom;. |
background-clip |
| padding-box | Фон будет отображаться внутри контента и padding(а) |
| border-box | Фон будет отображаться внутри контента, padding(а) и рамки. | |
| content-box | Фон будет отображаться только внутри контента. |
Пример:
<head>
<style>
#html-element-with-background-color {
background-color:chocolate;
height:50px;
}
#html-element-with-background-image {
background-image: url('monsters.webp');
background-size:contain;
text-align: center;
height: 200px;
padding: 40px;
color:white;
font-size: 40px;
text-shadow: 1px 1px 2px black, 0 0 1em red;
}
</style>
</head>
<body>
<p id = "html-element-with-background-color">Это html элемент c background-color.</p>
<p id = "html-element-with-background-image">Это html элемент c <br>background-image.</p>
</body>
