CSS - Позиционирование блочных элементов. Как сделать блок в html и умело научиться размещать его на своей web-странице
В HTML для позиционирования элементов на странице мы использовали таблицы. У таблиц есть как преимущества (легкость использования, одинаковое отображение браузерами), так и недостатки (объемный, нечитабельный код, нелогичность верстки и т.д.).
В CSS для позиционирования элементов используются блоки (div-ы). Код при этом становится компактным, логичным и легко изменяемым. К недостаткам блочной верстки можно отнести неодинаковую поддержку браузерами, поэтому приходится писать кроссбраузерный код (т.е. код, который отображается разными браузерами почти одинаково).
Итак, приступим. Предположим, у нас есть вот такая стандартная html-страница:
Теперь давайте посмотрим, как можно сверстать такую страницу средствами CSS.
Если визуально разделить нашу страницу на прямоугольные блоки, то мы получим четыре блока: шапка сайта, меню, контент и низ сайта. Таким образом, мы имеем четыре div-а. Давайте напишем html-код страницы с четырьмя div-ами и каждому дадим соответствующий идентификатор (id):
шапка сайта
низ сайта
Теперь, на странице style.css зададим те свойства, которые уже знаем, а именно ширину, высоту и фон каждого блока:
#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; } #footer{ background:darkred; width:715px; height:30px; }
Сейчас наша страница в браузере (в уменьшенном варианте) выглядит так:
Такое позиционирование элементов называется позиционированием в нормальном потоке . Это значит, что все элементы отображаются в окне браузера сверху вниз, по вертикали, в том порядке, в каком они следуют друг за другом в html-коде.
По своей сути нормальный поток ничем не отличается от позиционирования элементов в HTML. И для верстки такой страницы без CSS, нам пришлось бы использовать таблицу, за неимением других вариантов. В CSS же нам предоставляются и другие схемы позиционирования:
- абсолютное позиционирование
- относительное позиционирование
- плавающая блоковая модель
- static - блок позиционируется в нормальном потоке. Это значение по умолчанию.
- relative - относительное позиционирование (относительно нормального потока).
- absolute - абсолютное позиционирование
- fixed - фиксированное позиционирование (фиксируется относительно области просмотра).
Абсолютное позиционирование
При этой схеме позиционирования расположение блока на странице не зависит от того, в каком месте html-кода расположен этот блок. Расположение каждого блока задается указанием, в каком месте экрана отобразить данный блок. Для этого существуют четыре свойства:
- left - указывает на сколько надо сместить блок относительно левого края окна.
- right - указывает на сколько надо сместить блок относительно правого края окна.
- top - указывает на сколько надо сместить блок относительно верхнего края окна.
- bottom - указывает на сколько надо сместить блок относительно нижнего края окна.
А вот блок content нужно расположить в другом месте, поэтому для него мы укажем свойство position:absolute и зададим смещение: от левого края окна на ширину блока menu , т.е. на 190 пикселов, а от верхнего края окна на высоту блока header , т.е. на 100 пикселов.
#header{ background:darkred; width:715px; height:100px; } #menu{ background:oldlace; width:190px; height:300px; } #content{ background:oldlace; width:525px; height:300px; position:absolute; left:190px; top:100px; } #footer{ background:darkred; width:715px; height:30px; }
Теперь наша страница в браузере выглядит так:
Наш блок расположился не совсем так, как ожидалось. Это от того, что мы не учли один нюанс: у браузеров есть свои, встроенные таблицы стилей. И, если мы не задали какое-либо свойство, то используется свойство по умолчанию.
Так, по умолчанию для элемента body определены поля, а мы их не учитывали при задании свойств смещения. Чтобы решить эту проблему, достаточно задать для body свойство margin:0px , т.е. явно указать размер полей (в нашем примере - их отсутствие). Добавим это в таблицу стилей:
body{ margin:0px; }
Теперь наша страница выглядит так, как мы и ожидали:
В принципе размеры смещения можно было задать и для каждого блока, иногда это необходимо. Главное, что необходимо запомнить: при абсолютном позиционировании следует задать для блока свойство position:absolute и свойства смещения относительно "родительского" элемента. В нашем примере родительским элементом для div-ов было окно браузера, но может быть и по-другому.
Предположим, мы решили добавить блок новостей на нашу страницу и разместить его в блоке контента, например, вот так:
Тогда в нашу html-страницу, в div id="content" мы добавим div id="news" :
шапка сайта
Контент
блок новостей
низ сайта
Тогда в таблице стилей смещение мы будем указывать относительно блока content :
#news{ background:yellow; width:150px; height:280px; position:absolute; left:365px; top:10px; }
Ширина блока content равна 525 пикселов, а ширина блока news - 150 пикселов. Значит, смещение от левого края равно (525-150) 375 пикселов, но, чтобы блок не прилипал к правому краю, мы уменьшили смещение до 365 пикселов.
Аналогично рассчитываем смещение от верхнего края: высота блока content равна 300 пикселов, а высота блока news - 280 пикселов. Значит смещение от верхнего края может быть не более (300-280) 20 пикселов, мы сделали 10.
При абсолютном позиционировании, чтобы не запутаться с величинами смещения, определите сначала "родителя" и помните, что смещение происходит относительно "родителя".
На этом урок закончен, в следующий раз будем изучать другие схемы позиционирования.
Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width , а высота через height ; вокруг контента идут поля (padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border ) и завершают блок отступы (margin ), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.
Рис. 3.1. Свойства, формирующие блочный элемент
Для наглядности свойства блока можно представить в виде матрёшек (рис. 3.2). Любую маленькую матрёшку можно вставить в более крупную матрёшку, но никак не наоборот.
Рис. 3.2. Матрёшки
На деле ни одно из этих свойств не является обязательным, в том числе и контент, поэтому вы можете формировать любые блоки, содержащие комбинации свойств padding , border и margin или вообще обойтись без них.
Поля
Полем будем называть расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока. Из-за того, что значения полей могут различаться на каждой стороне, применяют выражения «верхнее поле» или «поле сверху», и им подобные для других сторон. Обозначение «поля» следует понимать как одинаковое значение полей для всех сторон. Основное предназначение полей - создать пустое пространство вокруг содержимого блочного элемента, например текста, чтобы он не прилегал плотно к краю элемента. Использование полей повышает читабельность текста и улучшает внешний вид страницы. В примере 3.1 показано использование полей для оформления текста.
Пример 3.1.Использование свойства padding
Результат примера показан на рис. 3.3.
Рис. 3.3. Поля вокруг текста
Значения полей не могут быть отрицательными.
Границы
Границы это линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах. У каждой линии есть толщина, стиль и цвет. Для создания рамки применяется универсальное свойство border одновременно задающее все эти параметры, а для создания линий на отдельных сторонах элемента можно воспользоваться свойствами border-left , border-top , border-right и border-bottom , соответственно устанавливающих границу слева, сверху, справа и снизу. В примере 3.2 показано добавление линии слева от элемента.
Пример 3.2. Красная пунктирная линия
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.4.
Рис. 3.4. Линия возле текста
Расстояние от линии до текста регулируется значением padding .
Отступы
Отступом будем называть пустое пространство от внешнего края границы, полей или содержимого блока. Как уже упоминалось, границы с полями не обязательны и могут отсутствовать, так что способ формирования отступов зависит от ситуации. Как и в случае с полями, применяют выражения «верхний отступ» или «отступ сверху», и им подобные для других сторон. Обозначение «отступы» следует понимать как одинаковое значение отступов для всех сторон.
Для отступов характерны следующие особенности.
- Отступы прозрачны, на них не распространяется цвет фона или фоновая картинка, заданная для блока. Однако если фон установлен у родительского элемента, он будет заметен и на отступах.
- Отступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону. Так, если задано margin-left : -10px , это сдвинет блок на десять пикселов влево.
- Для отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой.
- Отступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.
В примере 3.3 показано схлопывание отступов и их прозрачность.
Пример 3.3. Использование отступов
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.5. Обратите внимание, что расстояние между блоками равно 20 пикселов, а не 40, которые получаются суммированием верхнего и нижнего отступа у блоков. Это происходит за счёт эффекта схлопывания, при котором близлежащие отступы объединяются.
Рис. 3.5. Отступы в элементе
На рисунке хорошо видно, что цвет, задаваемый через свойство background , не выходит за пределы границы элемента и не оказывает влияние на отступы.
Ширина блока это комплексная величина и складывается из нескольких значений свойств:
- width - ширина контента, т.е. содержимого блока;
- padding-left и padding-right - поле слева и справа от контента;
- border-left и border-right - толщина границы слева и справа;
- margin-left и margin-right - отступ слева и справа.
Как уже упоминалось, какие-то свойства могут отсутствовать и в этом случае на ширину не оказывают влияние. Общая ширина показана на рис. 3.6 в виде чёрной пунктирной линии.
Рис. 3.6. Ширина блока
Если значение width не задано, то оно по умолчанию устанавливается как auto . В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений полей, границ и отступов. Под доступной шириной в данном случае подразумевается ширина контента у родительского блока, а если родителя нет, то ширина контента браузера.
Допустим, для слоя написан следующий стиль.
Width: 300px; /* Ширина контента */ margin: 7px; /* Значение отступов */ border: 4px solid black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */
Ширина блока согласно этой записи будет равна 342 пиксела, эта величина получается складыванием значения ширины контента плюс отступ слева, граница слева и поле слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.
Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342
Надо отметить, что блочная модель с формированием ширины несет в себе кучу неудобств. Постоянно приходится заниматься вычислениями, когда требуется задать определенную ширину блока. Также начинаются проблемы при сочетании разных единиц измерения, в частности, процентов и пикселов. Предположим, что ширина контента задана как 90%, если сюда приплюсовать поля и границы, заданные в пикселах, то нельзя вычислить суммарную ширину блока, поскольку проценты напрямую в пикселы не переводятся (в CSS3 так суммировать можно, только поддерживается эта возможность далеко не всеми браузерами). В итоге может получиться так, что общая ширина блока превысит ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки. Выходов из подобной ситуации два - поменять алгоритм блочной модели и воспользоваться вложенными слоями.
Алгоритм блочной модели
Как уже упоминалось, ширина блока формируется из ширины контента и значений полей, границ и отступов. В браузере Internet Explorer в режиме совместимости (иными словами, когда не указан доктайп) алгоритм меняется автоматически и ширина всего блока устанавливается равной width . Остальные браузеры так просто не меняют алгоритм, к тому же вы знаете, что режим совместимости это зло. В CSS3 есть замечательное свойство box-sizing , которое нам и пригодится. При значении border-box ширина начинает включать поля и границы, но не отступы. Таким образом, подключая box-sizing со значением border-box к своему стилю, мы можем задавать ширину в процентах и спокойно указывать border и padding , не боясь, что изменится ширина блока. К сожалению, с этим свойством связана небольшая проблема, как обычно относящаяся к браузерам - не все браузеры его понимают. Радует, что браузеры хотя бы поддерживают специфические для каждого браузера свойства. В табл. 3.1 приведена поддержка браузерами.
| Браузер | Internet Explorer | Chrome | Opera | Safari | Firefox |
|---|---|---|---|---|---|
| Версия | 8.0+ | 2.0+ | 7.0+ | 3.0+ | 1.0+ |
| Свойство | box-sizing | -webkit-box-sizing | box-sizing | -webkit-box-sizing | -moz-box-sizing |
Как видно из таблицы, в свойствах разброд и шатание, поэтому придется делать гибрид и указывать все три свойства одновременно (пример 3.4).
Пример 3.4. Ширина блока
XHTML 1.0 CSS 3 IE 7 IE 8+ Cr Op Sa Fx
Данный пример будет работать во всех браузерах, указанных в табл. 3.1, однако невалиден в CSS3 из-за применения нестандартных свойств начинающихся на -moz и -webkit. Ширина блока составляет 100% с учетом значений padding . Без свойства box-sizing в браузере появится горизонтальная полоса прокрутки.
Вложенные слои
Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдёт старый проверенный метод с вложением слоев. Идея простая - для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное - поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 3.5 показано использование вложенных слоев.
Пример 3.5. Вложенные слои
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.7.
Рис. 3.7. Ширина блока в процентах
Преимуществом вложенных слоев является использование отступов (box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить добавление дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.
На высоту блока действуют те же правила, что и на ширину. А именно, высота складывается из значений высоты контента (height ), полей (padding ), границ (border ) и отступов (margin ). Если свойство height не указано, то оно считается как auto , в этом случае высота контента вычисляется автоматически на основе содержимого. На рис. 3.8 показаны свойства, дающие итоговую высоту, которая обозначена чёрной пунктирной линией.
Рис. 3.8. Высота блока
Вместе с тем, несмотря на схожесть принципов построения ширины и высоты, у них есть существенные различия. Это касается того случая, когда значение width и height не указано, тогда по умолчанию оно принимается как auto . Для ширины блока - это максимально доступная ширина контента, а для высоты блока - это высота контента. Также для ширины блока известна ширина родителя, даже если она не указана явно. Это позволяет устанавливать значение width в процентах. Использование же процентов для height ни к чему не приведёт, потому что высота родителя не вычисляется и её надо указывать. В примере 3.6 показано, как задать высоту блока в процентах.
Пример 3.6. Высота блока
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 3.9.
Рис. 3.9. Высота блока в процентах
Для тега
Поскольку на высоту влияет значение полей, границ и отступов, в примере появится вертикальная полоса прокрутки. Избавиться от этого влияния можно теми же методами, что и для ширины, а именно, использовать свойство box-sizing , либо воспользоваться вложенными слоями.
С высотой связана ещё одна особенность - при превышении содержимого блока его размеров при заданной высоте, содержимое начинается отображаться поверх блока (рис. 3.10).
Рис. 3.10. Превышение размеров блока
Код, приводящий к подобному результату, приведен в примере 3.7.
Пример 3.7. Превышение размеров блока
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Лев ревет только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царем природы.
Охотничий участок льва может иметь длину и ширину до тридцати километров.
Чтобы избежать подобных неприятностей, высоту контента лучше не задавать, тогда высота блока будет вычисляться автоматически. Впрочем, бывают случаи, когда высота должна быть чётко указана, тогда рекомендуется к стилю добавить свойство overflow со значением auto или hidden . Результат у них разный, auto добавляет полосы прокрутки автоматически, когда они требуются (рис. 11а), hidden скрывает всё, что не помещается в заданные размеры (рис. 11б).
а. Значение auto
б. Значение hidden
Рис. 11. Использование свойства overflow
Фон
Если задать одновременно цвет фона и пунктирную границу блока, то становится заметно, что граница проходит внутри цветной области. Правда в разных браузерах наблюдается разночтение, в частности Internet Explorer до версии 7.0 включительно содержит ошибку, при которой фон выводится по внутреннему краю границы (рис. 12в). Начиная с версии 8.0 эта ошибка исправлена, и фон выводится по стандартам (рис. 12г). Браузеры Opera (рис. 12а), Firefox (12б), Safari и Chrome (рис. 12д) фон выводят правильно. Небольшие различия наблюдаются при отображении пунктирной рамки, но они не влияют на блочную модель.
д. Safari, Chrome
Рис. 12. Отображение фона в браузере
В примере 3.8 показано, как создать код для получения подобной границы.
Пример 3.8. Фон и граница
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид блока в браузерах будет практически одинаковым.
Этот урок рекомендуется тем, кто только начинает осваивать премудрости создания сайтов. В нем даны основные понятия о HTML и CSS . Пошагово выполняя инструкции данного урока, вы уже через несколько минут сверстаете шаблон для своего сайта.
Шаблон вебсайта мы будем делать с помощью блочной верстки , использую тег - «DIV ».
Шаг 1 - Разметка веб страницы с помощью тегов HTML
Прежде всего необходимо разметить нашу веб страницу используя HTML теги. Только после этого можно переходить к оформлению сайта с помощью каскадных таблиц стиля CSS.
HTML - это язык разметки гипертекста . С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки "<" и ">".
Теги, как правило следуют в паре - открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак "/". (Например:
). С помощью тегов вы определяете, что будет располагаться на вашей веб странице.Каскадные таблицы стилей CSS применяются позже. Они необходимы для того, чтобы разместить содержимое тегов в определенных местах страницы, а также придать этому содержимому желаемый вид.
Простейшие теги веб страницы это:
Впоследствии, именно между тегами вы будете размещать другие теги для разметки элементов веб страницы.
Важным тегом для структурирования страницы является тег Внутри данного тега вы сможете разместить другие HTML теги, которые вам потребуются для создания содержимого вашего сайта (ссылки, текст, изображения и тд.). Все эти элементы впоследствии обретут свой стиль с помощью каскадных таблиц стиля CSS. Теперь, используя графический редактор (Photoshop например) нарисуем блоки нашей веб страницы: Код HTML этой страницы будет выглядеть, как показано ниже. Это пример использования тега div
:
Как видите, каждому тегу div
мы дали определенный селектор ID
. То есть каждому отдельному блоку нашей страницы мы дали свое название. Это необходимо для того, чтобы позже, задавая стиль блокам в файле CSS, мы могли отличать один блок от другого. Существует два вида селекторов
. ID
- используется для уникальных блоков, таких, которые больше нигде на странице не повторяются. В то время как селектор CLASS
- применятся для обозначения повторяющихся блоков. Также, мы заключили все блоки внутрь блока "container
". Это сделано для того, чтобы впоследствии можно было поместить нашу страницу целиком так, как мы хотим. Шаг 2 - прикрепление таблицы стилей CSS
Как уже было сказано, CSS таблица стилей определяет дизайн элементов веб страницы. Вы можете разместить ее как внутри своего html документа, так и прикрепить внешний файл. В этом уроке мы будем использовать последний вариант. Если вы уже открыли свою веб страницу в браузере, то ничего там не обнаружили. Это потому, что вы не наполнили свои блоки ни каким-либо содержимым, ни придали им какой-либо формы и цвета. Контент для блоков вы можете добавить между соответствующими тегами. А вот форму, расположение цвет и другие внешние проявления блоков мы зададим с помощью файла CSS. Но для начала вы должны создать его. Назовем его style.css и разместим в той же папке, что и документ html. После этого в html файле, между тегами необходимо добавить следующую строчку:
Таким образом мы связываем эти два файла вместе. Теперь при отображении веб страницы браузер будет использовать соответствующий файл стилей. Шаг 3 - задаем стиль
Синтаксис CSS состоит из селектора, свойства и значения. Селектор - это тег, для которого вы хотите определить внешний вид придавая ему разнообразные свойства. Свойство задается с помощью различных атрибутов, которые в свою очередь могут принимать разные значения. Для записи селекторов, кроме тега body
, используются знаки "#
" либо ".
". они следуют перед именем селектора. Первый применяется, чтобы указать на селектор
ID
, второй, соответственно на селктор
CLASS
. Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки "{}
". #selector {
property:value;
property:value;
property:value;
}
.selector {
property:value;
property:value;
property:value;
}
У нас имеются следующие селекторы:
body Свойства и возможные значения CSS:
Фон
(background
) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.). Свойство color используется для определения цвета текста. font-size
- размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели. margin
- определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх - право- низ - лево. Поскольку верх - низ, право - лево у нас совпадают, то дублировать их нет потребности. width
- ширина блока. height
- высота. float
- свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону. Теперь добавим код в наш файл стилей style.css (ведь вы его уже создали, да?): body { #container { #header { #navigation { #menu { #content { #footer { Примечание
На момент написания статьи не все браузеры корректно отображали созданную веб страницу. Для устранения этого недостатка можно использовать дополнительный блок, который следует разместить сразу за блоком content
. Вот его код HTML:
#clear { А между тегами head
записать, какую кодировку необходимо использовать браузеру, если вы вдруг попробуете добавить русский текст в свои блоки:
Финальный код HTML:
body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}
#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}
#clear {
clear:both;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
Надеемся, данный урок позволил вам понять основы работы с HTML и CSS
. Вот как это выглядит в браузере:
13.03.2017 Пока нет Всем привет! Блоки
– это элементы, которые не могут
находиться на одной строке с другими блоками и они отделяются абзацами
. Параграфы Что такое блочные элементы вы поняли, а что же тогда неблочные? Неблочные элементы
– это элементы, которые могут
находиться на одной строке с другими неблочными
элементами и они не отделяются абзацами
. К неблочным элементам относят: Для примера давайте создадим html документ с тремя блоками:
Блок в css - 3. В результате: Теперь в CSS я покажу парочку фишек, где возможности блоков HTML расширяются. Свойство «
BORDER
»
Синтаксис: Border: толщина_рамки вид_рамки цвет_рамки;
Блок в css - 3. Если вы не поняли, где и куда я вписал CSS, то обратите внимание на строки от 4 до 17. И если у вас появился все же такой вопрос, что это я сделал, тогда повторите урок №3 – « ». Результат: Теперь можно видеть границы блока, а когда видны границы, тогда легче с блоками работать. Свойство «
MARGIN
»
Свойства: Margin-top:30px; /* верхняя сторона */
margin-right:70px; /* правая сторона */
margin-bottom:90px; /* нижняя сторона */
margin-left:120px; /* левая сторона */
Сокращенная форма записи
Можно все, что я прописал для отступа при каждом блоке записать отдельно сокращенной формой: Синтаксис: Margin: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;
Margin:30px 70px 90px 120px; /* сокращенная форма записи */
Блок в css - 3. Результат: Если задать один параметр к правилу «margin
» (Строка №22): Margin:100pх; /* сокращенная форма записи */
то расстояние от блока со всех сторон будет 100 px. Свойство «
PADDING
»
Свойства: Padding-top:30px; /* верхняя сторона */
padding-right:70px; /* правая сторона */
padding-bottom:90px; /* нижняя сторона */
padding-left:120px; /* левая сторона */
Сокращенная форма записи
Можно все, что я прописал выше записать сокращенной формой. Синтаксис: Padding: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;
Padding:30px 70px 90px 120px; /* сокращенная форма записи */
Пропишите в HTML файле вот так:
Блок в css - 3. Результат: Если задать один параметр к правилу «padding» (строка № 21): Padding:50px; /* сокращенная форма записи */
то расстояние внутри блока со всех сторон будет 50 px. Свойство «
WIDTH
» и «
HEIGHT
»
Синтаксис: Значение: Width: 600px; /* ширина блока */
height: 250px; /* высота блока */
Я думаю, как вставлять правило в CSS объяснять не нужно, заодно проверю, как вы освоили урок №3 о том, как подключить CSS. Результат: У блока будет фиксированная ширина и высота.
Если вам нужен нефиксированный, а резиновый блок
(блок который растягивается по длине монитора), тогда вместо px, нужно указать %. Только помните: весь монитор – это 100%. Width: 90%; /* ширина резинового блока */
Свойство «
BACKGROUND
»
Строка № 7 – правилом «background
» мы заменили фон зеленным цветом Результат: Можно залить фон не только цветом, но и картинкой: Background-image: url(bg.gif); /* Фоновая картинка */
Строка № 7 – правилом «background-image» мы заменили фон фоновой картинкой. Результат: Свойство «OPACITY»
Синтаксис: Opacity: значение;
Значение:
Блок 1. Результат: Свойство «
DISPLAY
»
Blok1{display:none;}
Свойство «
OPACITY
»
Blok1{opacity: 0;}
Свойство «
VISIBILITY
»
Blok1{visibility: hidden;}
Свойство «OVERFLOW»
Синтаксис: Overflow: значение;
Значение: Пример с «Visible» (значение по умолчанию):
Блок 1. Результат: Пример с «Hidden
»:
Blok1
{
height: 200px; /* высота */
width: 250px; /* ширина */
border:2px dotted #cc0000; /*рамка */
overflow: Hidden;
}
Результат: Пример с «Scroll
»:
Blok1
{
height: 200px; /* высота */
width: 250px; /* ширина */
border:2px dotted #cc0000; /*рамка */
overflow: Scroll;
}
Результат: Пример с «Auto»:
Blok1
{
height: 200px; /* высота */
width: 250px; /* ширина */
border:2px dotted #cc0000; /*рамка */
overflow: auto;
}
Результат: Свойство «BOX-SHADOW»
Синтаксис: Blok1
{
height: 200px; /* высота */
width: 250px; /* ширина */
border:1px solid #ccc; /*рамка */
box-shadow: -19px 0 22px -19px #000,19px 0 22px -19px #000; /*тень блока*/
}
Результат: Свойство «MARGIN»
Margin: 0 auto;
Blok1
{
height: 100px; /* высота */
width: 100px; /* ширина */
border:1px solid #ccc; /*рамка */
margin: 0 auto;
}
Вот и все! Пора заканчивать этот урок, а то великоват он получился! Да и храпы за пределами монитора уже слышу . Подписывайтесь на обновление! Предыдущая запись Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div. В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем! Блоки
– это прямоугольные элементы, которые занимают всю доступную ширину страницы, всегда начинаются с новой строки и по умолчанию автоматически рассчитывают высоту в зависимости от содержимого. Все блочные элементы состоят из 4 свойств, которые на подобие рамок окружают содержимое объекта. Главным в блоке выступает контент
. Вокруг него расположены поля, которые называются padding
. Поля отвечают за расстояние между контентом объекта и его внутренним краем границ. После идут сами границы, которые именуются английским словом border
. И, наконец, последней рамкой вокруг всего перечисленного выступает margin
–отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно. В качестве примера запрограммируем 2 и заполним созданные элементы текстом.
На данный момент в этот код отобразится как обычные два предложения. Для оформления дизайна блоков необходимо подключить таблицу стилей и языком css задать определенные свойства. Для того чтобы блочные объекты выглядели интересно и привлекательно, нам в обязательном порядке стоит подключить каскадную таблицу стилей. Для этого в контейнере head после тега
container
header
navigation
menu
content
footer
font-family
- это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}
background: #838283;
height: 200px;
width: 900px;
}
background: #a2a2a2;
width: 900px;
height: 20px;
}
background: #333333;
float: left;
width: 200px;
height: 600px;
}
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}
background: #838283;
height: 180px;
width: 900px;
}
clear:both;
}
В сегодняшнем уроке я расскажу о том, что такое блоки и как в CSS можно ими управлять, например, задавать отступы, менять внутри фон и цвет и т.д.
Итак, что называется блоками?
К блочным элементам относят:
...
- заголовки
и т.д.Блок в css - 2.
Рамка блока в CSS
Я частенько использую рамку, когда создаю веб-страницы. Рамки мне помогают увидеть, где начинается блок и где заканчивается. Это мне упрощает работу. Также рамку можно использовать для оформления блоков.
Чтобы создать к блокам рамки, пропишите уже известное вам правило «border
».Блок в css - 2.
Отступы от блока в CSS
Чтобы задать расстояние (отступ) от блока используют правило «margin
».
Обратите внимание на схему. Параметры задаются от блока:
Блок в css - 2.
Отступы внутри блока в CSS
Чтобы задать расстояние (отступ) внутри блока, используют правило «padding
».
Обратите внимание на схему:
Блок в css - 2.
Ширина и высота блока в CSS
Вы можете создать ширину и высоту блока. Для этого используйте правила «width
» - ширина и «height
» - высота.
Значение задается в px или %.Фон блока в CSS
Правило «background
» вы уже знаете, потому не вижу смысла повторяться.
А кто не знает, милости просим на страницу с .
bg.gif – это картинка фона.
ДОПОЛНЕНИЕ
Прозрачность блока в CSS
Блок можно сделать прозрачным, используя CSS правило «opacity
».
в значениях задается число в диапазоне от 0 до 1.
Скрыть блок в CSS
Правило «display
» поможет скрыть блок веб странице. Зачастую это правило используется в выпадающем меню или когда нужно скрыть некоторые блоки в мобильной версии сайта.
Правило «opacity
» поможет тоже скрыть блок веб-странице.
«visibility
» – это еще одно правило, которое тоже поможет скрыть блок веб- страници. К правилу «visibility
» пропишите значение «hidden
»:Свойство overflow
С правилом «overflow
» можно определить, что будет предприниматься, если содержимое элемента превзойдет его размер. Например, картинка или текст больше, чем сам блок.
Тень блока в CSS
Можно от блока сделать тень. Правило «box-shadow
».
Выравнивание блока по центру
Чтобы выровнять блок по центру, пропишите для правила «margin
» значение «0 auto
»:
Еще чуть-чуть и мы закончим изучать основы CSS.
Следующая запись Особенности блочных элементов
Внесем-ка ярких красок в обыденную жизнь html