Таблица 2. Атрибуты тега
Атрибут
Значение / описание
disabled
Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера , отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — .
form
name
Определяет имя
, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id .
3. Создание полей формы
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение . Ширина поля задается свойством width .
Таблица 3. Атрибуты тега
Атрибут
Значение / описание
accept
Определяет тип файла, разрешенных для отправки на сервер. Указывается только для . Возможные значения :
file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif" , accept=".pdf" , accept=".doc"
audio/* — разрешает загрузку аудиофайлов
video/* — разрешает загрузку видеофайлов
image/* — разрешает загрузку изображений
media_type — указывает на медиа-тип загружаемых файлов.
alt
Определяет альтернативный текст
для изображений, указывается только для .
autocomplete
Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе:
on — означает, что поле не защищено, и его значение можно сохранять и извлекать,
off — отключает автозаполнение для полей форм.
autofocus
Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
checked
Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа type="checkbox" и type="radio" .
disabled
form
Значение атрибута должно быть равно атрибуту id элемента
formaction
Задает url файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа type="submit" и type="image" . Атрибут переопределяет значение атрибута action самой формы.
formenctype
Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута enctype формы. Задается только для полей типа type="submit" и type="image" . Варианты:
application/-x-www-form-urlencoded — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ + , специальные символы преобразуются в значения ASCII HEX)
multipart/form-data — символы не кодируются
text/plain — пробелы заменяются на символ + , а специальные символы не кодируются.
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута method формы. Варианты:
get — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: URL?имя=значение&имя=значение
post — данные формы отправляются в виде http-запроса.
formnovalidate
Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута novalidate формы. Можно использовать без указания значения атрибута.
formtarget
Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа type="submit" и type="image" . Переопределяет значение атрибута target формы.
_parent – загружает ответ в родительский фрейм
_top – загружает ответ во весь экран
framename – загружает ответ во фрейм с указанным именем.
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 — браузеры, поддерживающие данный атрибут , будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
E-mail:
file — позволяет загружать файлы с компьютера пользователя.
Выберите файл:
hidden — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
image — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
month — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
number — предназначено для ввода целочисленных значений. Его атрибуты min , max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
Укажите количество (от 1 до 5):
password — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
Введите пароль:
radio — создает переключатель - элемент управления в виде небольшого кружка, который можно включить или выключить.
Вегетарианец:
range — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
reset — создает кнопку, которая очищает поля формы от введенных пользователем данных.
search — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.
Поиск:
submit — создает стандартную кнопку , активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
text — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
time — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
Укажите время:
url — поле предназначено для указания URL-адресов.
Главная страница:
week — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
Укажите неделю:
value
Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
width
Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.
4. Текстовые поля ввода
Элемент используется вместо элемента , когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height . Все размеры считаются исходя из размера одного символа моноширинного шрифта.
5. Раскрывающийся список
Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента ... . Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.
Для добавления в список пунктов используются элементы ... , которые располагаются внутри .
Для систематизации списков применяется элемент ... , который создает заголовки в списках.
Для списков возможно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение.
Таблица 5. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает автоматический фокус на элементе при загрузке страницы.
disabled
Отключает раскрывающийся список.
form
Определяет форму, которой принадлежит данный список . В качестве значения атрибута указывается идентификатор формы.
multiple
Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу Ctrl .
name
Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
required
Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
size
Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.
6. Надписи к полям формы
Надписи к элементам формы создаются с помощью элемента ... . Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.
Когда вы последний раз летали на самолете?
Кошка
7. Кнопки
Элемент ... создает кликабельные кнопки. В отличие от кнопок, созданных ( , , , ), внутрь элемента можно поместить контент — текст или изображение.
Для корректного отображения элемента разными браузерами нужно указывать атрибут type , например, .
Кнопки позволяют пользователям передавать данные в форму, очищать содержимое формы или предпринимать какие-либо другие действия. Можно создавать границы, изменять фон и выравнивать текст на кнопке.
Таблица 9. Атрибуты тега
Атрибут
Значение / описание
autofocus
Устанавливает фокус на кнопке при загрузке страницы.
disabled
Отключает кнопку, делая ее некликабельной.
form
Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
formaction
Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа type="submit" . Переопределяет значение атрибута action , указанного для элемента .
formenctype
Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа type="submit" . Переопределяет значение атрибута enctype , указанного для элемента . Возможные значения:
application/x-www-form-urlencoded — значение по умолчанию. Все символы перед отправкой будут закодированы.
multipart/form-data — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы.
text/plain — символы не кодируются, а пробелы заменяются на символ + .
formmethod
Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута method , указанного для элемента . Указывается только для кнопок типа type="submit" . Возможные значения:
get — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации.
post — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем get и не имеет ограничений по размеру.
formnovalidate
Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа type="submit" .
formtarget
Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа type="submit" . Переопределяет значение атрибута target , указанного для элемента .
_blank — загружает ответ в новое окно/вкладку
_self — загружает ответ в то же окно (значение по умолчанию)
_parent — загружает ответ в родительский фрейм
_top — загружает ответ во весь экран
framename — загружает ответ во фрейм с указанным именем.
name
Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
type
Определяет тип кнопки. Возможные значения:
button — кликабельная кнопка
reset — кнопка сброса, возвращает первоначальное значение
submit — кнопка для отправки данных формы.
value
Задает значение по умолчанию, отправляемое при нажатии на кнопку.
8. Флажки и переключатели в формах
Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .
Флажков, в отличие от переключателей, в одной форме может быть установлено несколько. Если для флажков указан атрибут checked , то при загрузке станицы на соответствующих полях формы флажки уже будут установлены.
Элемент применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт , просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить внутрь элемента .
Последнее обновление : 08.04.2016
Однострочное текстовое поле создается с помощью элемента input
, когда его атрибут type имеет значение text:
С помощью ряда дополнительных атрибутов можно настроить текстовое поле:
dirname
: устанавливает направление текста
maxlength
: максимально допустимое количество символов в текстовом поле
pattern
: определяет шаблон, которому должен соответствовать вводимый текст
placeholder
: устанавливает текст, который по умолчанию отображается в текстовом поле
readonly
: делает текстовом поле доступным только для чтения
required
: указывает, что текстовое поле обязательно должно иметь значение
size
: устанавливает ширину текстового поля в видимых символах
value
: устанавливает значение по умолчанию в текстовом поле
Применим некоторые атрибуты:
Текстовые поля в HTML5
Отправить
Отмена
В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size - то есть количество
символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем
maxlength, мы не сможем.
В данном случае также важно различать атрибуты value и placeholder , хотя оба устанавливают видимый текст в поле.
Однако placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом . В то время как
значение value представляет введенный в поле текст по умолчанию:
Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом . В случае с
disabled текстовое поле затеняется:
Среди атрибутов текстового поля также следует отметить такой атрибут как list
. Он содержит ссылку на элемент datalist
,
который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:
Текстовые поля в HTML5
Отправить
35000
Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option
определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.
Поле поиска
Для создания полей поиска предназначен элемент input с атрибутом type="search" . Формально он представляет собой простое текстовое поле:
Поиск в HTML5
Поле ввода пароля
Для ввода пароля используется элемент input с атрибутом type="password" . Его отличительной чертой является то, что вводимые символы маскируются точками:
Поля и отступы являются очень важными стилями при построении HTML-страницы. Они позволяют более точно спозиционировать элементы, создать каркас с необходимыми зазорами и т.п. Оба стиля очень похожи и выполняют схожие функции. Но отличия все же есть.
Элементы могут быть вложенными, могут находиться по соседству друг от друга. Давайте рассмотрим следующий пример:
Имеем две таблицы, лимонного и голубого цвета, расположенные друг под другом. Таблицы состоят из одной ячейки. В ячейке первой таблицы находится красный блок. На этом примере рассмотрим принцип работы полей и отступов.
Поля задаются стилем padding
. Этот стиль применим только к элементам-контейнерам, которые могут содержать в себе другие элементы. Стиль позволяет задать значение полей между краями элемента и его содержимым. Стиль margin
позволяет задать отступы от элемента до ближайших границ другого элемента. Границами другого элемента могут быть границы родительского контейнера, а также края самой страницы.
Существует несколько способов задания этих стилей. Например, непосредственно указать размер всех полей или отступов одним аргументом в какой-нибудь единице измерения (px, ex, em, pt, cm и так далее):
padding
:
3px
;
margin
:
3px
;
В этом случае поля и отступы будут со всех четырех сторон одинаковы. При задании двух аргументов через пробел:
padding
:
3px
5px
;
margin
:
3px
5px
;
первый будет определять величину полей/отступов сверху и снизу, второй - слева и справа. При задании трех аргументов:
padding
:
3px
5px
2px
;
margin
:
3px
5px
2px
;
первый - поле/отступ сверху, второй - одновременно слева и справа, третий - снизу. При четырех аргументах:
padding
:
3px
5px
2px
6px
;
margin
:
3px
5px
2px
6px
;
первый - поле/отступ сверху, второй - справа, третий - снизу, четвертый - слева. Легко запомнить: первый - сверху, далее по часовой стрелке. Кроме того, можно задавать поля и отступы для конкретного края отдельно, с помощью соответствующих стилей: padding-top
, padding-right
, padding-bottom
, padding-left
, margin-top
, margin-right
, margin-bottom
, margin-left
. Значением этих стилей может быть только один аргумент, задающий величину поля/отступа для данной стороны.
На рисунке красный блок находится внутри ячейки таблицы и примыкает к ее границам, то есть поля у ячейки отсутствуют. Зададим поля ячейке с помощью стиля:
padding
:
5px
;
В результате страница изменит вид к следующему:
Рассмотрим теперь отступы. Две таблицы примыкают друг к другу, если мы хотим их немного раздвинуть, можно применить отступы. Тут есть два варианта: либо задать нижний отступ первой таблицы, либо верхний отступ второй таблицы. Давайте воспользуемся вторым:
margin-top
:
5px
;
Заметьте, что отступ мы задаем именно таблице, а не ячейке таблицы, как в случае с полями. Вот результат:
Кстати, в первом случае (зазор между красным блоком и границами родительской ячейки) того же самого эффекта можно было добиться с помощью задания отступов блока. В общем, если что-то непонятно, отписываемся в комментариях.
HTML-код подопытной страницы:
<html
>
<head
>
<title
>
Тест</
title
>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=utf-8"
>
</
head
>
<body
>
<style
>
table {width: 200px; height: 150px; border: 1px solid #555; border-collapse: collapse}
td {vertical-align: top; padding: 0px}
div {width: 100px; height: 100px; background: red}
</
style
>
<table
style
=
"background: lime"
>
<tr
>
<td
style
=
"padding: 5px"
>
<div
style
=
"margin: 0px"
>
</
div
>
</
td
>
</
tr
>
</
table
>
<table
style
=
"background: skyblue; margin-top: 5px"
>
<tr
>
<td
>
</
td
>
</
tr
>
</
table
>
</
body
>
</
html
>
Padding-top Со структурой блока, надеюсь, Вы уже знакомы. Если нет, то она представлена ниже.
Структура блока
И так. Вам уже, наверное, известно, что поля и отступы у блока представлены свойствами padding
и margin
соответственно. И в предыдущей статье мы уже частично затронули эту тему. На этой странице немного подробнее рассмотрим поля (padding
) и отступы (margin
).
Свойства margin
и padding
очень похожи друг на друга, выполняют схожие функции, поэтому их часто путают. Но делать этого конечно же не стоит, так как все-таки поля и отступы это совершенно разные вещи. Впрочем это хорошо видно из рисунка, ведь не случайно он здесь приведен.
Итак. Поля задаются свойством padding
. Это внутренние расстояния от границ блока до его содержимого.
Свойство применимо ко всем элементам.
Расстояние задается в единицах длины, принятых в CSS , в %
, либо (по умолчанию
Свойство padding
является универсальным, так как устанавливает поля от границ элемента до его содержимого для всех его сторон, объединяя таким образом в себе свойства padding-top
, padding-right
, padding-bottom
и padding-left
, которые задают ширину полей для каждой из сторон элемента индивидуально.
Отступы задают при помощи свойства margin
, которые определяют расстояние от границ блока до ближайших элементов или до краев окна браузера.
Свойство margin
также применимо ко всем элементам.
Отступы также задаются в единицах длины, принятых в CSS , в %
, либо (по умолчанию
) определяется браузером автоматически.
Свойство margin
является универсальным, так как задает величину отступов от границ элемента для всех его сторон, объединяя таким образом в себе свойства margin-top
, margin-right
, margin-bottom
и margin-left
, которые устанавливают ширину отступов от каждой из границ элемента индивидуально.
И еще
: отступы (margin
) располагаются за пределами блока, в то время как поля (padding
) внутри его, поэтому фон блока или его фоновое изображение распространяются только на поля, а отступы всегда прозрачны, либо имеют фон основного (родительского
) блока или фон страницы.
Фрагмент кода:
;
">
Таблица располагается внутри контейнера с красной границей и синим фоном.
Ширина отступов от границы таблицы до красной границы контейнера составляет 10 пикселей.
В ячейке слева расположено изображение. Отступы от изображения до границ ячейки составляют 25 пикселей.
Поля правой ячейки составляют 10 пикселей!
Б
локи в CSS представляют собой самостоятельный объект, имеющий форму прямоугольника. Все элементы HTML - документа представляют собой самостоятельные блоки , которые содержат любого рода информацию, будь-то текст или изображение (контент). К примеру: для элемента
содержимым блока является текст , а
для элемента - текст .
Вокруг контента, в блоке, могут быть пустые, не занятые поля (padding)
, что кстати придает содержимому блока более привлекательный вид.
Сразу за полями пролегает граница блока (border)
, которая может иметь заданную толщину, цвет и стиль. Блок может иметь отступы
(margin)
т.е. свободное пространство вокруг границ. Поля, границы и отступы не входят в ширину блока, ширина задается только для его содержимого.
Поля. Свойства MARGIN-TOP, MARGIN-RIGHT, MARGIN-BOTTOM, MARGIN-LEFT
Эти свойства задают величину полей вокруг блока, значения задаются в любых единицах длины или процентах:
margin-top
- обозначает ширину верхнего поля;
margin-right
- обозначает ширину правого поля;
margin-bottom
- обозначает ширину нижнего поля;
margin-left
- обозначает ширину левого поля.
Пример правила для абзаца, с полями справа и слева по 25px, будет выглядеть так:
p { margin-top
: 0px
; margin-right
: 25px
; margin-bottom
: 0px
; margin-left
: 25px
;
}
Свойство 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-top-wdth
: 1px
; border-right-wdth
: 2px
; border-bottom-wdth
: medium
; border-left-wdth
: thin
;
}
Свойство 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-top-color
: blue
; border-right-color
: 000000
; border-bottom-color
: FF0000
; border-left-color
: rgb (25, 125, 205)
;
}
Свойство 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 { border-top
: 1px solid red
; border-right
: 3px solid red
; border-bottom
: 1px solid red
; border-left
: 3px solid red
}
Границы у абзаца будут красными, выполненными сплошной линией. Вверху и внизу толщина границ 1px, справа и слева - 3px.
Свойство BORDER
Это свойство стенографическое и применяется для задания параметров всех четырех сегментов границ: ширины, цвета и стиля.
Пишем пример правила:
p {border
: 1px solid blue
}
Граница вокруг этого абзаца будет одинаковой со всех сторон, выполненой сплошной линией синего цвета толщиной 1px.
Отступы. Свойства PADDING-TOP, PADDING-RIGHT, PADDING-BOTTOM, PADDING-LEFT
Эти свойства позволяют задать размеры отступов для каждой стороны в отдельности, значения задаются в единицах длины
или в процентах:
padding-top
- ширина верхнего поля;
padding-right
- ширина правого поля;
padding-bottom
- ширина нижнего поля;
padding-left
- ширина левого поля.
Свойство PADDING
Это стенографическое свойство, которое применяется для сокращенной записи выше описанных свойств. Свойство padding
может иметь от одного до четырех значений, которые присваиваются так же как для (полей) и (границ). Запишем
такое правило:
p { background-color
: white
; border
: 2px dotted blue
; padding
: 10px 25px
}
На примере получившегося абзаца посмотрим как работают отступы:
Именно от того, насколько оптимизирован сайт, зависит позиция, на которой поисковые системы будут выдавать его в результатах поиска.
Чем выше эта позиция, тем больше посетителей вы получите с поисковиков. Важным этапом оптимизации является наполнение сайта качественным,
уникальным контентом. Не нужно копировать с других ресурсов интересные статьи по своей тематике, повторять то, что уже есть на просторах
всемирной паутины.
На этом, я считаю, что первое знакомство с каскадными таблицами стилей CSS можно закончить и самостоятельно приступить к
. Этих знаний вполне хватит для начала, так что вперед,
к покорению просторов гиперпространства.
То, без чего не создать сайт:
∼
∼
Многим интересно:
∼