Верстка

Использование границ (border) при верстке

border

Всем привет!

Сегодня я хочу поговорить с Вами об одном очень эффективном инструменте, который очень прост, но в то же время позволяет придать элементам Вашего сайта неповторимости.
Мы будем говорить о границах (border).

До сих пор многие верстальщики используют картинки для верстки границ элементов, скругленных углов и т.д. Сейчас нет необходимости использовать эти сложные приемы. Современные таблицы стилей CSS способны при помощи короткого кода придать границам элементов нужный дизайн.

Но давайте обо всем по порядку.

Читать полностью

Комментарии отключены

Управление размером фонового изображения при помощи css

background-size

Одним из наиболее часто используемых при верстке сайтов css-свойств является свойство фона элемента страницы (background). Сегодня мы поговорим с Вами о том, как можно изменять размеры фонового изображения при помощи CSS.

В более старой версии CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняла свои фиксированные размеры. Изменить размеры фоновой картинки было нельзя. К счастью, в CSS3 введено свойство background-size, с помощью которого фон может быть растянут или сжат.

Читать полностью

Комментарии отключены

Высота и ширина элемента в CSS, использование префиксов min и max

height-и-width

При работе с каскадными таблицами стилей css, одними из наиболее часто используемых свойств являются свойства height (высота) и width (ширина). Они применяются к блочным элементам. Высота и ширина не включают толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента. Это добавит к элементу полосу прокрутки.

Читать полностью

Комментарии отключены

Блочная верстка сайта. Урок 1

Блочная верстка. Урок 1

Здравствуйте, друзья!

Мы продолжаем с Вами изучать верстку и сегодня мы переходим уже к самому интересному.

Наверняка Вы уже слышали понятие «блочная верстка». Но человеку неосведомленному это понятие ни о чем не говорит. Поэтому: кто знает — молодец! А кто не знает — читаем внимательнее.

Блочная верстка — это верстка html-кода web-страницы при помощи тегов универсальных контейнеров <div>.

Об этом я немного писал в статье «Блочные элементы веб-страницы». Здесь же мы поговорим более детально и конкретно.

Читать полностью

2

Строчные элементы веб-страницы

Строчные элементы

В предыдущей статье мы с Вами разобрались с основами использования блочных элементов web-страниц.

Теперь пришла пора рассказать Вам о строчных элементах. Это тоже очень важно.

Если не понимать различия между этими типами элементов, то будет довольно проблематично использовать эти элементы на практике.

Строчные и блочные элементы страницы очень хорошо дополняют друг друга. И знать, как их правильно использовать должен каждый веб-мастер.

Давайте начнем.

Читать полностью

Комментарии отключены

Блочные элементы веб-страницы

Блочные элементы

Многим начинающим веб-мастерам очень тяжело разобраться со структурой HTML документа. А именно понять — из каких элементов страница состоит, как эти элементы комбинировать и какие свойства поддерживает тот или иной элемент.

На самом деле ничего сверхъестественного здесь нет и все намного проще, чем кажется. Нужно просто знать к какому типу относится тот или иной элемент web-страницы.

Существует два основных типа элементов страницы: блочные и строчные. Каждый из них имеет свои свойства.

И сейчас мы разберем, для чего нужны блочные элементы, какими свойствами они обладают и как наиболее эффективно их использовать создании структуры HTML кода веб-страниц.

Читать полностью

8

Наследование и приоритеты CSS стилей

Наследование и приоритеты css

Итак, мы продолжаем изучать основы применения каскадных таблиц стилей css.

Наверняка у каждого из Вас была такая ситуация, что прописываешь какие-нибудь css инструкции для элементов сайта, а они никак не хотят применяться.

В основном это происходит из-за применения основных принципов применения css стилей — наследования и каскадирования.

То есть, к элементу может иметь отношение несколько css свойств, которые конфликтуют друг с другом (имеют разные значения). Естественно, все они примениться не могут. Применяется именно та css инструкция, которая имеет более высокий приоритет.

Но как же тогда определить, какая инструкция имеет больший приоритет? И как задать нужной нам инструкции больший приоритет, чтобы применилась именно она, а не какая-нибудь другая? Об этом мы и поговорим в этой статье.

Читать полностью

Комментарии отключены