Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Октябрь, 2018

Создание однострочного текстового поля осуществляется с помощью тега . Достаточно воспользоваться параметром value данного тега и присвоить ему в качестве значения строку. После чего заданный текст появится в поле автоматически.

Пример

Текст в поле

В данном примере показано, как создать текст, который будет отображаться в поле сразу при открытии страницы.

Чтобы добавить текст к многострочному текстовому полю, следует поместить его между тегами и .

Пример

Текст в поле Бар — песчаная подводная отмель; образуется в море на некотором расстоянии от устья реки под действием морских волн.

Учтите, что все переносы строк в тексте и пробелы становятся значимыми и отображаются в текстовом поле.

Выравнивание текста

Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.

Табл. 1. Способы выравнивания текста

Выравнивание по левому краю Выравнивание по правому краю Выравнивание по центру Выравнивание по ширине
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Для установки выравнивания текста обычно используется тег параграфа

с параметром align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега с аналогичным параметром align, как показано в табл. 2.

Табл. 2. Выравнивание текста с помощью параметра align

Код HTML Описание

Текст

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

Текст

Выравнивание по центру.

Текст

Выравнивание по левому краю.

Текст

Выравнивание по правому краю.

Текст

Выравнивание по ширине.
Текст Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст Разрешает браузеру делать перенос строки в указанном месте, даже если используется NOBR тег.
Текст Выравнивание по центру.
Текст Выравнивание по левому краю.
Текст Выравнивание по правому краю.
Текст Выравнивание по ширине.

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что параметр align=»left» можно опустить.

Отличие между параграфом (тег

) и тегом в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега .

Параметр align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде

. В примере 1 показано, как в подобном случае устанавливать выравнивание.

Пример 1. Выравнивание текста

Как поймать льва?

Метод перебора

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

Метод дихотомии

Делим пустыню на две половины. В одной части — лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.

В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.

Существует несколько способов создания двух и более колонок при верстке слоями. Один из самых простых и применяемых методов основан на использовании стилевого атрибута float. При этом каждому слою в стилях надо задать float: left и ширину через параметр width. Но есть следующая проблема. Если ширина окна браузера больше суммарной ширины слоев, то все отображается замечательно (рис. 1).

Рис. 1. Вид колонок, созданных с помощью параметра float

Но стоит уменьшить окно до определенного размера, как слои «рассыпаются» и располагаются друг под другом (рис. 2). Естественно, подобная неприятность обычно возникает в случае, когда ширина слоев задана в пикселах, а не в процентах.

Рис. 2. Вид слоев при уменьшении размеров окна браузера

Решение заключается в создании контейнера, в который помещаются слои-колонки, и установке для него свойства min-width. Этот стилевой параметр определяет минимальную ширину блока, при этом браузер содержимое такого блока воспринимает целиком и никак не переносит. В примере 1 показано, как создать две колонки с учетом min-width.

Пример 1. Использование параметра min-width

Колонки без переносов #container {  min-width: 420px; } #col1 {  background-color: #fc0;  padding: 5px;  float: left;  width: 150px; } #col2 {  background-color: #c0c0c0;  padding: 5px;  width: 250px;  float: left; }  Колонка 1  Колонка 2

В данном примере ширина левой колонки установлена как 150 пикселов, правой — 250 пикселов. Значение min-width задано как 420 пикселов, оно получилось суммированием ширины колонок плюс значения полей с каждой стороны слоя.

Замечание

Браузер Internet Explorer 6 и ниже не поддерживает свойство min-width. В этом браузере приведенный метод не работает.

Цвет фона элемента задается стилевым параметром background-color, а цвет текста с помощью атрибута color. Эти свойства необходимо добавить к селектору INPUT, но поскольку тег является универсальным, то он создает не только текстовое поле, но и другие элементы форм. Чтобы определить стиль только для конкретного поля можно воспользоваться классами, а для всех текстовых полей — селектором атрибутов.

Пример

Цвет фона и текста в поле

.textfield {

 background-color: #ffe;  color: #930; }

Результат примера показан ниже.

Вид текстового поля после добавления к нему стилей

В данном примере добавляется новый класс с именем textfield, он добавляется к тегу с помощью конструкции class=»textfield».

Аналогично можно определить стиль одновременно для всех текстовых полей, зная, что к тегу в этом случае всегда добавляется параметр type=»text». Используя запись INPUT[type=»text»] задаем стиль для всех элементов INPUT, но стиль применяется только в том случае, когда type=»text».

Пример

Цвет фона и текста в поле

INPUT[type=»text»] {

 background-color: navy;  color: #ffe; }

Данный метод не работает в браузере Internet Explorer версии 6 и ниже.

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да
HTML: 3.2 4 XHTML: 1.0 1.1

Тег служит контейнером для элементов , которые определяют активные области для карт-изображений. Такие области устанавливают невидимые зоны на изображении, являющиеся ссылками на HTML-документы. Цель использования тега — в связывании тега с клиентской картой-изображением. Эта связь определяется применением единого идентификатора как в теге , задаваемого параметром usemap, так и в теге , устанавливаемого атрибутом name.

Синтаксис

 

Параметры

name Имя карты-изображения.

Закрывающий тег

Обязателен.

Пример 1. Использование тега

Тег MAP

Навигация по сайту

Параметр NAME

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Имя идентификатора, которое однозначно определяет карту-изображение. Значение параметра name тега должно соответствовать имени в usemap. При этом аргумент параметра usemap тега начинается с символа решетки.

Синтаксис

Обязательный параметр

Да.

Аргументы

Любое подходящее уникальное имя, оно чувствительно к регистру.

Значение по умолчанию

Нет.

Пример 2. Имя карты-изображения

Тег MAP, параметр usemap

Навигация

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

Пример

Ширина текстового поля #user {  width: 300px; }

Введите ваше имя:

Результат данного примера показан ниже.

Текстовое поле с фиксированной шириной

В данном примере задана ширина поля в пикселах путем добавления параметра width к идентификатору поля user.

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

Добавьте параметр margin-left к селектору UL или OL, соответственно, для маркированного или нумерованного списка. Браузер Firefox одновременно с отступами добавляет к списку поля (параметр padding). Поэтому для одинакового отображения списка в разных браузерах необходимо обнулить значение атрибута padding.

Пример

Отступ слева UL {  padding: 0px;  margin-left: 20px; }

     

  • Чебурашка
  •  

  • Крокодил Гена
  •  

  • Шапокляк

Результат данного примера показан на рис. 1.

Рис. 1. Список сдвинут влево от своего исходного положения

Значение margin-left подбирается экспериментально исходя из собственных предпочтений. Допускается также использовать отрицательную величину, только учтите, что маркеры и текст могут при этом «уехать» за край окна браузера.

Свойства CSS

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

background-attachment

Параметр background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом.

background-color

Устанавливает фоновый цвет элемента.

background-image

Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью.

background-position

Задает начальное положение фонового изображения, установленного с помощью параметра background-image.

background-repeat

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

color

Определяет цвет текста элемента.

Границы

border

Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

border-bottom

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

border-bottom-color

Устанавливает цвет границы внизу элемента.

border-bottom-style

Устанавливает стиль границы внизу элемента.

border-bottom-width

Задает толщину границы внизу элемента.

border-color

Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.

border-left

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

border-left-color

Задает цвет границы слева от элемента.

border-left-style

Устанавливает стиль границы слева от элемента.

border-left-width

Задает толщину границы слева от элемента.

border-right

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

border-right-color

Задает цвет границы справа от элемента. Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB.

border-right-style

Устанавливает стиль границы справа от элемента.

border-right-width

Устанавливает толщину границы справа от элемента.

border-style

Устанавливает стиль рамки вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

border-top

Одновременно задает толщину, стиль и цвет границы сверху элемента.

border-top-color

Задает цвет границы сверху элемента.

border-top-style

Устанавливает стиль границы сверху элемента.

border-top-width

Устанавливает толщину границы сверху элемента.

border-width

Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.

Шрифт

font

Параметр позволяет установить одновременно несколько атрибутов стиля шрифта. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

font-family

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

font-size

Определяет размер шрифта элемента, который может быть установлен несколькими способами.

font-style

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

font-variant

Определяет, как нужно представлять строчные буквы — делать их все прописными уменьшенного размера или оставить без изменений. Такой способ изменения символов называется капителью.

font-weight

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Также допустимо использование ключевых слов.

Текст

letter-spacing

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

line-height

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

text-align

Определяет горизонтальное выравнивание текста в пределах элемента.

text-decoration

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

text-indent

Устанавливает величину отступа первой строки блока текста (например, для параграфа P). Воздействия на все остальные строки не оказывается.

text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен.

vertical-align

Выравнивает элемент по вертикали относительно своего родителя или окружающего текста.

white-space

Параметр white-space устанавливает, как отображать пробелы между словами.

word-spacing

Устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно.

Списки

list-style

Атрибут, позволяющий одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера.

list-style-image

Устанавливает адрес изображения, которое служит в качестве маркера списка. Этот атрибут наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.

list-style-position

Определяет, как будет размещаться маркер относительно текста. Имеется два значения: outside — маркер вынесен за границу элемента списка и inside — маркер обтекается текстом.

list-style-type

Изменяет вид маркера для каждого элемента списка. Этот атрибут используется только в случае, когда значение свойства list-style-image установлено как none. Маркеры различаются для маркированного списка (тег UL) и нумерованного (тег OL).

Форматирование

clear

Параметр устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон.

clip

Параметр clip определяет область позиционированного элемента, в которой будет показано его содержимое. Все, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственно доступная форма области — прямоугольник.

display

Многоцелевой атрибут, который определяет, как элемент должен быть показан в документе.

float

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

height

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег IMG. Высота не включает толщину границ вокруг элемента, значение отступов и полей.

overflow

Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

visibility

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

width

Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

Позиционирование

bottom

Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

left

Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position.

position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

right

Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента.

top

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента.

z-index

Управляет размещением элементов по z-оси, что позволяет накладывать элементы друг на друга.

Отступы

margin

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.

margin-bottom

Устанавливает величину отступа от нижнего края элемента.

margin-left

Устанавливает величину отступа от левого края элемента.

margin-right

Задает величину отступа от правого края элемента.

margin-top

Устанавливает величину отступа от верхнего края элемента.

Поля

padding

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

padding-bottom

Устанавливает значение поля от нижнего края содержимого элемента.

padding-left

Устанавливает значение поля от левого края содержимого элемента.

padding-right

Задает значение поля от правого края содержимого элемента.

padding-top

Задает величину поля от верхнего края содержимого элемента.

Таблицы

border-collapse

Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии.

border-spacing

Задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.

table-layout

Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.

Интерфейс

cursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Важность

!important

Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стилевого параметра.

Псевдоэлементы

after

Псевдоэлемент, который используется для вывода желаемого контента после элемента, к которому он добавляется. Псевдоэлемент after работает совместно с атрибутом content.

before

Псевдоэлемент before применяется для отображения желаемого контента до элемента, к которому он добавляется. before работает совместно с атрибутом content.

Формы

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

Элементы форм

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

Текстовое поле

Текстовое поле предназначено для ввода символов с помощью клавиатуры. Различают три элемента формы, которые используются для этой цели — однострочное текстовое поле, поле для ввода пароля и многострочное текстовое поле.

Кнопки

Кнопка — это элемент интерфейса, на который нужно нажимать.

Флажки (checkbox)

Флажки используют, когда необходимо выбрать два или более варианта из предложенных.

Переключатели (radiobutton)

Переключатели используют, когда необходимо выбрать один единственный вариант из предложенных.

Поле со списком

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

Скрытое поле

Скрытое поле не показывается на странице и прячет свое содержимое от пользователя. Посетитель не может ничего в него внести или напечатать.

Кнопка с изображением

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

Отправка файла

Поле для отправки файла создает элемент формы в виде текстового поля для ввода имени файла, который пересылается на сервер.

Списки

Маркированные списки позволяют разбить большой текст на отдельные блоки. Тем самым привлекается внимание читателя к тексту и повышается его читабельность.

Нумерованные списки

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

Список определений

Список определений представляет собой текст, состоящий из двух взаимосвязанных наборов — списка с терминами и списка определений терминов.

Вложенные списки

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