Объединяем ячейки в столбцах

Ссылки бывают с якорем

Ссылки с якорем обычно используются для создания навигации внутри страницы. Например, оглавления в начале страницы с большой статьёй.

Ссылка с якорем содержит символ #, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id, который может быть задан у любого тега.

Можно задать адрес, состоящий из одного якоря, например:

<a href="#glava1">Глава 1</a>

При щелчке на такую ссылку браузер найдёт на странице элемент с атрибутом id со значением glava1 и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт.

Всплывающая подсказка

Для того, чтобы добавить ссылке всплывающую подсказку, надо использовать атрибут title. Например:

<a title="Подсказка" href="#">

Подсказка появится, когда курсор задержится над ссылкой некоторое время.

Подсказки помогают разъяснить назначение непонятных ссылок, а также ссылок-изображений.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

ТАБЛИЦЫ

Простейшая таблица описывается с помощью трёх тегов:

1. <table> обозначает таблицу.

2. <tr> расшифровывается как «table row», обозначает строку таблицы.

3. <td> расшифровывается как «table data», обозначает ячейку внутри строки таблицы.

По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.

Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:

table { border-collapse: collapse;}

Значение collapse убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.

Иногда требуется, чтобы рамки ячеек в таблице отображались не полностью.

Такие эффекты легко достигаются с помощью CSS. Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:

· border-top,

· border-right,

· border-bottom,

· border-left.

Объединяем ячейки в строках

Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов <th> или <td>.

Объединяем ячейки в столбцах

Объединение ячеек по вертикали немного сложнее. Оно осуществляется с помощью атрибута rowspan у тега <td> или <th>.

Выравнивание содержимого в ячейках

За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.

Подпись к таблице задается через тег<caption>. Ипозиционируетсячерез text-align: center; и caption-side: bottom;

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

ФОРМЫ

Формы нужны для того, чтобы отправлять данные с веб-страницы на веб-сервер, который сможет эти данные обработать: зарегистрировать пользователя, создать сообщение на форуме, отправить письмо и так далее. В общем, формы в вебе просто необходимы.

Чтобы создать форму, нужно использовать парный тег <form>, внутри которого размещаются поля формы. У тега <form> есть два важных атрибута:

· action задаёт адрес, URL, отправки формы;

· method задаёт метод отправки формы.

<form action="https://echo.htmlacademy.ru" method="get"> поля формы </form>

Метод get лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.

Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.

Большинство полей форм создаётся с помощью одиночного тега <input>. У этого тега два обязательных атрибута:

· type задаёт тип поля;

· name задаёт имя поля.

Тип поля влияет на то, как оно будет отображаться и вести себя. Самый распространённый тип — это text, который обозначает текстовое поле.

Подпись для поля ввода

Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово.На самом деле этого недостаточно — мы получили просто кусок текста и поле, которые расположены рядом друг с другом, но логически никак не связаны.

Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <label>.

Он связывает текст и поле ввода логически. А ещё если щёлкнуть по тексту в такой подписи, то курсор переместится в соответствующее поле.

<label>Подпись<input type="text" name="username"></label>

Иногда обернуть поле и текст подписи в тег <label> нельзя. Например, когда они размещены в разных ячейках таблицы.

В этом случае можно связать подпись с полем с помощью атрибута id. Алгоритм такой:

1. Добавляем к полю ввода идентификатор с помощью атрибута id.

2. Оборачиваем текст подписи в тег <label>.

3. Добавляем тегу <label> атрибут for.

4. В атрибут for записываем такое же значение, что и в атрибуте id у поля.

<label for=" user-field-id ">Имяпользователя</label>... много-многодругихтегов...<input id=" user-field-id " type="text" name="username">

 

Многострочное текстовое поле создаётся с помощью парного тега <textarea>. У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.

Атрибут rows принимает целочисленное значение и задаёт высоту многострочного поля в строках. Атрибут cols задаёт ширину поля в символах. В качестве ширины символа берётся некоторая «усреднённая ширина».

Атрибут value у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому. Текст, расположенный между открывающим и закрывающим тегом <textarea>и является значением по умолчанию. Вот так:

<textarea>Значение по умолчанию</textarea>

 

Поле-галочка — это тег <input> с типом checkbox.

Галочка работает по принципу «либо да, либо нет». Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. Таким образом, атрибут value не является обязательным.

Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. Вот так:

<input type="checkbox" checked>

 

Поле-переключатель — это тег <input> с типом radio.

Обычно переключатели размещают группами по несколько штук. Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value.

Таким образом, атрибут value является для переключателей обязательным. Браузер отправляет на сервер значение value выбранного переключателя.

Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких.

Раскрывающийся список создаётся с помощью парного тега <select>, у которого есть знакомые атрибуты name и id.

Варианты ответов задаются с помощью парных тегов <option>, которые должны располагаться внутри тега <select>. Например:

<select name="theme"><option value="light">Светлаятема</option><option value="dark">Тёмнаятема</option>...</select>

В атрибуте value тега <option> задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.

Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.

 

«Мультиселект»

Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов.

Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple

Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.

При отправке данных мультиселекта на сервер с PHP после имени в значении атрибута nameставятся символы квадратных скобок []. Например, <select name="days[]">. Это необязательное требование для имени мультиселекта, а нужно только для корректной обработки данных в PHP.

Поле для загрузки файлов

Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным атрибутом является имя.

Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Не полю, а форме.

Скрытое поле

И ещё одно невидимое и очень полезное поле. Это скрытое поле. Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем.

Например, это могут быть реквизиты заказа или номер пользователя в форме оплаты.

Скрытое поле — это тег <input> с типом hidden.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Введение в CSS

В CSS существует огромное количество свойств. Их можно разбить на следующие группы:

· оформление текста;

· работа с размерами и отступами;

· позиционирование элементов;

· создание сеток;

· декоративные: цвета, фон, тени;

· другие.

Когда для одного и того же элемента есть несколько CSS-правил с одинаковыми свойствами, браузер использует понятия приоритетов и специфичности, чтобы выбрать значение свойства из нескольких возможных. Упрощённо, можно сказать что:

1. CSS-правила в значении атрибута style самые приоритетные,

2. за ними идёт селектор с id,

3. затем селектор с классом,

4. затем селектор с именем тега.

Если селекторы однотипные, как в нашем случае, то тогда более приоритетным является CSS-правило, которое расположено ниже в коде.

Другой важный механизм CSS — это наследование. Он заключается в том, что часть стилей может передаваться от родительского элемента к дочерним (вложенным в него).

Например, все элементы внутри тега body являются дочерними по отношению к нему. Если для body в стилях задать цвет текста красным, то цвет всех остальных элементов тоже станет красным.

Ещё пример: тег ul является родительским по отношению к вложенным в него тегам li. Если задать для ul шрифт курсивом, то и внутри всех li шрифт станет курсивным.

Контекстные селекторы используются для вложенных друг в друга элементов, а соседние — для расположенных рядом.

Например, теги <li> в списке являются соседними по отношению друг к другу и вложенными в тег <ul>.

Соседние селекторы записываются с помощью знака +, например, селектор1 + селектор2. Стили применятся к элементу, подходящему под селектор2, только если сразу перед ним расположен элемент, подходящий под селектор1.

Пример. Есть два элемента списка:

<li class="hit"></li><li class="miss"></li>

Селектор.hit +.miss применит стили к элементу с классом miss, так как перед ним есть элемент с классом hit.

 

Контекстные селекторы влияют на всех потомков, что не всегда удобно. Иногда необходимо задать стили только для дочерних элементов. Особенно это полезно при работе с многоуровневыми списками.

Для этого существует дочерний селектор, в котором используется символ >. Например: ul > li или ul > li > span.

Псевдоклассы

Псевдокласс добавляется к селектору c помощью символа:, вот так селектор:псевдокласс. Например:

a:visited {... }li:last-child {... }.alert:hover {... }

Псевдокласс first-child позволяет выбрать первый дочерний элемент родителя, а last-child — последний дочерний элемент.

С помощью псевдокласса nth-child можно выбирать теги по порядковому номеру, не используя классы. Синтаксис псевдокласса: селектор:nth-child(выражение). Выражением может быть число или формула. Например:

1. li:nth-child(2) {... }2. li:nth-child(4) {... }3. li:nth-child(2n) {... }

Первый селектор выберет второй элемент списка, второй селектор — четвёртый элемент списка, третий селектор — все чётные элементы.

 

Сначала познакомимся с псевдоклассом:hover.

Этот псевдокласс позволяет выбрать элемент, когда на него наведён курсор мыши и кнопка мыши не нажата. Примеры:

1. a:hover {... }2. tr:hover {... }3.menu-item:hover {... }

 

 

селектор1:hover селектор2.

Это означает, что при наведении на селектор1 мы изменяем свойства селектор2

Псевдокласс:focus

Псевдокласс:focus позволяет выбрать элемент, который в данный момент в фокусе. Например, текстовое поле, в которое установлен курсор, находится в фокусе.

Селекторы атрибутов

Селекторы атрибутов записываются с использованием квадратных скобок: элемент[атрибут]. Примеры селекторов:

1. input[checked] {... }2. input[type="text"] {... }

Первый селектор выберет поля формы, у которых есть атрибут checked, второй селектор выберет поля формы, у которых атрибут type имеет значение text.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

Принудительное наследование

Для каждого свойства может быть задано значение inherit.

Оно означает, что данное свойство принимает такое же значение, как и у родительского элемента. Значение inherit может быть использовано для усиления наследуемых значений, а также в свойствах, которые обычно не наследуются.

Запись выглядит следующим образом:

p { background: inherit;}

 

CSS-правила, которые прописаны в style обладают наивысшим приоритетом.

Однако существует способ переопределить из подключаемых CSS-файлов даже стили, заданные в атрибуте style. Для этого нужно использовать ключевое слово!important. Оно задаёт CSS-свойству усиленный приоритет. Вот пример:

HTML:

<pstyle="color: red;" class="blue">Синийиликрасный?</p>

CSS:

.blue {color: blue!important;}

Цвет текста в этом примере будет синим.

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

При создании стилей для сходных по внешнему виду или функциональности элементов, которые могут использоваться на странице неоднократно, очень удобно пользоваться перекрёстным наследованием.

Приём этот заключается в следующем:

1. создается базовый стиль для таких элементов;

2. определяются вспомогательные стили, которые применяются к элементам по мере надобности;

3. элемент наследует базовый стиль и один или несколько вспомогательных.

Пример:

На странице используются кнопки разного назначения: для отправки форм, для сброса информации в полях формы, как элементы навигации и т.д.

Можно вынести общее оформление (размеры, отступы и т.д.) для всех кнопок в отдельное CSS-правило для класса, например,.button.

А затем создать дополнительные CSS-правила, в которых будут определены только различающиеся свойства этих кнопок, например, цвет фона. Для этих правил можно использовать такие названия классов:.button-send,.button-clear,.button-navigation.

Каждая кнопка в HTML-коде будет иметь два класса: общий и дополнительный.

<a class="button button-send">Отправить</a>

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

ОФОРМЛЕНИЕ ТЕКСТА

При оформлении текста с помощью css чаще всего используют тег <span>. Он обозначает «просто текстовый блок». То есть особенного собственного смысла он не имеет. Также этот тег никак не изменяет отображение текста.

Однако, дополнительный смысл данному тегу добавляют с помощью классов. Например:

<span class="error"></span><span class="ok"></span>

А уже для класса с помощью css задают стили и тем самым изменяют оформление.

 

Cвойство font-size задает размер шрифта.

Размер шрифта лучше всего задавать в em — относительной единице измерения. 1em обычно равен длине буквы M в данном шрифте.

Другие единицы измерения для задания размеров шрифта:

· Пиксели: 20px

· Пункты: 15pt

· Проценты: 80%

Пиксели и пункты — это абсолютные единицы измерения, а проценты — относительные.

 

Полужирность текста можно задавать с помощью свойства font-weight, которое имеет два основных значения:

1. normal — обычное начертание;

2. bold — полужирное начертание.

 

Начертание текста можно задавать с помощью свойства font-style. Его основные значения:

1. normal — обычное начертание;

2. italic — курсивное начертание.

Задать семейство шрифта можно с помощью свойства font-family. Можно задавать конкретное название шрифта: "Times New Roman". А можно задавать желаемый тип шрифта, например:

· serif — шрифт с засечками;

· sans-serif — шрифт без засечек.

Есть и другие типы, но они используются реже.

Обычно в качестве значения свойства задают список шрифтов, перечисляя их через запятую. В начале списка располагают самый редкий шрифт, затем похожий, но более распространенный, а в самом конце списка — желаемый тип шрифта. Пример:

body { font-family: "PT Sans", "Arial", serif;}

Браузер проходит по списку слева направо и использует первый найденный в системе шрифт. При использовании веб-шрифтов не забывайте указывать так называемые «фоллбэчные» шрифты — стандартные шрифты, которые будут отображаться, если веб-шрифт либо недоступен, либо не поддерживается старым браузером пользователя. Для этого нужно всего лишь перечислить их через запятую после нестандартного шрифта:

font-family: "PT Sans", "Arial", sans-serif;

https://fontstorage.com/blog/about-font-face-part-one/

https://fontstorage.com/blog/about-font-face-part-two/

 

Цвет текста задаётся с помощью свойства color. Значение цвета можно задавать разными способами:

· Шестнадцатеричным кодом, например #FF9900.

· Ключевым словом: red.

· В RGB-формате: rgb(255, 255, 0).

 

Дополнительное оформление текста можно задать с помощью свойства text-decoration. Его значения:

1. underline — подчеркивание;

2. line-through — зачеркивание;

3. overline — черта сверху;

4. none — убирает вышеперечисленные эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел.

 

С помощью css можно управлять даже регистром символов: делать буквы строчными или прописными. Делается это с помощью свойства text-transform. Его значения:

1. lowercase — все строчные;

2. uppercase — все прописные;

3. capitalize — каждое слово начинается с прописной;

4. none — отменяет изменение регистра.

 

браузер игнорирует множественные пробелы и переносы строк в HTML-коде. Изменить это поведение можно с помощью тега <pre>.

Однако, с помощью CSS управлять пробелами и переносами можно более гибко. За это отвечает свойство white-space, значения которого:

· nowrap — отображает весь текст одной строкой без переносов;

· pre — сохраняет пробелы и переносы как в исходном коде аналогично тегу <pre>;

· pre-wrap — работает как значение pre, но добавляет автоматические переносы, если текст не помещается в контейнер;

· normal — режим по умолчанию.

 

Выравнивание текста по горизонтали задается с пом ощью свойства text-align. Его вы уже использовали в курсе про таблицы. Значения свойства:

1. left — выравнивание по левому краю;

2. right — по правому краю;

3. center — по центру;

4. justify — по ширине.

 

Выравниванием текста по вертикали можно управлять с помощью свойства vertical-align. Его действие хорошо заметно в ячейках таблицы. Внутри текстовой строки «работа» этого свойства заметна, если в ней есть фрагменты разного размера.

У данного свойства много значений, но самые часто используемые:

1. top — выравнивание по верхнему краю строки;

2. middle — по середине;

3. bottom — по нижнему краю;

4. baseline — по базовой линии (значение по умолчанию).

 

Высотой строки или, правильнее, межстрочным интервалом можно управлять с помощью свойства line-height. Значение этого свойства можно задавать следующими способами:

1. Множителем, например 1.5, 2.

2. В процентах: 150%.

3. С помощью любых других единиц измерения CSS: 12px, 2em.

4. Ключевым словом normal, которое задает автоматический расчет высоты строки.

Предпочтительнее задавать межстрочный интервал либо множителем, либо в относительных единицах измерения.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

ФОН

Цвет фона можно задать с помощью CSS-свойства background-color.

 

Фоновое изображение можно задать с помощью CSS-свойства background-image. Делается это так:

selector {background-image: url("адрес-картинки");}

Элементу можно одновременно задавать и цвет фона, и фоновую картинку. В этом случае картинка будет отображаться поверх фонового цвета.

 

По умолчанию фоновое изображение повторяется. Это хорошо заметно, когда оно меньше блока. Управлять этим поведением можно с помощью CSS-свойства background-repeat. У свойства 4 значения:

· repeat — повторять во всех направлениях. Это значение по умолчанию.

· repeat-x — повторять только по горизонтали.

· repeat-y — повторять только по вертикали.

· no-repeat — не повторять.

 

Cвойство background-position управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y.

x задаёт расположение по горизонтали, а y по вертикали.

В качестве значения x можно использовать ключевые слова left, center, right, значения в процентах и в пикселях.

В качестве значения y можно использовать ключевые слова top, center, bottom, значения в процентах и в пикселях.

Примеры использования свойства:

background-position: 50% 50%;

background-position: right bottom;

background-position: 50px 100px;

background-position: 0 100%;

background-position: left bottom;

Таксработаютпримеры:

1. картинка будет по центру;

2. правый нижний угол;

3. отступ 50px от левого края и 100px от верхнего;

4. левый нижний угол;

5. левый нижний угол.

 

Когда фоновое изображение больше блока, то оно обрезается. Управлять тем, какую часть изображения будет видно, также можно с помощью свойства background-position.

Иногда для этого удобно использовать относительные значения (проценты), а иногда абсолютные (пиксели).

Кстати, можно использовать не только положительные, но и отрицательные значения. А также комбинировать пиксели и проценты.

ОНО ВСЕ ТАК ЖЕ БУДЕТ ДВИГАТЬСЯ. УКАЗАТЬ В КАЧЕСТВЕ ИКСА 100% - ЗНАЧИТ БУДЕТ ВИДЕН ПРАВЫЙ КРАЙ ИЗОБРАЖЕНИЯ; ИГРЕК 100% - ЗНАЧИТ БУДЕТ НИЗ ИЗОБРАЖЕНИЯ. И ТД

 

Обычно фоновое изображение прокручивается вместе с содержимым блока. Это хорошо видно в мини-браузере. Прокрутите окно вниз и увидите, что фон поднимется наверх.

С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокручивании.

Значение свойства:

· scroll — фон прокручивается вместе с содержимым. Это значение по умолчанию.

· fixed — фон не прокручивается, зафиксирован на одном месте.

 

Также задать фон можно с помощью сокращенного свойства background, в котором через пробел перечисляются его компоненты:

background: [bc] [bi] [br] [bp] [ba];/* Обозначения:[bc] — background-color[bi] — background-image[br] — background-repeat[bp] — background-position[ba] — background-attachment*/

 

Спрайт — это одно большое изображение, в котором содержится много маленьких, как бы карта изображений. Вот живой пример (эта же картинка выведена на тёмном фоне внизу мини-браузера), который мы будем использовать в задании.

Спрайты используются, чтобы снизить количество запросов на сервер. Каждая маленькая картинка — это отдельный запрос, а чем меньше запросов, тем лучше. Поэтому маленькие картинки «склеивают» в одну большую.

Части спрайта отображают в элементах с небольшими размерами. Такому элементу задают картинку-спрайт в качестве фона и смещают её таким образом, чтобы была видна нужная её часть.

В спрайты обычно объединяют иконки и различные мелкие декоративные изображения. Кстати, есть сервисы для быстрого создания спрайтов и генерации CSS-кода для них, например, SpritePad.

Короче типа одно большое изображение для экономии, на котором более мелкие – это встрачающиеся у меня изображения. И при запросе, я просто буду показывать нужную часть этого большого хоста в качестве нужного изображения

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

БЛОЧНАЯ МОДЛЬ ДОКУМЕНТА

Блочные элементы можно представлять как прямоугольные области на странице. Они имеют следующие особенности:

1. До и после блочного элемента существует перенос строки.

2. Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.

3. Занимают всё доступное пространство по горизонтали.

К блочным элементам относятся такие теги как: <p>, <h1>, <h2>, <ul> и так далее.

Еще один важный блочный тег — это тег <div>, который обозначает просто «блок» или «прямоугольный контейнер». Этот тег чаще всего используется для создания сеток.

 

Строчные элементы располагаются друг за другом в одной строке, при необходимости строка переносится. Особенности строчных элементов:

1. До и после строчного элемента отсутствуют переносы строки.

2. Ширина и высота строчного элемента зависит только от его содержания, задать размеры с помощью CSS нельзя.

3. Можно задавать только горизонтальные отступы.

К строчным элементам относятся такие теги как: <a>, <strong>, <em>, <span> и так далее.

Строчные элементы предназначены для оформления текста на уровне небольших фраз и отдельных слов. Блочные же элементы предназначены для разметки крупных блоков текста (заголовки, абзацы, списки) и создания сетки.

- - - - - - - - - - - - -

Ширина и высота элементов задаются с помощью свойств width и height соответственно.

По умолчанию блочные элементы занимают всю доступную ширину, которая равна ширине родительского контейнера или окна браузера.

Высота по умолчанию блочных элементов зависит от их содержимого. Если задать блочному элементу ширину и высоту так, что содержимое элемента не будет в него помещаться, то оно как бы «выпадет» из него.

Строчные элементы не реагируют на задание ширины и высоты в CSS.

Свойство padding задает внутренние отступы элемента — отступы от внешней границы элемента до его содержания. Эти отступы еще иногда называют полями.

(т.е. вот есть блок, со своими границами, так вот paddingэто отступы от этой границы ВНУТРЬ. Это будет дистанция, которую будет держать элемент до своего содержния)

Существует несколько способов записи свойства padding.

padding: 10px;padding: 5px 10px;padding: 5px 10px 15px;padding: 5px 10px 15px 20px;

1. Одинаковые отступы со всех сторон.

2. Отступы сверху и снизу 5px, справа и слева 10px.

3. Отступ сверху 5px, слева и справа 10px, снизу 15px.

4. Разные отступы со всех сторон, в порядке верхний, правый, нижний, левый.

Также можно задавать отступы для разных сторон с помощью свойств padding-left, padding-right, padding-top, padding-bottom.

 

Свойство margin задает внешние отступы элемента — отступы от внешней границы элемента до границ родительского элемента или до соседних элементов.

(А это дистанция, которую блок будет держать относительно другого контента на странице. Т.е. ближе чем на это расстояние ни один элемент к этому блоку на странице не приблизится)

Способы записи свойства margin аналогичны свойству padding.

margin: 10px;margin: 5px 10px;margin: 5px 10px 15px;margin: 5px 10px 15px 20px;

1. Одинаковые отступы со всех сторон.

2. Сверху и снизу 5px, справа и слева 10px.

3. Сверху 5px, слева и справа 10px, снизу 15px.

4. Верхний, правый, нижний, левый отступы соответственно.

Можно задавать отступы для разных сторон с помощью свойств margin-left, margin-right, margin-top, margin-bottom.

Рамка задаётся с помощью свойства border, которое состоит из трёх компонентов:

1. ширина рамки;

2. стиль рамки;

3. цвет.

Например:

selector{

border: 5px solid red;

}

Это правило задаёт красную сплошную рамку толщиной 5px.

Задавать рамку можно одним свойством border, а можно и с помощью отдельных свойств border-width, border-style, border-color. Например:

selector{

border-width: 5px;

border-style: solid;

border-color: red;

}

Это правило задаёт такую же рамку, как и в примере выше.

Несколько самых распространенных стилей рамок:

· solid — сплошная;

· dashed — пунктирная;

· dotted — точками.

Рамку можно задавать и строчным, и блочным элементам.

ИТОГО Область, занимаемая блочным элементом, складывается из его ширины и высоты содержания, внутренних и внешних отступов, ширины рамок

CSS-свойство width задаёт не общую ширину блока, а только ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа.

Первый вариант. Вариант по умолчанию, когда ширина не задается, соответствует значению width:auto;. В этом случае блок занимает всю ширину родительского блока. Если у блока есть внутренние отступы или рамки, то его ширина содержания автоматически уменьшается, а общая ширина остается равной ширине родителя.

Второй вариант. Когда ширина блока задана явно, например, width:100%;. В этом случае ширина содержания блока равна ширине родительского блока. Если блоку добавить внутренние отступы и рамки, то его общая ширина становится больше ширины родителя.

 

 

«Схлопывание» внешних отступов

Вертикальный отступ между двумя соседними элементами равен максимальному отступу между ними. Если отступ одного элемента равен 20px, а второго 40px, то отступ между ними будет 40px.

Этот эффект называется эффектом «схлопывания» внешних отступов или «схлопывания» маргинов.

Горизонтальные отступы между элементами просто складываются. Например, горизонтальный отступ между двумя элементами с отступами 30px будет равен 60px.

 

«Выпадание» внешних отступов

«Выпадание» — это еще один эффект, связанный с вертикальными внешними отступами. Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху. Т.е. верхний отступ внутреннего элемента «выпадает» из родительского элемента.

Если у родительского элемента тоже был задан внешний отступ, то выберется максимальный отступ между собственным и «выпавшим».

Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху.

Внешние и внутренние отступы всегда складываются.

(если блоку внутри родительского задать марджин, то он применится к родительскому блоку, а внутренний приклится верху родительского. Решается проблема заданием паддинга родителю.)

Управление типом элемента

Тип элемента не является чем-то вечным и неизменным, его можно изменять с помощью CSS. За это отвечает свойство display.

С его помощью, например, можно сделать абзацы и заголовки строчными, а спаны и стронги блочными элементами.

У свойства display много значений. С двумя из них вы уже заочно познакомились. Свойство display:block обозначает блочный элемент, а display:inline — строчный.

Display: inline-block

Иногда возникает необходимость расположить в ряд несколько элементов с заданными размерами. Строчные элементы для этого не подходят, т.к. не воспринимают размеры. Блочные элементы тоже не подходят, т.к. до и после них существует перенос строки. Конечно, блочные элементы можно приспособить для такой задачи, используя дополнительные свойства (которые будут разбираться в курсе про сетки).

Но более простой способ — использовать блочно-строчные элементы. В HTML нет тегов, которые по умолчанию вели бы себя как блочно-строчные, но любой элемент можно переключить в данный режим, задав ему свойство display со значением inline-block.

Особенности блочно-строчных элементов:

· им можно задавать размеры, рамки и отступы, как и блочным элементам;

· их ширина по умолчанию зависит от содержания, а не растягивается на всю ширину контейнера;

· они не порождают принудительных переносов строк, поэтому могут располагаться на одной строке, пока помещаются в родительский контейнер;

· элементы в одной строке выравниваются вертикально подобно строчным элементам.

От строчных им достались следующие черты:

· по ширине они ужимаются под своё содержимое;

· могут располагаться в одну строку;

· реагируют на вертикальное выравнивание, vertical-align;

· реагируют на горизонтальное выравнивание, text-align, заданное у родителя.

Display: table

Дальнейшие несколько заданий будут посвящены табличным типам элементов.

Табличные сетки были очень популярны на заре веба. Действительно, у табличных сеток есть преимущества, которые очень сложно получить с помощью блоков. Например, столбцы одинаковой высоты.

Однако, семантически таблицы не предназначены для разметки сеток и постепенно от них отказались. Но память об их удобстве жила.

Позднее было разработано семейство значений свойства display, которое позволяет задать табличное поведение любым элементам.

Первое значение — display:table задает элементу тип таблица. Особенности табличных элементов:

1. можно задавать ширину, высоту, рамки, отступы;

2. по умолчанию ширина зависит от содержания;

3. переносы строки до и после элемента.

Display: table-row

Как вы догадались, мы строим таблицу на дивах с помощью новых значений свойства display. Знания про таблицы вы можете освежить в курсе Знакомство с таблицами.

Любая таблица содержит элементы строка таблицы, внутри которых должны содержаться элементы ячейка таблицы. Соответствиетеговтаблицызначениям display:

<table> — display:table;

<tr> — display:table-row;

<td> — display:table-cell;

В этом задании вы создадите строки таблицы с помощью display:table-row;. Строка — необычный элемент. Она является контейнером для ячеек и практически не имеет собственного отображения. Для нее можно только задавать цвет фона.

Display: table-cell

С помощью значения table-cell свойства display можно задать элементу тип ячейка таблицы. Конечно, лучше чтобы элементы-ячейки находились внутри элементов-строк, которые находятся внутри элементов-таблиц.

Вы можете просто задать элементу тип ячейка таблицы, не добавляя вокруг него дополнительных элементов-строк и таблиц. В этом случае браузер создаст дополнительные анонимные элементы строки и таблицы. Неудобство заключается в том, что вы не сможете ими управлять.

К таблицам, созданным с помощью CSS, можно применять те же свойства, что и к обычным таблицам. Например, задавать отступы между ячейками или режим схлопывания границ.

Display: none

Значение none свойства display используется очень часто. С его помощью можно скрыть элемент, как будто его и не было. Скрытый элемент не отображается и не занимает места на странице.

Данное свойство применяется при создании выпадающих меню, динамических галерей, переключающихся вкладок и много где еще.

Есть еще одно CSS-свойство, которое используется для сокрытия элементов. Это свойство visibility со значением hidden. Оно «прячет» элемент — он становится невидимым, но занимает место на странице.

 

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

СЕТКИ

 

Поток — это порядок отображения элементов на странице. По умолчанию блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку.

Потоком можно управлять и изменять привычное поведение элементов в потоке. Например, можно заставить блочные элементы двигаться не сверху вниз, а выстраиваться в несколько колонок.

А научившись управлять потоком, вы сможете строить сетки.

Существует несколько способов управлять потоком и строить сетки:

1. флоаты;

2. инлайн-блоки;

3. табличная вёрстка;

4. флексбоксы.

Табличная вёрстка — самый простой для понимания способ построения сеток. Но он считается устаревшим и использовать его не рекомендуется. Сейчас уже можно использовать для такой вёрстки не таблицы, а элементы с display