Атрибуты colspan и rowspan объединяют ячейки таблицы.
Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.
<table>
<caption>Перечень продуктов</caption>
<tr>
<th>№ п/п</th><th>Наименование товара</th><th>Количество</th>
</tr>
<tr>
<td>1.</td><td>Томаты свежие</td><td>5 </td>
</tr>
<tr>
<td>2.</td><td>Огурцы свежие</td><td>7</td>
</tr>
<tr>
<td colspan="2">ИТОГО:</td><td>12</td>
</tr>
</table>
| table атрибуты | |
| Атрибут | Описание |
| colspan | Количество ячеек в строке для объединения по горизонтали. <td colspan="3"> Возможные значения: число от 1 до 999. |
| rowspan | Количество ячеек в столбце для объединения по вертикали. <td rowspan="2"> Возможные значения: число от 1 до 999. |
| border | Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной. Когда в теге <table> используется атрибут border без значений (<table border>), то браузер отображает рамку толщиной один пиксел. |
| cellspacing | Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет. |
CSS — каскадные таблицы стилей
CSS — это язык для управления внешним видом HTML-документа. С помощью CSS можно задавать параметры отображения любого тега: ширину и высоту, отступы, цвет и размер шрифта, фон и так далее.
Самый простой способ применить стили к тегу заключается в использовании атрибута style (мы с ним знакомились на прошлом уроке, но все равно давайте повторим), например:
<p style="color: red;">...</p>
В этом примере абзацу задан красный цвет шрифта. Такой способ задания стилей называют «инлайновые стили» или «встроенные стили».
Синтаксис таких стилей очень простой: свойство: значение;. Причём свойств может быть несколько.
Другой способ оформления с помощью CSS
Задавать стили каждого тега с помощью атрибута style очень затратное и хлопотное занятие. А ещё это приводит к засорению HTML-кода большим количеством повторяющегося CSS кода.
К счастью, есть и другие способы подключения стилей. Один из них — это использование специального тега <style> в теле HTML страницы.
И так, как же его использовать?
Тег <style> желательно добавлять внутрь тега <head>, но на данный момент это не обязательное правило, с недавних пор этот тег можно добавлять в любое место тега <body>.
Вот как он выглядит:
<style>
H1 {
font-size: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
</style>
Немного не знакомый вид записи, правда? Давайте разбираться.
Селекторы в CSS
Следом за тегом мы видим h1 — это так называемый селектор.
Когда вы задаёте стили тега с помощью атрибута style, браузер сразу же понимает, к какому именно тегу применить эти стили (потому что стили находятся внутри тега). Но когда стили подключаются через тег <style>, браузер ищет стилизуемые теги с помощью «селекторов».
Селектор — непонятное слово, правда? Но, мы упростим его и будем называть — проводник, потому что он берет CSS стили и проводит их до тега, на который мы указываем. В данном случае это тег <h1>. У каждого проводника (селектора), есть свое уникальное имя.
Язык селекторов очень мощный и гибкий. Простейший тип селекторов — селекторы по имени тега: p, h1 и так далее. Когда браузер видит такой селектор, он применяет стили и правила ко всем подходящим тегам. Например, ко всем текстовым абзацам или ко всем заголовкам первого уровня.
В общем случае написание CSS-правил выглядит так:
селектор {
свойство1: значение;
свойство2: значение;
...
}
Разобравшись с проводниками (селекторами) по имени тега, давайте подумаем, а удобно использовать только такой вид селекторов или нет.
В большинстве случаев это не удобно, потому что ограничивает нас в выборе тегов, которые мы хотим сделать стильными.
Вот представьте, что нам нужно оформить только один абзац или один заголовок из десятка подобных абзацев или заголовков.
На помощь к нам приходят классы и идентификаторы.
Классы в CSS
Класс — это всего лишь один из атрибутов HTML-тегов, например:
<p class="help">...</p>
В CSS можно задавать стили для элементов с определённым классом. Для этого используется селектор по классу, который пишется так: .имя-класса, например:
.help { color: green; } — выберет все теги у которого есть атрибут class со значением равным "help"
Классы гибкие, их можно создавать много и называть любыми понятными именами.
Идентификаторы в CSS
Идентификатор — это еще один из атрибутов HTML-тегов, например:
<p id="name">...</p>
В CSS также можно задавать стили для элементов с определённым идентификатором. Для этого используется селектор по id, который пишется так: #имя-идентификатора, например:
#name { color: red; } — выберет все теги с идентификатором равным "name"
Различия id и class
Так стоп, а в чем же разница между id и class, ведь с виду они выполняют одинаковую работу?
Верно, работу они выполняют одинаковую, а вот функционал у них разный. Id служит для объявления одного уникального и неповторимого элемента на WEB странице (такой элемент только один), а вот class в свою очередь может примется ко многим элементам. Например, можно сделать много одинаковых блоков зеленого цвета.
Важно!
Имя класса или идентификатора может содержать в себе латинские символы, цифры, символы дефиса “-” и подчеркивания “_” и начинаться оно должно с латинского символа.
Свойства и значения CSS
Итак, язык CSS состоит из селекторов и свойств. Селекторы указывают на то, к каким элементам применять стили, а свойства — на то, как именно отображать выбранные элементы.
Существует огромное количество CSS-свойств, которые влияют практически на все аспекты отображения элементов. Их можно разбить на следующие группы:
· оформление текста;
· работа с размерами и отступами;
· позиционирование элементов;
· декоративные: цвета, фон, тени;
· другие.
Причём каждому свойству соответствует определённый набор значений. Некоторые значения задаются с помощью текстовых констант, например: red, bold, другие с помощью цифровых значений: 12px, 120% и так далее.
Мощь стилей заключается в том, что вы можете быстро и гибко менять внешний вид нужных элементов, особенно когда используете классы. Например, чтобы изменить цвет блоков с зеленого цвета на синий, нужно изменить всего лишь одну строчку в CSS:
.block{ background-color: blue; }
И все теги с классом .block изменят свой цвет. Теперь представьте, как долго делать то же самое через инлайновые стили (атрибут тега style=””), когда таких блоков сотни.
Комментарии в CSS
Комментарии в CSS языке тоже есть.
Однострочный комментарий создается двумя символами слеша //, такой комментарий можно использовать если мы хотим закомментировать только одну строчку.
Но если мы хотим закомментировать несколько строк кода, то тогда нам на помощь приходит многострочный комментарий, который создается при помощи слешей и звездочек /* … */
Вот как это выглядит в коде:
// Однострочный комментарий
/* Это многострочный
комментарий в
CSS языке*/
Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию (в спецификации CSS определены 140 имен цветов, из них 17 стандартных цветов плюс 123 доп.), в формате RGB, RGBA, HSL, HSLA.
Цвета в CSS по названию
Браузеры поддерживают некоторые цвета по их названию. В таблице приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.
| Имя | Цвет | Описание |
| White | Белый | |
| Silver | Серый | |
| Gray | Темно-серый | |
| Black | Черный | |
| maroon | Темно-красный | |
| Red | Красный | |
| Orange | Оранжевый | |
| Yellow | Желтый | |
| Olive | Оливковый | |
| Lime | Светло-зеленый | |
| Green | Зеленый | |
| Aqua | Голубой | |
| Blue | Синий | |
| Navy | Темно-синий | |
| Teal | Сине-зеленый | |
| fuchsia | Розовый | |
| Purple | Фиолетовый |
| CSS свойства | ||
| Название | Описание | |
| width | Устанавливает ширину блочных элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей. В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), проценты (%) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. | |
| height | Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей. Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. | |
| color | Определяет цвет текста элемента. | |
| background-color | Определяет цвет фона элемента. | |
| CSS селекторы | ||
| h2 | Селектор тега h2 - стили CSS будут применятся ко всем тегам <h2> … </h2> в HTML документе | |
| #logo | Селектор идентификатора - стили CSS будут применятся только к элементу с идентификатором id=”logo” | |
| .container | Селектор класса - стили CSS будут применятся ко всем элементам с классом class=”container” | |
| Различия между id и class | ||
| id | class | |
| Объявляется: <div id="logo"> …</div> | Объявляется: <div class="container"> … </div> | |
| Применяется только к одному элементу на WEB странице. | Применяется к нескольким элементам на WEB странице. К одному элементу может применятся множественность классов (класс элемента состоит из нескольких имен разделенных пробелами, например: <div class="block text">…</div> | |