Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 21. Оформление текстового поля
Не нравится(-) 49 Нравится(+)
20-07-2008, 01:25 - GZ Design (Уроки CSS)
Урок CSS 21. Оформление текстового поля

Здравствуйте уважаемые посетители! Российская школа CSS готовится к полному обновлению и модернизации, можно сказать - ко второму рождению. Это обновление призвано качественным образом изменить порядок размещения информации на сайте. Но это - в будущем, а сейчас, позвольте предложить Вам очередной урок CSS. Сегодня, мы поговорим о стилях, применяемых к различным полям форм.
Рассматривать эту масштабную тему, мы будим на примере текстового поля (поле ввода имени, пароля и т.д.)

Для начала - разберёмся в стилях "по умолчанию". Итак, для текстовых полей автоматически применяются:
- Реальная ширина: 145 пикселей (вместе с рамкой IE);
- Реальная высота: 21 пиксель (вместе с рамкой IE);
- Рамка: 1 пиксель, цвет, как правило, #000000 (черный).
- Фон поля: прозрачный, или белый (#ffffff);
Некоторые браузеры (Например Internet Explorer) добавляют эффект внутренней тени.

Теперь можно и приступить к самому уроку. Мы сделаем два текстовых поля. Одно с заливкой градиентом, другое - без.
По традиции, создаём 2 файла: index.html и style.css. В код веб-страницы запишем стандартное начало:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

Добавим наши текстовые поля и закроем index.html.
<input type="text" class="pole" value="Поиск по сайту..." />
<br />
<br />
<input type="text" class="pole2" value="Поиск по сайту..." />
</body>
</html>

Заметим, что если мы напишем в начале кода просто html, то поля будут некорректно отображаться в IE (браузер не будет учитывать их ширину).
Теперь будем работать с CSS. Запишем туда такие стили для первого поля:
.pole {
   background:#cdcdcd;
   border:1px solid #333;
   padding:6px;
   font:11px Tahoma;
   font-weight:bold;
}

Готово. Первое поле оформлено. Должно получиться примерно так:
Урок CSS 21. Оформление текстового поля

Теперь займёмся стилями для 2-го поля. Оставим основу той же. Не сложно подсчитать, что для оформления фона нам понадобится изображение высотой 25 пикселей. Добавим стили:
.pole2 {
   background-color:#a1e9ff;
   background-image:url('fon.png');
   border:1px solid #333;
   padding:6px;
   font:11px Tahoma;
   font-weight:bold;
}

Второе поли получилось таким:
Урок CSS 21. Оформление текстового поля

Вот, и всё. Можно продолжать эксперименты над другими элементами форм. Стили будут ткие же.
Спасибо за внимание!





Совместимость: Internet Explorer 6 - 7; Mozilla Firefox 2.xx - 3.xx Opera 8.хх - 9.xx.
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 1 Kb)


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 22764 раз(а) и написали 6 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Июль 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!