CSS. Урок 3 (размеры, отступы, границы, цвета)



В HTML есть 3 самых главных типа тегов: теги таблиц, теги форм и универсальные теги. При некоторое сноровке даже таблицы можно вычеркнуть и всю страницу делать только с помощью оставшихся двух типов тегов. Наиболее часто используемые при верстании страниц теги - это <div>XXX</div> и <span>XXX</span>. Тег <div> - это обычный блок или прямоугольник, занимающий по умолчанию 100% ширины страницы. Можно указать меньшие или большие размеры. У него есть внутренние отступы от границы, есть внешние отступы. В отличие от него, тег <span> - это тег, позволяющий применять какие то графические свойства тексту внутри других тегов. Он не имеет собственного размера, у него нет отступов. Его применение ОБЫЧНО не вносит хаос и сумятицу, сдвигающие другие элементы. Он используется намного реже, чем тег <div>, но тоже бывает полезен. Основную часть уроков по стилям буду давать именно с помощью тега <div>.

1. Размеры

Чтобы указать высоту какого-то элемента, русским языком пишем по-английски:

.ClassName  {

                         height: 100px;

}

Здесь мы указали, что высота составляет 100 пикселов экрана. Могут так же использоваться проценты от ширины РОДИТЕЛЬСКОГО БЛОКА, т.е. элемента, внутри которого находится текущий блок. Есть еще единица "em" - она зависит не от точек экрана, а от того размера шрифта, который используется на данном уровне вложенности. Могут быть величины типа "1em" или "3,5em". Вещь крайне проблематичная, при наследовании свойств огребете проблем, лучше о ней забыть.

Ширина какого-то элемента указывается так же интуитивно понятно:

.ClassName  {

                         width: 200px;

}

2. Соседство блочных элементов.

Все элементы отображаются браузером сверху-вниз, слева-направо. При ширине экрана 1000 пикселов и больше, вы наверное, думаете, что можно указать 2 блока <div> с небольшой  шириной и они отобразятся рядом? Ни фига подобного! Блоки будут небольшого размера, но будут все равно располагаться друг под другом. Потому что это - блочный элемент и занимает всю ширину строки, независимо от реального размера. А что же делать, если нам надо сделать горизонтальное меню и выстроить кучу <div>-ов в ряд в качестве кнопок? Эта проблема возникает постоянно, поэтому надо знать, как с ней бороться. Тут нам поможет указание, что "изнутри" блок выглядит как блочный элемент, со всеми отступами и границами. А вот в  в строке, по отношению к соседям, он должен относиться как строчный элемент, допуская размещение нескольких блоков в ряд.

.ClassName  {

                         display: inline-block;

}

Более подробно про свойства "display" можно прочитать по ссылке http://htmlbook.ru/CSS/display

Основные варианты, которые нас интересуют:

inline-block - ведет себя дружелюбно к другим элементам, пускает в свою строку

block - ведет себя как мудак, забирает всю строку под себя, даже если сам элемент мелкий и мог бы потесниться

none - элемент пока не отображаем на странице. Очень удобно некоторым элементам задать такое правило при формировании страницы, а когда надо - изменить его на любой из указанных выше средствами JavaScript. Например, при нажатии на кнопку, при наведении куда то мыши и т.д.

 

 Отступы

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

.ClassName  {

                         padding: 10px;

}

так и указание разных значений для горизонтальных и вертикальных отступов соответственно

.ClassName  {

                         padding: 20px 10px;

}

Если нам надо указать вообще разные отступы для каждого края в отдельности, то начинаем перечислять их в следющем порядке: верх, право, низ, лево:

.ClassName  {

                         padding: 20px 10px 5px 7px;

}

 

Когда нам надо установить отступы сверху, снизу и по бокам от данного элемента, то используем свойство "margin". Принцип тот же, как и у padding-а, но есть еще вариант указания "auto". В разных браузерах может чуть по-разному отрабатывать пересчет отступов, но есть очень удобная конструкция для центрирования элементов, работающая стабильно везде:

.ClassName  {

                         margin: 0px auto;

}

 

Границы

Параметры границ задаются крайне непредсказуемым свойством "border". Обычно указывают сначала толщину элемента, потом цвет границы, потом тип линии.

.ClassName  {

                         border: 3px #ff0000 solid;

}

Первый параметр должен быть понятен и блондинкам - толщина линии в пикселях. Второй параметр - указание цвета в виде RGB (Red Green Blue). На каждый цвет дается по 2 цифры в 16-ричном формате от 0 до f. Первые 2 цифры - Red, вторые 2 цифры Green, третий комплект цифр - Blue. Таблицы цветов можно посмотреть в гуглояндексе при поиске по фразам "html цвета" или "таблица html цветов". В яндексе сразу предложат окошко для ввода цифр и подбора цвета. Можно использовать для этого специальные программы или любой графический редактор в разделе палитры. Третий параметр - вид линии:

solid - цельная

dotted - из точек

dashed - пунктирная линия.

Другие типы линии можно посмотреть по ссылке http://htmlbook.ru/css/border но я ни разу в жизни их не использовал.

 

Цвета

Чтобы задать цвет текста внутри блока мы используем указание в виде RGB

.ClassName  {

                         color: #ff0000;

}

Цвет фона для текста указывается не менее интуитивно-понятно, тоже в RGB:

.ClassName  {

                         background: #ff0000;

}

Если в качестве фона нужно указать картинку, то указываем адрес картинки

.ClassName  {

                         background: url(images/hand.png);

}

Кроме самой картинки можно указать кучу параметров ее расположения. Будет она повторяться по горизонтали или вертикали, если ее размер меньше размера блока. Будет ли картинка прокручиваться вместе с текстом или стоять на месте. Какой ее размер и другие параметры. Нужны они редко, очень редко, поэтому подробно можете посмотреть сами КОГДА БУДЕТ НУЖНО http://htmlbook.ru/css/background

 

Задачка для усвоения материала:


1. Сделать 5 блоков <div>. Высота у всех одинаковая - 100px.

2. Каждому из них сделать рызные цвета текста, фона и границ, толщину можно сделать одинаковую

3. Внутри каждого блока пишем текст "блок №1", "блок №2" и т.д.

4. "блок №1" у нас занимает 80% ширины страницы, расположен по центру.

5. "блок №2", "блок №3", "блок №4" имеют ширину по 200 пикселов и находятся в одной строке. Расстояние между ними - 20 пикселов, от верхнего блока "блок №1" отступают на 150 пикселов

6. "блок №5" имеет ширину 800px, расположен на 50 пикселов ниже блоков 2-4 и отступает от левой границы экрана на 200 пикселов.

7. Текст в блоке 1 совсем без отступов. В блоке 2 - сдвинут сверху на 30 пикселов, слева на 40 пикселов. В блоке 3 - по 30 пикселов со всех сторон. В блоках 4,5- на ваше усмотрение.