Как сделать блок в html: инструкция для начинающих верстальщиков
Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div.
В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем!
Особенности блочных элементов
Блоки – это прямоугольные элементы, которые занимают всю доступную ширину страницы, всегда начинаются с новой строки и по умолчанию автоматически рассчитывают высоту в зависимости от содержимого.
Все блочные элементы состоят из 4 свойств, которые на подобие рамок окружают содержимое объекта.
Главным в блоке выступает контент.
Вокруг него расположены поля, которые называются padding. Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.
После идут сами границы, которые именуются английским словом border.
И, наконец, последней рамкой вокруг всего перечисленного выступает margin –отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.
В качестве примера запрограммируем 2 html блока и заполним созданные элементы текстом.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Заголовок</title>
</head>
<body>
<div>
В этом блочном элементе разместим текст первого объекта.
</div>
<div>
А вот в этом блочном элементе разместим текст второго объекта.
</div>
</body>
</html> |
<!DOCTYPE html> <html lang=»en» xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta charset=»utf-8″ /> <title>Заголовок</title> </head> <body> <div> В этом блочном элементе разместим текст первого объекта. </div> <div> А вот в этом блочном элементе разместим текст второго объекта. </div> </body> </html>
На данный момент в браузере этот код отобразится как обычные два предложения. Для оформления дизайна блоков необходимо подключить таблицу стилей и языком css задать определенные свойства.
Внесем-ка ярких красок в обыденную жизнь html
Для того чтобы блочные объекты выглядели интересно и привлекательно, нам в обязательном порядке стоит подключить каскадную таблицу стилей.
Для этого в контейнере head после тега <title> необходимо добавить строку:
<link rel=»stylesheet» href=»style.css»>
Сам по себе элемент <link> располагается только внутри тега <head> и устанавливает связь с внешними файлами, отвечающими за стили.
Настало время задать цветное оформление и расположение блокам.
Первый блок я решил оформить в красных цветах с жирными границами и сделать его полупрозрачным.
Второй же блок – полностью видимый, желтого цвета с тонкими границами и с закругленными углами. Замечу, что блоки не являются фиксированными и текст в них выравнивается по ширине, а не располагается по центру. За все видоизменения отвечает ниже представленный css-код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .element1 {
opacity: 0.7;
background: #edab92;
float: left;
width: 310px;
border: 4px solid red;
padding: 6px;
padding-right: 15px;
}
.element2 {
width: 310px;
float: left;
background: #fc0;
border: solid 1px grey;
position: relative;
padding: 6px;
left: -65px;
top: 55px;
border-radius: 10px;
} |
.element1 { opacity: 0.7; background: #edab92; float: left; width: 310px; border: 4px solid red; padding: 6px; padding-right: 15px; } .element2 { width: 310px; float: left; background: #fc0; border: solid 1px grey; position: relative; padding: 6px; left: -65px; top: 55px; border-radius: 10px; }
Для того чтобы вы смогли лицезреть данный пример во всей красе во вкладке браузера, создайте простой текстовый файл и внесите в него выше написанный текст. После сохраните документ с названием «style.css», обязательно проверьте, совпадает ли название документа со значением атрибута тега <link> href=»style.css».
Думаю, вы догадались, что в случае несовпадения, внешний документ с описанием стилей не будет найден, вследствие чего изменения не вступят в силу.
Теперь давайте разберем строки css-кода. Для наглядности я структурировал все в таблицу с двумя колонками.
| Значение | |
| opacity | Отвечает за прозрачность объекта. При opacity равному 0 элементы становятся полностью прозрачными, при 1 – полностью видимыми. |
| width | Отвечает за ширину блочных элементов. |
| background | Задает характеристические параметры фона, который в свою очередь может задаваться как цветом, так и картинкой. |
| border | Позволяет установить толщину, цвет и стиль границ вокруг объекта. |
| float | Задает выравнивание элемента. Остальные объекты по умолчанию обтекают данный. Можно задать значения: left, right, none (не задает обтекание элементов) или inherit (повторяет значение родительского объекта). |
| border-radius | Способствует округлению углов блока. Можно указывать как одинаковый радиус для всех углов, так и уникальный для каждого. |
| top | Определяет расстояния между верхними границами родительского элемента и дочернего. |
| left | Определяет расстояния между левыми границами родительского и дочернего элементов. |
Обратите внимание на строку в коде примера position: relative в element2. Так как этому атрибуту, определяющему позиционирование объекта, задано значение relative, то расположение самого объекта будет меняться не от координат верхнего края браузера, а от координат верхней границы первого блока element1.
Вот почему при задании top = 55px и left = -65px второй блочный элемент сдвинулся вниз на 55 пикселей и вправо на 65 пикселей от границ первого блока.
Кстати, особо внимательные могли заметить, что left = -65px и right = 65px – это одно и то же.
А что же HTML 5
Напоследок хотел бы добавить, что в современной платформе html 5 есть нововведенные блочные теги <nav>, <article>, <footer>, <header> и другие, которые заменяют привычный div. Их суть применения для человека не отличается ничем, однако они облегчают работу машин.
Надеюсь, что описанная информация была вам полезной. А если это так, то не забудьте оповестить об этом своих знакомых и вступить в ряды моих подписчиков! До связи. Пока-пока!
С уважением, Роман Чуешов
Загрузка…Прочитано: 918 раз
romanchueshov.ru
HTML Блоки
Каждый элемент HTML имеет значение по умолчанию в зависимости от типа элемента. Значение по умолчанию для большинства элементов блоки или встроенные элементы.
Блочные Элементы
Блочный элемент всегда начинается с новой строки и занимает всю ширину доступного дисплея (простирается влево и вправо насколько это возможно).
Элемент <div> является блочным элементом.
Примеры блочных элементов:
- <div>
- <h2> — <h6>
- <p>
- <form>
Встроенные Элементы
Встроенный элемент не начинаются с новой строки и занимают столько ширины, сколько нужно.
Это элемент <span> встроенный в параграф.
Примеры встроенных элементов:
Элемент <div>
Элемент <div> часто используется как контейнер для элементов HTML.
Элемент <div> не имеет обязательных атрибутов, style и class являются общими.
При использовании CSS, элемент <div> может быть использован для применения стиля блока контента:
Пример
<div>
<h3>Лондон</h3>
<p>Лондон является столицей Англии. Это самый густонаселенный город в Соединенном Королевстве, с пригородами свыше 13 миллионов жителей.</p>
</div>
Элемент <span>
Элемент <span> часто используется как встроенный контейнер для текста.
Элемент <span> не имеет обязательных атрибутов, style и class являются общими.
При использовании CSS, элемент <span> может использоваться для деталей стиля встроенного текста:
Группировка Тегов HTML
| Тег | Описание |
|---|---|
| Определяет раздел в документе (на уровне блочного элемнта) | |
| <span> | Определяет раздел в документе (на уровне встроенного элемента) |
schoolsw3.com
Семантические элементы HTML5
Опубликовано: 26 октября 2014 Обновлено: 30 апреля 2019
Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div>, стало <header>). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны глобальные атрибуты.
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
- Мета содержимое
- Потоковое содержимое
- Секционное содержимое
- Заголовочное содержимое
- Текстовое содержимое
- Встроенное содержимое
- Интерактивное содержимое
Описание HTML5-элементов
1. Элемент <header>
Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.
<header>
<h2>Site description</h2>
<nav>
<ul>
<li><a href="">About</a>
<li><a href="">Forum</a>
<li><a href="">Download</a>
</ul>
</nav>
</header>Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.
2. Элемент <nav>
Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.
<nav>
<ul>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
</nav>В качестве элементов панели навигации можно использовать не только элементы списков:
<nav>
<p><a href="">...</a></p>
<p><a href="">...</a></p>
</nav>Также можно добавлять заголовки внутрь элемента:
<nav>
<h3>...</h3>
<ul>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
</nav>3. Элемент <article>
Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article>
<header>
<h3>...</h3>
</header>
<p>...</p>
<footer>
Опубликовано в категории<a href="">Музыка</a>.
<a href="">0 комментариев</a>
</footer>
</article>4. Элемент <section>
Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
<article>
<h2>...</h2>
<section>
<h3>...</h3>
<p>...</p>
</section>
<section>
<h3>...</h3>
<p>...</p>
</section>
<p>...</p>
</article><article> внутри <section>
Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>
<section>
<h2>Заметки о природе</h2>
<article>
<h3>...</h3>
<p>...</p>
</article>
<article>
<h3>...</h3>
<p>...</p>
</article>
</section>
<section>
<h2>Исторические заметки</h2>
<article>
<h3>...</h3>
<p>...</p>
</article>
<article>
<h3>...</h3>
<p>...</p>
</article>
</section>5. Элемент <aside>
Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.
<aside>
<h3>...</h3>
<p>...</p>
</aside><aside>
<h3>...</h3>
<p>...</p>
<blockquote>
<p>...<cite>...</cite>...</p>
<p>...</p>
</blockquote>
</aside>6. Элемент <footer>
Категории контента: потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.
<footer>
<address>...</address>
<small>@2014...</small>
</footer>7. Элемент <address>
Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.
8. Элемент <main>
Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.
<body>
<header>
<h2>Пудель</h2>
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="about.html">О породе</a></li>
<li><a href="health.html">Здоровье</a></li>
</ul>
</nav>
</header>
<main>
<section>
<header>
<h3>О породе</h3>
<nav>
<ul>
<li><a href="#basic">Разновидности</a></li>
<li><a href="#app">Внешний вид</a></li>
<li><a href="#temp">Характер</a></li>
</ul>
</nav>
</header>
<section>
<h4>Разновидности</h4>
<p>...</p>
</section>
<section>
<h4>Внешний вид</h4>
<p>...</p>
</section>
<section>
<h4>Характер</h4>
<p>...</p>
</section>
<footer>
<a href="#basic">Разновидности</a>
<a href="#app">Внешний вид</a>
<a href="#temp">Характер</a>
</footer>
</section>
</main>
<footer>
<small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>
</footer>
</body>9. Элемент <figure>
Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..
<figure>
<img src="picture.jpg" alt="Осень">
<figcaption>Осенний лес</figcaption>
</figure>Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:
margin-left: 40px;
margin-right: 40px;
margin-top: 1em;
margin-bottom: 1em;10. Элемент <figcaption>
Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.
11. Элемент <time>
Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
<time datetime="2014-09-25"> 25 Сентября 2014</time>Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>12. Элемент <mark>
Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
13. Элемент <bdi>
Категории контента: потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
14. Элемент <wbr>
Категории контента: потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
15. Элементы для описания Восточно-Азиатских символов
Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.
Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.
Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
html5book.ru
блоки | htmlbook.ru
Сделайте страницу, как показано на рисунке ниже, которая корректно должна отображаться во всех современных браузерах. Обратите внимание на небольшой градиент в блоке, светлую рамку вокруг и скругление уголков снизу.
Влад Мержевич
Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width, а высота через height; вокруг контента идут поля (padding), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border) и завершают блок отступы (margin), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.
Рис. 3.1. Свойства, формирующие блочный элемент
Сделайте блок, показанный на рис. 1. Блок содержит полупрозрачную градиентную рамку с градиентным фоном под заголовком и небольшим указателем. Фон на странице приведён лишь для наглядности эффекта полупрозрачности, вы можете указать любую свою картинку. Минимальная высота блока составляет 100px.
Рис. 1
Сделайте блок, показанный на рис. 1. Блок содержит скругления в заголовке и внизу блока. Вокруг блока тёмно-зелёная рамка и тень. Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px.
Рис. 1
htmlbook.ru
Блочные и строчные html теги
Все HTML элементы делятся на две группы:
- блочные (block)
- строчные (inline)
Блочные элементы представляют собой большие строительные блоки вашей веб-страницы. При отображении браузер автоматически добавляет разрыв строки до и после блочного элемента, при этом он занимает всю доступную ширину (по умолчанию отображается на веб-странице в виде прямоугольника), а высота блочного элемента вычисляется браузером автоматически, исходя из объема его содержимого. Текст в блочных элементах по умолчанию выравнивается по левому краю.
Обычно блочные элементы используются, чтобы разделить содержимое веб-страницы на логические блоки (например: верхний колонтитул (шапка сайта), меню, блок с контентом, нижний колонтитул (footer) и др.). Блочные элементы нельзя вкладывать в строчные, исключением являются только ссылки и ячейки таблиц, внутри которых по стандарту HTML5 могут быть расположены блочные элементы.
Строчные элементы используются для разметки частей содержимого элементов. Ширина строчного элемента равна объему содержимого. В отличии от блочных элементов браузер не добавляет разрыв строки до и после строчного элемента, поэтому, если несколько строчных элементов идут подряд друг за другом, они располагаются на одной строке и переносятся на другую строку при необходимости. В большинстве случаев внутрь строчных элементов допустимо помещать другие строчные элементы, вставлять блочные элементы внутрь строчных запрещено.
Строчные теги
| Тег | Краткое описание |
|---|---|
| <a> | Создает гиперссылку. |
| <abbr> | Определяет текст как аббревиатуру. |
| <audio> | Определяет звуковое содержимое. |
| <b> | Выделяет текст жирным шрифтом. |
| <bdo> | Определяет направление отображения текста. |
| <button> | Создает кнопку. |
| <canvas> | Определяет область для рисования графики. |
| <cite> | Определяет заголовок для работы — преобразует текст в курсивный. |
| <code> | Определяет кусок программного кода — преобразует текст в моноширинный. |
| <del> | Определяет текст, который был удален из документа — отображается перечеркнутым текстом. |
| <dfn> | Выделяет определения термина — преобразует шрифт в наклонный. |
| <em> | Определяет выделенный текст — преобразует текст в курсивный. |
| <i> | Преобразует текст в курсивный. |
| <iframe> | Определяет встроенный frame. |
| <img> | Определяет изображение. |
| <input> | Создаeт поле для ввода данных. |
| <ins> | Определяет текст, который был добавлен в документ — отображает текст подчеркнутым. |
| <kbd> | Определяет текст вводимый с клавиатуры — преобразует текст в моноширинный. |
| <mark> | Определяет важную часть текста. |
| <meter> | Определяет скалярное измерение в пределах известного диапазона. |
| <q> | Определяет короткую цитату. |
| <rp> | Определяет, что показывать браузеру, который не поддерживает тег <ruby>. |
| <rt> | Добавляет аннотацию сверху или снизу от символов, заключенных в элементе <ruby>. |
| <s> | Определяет текст, который больше не является правильным — отображает текст перечеркнутым. |
| <samp> | Определяет текст, который является результатом вывода компьютерной программы. |
| <small> | Определяет текст маленького размера. |
| <select> | Создает выпадающий список. |
| <span> | Определяет строчный элемент документа. |
| <strong> | Определяет важный текст — преобразует шрифт в полужирный. |
| <sub> | Определяет текст в нижнем индексе. |
| <sup> | Определяет текст в верхнем индексе. |
| <td> | Создает ячейку таблицы. |
| <textarea> | Создает многострочное текстовое поле. |
| <th> | Создает заголовочную ячейку в таблице. |
| <var> | Определяет переменную — выделяет текст курсивом. |
| <video> | Добавляет на страницу видео файл. |
Блочные теги
| Тег | Краткое описание |
|---|---|
| <address> | Определяет контактную информацию автора документа/статьи. |
| <artical> | Определяет текст как статью, новость и др. |
| <aside> | Определяет контент в стороне от содержимого страницы. |
| <blockquote> | Выделяет текст с другого источника, как блочную цитату. |
| <dd> | Cоздает описание элемента в списке определений. |
| <div> | Определяет раздел документа. |
| <dl> | Создает список определений. |
| <dt> | Oпределяет термин в списке определений. |
| <figure> | Группирует элементы страницы. |
| <footer> | Нижняя часть документа. |
| <form> | Определяет HTML форму. |
| <h2> — <h6> | Определяют HTML заголовки. |
| <header> | Задает «шапку» сайта или раздела. |
| <hr> | Создает горизонтальную линию. |
| <li> | Определяет элемент списка. |
| <nav> | Определяет группу ссылок для навигации. |
| <ol> | Создает нумерованный(упорядоченный) список. |
| <p> | Определяет абзац. |
| <pre> | Оставляет содержимое в первоначальном виде. |
| <ruby> | Определяет небольшую аннотацию (для типографии Восточной Азии). |
| <section> | Определяет разделы документа. |
| <table> | Создает таблицу. |
| <tr> | Создает строку в таблице. |
| <ul> | Определяет маркированный(неупорядоченный) список. |
Примечание: для переопределения типа элемента с блочного на строчный или со строчного на блочный используется CSS свойство display.
puzzleweb.ru
Как сделать блок по центру в css, а также сделать его невидимым
От автора: я снова приветствую вас на нашем блоге. В этой статье я хотел бы подробнее обсудить такой вопрос, как сделать блок по центру в css, а также несколько других манипуляций с блочными элементами.
Центрирование
Есть много элементов на веб-странице, которые могут по дизайну стоять по центру. Например, заголовки, логотип в шапке или информация в футере. Но как выровнять ее идеально по центру? Конечно, нужно понимать, что высчитывать вручную отступы или применять позиционирование не стоит, когда есть замечательное значение свойства margin – auto:
.block{ margin: 0 auto; }
Первое значение этого свойства задает отступ сверху и снизу. Соответственно, вместо нуля вы можете записать свое значение, если необходимо дать такие отступы. Второе значение auto определяет отступы слева и справа. Они определяются так, что элемент станет по центру. Но здесь очень важно соблюсти еще одно правило:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЭлементу нужно задать ширину. Обязательно. Я объясню почему. Например, он находится в общем контейнере шириной 980 пикселей. И если вы не зададите явную ширину блоку, то как он выровняется по центру, если он и без этого занимает всю ширину? В общем, достаточно записать width или max-width и центровка будет работать.
Таким же способом можно отцентрировать и те блоки, которые будут вложены уже в этот. Вообще уровень вложенности никак не помешает центровке.
Как создать блок в css и его внешний вид
Я уже говорил в одной из предыдущих статей, что блочные элементы создаются тегом div. Он парный. Это просто пустой контейнер для содержимого. Ему нужно также задать стилевой класс или идентификатор, чтобы получить возможность обращаться к нему через css. Допустим, так:
<div class = «post-anonce»></div>
<div class = «post-anonce»></div> |
Давайте классам понятные имена, чтобы сразу было понятно, какую роль они выполняют. Например, в этой строчке кода сразу понятно, что наш блок является анонсом статьи. Далее его нужно соответствующим образом оформить.
.post-anonce{ margin: 10px; padding: 15px; background: #ccc; border-radius: 15px; width: 250px; height: 220px; }
.post-anonce{ margin: 10px; padding: 15px; background: #ccc; border-radius: 15px; width: 250px; height: 220px; } |
Мы дали нашему фрагменту много разных правил. Например, внешние и внутренние отступы, фон, закругление углов, а также основные размеры – ширину и высоту.
Добавим содержимое
Мы создали блок для анонса, но самого анонса в нем пока нет. Давайте его добавим, чтобы было как на реальном сайте. Что вообще включает в себя анонс? Обычно дату публикации и имя автора, заголовок статьи, картинку-миниатюру и кнопку читать далее. Но давайте сделаем простой анонс: заголовок, картинка и кнопка.
<div class = «post-anonce»> <img src = «html.png»> <h2>Заголовок статьи</h2> <p>Это текст анонса, обычно в него помещаются первые 40-50 слов из статьи, Чтобы читатель мог примерно понять, о чем она будет.</p> <a href = «#»>Читать полностью</a> </div>
<div class = «post-anonce»> <img src = «html.png»> <h2>Заголовок статьи</h2> <p>Это текст анонса, обычно в него помещаются первые 40-50 слов из статьи, Чтобы читатель мог примерно понять, о чем она будет.</p> <a href = «#»>Читать полностью</a> </div> |
Как видите, мы добавили все, что нужно. Картинку, заголовок, небольшой текст в абзаце и ссылку на то, чтобы прочитать полностью. Конечно, она никуда не ведет, так как у нас не реальный сайт – мы просто рассматриваем, как можно сделать блок.
Картинку мы задали, как будто она лежит в той же папке, что и css-файл, в котором задаются эти стили. Теперь остается оформить ее:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее.post-anonce img{ width: 64px; height: 64px; padding: 10px; float: left }
.post-anonce img{ width: 64px; height: 64px; padding: 10px; float: left } |
Зададим ей четкие размеры, прижмем к левому краю, чтобы текст обтекал справа, также дадим небольшие отступы. И вот что в итоге получилось:
Это похоже на анонс? Конечно похоже, мне кажется, даже очень неплохо получилось. Конечно, на реальном сайте он бы еще дорабатывался. Текст и заголовок получили бы те цвета и шрифты, которые определены им по дизайну, а слева добавились бы другие блоки-анонсы.
Тем не менее вот вам простой пример создания блока, в котором есть все необходимое для удобства пользователя.
Как сделать блок невидимым в css
В начале я обещал вам еще несколько манипуляций с блоками. Рассмотрим их коротко, они касаются видимости элемента на странице. Например, добавим только что созданному блоку такое свойство: display: none;
Обновите страницу и вы увидите, что на ней ничего нет – блок исчез. Другой способ убрать его – сделать прозрачным. За это отвечает свойство opacity. По умолчанию все элементы на странице непрозрачные, то есть имеют opacity: 1. Если задать opacity: 0, то блок станет полностью прозрачным. Также можно задавать значения между этими цифрами.
Применение на практике
Сделаем наш блок прозрачным и добавим перед ним слова, на которые нужно будет навести для того, чтобы он появился.
<div class = «show-anonce»>Наведи сюда, чтобы увидеть анонс</div>
<div class = «show-anonce»>Наведи сюда, чтобы увидеть анонс</div> |
Так мы создали нужный блок.
.post-anonce{ Opacity: 0; }
.post-anonce{ Opacity: 0; } |
Сделали анонс прозрачным.
.show-anonce:hover + .post-anonce{ opacity: 1; } .post-anonce:hover{ opacity: 1; }
.show-anonce:hover + .post-anonce{ opacity: 1; } .post-anonce:hover{ opacity: 1; } |
Эти правила означают следующее: при наведении на блок show-anonce наш анонс будет становиться непрозрачным, то есть полностью видимым. Тоже произойдет и когда курсор наведен на сам анонс, чтобы он не пропадал из виду сразу.
Протестируйте у себя и убедитесь, что так и есть. Конечно, я редко где встречал такое, когда на сайте был скрыт изначально анонс, но тут главное уловить суть. Теперь вы можете сделать выпадающее меню на чистом css даже без скриптов. К этому всему делу можно добавить плавные изменения цветов и другие преобразования. Простор для вашей фантазии.
Вот так вот я начал с центровки, а закончил управлением видимости блока. На самом деле все это лишь крошечные возможности, которые дает css в управлении элементами. Если вы хотите знать больше, то изучайте css и подписывайтесь на наш блог, чтобы получать полезные материалы по сайтостроению каждую неделю.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотретьwebformyself.com
Блочные теги в HTML
Блочные теги в HTML — это основа построения страницы. Они занимают все пространство родительского элемента (как минимум родителем будет тег body), имеют свойство display: block и свойство width: auto.
К блочным элементам относятся:
- body,
- header,
- footer,
- section,
- aside,
- div,
- p,
- blockquote
- списки ul, ol, dl, а также их элементы, хотя свойство display для элементов li имеет значение list-item,
- заголовки h2 … h6.
- figure и figcaption
- form
Абзацы — тег <p>
Это блочный элемент, который предназначен для форматирования основного текста. В книгах, журналах, газетах текст статьи всегда разбит на абзацы, для того чтобы как-то выделить отдельные смысловые блоки. То же самое касается текста на сайте — чтобы он нормально воспринимался, все содержимое страницы необходимо делить на абзацы, добавляя в разметку теги <p> ... </p>.
По умолчанию в браузерах эти теги имеют отступы сверху и снизу, которые позволяют визуально отделить один абзац от другого.
Пример:
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Test</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto beatae optio tenetur odio culpa minima.</p> <p>Omnis suscipit nostrum eos facilis dolore, consequuntur magnam enim ea. Nostrum reprehenderit adipisci, eligendi ad?</p> <p>Porro dolore, dolorem reiciendis sint. Eum beatae quam corporis itaque consequatur laborum voluptate pariatur nisi?</p> </body> </html>
<!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Test</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto beatae optio tenetur odio culpa minima.</p> <p>Omnis suscipit nostrum eos facilis dolore, consequuntur magnam enim ea. Nostrum reprehenderit adipisci, eligendi ad?</p> <p>Porro dolore, dolorem reiciendis sint. Eum beatae quam corporis itaque consequatur laborum voluptate pariatur nisi?</p> </body> </html> |
Вживую:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto beatae optio tenetur odio culpa minima.
Omnis suscipit nostrum eos facilis dolore, consequuntur magnam enim ea. Nostrum reprehenderit adipisci, eligendi ad?
Porro dolore, dolorem reiciendis sint. Eum beatae quam corporis itaque consequatur laborum voluptate pariatur nisi?
На скриншоте видно, что абзацы выровнялись вдоль всей страницы. Поскольку текста в них немного, то каждый абзац занимает всего одну строку. Если текста будет больше, то, соответственно, текст расположится в 2, 3, 4 или более строк. Но даже между нашими короткими абзацами видны отступы. Внизу картинки показан открытый Инспектор элементов, в котором слева мы видим html-код, а справа — css-свойства, которые существуют в любом браузере для каждого элемента по умолчанию, а также те, которые будем назначать сами. Открыть Инспектор можно с помощью сочетания клавиш Ctrl + Shift + I или F12, а также сделав правый клик на элементе и выбрав опцию «Просмотреть код» (Chrome, Opera, Yandex, Saphari) или «Исследовать элемент» (Firefox).
На картинке справа подчеркнуты свойства display: block, -webkit-margin-before и -webkit-margin-after со значением 1em, т.е. это значение соответствует размеру шрифта, установленного в браузере по умолчанию. Обычно это 16px. Собственно, именно это значение видно для выделенной полосы сверху и снизу блока в виде margin 16px.
Поскольку для форматирования текста одних абзацев недостаточно, разбавим текст заголовками.
Заголовки на странице
Заголовков в HTML существует 6 видов. все они начинаются с h и цифры, т.е. h2, h3, h4 … и до h6. Они также являются блочными, и занимают все пространство до конца родительского элемента, даже, если текста в них намного меньше. На скриншоте ниже видно, что h2, выделенный голубым, занимает всю строку.
<h2>Lorem ipsum dolor sit amet</h2> <h3>Labore rem dolor pariatur unde</h3> <h4>Atque numquam, expedita voluptates libero</h4> <h5>Nisi quod sapiente sed excepturi</h5> <h5>Distinctio aliquid rerum assumenda dolorum</h5> <h6>Optio impedit atque ipsam.</h6>
<h2>Lorem ipsum dolor sit amet</h2> <h3>Labore rem dolor pariatur unde</h3> <h4>Atque numquam, expedita voluptates libero</h4> <h5>Nisi quod sapiente sed excepturi</h5> <h5>Distinctio aliquid rerum assumenda dolorum</h5> <h6>Optio impedit atque ipsam.</h6> |
Labore rem dolor pariatur unde
Atque numquam, expedita voluptates libero
Nisi quod sapiente sed excepturi
Distinctio aliquid rerum assumenda dolorum
Optio impedit atque ipsam.
Самым главным и самым большим по размеру является h2. С точки зрения SEO, т.е. оптимизации сайта для продвижения его в поисковых системах, h2 на странице должен быть только один. Как правило, это название страницы (Главная, О компании, Контакты и т.п.) или название статьи, например, «Блочные теги в HTML».
Заголовки различаются по размеру. Это свойство в css определяются как font-size. Например, для h2, как видно из картинки это свойство составляет 2em.
Заголовки, как и абзацы имеют по умолчанию отступ сверху и снизу, определяемый значением свойства margin (выделены оранжевым цветом), а также выделение жирным цветом, которое задается css-свойством font-weight: bold.
Основные блоки — <div>
Для разметки страницы очень важны элементы, которые будут, по сути «кирпичиками», т.е. основой визуального форматирования. Для этого существуют блоки, задаваемые тегом <div>. Они также имеют свойство display: block, но при этом не имеют отступов.
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quod fugiat a voluptatum eaque error. Voluptatibus laboriosam, magnam, blanditiis quis quasi odit maxime tempora at architecto quibusdam iusto earum quidem.</div> <div>Unde quisquam non earum cumque quas nostrum doloribus, molestias at adipisci, provident eos laboriosam tenetur cum incidunt sit cupiditate ratione culpa enim! Recusandae quis amet vel nemo, nam optio, magni.</div> <div>Error repellat cupiditate reiciendis? Recusandae, quia. At doloremque incidunt repellendus illum quae, sit quis, nulla dignissimos veniam, dolore facilis id expedita quam tempora? At sequi voluptate consequatur ab quod magni.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quod fugiat a voluptatum eaque error. Voluptatibus laboriosam, magnam, blanditiis quis quasi odit maxime tempora at architecto quibusdam iusto earum quidem.</div> <div>Unde quisquam non earum cumque quas nostrum doloribus, molestias at adipisci, provident eos laboriosam tenetur cum incidunt sit cupiditate ratione culpa enim! Recusandae quis amet vel nemo, nam optio, magni.</div> <div>Error repellat cupiditate reiciendis? Recusandae, quia. At doloremque incidunt repellendus illum quae, sit quis, nulla dignissimos veniam, dolore facilis id expedita quam tempora? At sequi voluptate consequatur ab quod magni.</div> |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam quod fugiat a voluptatum eaque error. Voluptatibus laboriosam, magnam, blanditiis quis quasi odit maxime tempora at architecto quibusdam iusto earum quidem.
Unde quisquam non earum cumque quas nostrum doloribus, molestias at adipisci, provident eos laboriosam tenetur cum incidunt sit cupiditate ratione culpa enim! Recusandae quis amet vel nemo, nam optio, magni.
Error repellat cupiditate reiciendis? Recusandae, quia. At doloremque incidunt repellendus illum quae, sit quis, nulla dignissimos veniam, dolore facilis id expedita quam tempora? At sequi voluptate consequatur ab quod magni.
На скриншоте видно, что div имеет свойство display: block, а вот свойство margin у него отсутствует.
Div-ы — это важные элементы для формирования внешнего вида сайта, хотя, казалось бы, ничем особым они не выделяются. Дело все в том, что этим элементам чаще всего задают такие атрибуты, как class и id, для того, чтобы задать собственные css-свойства. Например, div-ы c будут в примере ниже иметь рамку (border: 2px solid #aaa), темный цвет фона (background-color), светлый цвет текста (color: #aaa), а также внутренние отступы (padding: 10px) и внешние отступы, которые отодвигают блоки друг от друга (margin: 10px).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, voluptatem!
Adipisci facilis, nesciunt cupiditate consequatur laboriosam iure et, quisquam ut!
Repudiandae expedita, inventore cum voluptatem aliquid rem consectetur libero tempora!
Кстати, у тега body тоже по умолчанию есть отступы в 8px:
Блочная цитата <blockquote>
Не слишком часто используемый элемент. Но в некоторых случаях незаменимый. <blockquote> — это блочная цитата, которая по умолчанию имеет отступы сверху и снизу, как у абзацев, но также у нее есть отступы справа и слева в 40px (см. скриншот), которые смещают ее по сравнению с остальным текстом как бы внутрь. Поэтому используют этот тег для выделения текста, который может быть некой цитатой: либо кого-то из известных людей, либо какого-то текста из статьи, который стоит выделить, либо чужого текста в сообщении на форуме.
Этот тег хорош еще тем, что для него можно назначить форматирование, которое будет выделять ее на странице по сравнению с остальным текстом.
<style> blockquote { background-color: #600909; color: #fff; font-family: Georgia, «Times New Roman», serif; border: 2px outset #fc6868; padding: 15px; width: 60%; } </style> <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta provident laudantium aliquid perferendis nulla culpa facere nihil laboriosam? Ducimus dignissimos quibusdam sed cum, provident asperiores, accusamus numquam quidem sit molestias.</blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa libero eos quis explicabo voluptatibus fugiat et quam labore vitae consequuntur?</p> <p>Quae nostrum modi molestias, maxime vel repellat quaerat facilis, asperiores ipsam placeat nulla voluptates quas repudiandae dolore quam. Inventore, debitis!</p> <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta provident laudantium aliquid perferendis nulla culpa facere nihil laboriosam? Ducimus dignissimos quibusdam sed cum, provident asperiores, accusamus numquam quidem sit molestias.</blockquote> <p>Aliquam repudiandae repellat id necessitatibus labore quasi ab, iusto perspiciatis dolor molestias saepe, nemo quas blanditiis illum, maxime in totam.</p> <p>Minus perspiciatis ab est saepe, ex placeat adipisci ea repellat aspernatur distinctio quod cumque ratione asperiores rem voluptate ut tempora.</p>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style> blockquote { background-color: #600909; color: #fff; font-family: Georgia, «Times New Roman», serif; border: 2px outset #fc6868; padding: 15px; width: 60%; } </style> <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta provident laudantium aliquid perferendis nulla culpa facere nihil laboriosam? Ducimus dignissimos quibusdam sed cum, provident asperiores, accusamus numquam quidem sit molestias.</blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa libero eos quis explicabo voluptatibus fugiat et quam labore vitae consequuntur?</p> <p>Quae nostrum modi molestias, maxime vel repellat quaerat facilis, asperiores ipsam placeat nulla voluptates quas repudiandae dolore quam. Inventore, debitis!</p> <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta provident laudantium aliquid perferendis nulla culpa facere nihil laboriosam? Ducimus dignissimos quibusdam sed cum, provident asperiores, accusamus numquam quidem sit molestias.</blockquote> <p>Aliquam repudiandae repellat id necessitatibus labore quasi ab, iusto perspiciatis dolor molestias saepe, nemo quas blanditiis illum, maxime in totam.</p> <p>Minus perspiciatis ab est saepe, ex placeat adipisci ea repellat aspernatur distinctio quod cumque ratione asperiores rem voluptate ut tempora.</p> |
Скопируйте код, вставьте в свой текстовый редактор и попробуйте самостоятельно исследовать элемент.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta provident laudantium aliquid perferendis nulla culpa facere nihil laboriosam? Ducimus dignissimos quibusdam sed cum, provident asperiores, accusamus numquam quidem sit molestias.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa libero eos quis explicabo voluptatibus fugiat et quam labore vitae consequuntur?
Quae nostrum modi molestias, maxime vel repellat quaerat facilis, asperiores ipsam placeat nulla voluptates quas repudiandae dolore quam. Inventore, debitis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta provident laudantium aliquid perferendis nulla culpa facere nihil laboriosam? Ducimus dignissimos quibusdam sed cum, provident asperiores, accusamus numquam quidem sit molestias.
Aliquam repudiandae repellat id necessitatibus labore quasi ab, iusto perspiciatis dolor molestias saepe, nemo quas blanditiis illum, maxime in totam.
Minus perspiciatis ab est saepe, ex placeat adipisci ea repellat aspernatur distinctio quod cumque ratione asperiores rem voluptate ut tempora.
О списках вы можете прочитать в другой статье, также к блочным элементам относятся тег form и теги для описания и стилевого оформления изображений или кода figure и figcption. Остальные элементы рассмотрим несколько позже.
Кроме блочных, в HTML часто используются строчные, или линейные, теги и строчно-блочные элементы, которые находятся как бы между ними, т.к. имеют свойство display: inline-block.
Просмотров: 131
html-plus.in.ua