В начале я решил опубликовать небольшой урок для новичков по CSS кодингу, так как сам в последнее время в основном верстаю DIV’ами, а не таблицами, как раньше.
Существует два типа верстки — таблицами и div’ами. Первый способ чаще всего применялся, но в последнее время все чаще применяется верстка дивами. Это намного быстрее, эффективнее и более модно :)
В начале рассмотрим сам тег и его CSS свойства. В интернете эта структура называется BOX MODEL — коробочная модель.
Зачем все это? Далее я буду писать уроки верстки, если вы не знаете что такое CSS и тег DIV вам не обойтись без этой информации просто никак.
При помощи тега DIV мы можем аккуратно оформить любой элемент веб-страницы, так как у него много свойств — margin (граница), padding (отступ), border (рамка) и outline (внешняя линия). Вот пример.
В этом примере я использовал рамку — она белая толщиной 3 пикселя, наружную рамку outline шириной 1 пиксель, граница margin 30 пикселей, отступ padding 15 пикселей, ширина блока width 300 пикселей, цвет фона светло-голубой.
А теперь пример оформления блока сайта с заголовком, я использую такие приемы при верстке шаблонов для DLE.
Вот какой код я использовал, чтобы добиться такого эффекта для заголовка блока
----------------------------------------------------------------------------
border: 1px solid #454545; //рамка, комбинировал три свойства
width: 300px; //ширина блока
height: 25px; // высота блока
color: #ffffff; //цвет текста в блоке
font-size: 18px; // размер текста в блоке
text-align: center; // выравнивание текста по центру
background-color: #4caac8; // цвет фона блока
padding-top: 4px; // отступ сверху для выравнивания
Этот код для оформления блока текста, который вы видите под блоком заголовка
border-left: 1px solid #454545; // рамка слева
border-right: 1px solid #454545; // рамка справа
border-bottom: 1px solid #454545; // рамка снизу
padding: 7px; // отступ текста от рамки
width: 286px; // ширина блока текста
color: #333333; // цвет текста
font-size: 18px; // размер шрифта
text-align: justify; // выравнивание текста по ширине
background-color: lightblue; // цвет фона блока текста
----------------------------------------------------------------------------
Подводные камни, ошибки новичков
Некоторые новички, как и я раньше, частенько ошибаются при верстке html страниц при помощи CSS. Где же подводные камни при верстке дивами?
Вы заметили, что ширина блока заголовка 300 пикселей, а ширина блока текста всего 286 пикселей? Вот это и есть подводные камни.
Все дело в том, что ширина блока состоит из нескольких составляющих
width + padding-left + padding-right + border-left + border-right
Высота блока соответственно
height + padding-top + padding-bottom + border-top + border-bottom
Вот мы и имеем — 300 пикселей вычесть отступ слева 7 пикселей, вычесть отступ справа 7 пикселей = 286 пикселей. А рамка и там и там одинаковая, поэтому мы не берем ее в расчет.
Помните свойством padding:7px мы скомбинировали все четыре составляющие padding-left, padding-right, padding-top, padding-bottom — все они по 7 пикселей.
Существует два типа верстки — таблицами и div’ами. Первый способ чаще всего применялся, но в последнее время все чаще применяется верстка дивами. Это намного быстрее, эффективнее и более модно :)
В начале рассмотрим сам тег и его CSS свойства. В интернете эта структура называется BOX MODEL — коробочная модель.
Зачем все это? Далее я буду писать уроки верстки, если вы не знаете что такое CSS и тег DIV вам не обойтись без этой информации просто никак.
При помощи тега DIV мы можем аккуратно оформить любой элемент веб-страницы, так как у него много свойств — margin (граница), padding (отступ), border (рамка) и outline (внешняя линия). Вот пример.
Как вы видите на рисунке всего четыре отступа, да да — при помощи всех четырех элементов можно создать отступы, придав каждому элементу разный цвет.
CSS свойства тега DIV
Margin — граница, с помощью свойства margin мы может сделать отступ блока от внешних элементов, например при трехколоночной верстке сайта.
Padding — отступ внутри дива, можем задать например рамку и отступ текста от нее.
Border — при помощи этого свойства мы можем задать рамку вокруг текста или рисунка не только прямую линию, но а также штрих-пунктирную и другие, цвет рамки.
Outline — вроде border, применяется редко, я использую это свойство для совсем другого элемента.
Width — ширина элемента.
Height — высота элемента.
Примеры на практике
Теперь немного попрактикуемся. Вот пример. при помощи всех этих элементов можно красиво оформлять рисунки, блоки текста и много чего другого.
Примеры на практике
Теперь немного попрактикуемся. Вот пример. при помощи всех этих элементов можно красиво оформлять рисунки, блоки текста и много чего другого.
А теперь пример оформления блока сайта с заголовком, я использую такие приемы при верстке шаблонов для DLE.
Вот какой код я использовал, чтобы добиться такого эффекта для заголовка блока
----------------------------------------------------------------------------
border: 1px solid #454545; //рамка, комбинировал три свойства
width: 300px; //ширина блока
height: 25px; // высота блока
color: #ffffff; //цвет текста в блоке
font-size: 18px; // размер текста в блоке
text-align: center; // выравнивание текста по центру
background-color: #4caac8; // цвет фона блока
padding-top: 4px; // отступ сверху для выравнивания
Этот код для оформления блока текста, который вы видите под блоком заголовка
border-left: 1px solid #454545; // рамка слева
border-right: 1px solid #454545; // рамка справа
border-bottom: 1px solid #454545; // рамка снизу
padding: 7px; // отступ текста от рамки
width: 286px; // ширина блока текста
color: #333333; // цвет текста
font-size: 18px; // размер шрифта
text-align: justify; // выравнивание текста по ширине
background-color: lightblue; // цвет фона блока текста
----------------------------------------------------------------------------
Подводные камни, ошибки новичков
Некоторые новички, как и я раньше, частенько ошибаются при верстке html страниц при помощи CSS. Где же подводные камни при верстке дивами?
Вы заметили, что ширина блока заголовка 300 пикселей, а ширина блока текста всего 286 пикселей? Вот это и есть подводные камни.
Все дело в том, что ширина блока состоит из нескольких составляющих
width + padding-left + padding-right + border-left + border-right
Высота блока соответственно
height + padding-top + padding-bottom + border-top + border-bottom
Вот мы и имеем — 300 пикселей вычесть отступ слева 7 пикселей, вычесть отступ справа 7 пикселей = 286 пикселей. А рамка и там и там одинаковая, поэтому мы не берем ее в расчет.
Помните свойством padding:7px мы скомбинировали все четыре составляющие padding-left, padding-right, padding-top, padding-bottom — все они по 7 пикселей.
0 коммент.:
Отправить комментарий