Разбить страницу на блоки html. Блочная модель
Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством 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
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид блока в браузерах будет практически одинаковым.
Здравствуйте, дорогие любители айтишной тематики. Сегодня основной способ создания красивых многостраничных сайтов основывается на блочной верстке при помощи тега div.
В случае незнания основных тонкостей работы с данным инструментом увы и ах, но привлекательного адаптивного дизайна вы не получите никак. Поэтому данная статья посвящена теме «Как сделать блок в html». Я подробно опишу, как самому с нуля создать блочные объекты на странице, каким образом оформить фон и дизайн блоков, и самое главное расскажу, как подключить таблицу стилей. Итак, начнем!
Особенности блочных элементов
Блоки – это прямоугольные элементы, которые занимают всю доступную ширину страницы, всегда начинаются с новой строки и по умолчанию автоматически рассчитывают высоту в зависимости от содержимого.
Все блочные элементы состоят из 4 свойств, которые на подобие рамок окружают содержимое объекта.
Главным в блоке выступает контент .
Вокруг него расположены поля, которые называются padding . Поля отвечают за расстояние между контентом объекта и его внутренним краем границ.
После идут сами границы, которые именуются английским словом border .
И, наконец, последней рамкой вокруг всего перечисленного выступает margin –отступы от внешнего края border-а до границ страницы или других элементов. Стоит отметить, что задавать эти свойства не обязательно.
В качестве примера запрограммируем 2 и заполним созданные элементы текстом.
На данный момент в этот код отобразится как обычные два предложения. Для оформления дизайна блоков необходимо подключить таблицу стилей и языком css задать определенные свойства.
Внесем-ка ярких красок в обыденную жизнь html
Для того чтобы блочные объекты выглядели интересно и привлекательно, нам в обязательном порядке стоит подключить каскадную таблицу стилей.
Для этого в контейнере head после тега
Пишем стили:
Body { max-width: 900px; /* ограничение максимальной ширины */ margin: 0 auto; } /* для всех блоков внутри body изменяем алгоритм расчета ширины блоков и добавляем все блокам поля 10px */ body div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; } .header { background: #CCA69E; padding: 10px; } .left-sidebar { width: 20%; background: #8ED9B6; float: left; } .content { float: left; width: 60%; } .right-sidebar { width: 20%; background: #FF9282; float: left; } .footer { background: #000; clear: both; /* запрещаем обтекание с обоих сторон, блок выводится с новой строки */ color: #ccc; }
Если что-то непонятно — спрашивайте в комментариях.
От автора: я снова приветствую вас на нашем блоге. В этой статье я хотел бы подробнее обсудить такой вопрос, как сделать блок по центру в css, а также несколько других манипуляций с блочными элементами.
Центрирование
Есть много элементов на веб-странице, которые могут по дизайну стоять по центру. Например, заголовки, логотип в шапке или информация в футере. Но как выровнять ее идеально по центру? Конечно, нужно понимать, что высчитывать вручную отступы или применять позиционирование не стоит, когда есть замечательное значение свойства margin – auto:
Block{ margin: 0 auto; }
Block { margin : 0 auto ; |
Первое значение этого свойства задает отступ сверху и снизу. Соответственно, вместо нуля вы можете записать свое значение, если необходимо дать такие отступы. Второе значение auto определяет отступы слева и справа. Они определяются так, что элемент станет по центру. Но здесь очень важно соблюсти еще одно правило:
Элементу нужно задать ширину. Обязательно. Я объясню почему. Например, он находится в общем контейнере шириной 980 пикселей. И если вы не зададите явную ширину блоку, то как он выровняется по центру, если он и без этого занимает всю ширину? В общем, достаточно записать width или max-width и центровка будет работать.
Таким же способом можно отцентрировать и те блоки, которые будут вложены уже в этот. Вообще уровень вложенности никак не помешает центровке.
Как создать блок в css и его внешний вид
Я уже говорил в одной из предыдущих статей, что блочные элементы создаются тегом div. Он парный. Это просто пустой контейнер для содержимого. Ему нужно также задать стилевой класс или идентификатор, чтобы получить возможность обращаться к нему через css. Допустим, так:
< 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 ; |
Мы дали нашему фрагменту много разных правил. Например, внешние и внутренние отступы, фон, закругление углов, а также основные размеры – ширину и высоту.
Добавим содержимое
Заголовок статьи
Это текст анонса, обычно в него помещаются первые 40-50 слов из статьи, Чтобы читатель мог примерно понять, о чем она будет.
Читать полностьюКак видите, мы добавили все, что нужно. Картинку, заголовок, небольшой текст в абзаце и ссылку на то, чтобы прочитать полностью. Конечно, она никуда не ведет, так как у нас не реальный сайт – мы просто рассматриваем, как можно сделать блок.
Картинку мы задали, как будто она лежит в той же папке, что и css-файл, в котором задаются эти стили. Теперь остается оформить ее:
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 > |
Так мы создали нужный блок.
13.03.2017
Пока нет
Всем привет!
В сегодняшнем уроке я расскажу о том, что такое блоки и как в CSS можно ими управлять, например, задавать отступы, менять внутри фон и цвет и т.д.
Итак, что называется блоками?
Блоки
– это элементы, которые не могут
находиться на одной строке с другими блоками и они отделяются абзацами
.
К блочным элементам относят:
...
- заголовки
Параграфы
- - блок для верстки веб-страницы (). Вовнутрь блока DIV можно вложить картинки, другие блочные и неблочные элементы.
Что такое блочные элементы вы поняли, а что же тогда неблочные?
Неблочные элементы – это элементы, которые могут находиться на одной строке с другими неблочными элементами и они не отделяются абзацами .
К неблочным элементам относят:
- - выделить текст жирным;
- - выделить текст курсивом;
-
- подчеркнуть текст
и т.д.
Для примера давайте создадим html документ с тремя блоками:
Блок в css Блок в css -1.Блок в css - 2.
Блок в css - 3.
В результате:
Теперь в CSS я покажу парочку фишек, где возможности блоков HTML расширяются.
Рамка блока в CSS
Свойство « BORDER »
Я частенько использую рамку, когда создаю веб-страницы. Рамки мне помогают увидеть, где начинается блок и где заканчивается. Это мне упрощает работу. Также рамку можно использовать для оформления блоков.
Чтобы создать к блокам рамки, пропишите уже известное вам правило «border ».Синтаксис:
Border: толщина_рамки вид_рамки цвет_рамки;
Блок в css Блок в css -1.Блок в css - 2.
Блок в css - 3.
Если вы не поняли, где и куда я вписал CSS, то обратите внимание на строки от 4 до 17. И если у вас появился все же такой вопрос, что это я сделал, тогда повторите урок №3 – « ».
Результат:
Теперь можно видеть границы блока, а когда видны границы, тогда легче с блоками работать.
Отступы от блока в CSS
Свойство « MARGIN »
Чтобы задать расстояние (отступ) от блока используют правило «margin ».
Обратите внимание на схему. Параметры задаются от блока:
Свойства:
- top – верхняя сторона
- right – правая сторона
- bottom – нижняя сторона
- left – левая сторона
Margin-top:30px; /* верхняя сторона */ margin-right:70px; /* правая сторона */ margin-bottom:90px; /* нижняя сторона */ margin-left:120px; /* левая сторона */
Сокращенная форма записи
Можно все, что я прописал для отступа при каждом блоке записать отдельно сокращенной формой:
Синтаксис:
Margin: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;
Margin:30px 70px 90px 120px; /* сокращенная форма записи */
Блок в css Блок в css -1.Блок в css - 2.
Блок в css - 3.
Результат:
Если задать один параметр к правилу «margin » (Строка №22):
Margin:100pх; /* сокращенная форма записи */
то расстояние от блока со всех сторон будет 100 px.
Отступы внутри блока в CSS
Свойство « PADDING »
Чтобы задать расстояние (отступ) внутри блока, используют правило «padding ».
Обратите внимание на схему:
Свойства:
- top – верхняя сторона
- right – правая сторона
- bottom – нижняя сторона
- left – левая сторона
Padding-top:30px; /* верхняя сторона */ padding-right:70px; /* правая сторона */ padding-bottom:90px; /* нижняя сторона */ padding-left:120px; /* левая сторона */
Сокращенная форма записи
Можно все, что я прописал выше записать сокращенной формой.
Синтаксис:
Padding: верхняя_сторона правая_сторона нижняя_сторона левая_сторона;
Padding:30px 70px 90px 120px; /* сокращенная форма записи */
Пропишите в HTML файле вот так:
Блок в css Блок в css -1.Блок в css - 2.
Блок в css - 3.
Результат:
Если задать один параметр к правилу «padding» (строка № 21):
Padding:50px; /* сокращенная форма записи */
то расстояние внутри блока со всех сторон будет 50 px.
Ширина и высота блока в CSS
Свойство « WIDTH » и « HEIGHT »
Вы можете создать ширину и высоту блока. Для этого используйте правила «width » - ширина и «height » - высота.Синтаксис:
- height - высота блока;
- width- ширина блока;
Значение:
Значение задается в px или %.Width: 600px; /* ширина блока */ height: 250px; /* высота блока */
Я думаю, как вставлять правило в CSS объяснять не нужно, заодно проверю, как вы освоили урок №3 о том, как подключить CSS.
Результат:
У блока будет фиксированная ширина и высота.
Если вам нужен нефиксированный, а резиновый блок (блок который растягивается по длине монитора), тогда вместо px, нужно указать %. Только помните: весь монитор – это 100%.
Width: 90%; /* ширина резинового блока */
Фон блока в CSS
Свойство « BACKGROUND »
Правило «background » вы уже знаете, потому не вижу смысла повторяться.
А кто не знает, милости просим на страницу с .Блок в css Блок 1.Строка № 7 – правилом «background » мы заменили фон зеленным цветом
Результат:
Можно залить фон не только цветом, но и картинкой:
Background-image: url(bg.gif); /* Фоновая картинка */
Блок в css Блок 1.Строка № 7 – правилом «background-image» мы заменили фон фоновой картинкой.
bg.gif – это картинка фона.Результат:
ДОПОЛНЕНИЕ
Прозрачность блока в CSS
Свойство «OPACITY»
Блок можно сделать прозрачным, используя CSS правило «opacity ».Синтаксис:
Opacity: значение;
Значение:
в значениях задается число в диапазоне от 0 до 1.- Значение 0 – полная прозрачность блока.
- Значение 1 – непрозрачность блока (блок останется такой как есть).
- Значение в дробях (0.5) – полупрозрачность блока.
Блок в css Блок 1.
Результат:
Скрыть блок в CSS
Свойство « DISPLAY »
Правило «display » поможет скрыть блок веб странице. Зачастую это правило используется в выпадающем меню или когда нужно скрыть некоторые блоки в мобильной версии сайта.Blok1{display:none;}
Свойство « OPACITY »
Правило «opacity » поможет тоже скрыть блок веб-странице.Blok1{opacity: 0;}
Свойство « VISIBILITY »
«visibility » – это еще одно правило, которое тоже поможет скрыть блок веб- страници. К правилу «visibility » пропишите значение «hidden »:Blok1{visibility: hidden;}
Свойство overflow
Свойство «OVERFLOW»
С правилом «overflow » можно определить, что будет предприниматься, если содержимое элемента превзойдет его размер. Например, картинка или текст больше, чем сам блок.Синтаксис:
Overflow: значение;
Значение:
- Visible - указывает, что при переполнении элемента содержимым, оно не будет обрезаться, а просто выйдет за рамки (значение по умолчанию).
- Hidden - указывает, что контент, который не помещается в элемент, будет обрезан (обрезанная часть будет невидимая).
- Scroll - указывает, что контент, который не помещается в элемент, будет обрезан, но для просмотра обрезанной части, можно будет воспользоваться полосой прокрутки.
- Auto - при переполнении элемента содержимым, полосы прокрутки добавляются автоматически.
Пример с «Visible» (значение по умолчанию):
Блок в css Блок 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; }
Результат:
Тень блока в CSS
Свойство «BOX-SHADOW»
Можно от блока сделать тень. Правило «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 »:Margin: 0 auto;
Blok1 { height: 100px; /* высота */ width: 100px; /* ширина */ border:1px solid #ccc; /*рамка */ margin: 0 auto; }
Вот и все! Пора заканчивать этот урок, а то великоват он получился! Да и храпы за пределами монитора уже слышу .
Еще чуть-чуть и мы закончим изучать основы CSS.Подписывайтесь на обновление!
Предыдущая запись
Следующая запись
Похожие статьи-
17 апреля 2015Соляная лампа «Каменный цветок -
17 апреля 2015Продуктивные способы потратить время в интернете -
17 апреля 2015Как установить приложение плей маркет на ноутбук -
17 апреля 2015Спрайты для игр - что это такое?
Популярные статьи
