С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width .
Таблица 3. Атрибуты тега Атрибут
Значение / описание
accept
Определяет тип файла, разрешенных для отправки на сервер. Указывается только для
alt
Определяет альтернативный текст
для изображений, указывается только для
autocomplete
Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
autofocus
Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked
Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" .
disabled
form
Значение атрибута должно быть равно атрибуту id элемента
formaction
Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы.
formenctype
Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:
formnovalidate
Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget
Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.
height
Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа type="image" , например,
list
Является ссылкой на элемент , содержит его id .Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
max
Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом min . Работает со следующими типами полей: number , range , date , datetime , datetime-local , month , time и week .
maxlength
Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
min
Позволяет ограничить допустимый ввод числовых данных минимальным значением.
multiple
Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
name
Определяет имя, которое будет использоваться для доступа к элементу
pattern
Позволяет определять с помощью регулярного выражения
синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, pattern="{3}-{3}" — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
placeholder
Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
readonly
Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
required
Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
size
Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: text , search , tel , url , email и password .
src
Задает url изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля
step
Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
type
button — создает кнопку.
checkbox — превращает поле ввода во флажок, который можно установить или очистить, например,
color — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date — позволяет вводить дату в формате дд.мм.гггг.
datetime-local — позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
email — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
file — позволяет загружать файлы с компьютера пользователя.
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
submit — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
url — поле предназначено для указания URL-адресов.
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
value
Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width
Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.
Таблица 4. Атрибуты тега
Кошка
7. Кнопки
Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например,
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Таблица 9. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает фокус на кнопке при загрузке страницы.
disabled
Отключает кнопку, делая ее некликабельной.
form
Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction
Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента
formenctype
Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента
formnovalidate
Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" .
formtarget
Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента
name
Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type
Определяет тип кнопки. Возможные значения:
value
Задает значение по умолчанию, отправляемое при нажатии на кнопку.
8. Флажки и переключатели в формах
Флажки в формах задаются с помощью конструкции
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить .
Б
локи в CSS представляют собой самостоятельный объект, имеющий форму прямоугольника. Все элементы HTML - документа представляют собой самостоятельные блоки, которые содержат любого рода информацию, будь-то текст или изображение (контент). К примеру: для элемента
содержимым блока является текст , а
для элемента - текст .
Вокруг контента, в блоке, могут быть пустые, не занятые поля (padding)
, что кстати придает содержимому блока более привлекательный вид.
Сразу за полями пролегает граница блока (border)
, которая может иметь заданную толщину, цвет и стиль. Блок может иметь отступы
(margin)
т.е. свободное пространство вокруг границ. Поля, границы и отступы не входят в ширину блока, ширина задается только для его содержимого.
Поля. Свойства MARGIN-TOP, MARGIN-RIGHT,
Эти свойства задают величину полей вокруг блока, значения задаются в любых единицах длины или процентах:
margin-top
- обозначает ширину верхнего поля;margin-right
- обозначает ширину правого поля;margin-bottom
- обозначает ширину нижнего поля;margin-left
- обозначает ширину левого поля.Пример правила для абзаца, с полями справа и слева по 25px, будет выглядеть так:
p {
Свойство MARGIN
Это свойство - стенографическое, которое применяется для сокращенной записи выше перечисленных свойств. Свойство
margin
может иметь количество значений от одного до четырех:
если задано только одно, то поля со всех сторон блока одинаковые;
если заданы два значения, то первое обозначает поля сверху и снизу, второе - справа и слева (значения каждой пары равны);
если задано три значения, то первое обозначает верхнее поле, второе - левое и правое, третье - нижнее;
если заданы все четыре значения, то соответственно, первое - верх, затем - правое поле, потом нижнее и последнее - левое.
p {margin
: 15px 5px 20px
}
В этом примере верхнее поле абзаца будет равно 15px, правое и левое поля по 5px, нижнее поле будет 20px.
Границы. Свойства BORDER-TOP-WIDTH, BORDER-RIGHT-WIDTH, BORDER-BOTTOM-WIDTH, BORDER-LEFT-WIDTH
При помощи CSS можно заключить текст абзаца в рамку, как например это сделано на страницах сайта в виде примеров.
Данные свойства задают только толщину границ блока для верхнего, правого, нижнего и левого сегментов. Значения можно задвать ключевыми словами:
thin
- тонкая;medium
- средней толщины (используется по умолчанию);thick
- толстая.Так же значения можно задавать в любых единицах длины, в процентах значения не задаются. Правило можно записать так:
p {
Свойство BORDER-WIDTH
Это стенографическое свойство, значения задаются так же как у свойства . Правило
записанное ниже будет соответствовать записанному выше примеру:
p {border-width
: 1px 2px medium thin
}
Свойство BORDER-COLOR
Это свойство так же стенографическое, с его помощью задается
границ блока, значениями являются:
ключевое слово (red, yellow, black, blue и т.д.);
шестнадцатиричный код цвета (00FFFF, 000000, FFFFFF и т.д.);
десятичный код в RGB (color: rgb (120, 25, 182));
transparent
- прозрачная граница.Если необходимо задать разные цвета каждой из четырех границ, то применяются свойства:
border-top-color
- цвет верхней границы;border-right-color
- цвет правой границы;border-bottom-color
- цвет нижней границы;border-left-color
- цвет левой границы.Правило для такого примера будет выглядеть так:
p {
Свойство BORDER-STYLE
Свойство стенографическое, оно задает тип линий, которыми являются границы блока. Для задания различных типов линий, для границ
блока, используются индивидуальные свойства:
border-top-style
- тип линии верхней границы;border-right-style
- тип линии правой границы;border-bottom-style
- тип линии нижней границы;border-left-style
- тип линии левой границы.Значениями свойства являются ключевые слова:
none
- граница отсутствует (используется по умолчанию);dotted
- граница оформлена линией состоящих из точек;dashed
- пунктирная линия;solid
- сплошная линия;double
- двойная сплошная линия;groove
- граница отображается "вдавленной" линией (имитирует объём);ridge
- граница отображается "выпуклой" линией;inset
- граница отображается так, что весь блок выглядит вдавленным;outset
- весь блок выглядит выпуклым.Посмотрим на примерах:
Стенографическое свойство border-style
позволяет сокращать значения стилей для всех четырех сегментов границы,
задается так же как для свойства . Пишем правило для блока с границами выполненными пунктирной линией:
p {border-style
: dashed
}
Свойства BORDER-TOP, BORDER-RIGHT, BORDER-BOTTOM, BORDER-LEFT
Это стенографические свойства, которые позволяют сокращенно записать значения свойств border-width
,
border-style
и border-color
, смотрим на примере:
p {
Границы у абзаца будут красными, выполненными сплошной линией. Вверху и внизу толщина границ 1px, справа и слева - 3px.
Свойство BORDER
Это свойство стенографическое и применяется для задания параметров всех четырех сегментов границ: ширины, цвета и стиля.
Пишем пример правила:
p {border
: 1px solid blue
}
Граница вокруг этого абзаца будет одинаковой со всех сторон, выполненой сплошной линией синего цвета толщиной 1px.
Отступы. Свойства PADDING-TOP, PADDING-RIGHT,
Эти свойства позволяют задать размеры отступов для каждой стороны в отдельности, значения задаются в единицах длины
или в процентах:
padding-top
- ширина верхнего поля;padding-right
- ширина правого поля;padding-bottom
- ширина нижнего поля;padding-left
- ширина левого поля.Свойство PADDING
Это стенографическое свойство, которое применяется для сокращенной записи выше описанных свойств. Свойство padding
может иметь от одного до четырех значений, которые присваиваются так же как для (полей) и (границ). Запишем
такое правило:
p {
На примере получившегося абзаца посмотрим как работают отступы:
Именно от того, насколько оптимизирован сайт, зависит позиция, на которой поисковые системы будут выдавать его в результатах поиска.
Чем выше эта позиция, тем больше посетителей вы получите с поисковиков. Важным этапом оптимизации является наполнение сайта качественным,
уникальным контентом. Не нужно копировать с других ресурсов интересные статьи по своей тематике, повторять то, что уже есть на просторах
всемирной паутины.
На этом, я считаю, что первое знакомство с каскадными таблицами стилей CSS можно закончить и самостоятельно приступить к
. Этих знаний вполне хватит для начала, так что вперед,
к покорению просторов гиперпространства.
То, без чего не создать сайт:
∼
∼
Многим интересно:
Поле поиска, вероятно, является одним из распространенных элементов интерфейса пользователя. Работая над уровнем удобства интерфейса очень часто возникает желание добавить стильное поле поиска. В данном уроке мы создадим такой популярный элемент с помощью псевдо-элементов.
Разметка HTML
Для подготовки такого поля разметка будет минимальна.
Здесь используются специальные атрибуты HTML5 placeholder и required:
placeholder
- данный атрибут задает вывод текста в поле перед тем, как поле получит фокус ввода, затем текст скрывается.required
- данный атрибут задает обязательное условие наличие информации в поле ввода перед отправкой формы.HTML5 также имеет новое значение для атрибута type: type="search" . Но она плохо поддерживается в браузерах, поэтому мы не будем его пока использовать.
Такие элементы HTML как img и input не имеют содержания. Следовательно псевдо-элемент, например:before, не будет выводить никаких стрелок для кнопки.
Решением данной задачи в нашем случае является использование button type="submit" вместо input type="submit" . Таким образом, мы сохраняем для формы использование клавиши ENTER.
CSS
Ниже приводятся необходимые для нашей демонстрации стили:
Отмена обтекания текстом
Cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
Элементы формы
Префиксы браузеров в коде уроке не приводятся для лучшей наглядности. Вы можете посмотреть полный код в тексте исходника.
/* Стили для контейнера формы */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Стили поля ввода текста */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Кнопка отправки формы */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* стрелка влево */
content: "";
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* Удаляем дополнительное пространство рядом с кнопкой в Mozilla Firefox */
border: 0;
padding: 0;
}
В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.
Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:
Padding отделяет содержимое от границы блока, а margin создает промежутки между блоками
Как видите, поля и отступы CSS отличаются между собой, хоть иногда без просмотра кода и нельзя определить, с помощью какого свойства задано расстояние. Это случается в тех случаях, когда отсутствует рамка или фон блока с содержимым.
Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
Отступы:
padding-top: значение;
padding-right: значение;
padding-bottom: значение;
padding-left: значение;
Поля:
margin-top: значение;
margin-right: значение;
margin-bottom: значение;
margin-left: значение;
Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px .
Также существует очень удобная вещь как сокращенная запись margin и padding CSS
. Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:
4 значения: задаются отступы для всех сторон элемента в такой последовательности: сверху, справа, снизу, слева:
padding: 2px 4px 5px 10px;
3 значения: задается отступ сначала для верхней стороны, потом одновременно для левой и правой, а затем – для нижней:
padding: 3px 6px 9px;
2 значения: задаются отступы сначала одновременно от верхней и нижней стороны, а затем – одновременно для левой и правой:
padding: 6px 12px;
1 значение: задаются одинаковые отступы для всех сторон элемента:
padding: 3px;
Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.
Схлопывание margin
Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px , а для нижнего – margin: 30px . Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.
Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.
Схлопывание margin работает только для верхних и нижних полей элементов и не относится к полям с правой и левой сторон. Окончательная величина промежутка высчитывается в разных ситуациях по-разному:
Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px . Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 -8 . Итоговый размер поля равен -8 пикселей.
В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.
Рис. 1. Улучшенные веб-формы с помощью HTML5