-Поиск по дневнику

Поиск сообщений в Сергей_Прико

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 16.11.2009
Записей:
Комментариев:
Написано: 22

Записи с меткой css каскадная таблица стилей

(и еще 2 записям на сайте сопоставлена такая метка)

Другие метки пользователя ↓

css css каскадная таблица стилей css каскадная таблица стилей css каскадная таблица стилей таблица стилей javascript каскадная таблица стилей таблица стилей
Комментарии (1)

Урок 12

Дневник

Понедельник, 14 Декабря 2009 г. 12:13 + в цитатник
height/высота и width/ширина

До сих пор мы особо не заботились о размерах элементов, с которыми работали. В этом уроке мы посмотрим, как легко можно определять высоту и ширину элемента.
width
height
Установка ширины [width]

Свойством width вы можете определять ширину элемента.

В примере показан бокс для ввода текста:

div.box {
width: 200px;
border: 1px solid black;
background: orange;
}

Установка высоты [height]

Обратите внимание, как, в предыдущем примере, высота бокса устанавливается содержимым этого бокса. Высоту элемента можно определить свойством height. В качестве примера попытаемся создать бокс высотой 500px:

div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
Рубрики:  PHP , CSS, JAVASCRIPT

Метки:  
Комментарии (0)

Без заголовка

Дневник

Понедельник, 14 Декабря 2009 г. 12:08 + в цитатник
Поля и заполнение

В предыдущем уроке мы рассмотрели боксовую модель. В этом уроке объясним, как можно изменять представление элементов свойствами margin и padding.
Установим поля элемента
Установим заполнение элемента
Установим поля элемента

У элемента есть четыре стороны: right, left, top и bottom. Поля margin это расстояние от каждой стороны с до соседних элементов (или краёв документа). См. также диаграмму в Уроке 9.

В качестве первого примера мы разберёмся, как определить поля самогó документа, т. е. элемента . На иллюстрации показано, какие поля нам нужны.



CSS-код для этого примера выглядит так:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}


Или вы можете написать более элегантно:

body {
margin: 100px 40px 10px 70px;
}


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

:

body {
margin: 100px 40px 10px 70px;
}

p {
margin: 5px 50px 5px 50px;
}


Установим заполнение элемента

Заполнение не влияет на расстояние элемента до других элементов, а лишь определяет внутреннее расстояние между рамкой и содержимым элемента.

Использование заполнения/padding можно показать на простом примере, где все заголовки имеют цветной фон:

h1 {
background: yellow;
}

h2 {
background: orange;
}



Определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

h2 {
background: orange;
padding-left:120px;
}

Рубрики:  PHP , CSS, JAVASCRIPT

Метки:  

 Страницы: [1]