3. Создание полей формы

Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .

4. Текстовые поля ввода

Элемент ... используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Кошка

7. Кнопки

Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.

Для корректного отображения элемента

разными браузерами нужно указывать атрибут type , например, .

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

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .

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

Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .

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

Что такое блоки?

Сайт строится из кирпичиков - блоков. При этом каждый элемент, вне зависимости от его содержимого, должен иметь прямоугольную форму. То есть все изображения и надписи мысленно заключаются разработчиком в «коробочки», располагая которые, он создаёт веб-страницу.

Чаще всего блоки задаются тегами

,

-

,

. К каждому такому элементу применяют свойства CSS: padding , margin , border , width и другие. Ширина прямоугольника-блока задаётся свойством width , затем каждый элемент оформляется полями, которые очерчиваются с помощью атрибута border. Наконец, компонент страницы может иметь внешние поля, или отступы - margin , отделяющие его от другого блока.

Синтаксис свойства padding в CSS

Создатели каскадных таблиц стилей предусмотрели несколько вариантов записи атрибута для установки полей. Сделать пустую область внутри блока можно восемью разными способами! Таблица ниже показывает примеры для каждого из варианта и даёт к ним краткие пояснения.

Пример использования	Пояснение
padding: 15 px;	Если после атрибута следует одно число, это означает, что элемент будет иметь одинаковые поля со всех сторон. Запись px предполагает, что значение задаётся в пикселях. То есть в итоге блок будет иметь поля по 15 пикселей.
padding: 18 px 36 px;	Первое из двух чисел указывает, что вертикальные поля составят по 18 пикселей, боковые - в два раза больше - 36 пикселей.
padding: 6 px 12 px 18 px;	Среднее число - значение полей по бокам (левого и правого), два других - вертикальные поля. При этом первое число (6 px) относится к верхнему полю, а последнее (18 px) - к нижнему.
padding: 6 px 12 px 18 px 36 px;	Форма записи свойства CSS padding , в которой присутствуют четыре числа, позволяет задать поля со всех сторон блока. Числовые значения последовательно применяются к верхнему полю и далее по часовой стрелке - к правому, нижнему и левому.
padding-left: 14 px;	Приписка left говорит сама за себя - поле будет установлено только слева элемента.
padding-right: 14 px;	Аналогично предыдущему варианту записи - поле создастся только справа блока.
padding-top: 14 px;	Запись определяет поле сверху.
padding-bottom: 14 px;	Запись определяет поле снизу.

Следует заметить, что по умолчанию в CSS padding равен нулю. Данный атрибут не является наследуемым, то есть его необходимо устанавливать для каждого блока. Помимо привычных и понятных пикселей, ширина пустого пространства вокруг блоков задаётся и в относительных единицах. Например, в примерах выше можно записать 5% - в результате ширина поля просчитается браузером автоматически.

Как использовать свойство?

Итак, формы записи атрибута рассмотрены, но как его использовать на HTML-странице? Первый вариант - более «красивый», когда всё, что касается технологии CSS, не прописывается в HTML, а вынесено в отдельный файл с соответствующим расширением.

Второй вариант - запись непосредственно в тег <style >. CSS padding в этом случае задаётся следующим образом:

< div style=" padding: 22 px">

Как записать атрибут - выбирает верстальщик. В любом случае необходимо владеть всеми способами применения свойства для определения полей, чтобы при случае воспользоваться им.

Урок 9. Отступы (поля) вокруг объектов в CSS.

Дата: 2009-04-22

Сегодня используя стили CSS мы научимся делать поля и отступы вокруг объектов. Что мы будем называть объектами? Объектами или как иногда говорят контейнерами можно назвать все что угодно - это может буть абзац с текстом, картинка (графический файл), таблица, строка в таблице и т.д. Т.е. - это абсолютно любой элемент оформления на web-странице. Давайте для простоты определимся, что у нас объектом - будет абзац с текстом заключенным в теги .

Создаем новый класс например .pol , и в фигурных {} скобках начинаем писать код стиля. Первое свойство:

margin: 60px; - задает отступ со всех сторон вокруг абзаца (контейнера) в 60 px , естественно 60 px - взято для примера эта цифра может быть любая которая Вам больше подходит в каждом конкретном случае. Есть и варианты, а именно:

margin-left: - отступ слева;

margin-top: - отступ сверху;

margin-right: - отступ справа;

margin-bottom: - отступ снизу.

Естественно можно применять эти значения в любом сочетании, например задать отступ слева и снизу (прописав в стиле значения margin-left: и margin-bottom: ) или только сверху (margin-top: ) и т.д. Еще свойство margih может принимать значение auto , которой прописывается так:

Листинг 9.1.

Что мы записали? Эта запись означает - мы задали рамку черного цвета вокруг нашего абзаца с текстом толщиной в 1 px и задали отступ текста от рамки 30px со всех сторон.

Так же как и преведущее свойство margih , свойство padding: имеет варианты:

padding-left: - отступ слева;

padding-top: - отступ сверху;

padding-right: - отступ справа;

padding-bottom: - отступ снизу.

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

Раз уж мы заговорили о контейнерах, давайте вспомним, как можно задать контейнер с заданными размерами, например нам на web-странице нужно вставить рекламный блок заданной ширины (width) и высоты (height) . Создаем новый класс .pol2 и пишем код:

Листинг 9.3.

Выровняв наш рекламный блок таким образом, мы замечаем, что "обтекающий" текст "прилип" к рамке рекламного блока. Значит нужно задать отступ от рамки блока. Делается это с помощью уже знакомого атрибута margin-right: . Вот как выглядит листинг кода.

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

Первым делом, Вам необходимо сделать 3 картинки из текстового поля:

1. Левый угол . Должен затрагивать самое начало текстового поля (например, его тень) слева и идти до момента, когда уже закругления нет.
2. Правый угол . Аналогично левому углу, но с другой стороны.
3. Полоска основной части . Эта полоска должна быть в ширину 1 пиксель и должна быть вырезана где-нибудь посередине текстового поля.

Очень важный момент заключается в том, что все 3 картинки должны быть одинаковой высоты . Следующий этап - это HTML-код :

Как видите, мы сделали таблицу из 1-й строки и 3-х столбцов . В первом столбце у нас планируется левый угол, во втором - само текстовое поле, в третьем - правый угол.

И теперь CSS-код :

Input_left {
background: url("input_left.jpg") no-repeat scroll 0 0 transparent; //Фон с левым углом
}
.input_right {
background: url("input_right.jpg") no-repeat scroll 0 0 transparent; //Фон с правым углом
}
input {
background: url("bg_input.jpg") repeat-x scroll 0 0 transparent; //Фон текстового поля
border: none; //Убрать стандартную рамку у текстового поля
height: 35px; //Высота картинки
outline: none; //Убрать рамку фокуса в IE
width: 200px; //Требуемая ширина текстового поля
}

Если Вы всё сделали правильно, то теперь Вы можете любоваться на своей странице красивым текстовым полем. На практике данный способ используется постоянно (не только для текстовых полей), поэтому знать его надо любому верстальщику.

Советуем почитать

• Бесплатные программы для Windows скачать бесплатно
• Как подключить и отключить услугу «Гудок» от Теле2
• Как получить аттестат Webmoney?
• Как отключить на андроид вибрацию при наборе текста и соединении с абонентом Как отключить вибрацию в играх