Javascript html css3 красочные таблицы зебра
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.Подписывайтесь на обновление!
Предыдущая запись
Следующая записьРаньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена . Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.
Отличия блочной вёрстки от табличной
Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега
, то концепция блочной вёрстки основана на активном использовании универсальных тегов
, внутрь которых помещается содержимое, включая другие теги.Блочная вёрстка лишена недостатков табличной - поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки
, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как- это таблица, которую нужно использовать для отображения табличных данных и не более того.
Единственный ощутимый минус блочной вёрстки - сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.
Суть блочной вёрстки
В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.
Каждая часть страницы помещается в свой блок
: верх сайта - в первый, меню - во второй, контент - в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.Конечный HTML-документ представляет собой набор блоков
с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом , или как минимум в контейнере