 |
Подписи к элементам формы. Пример. Общие сведения о языке CSS. CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
|
|
|
|
Подписи к элементам формы
Парный тег < label> связывает текст подписи и элемент формы логически. Если щёлкнуть по тексту подписи, то курсор переместится в соответствующее поле, флажок или переключатель будет выбран.
Первый способ создать подпись — вложить текст подписи и тег элемента формы в тег < label>:
< label> Подпись < input type=" text" name=" login" > < /label>
< label> < input type=" checkbox" name=" check1" > Подпись< /label>
Второй способ заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега < label>.
< label for=" login-field" > Подпись< /label> < input type=" text" name=" login" id=" login-field" >
< input type=" checkbox" name=" check1" id=" check1-field" > < label for=" check1-field" > Подпись< /label>
Пример
< FORM name=" loginform" method=" post" action=" https: //accounts. com" >
< LABEL> Имя пользователя: < INPUT type=" text" name=" login" > < /LABEL>
< P> < LABEL> Пароль: < INPUT type=" password" name=" passwd" > < /LABEL>
< P> < INPUT type=" submit" value=" Войти" name=" signIn" > < /FORM>
Общие сведения о языке CSS
CSS (Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Возможности языка CSS
- Раздельное хранение представления и документа позволяет стилизовать этот документ для различных устройств, включая, монитор принтер, проектор и даже портативные устройства.
- Раздельное хранение представления и документа означает уменьшение размера документа, что, в свою очередь, ускоряет загрузку и отображение страницы, доставляя удовольствие посетителям.
- Язык CSS позволяет управлять как одним документом, так и миллионами документов. Для внесения изменения потребуется модифицировать необходимый стиль в одном CSS-файле, и это изменение автоматически отразится на всех связанных документах. В языке HTML это сделать невозможно.
- CSS-документы кэшируются. Это означает, что они загружаются в память браузера только один раз. При перемещении по сайту браузеру никогда не приходится заново интерпретировать стили. В результате мы получаем плавные переходы от страницы к странице и быструю загрузку страниц, что всегда является конечной целью.
- Отделив представление от структуры и содержимого, легко добиться доступности документа. Документы, в которых не используются сложные таблицы и большое количество элементов языка HTML, отвечающих за представление, являются более доступными, чем те документы, у которых перечисленные свойства присутствуют.
Правила языка CSS
|
|
|
Правила языка CSS состоят из селектора и блока объявлений. Селектор — это код элемента языка HTML, к которому будет применено правило стиля. Блок объявлений помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком точка с запятой. Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком двоеточие. Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
| селектор, селектор { свойство: значение; свойство: значение; } |
Рассмотрим на примере:
| h1 {color: red; } |
Селектор h1 отвечает за заголовки h1 языка HTML, а объявление состоит из свойства color и значения red. Это правило изменяет цвет текста элементов h1 на красный.
Типы таблиц стилей
- Стиль браузера — это стандартная таблица стилей, используемая браузером. Если никакие правила стиля не объявлены, применяются эти стандартные стили.
- Стиль пользователя — пользователь может написать свою таблицу стилей и переопределить любые стили, созданные вами, изменив настройки браузера. Такой подход используется редко, но может оказаться полезным для людей с ограниченными возможностями, например с плохим зрением. В данном случае пользователь создаст стили с высококонтрастными шрифтами больших размеров, которые переопределят ваши стили.
- Стиль автора — стиль, который добавляет к документу его разработчик.
Способы добавления стилей
|
|
|
- Встроенный стиль — стиль, который определяется непосредственно в теге и применяется с использованием атрибута style. Такой подход полезен для стилей, единовременно применяемых к одному элементу, однако он не считается идеальным.
| < p style=" font-size: 21px; color: green; " > Текст< /p> |
- Внедренный стиль — этот стиль управляет представлением одного документа и размещается внутри тега-контейнера style в разделе документа head.
| < head> ..... < style> body {color: red; } < /style> < /head> |
- Связанный стиль — это отдельный файл с расширением. css, в котором размещаются все CSS-правила (но без тегов языка HTML). Любой HTML-файл, к которому нужно применить стили, описанные в этой таблице, можно связать с ней, используя тег link в разделе документа head.
| < head> ..... < link rel=" stylesheet" href=" style. css" > < /head> |
- Импортированный стиль — этот тип похож на связанные стили, однако позволяет импортировать стили в связанную таблицу стилей или непосредственно в документ. Он полезен для реализации обходных путей и для управления множеством документов. Импортированный стиль (как и связанный) представляет собой код, записанный в отдельном файле с расширением. css. Импортировать содержимое CSS-файла можно в связанную таблицу стилей или непосредственно в html-документ с помощью правила, которое указывается в начале связанной таблицы стилей или блока < style> html-документа соответственно.
| @import url(" style. css" ); |
|
|
|
