Товаров: 0 (0р.)

Name css: Атрибут name | htmlbook.ru

Содержание

Атрибут name | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+2.1+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Атрибут name используется для определения якоря внутри страницы. Вначале следует задать в соответствующем месте закладку и установить ее имя при помощи атрибута name тега <a>. Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.

Между тегами <a name=…> и </a> текст писать не обязательно, так как требуется лишь указать местоположение перехода по ссылке.

Синтаксис

<a name="закладка">...</a>

Обязательный атрибут

Обязателен для якорей.

Значения

Любой текст с учетом регистра.

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

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег А, атрибут name</title>
 </head>
 <body>

  <p><a name="top"></a></p>  
  <p>Здесь много-много текста.
   Прокручивай его вниз. </p>
  
  <p><a href="#top">Наверх</a></p> 

 </body>
</html>

Примечание

В XHTML и HTML5 вместо name для определения якоря требуется указывать атрибут id.

Атрибут name | HTML | WebReference

Атрибут name используется для определения закладки (иногда называют также якорь) внутри страницы. Вначале следует задать в соответствующем месте закладку и установить её имя при помощи атрибута name элемента <a>. Имя ссылки на закладку начинается символом #, после чего идёт название закладки. Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся в другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать её адрес и в конце добавить символ решётки # и имя закладки.

Между тегами <a name=…> и </a> текст писать не обязательно, так как требуется лишь указать местоположение перехода по ссылке.

В XHTML и HTML5 вместо name для определения закладки требуется указывать атрибут id.

Синтаксис

<a name="<закладка>">...</a>

Значения

Любой текст без пробелов.

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

Пример

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>А, атрибут name</title> </head> <body> <p><a name=»top»></a></p> <p>Здесь много-много текста. Прокручивай его вниз. </p> <p><a href=»#top»>Наверх</a></p> </body> </html>

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 28.02.2020

Редакторы: Влад Мержевич

Атрибут name тега | HTML справочник

HTML тег <form>

Значение и применение

Атрибут name (HTML тега <form>) определяет имя формы, которое используется для идентификации (задает имя для формы). Атрибут может использоваться для ссылки на элементы в JavaScript, или ссылаться на данные формы после её отправки на сервер.

Обращаю Ваше внимание, что в XHTML атрибут name считается устаревшим. Используйте вместо него глобальный HTML атрибут id для идентификации формы.

Поддержка браузерами

Синтаксис:

<form name = "text">

Значения атрибута

ЗначениеОписание
textЗадает имя формы.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута name HTML тега <form></title>
	</head>
	<body>
		<form name = "subscribeForm"> <!-- определяем имя для нашей формы -->	
			Имя: <input type = "text" name = "userName"> <!-- определяем элемент управления для ввода текстовой информации -->
			E-mail: <input type = "email" name = "email"> <!-- определяем элемент управления для ввода адреса электронной почты -->
			<input type = "submit" value = "Подписаться"> <!-- определяем кнопку отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>), атрибутом name определили имя для нашей формы. Кроме того, создали внутри формы три элемента <input>, предназначенные для ввода текстовой информации, для ввода адреса электронной почты и для отправки формы.

Результат нашего примера:

Пример использования атрибута name HTML тега <form>.HTML тег <form>

Селекторы по атрибутам в CSS

Селекторы по атрибутам в CSS

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:


<h3 rel="friend">David Walsh</h3>

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:


h3[rel=friend] {
	/* woohoo! */
}

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

[rel=external]
Атрибут точно соответствует заданному значению

В приведённом выше примере, атрибут элемента h3 был равен «friend». Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно «friend». Именно точное. Давайте посмотрим на другой пример:


<h2 rel="external">Attribute Equals</h2>

h2[rel=external] { color: red; }

Более реальный пример — стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:


<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>

И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.


a[href=http://perishablepress.com] { color: red; }

Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input { padding: 10px; } в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:


input[type=text] { padding: 3px; }
input[type=radio] { float: left; }

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

[rel*=external]
Атрибут содержит заданное значение.

Теперь начинаются более интересные вещи. Знаку равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования. Например, «*=» означает «заданное значение может находиться где угодно в значении указанного атрибута». Взгляните на следующий пример:


<h2 rel="xxxexternalxxx">Attribute Contains</h2>

h2[rel*=external] { color: red; }

Не забывайте, что идентификаторы и классы — это тоже атрибуты и вы можете их в селекторах по атрибутам. Итак, давайте предположим, что вы пишете CSS для сайта, в котором вы не имеете доступа к разметке, а неопытный разработчик оставил вам такое:


<div></div>
<div></div>
<div></div>

Вы можете подсветить все эти элементы следующим образом:


div[id*=post]  { color: red; }
[rel^=external]
Атрибут начинается с заданного значения

<h2 rel="external-link yep">Attribute Begins</h2>

h2[rel^=external] { color: red; }

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


a[href^=http://perishablepress.com] { color: red; }
[rel$=external]
Атрибут заканчивается на заданное значение

Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?


<h2 rel="friend external">Attribute Ends</h2>

h2[rel$=external] { color: red; }

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


a[href$=#], a[href$=?] { color: red; }
[rel~=external]
Атрибут находится в списке, разделённом пробелами

Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать «~=»;


<h2 rel="friend external sandwich">Attribute Space Separated</h2>

h2[rel~=external] { color: red; }

Вы можете подумать, почему бы нам не использовать в этом случае «*=» ? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а «*=» — нет. Таким образом, если у вас есть два элемента (один с rel=home friend-link, а второй с rel=home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.

[rel|=external]
Атрибут находится в списке, разделённом дефисами

Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с «*=».


<h2 rel="friend-external-sandwich">Attribute Dash Separated</h2>

h2[rel|=external] { color: red; }
[title=one][rel^=external]
Соответствие по нескольким атрибутам

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


<h2 rel="handsome" title="Important note">Multiple Attributes</h2>

h2[rel=handsome][title^=Important] { color: red; }

Поддержка браузерами

Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

Продвинутые CSS-селекторы, о которых вы не знали

В каскадных таблицах стилей элементам страницы присваиваются значения атрибутов id и CSS class для того, чтобы стилизовать их. Но что делать, если у вас нет доступа к коду, чтобы добавить эти? К счастью существуют динамические селекторы, которые являются единственным решением в этой ситуации.

Дальше я собираюсь рассказать о работе селекторов атрибутов, но рекомендую с самого начала применять идентификаторы и классы, так как использование селекторов не всегда полезно. В процессе поиска элемента (CSS или JavaScript) браузеру приходиться «обойти» весь DOM страницы, чтобы найти нужный.

При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class. Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

($=) – атрибут оканчивается определенным значением

Выбор элемента с помощью CSS, значение которого заканчивается определенным символом (суффиксом) выглядит следующим образом:

div[id$=“_myDiv”] {
  // CSS правило
}

Атрибут id$ находится внутри скобок элемента div. Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

Пример:

<!-- HTML -->
<div> 
  Какой-то текст 
</div>

Чтобы выбрать этот элемент div, нужно использовать следующий селектор:

div[id$="_LoginPanel"] {
  margin: 0 3em;
  padding: 1em;
}

Нам необходимо указать $ после id атрибута в скобках. Затем в кавычках добавить суффикс элемента, на который нацелились:

div[id$=“myDynamicDiv”] {
  // CSS правила
}

Этот селектор можно использовать для любых элементов (div, span, img и т.д.), а также любых их атрибутов (id, name, value и class HTML CSS).

(^=) — атрибут начинается с определенного значения

Можно выбирать элементы, значение атрибутов которых начинается с определенного префикса. Делается это по аналогии с описанным выше селектором ($=):

<!-- HTML -->
<div>
  <h2>My custom panel</h2>
</div>

Селектор будет выглядеть следующим образом:

div[class^="myPanel_"] {
  // CSS правила
}

Единственное отличие двух описанных CSS class selector состоит в том, что перед знаком = (равно) указываются разные символы. В этом примере использован атрибут class, вместо id.

(* =) — атрибут содержит некоторое значение

Что делать, если и префикс и суффикс атрибутов генерируется динамически? В данном случае нужно найти элемент, значение атрибута которого содержит параметр:

<div>
  <h2>Какой-то текст</h2>
  <form>...</form>
</div>

Выбор этого элемента будет выглядеть следующим образом:

div[class*="logoutPanel"] {
 // CSS правила
}

Таким образом, любой div, который содержит название класса “logoutPanel” будет выбран и к нему будут применены определенные стили.

(=) – атрибут со значением

Это еще один способ выбора элемента с определенным значением id, CSS class, name, value и т.д.:

<!-- HTML -->
<div class=“3453_mydynamicdiv”>
  <h2>My Dynamic Div</h2>
</div>

Можно обратиться к элементу div, используя указанный выше атрибут = или через атрибут класса:

// 1-й способ – выбор конкретного элемента класса
div[class="3453_mydynamicdiv"] {
  // CSS правила
}

// 2-й способ – выбор всех элементов класса
.3453_mydynamicdiv {
  // CSS правила
}

Краткий обзор селекторов атрибутов:

  • = значение атрибута эквивалентно определённым символам;
  • $= значение атрибута оканчивается определенными символами;
  • ^= значение атрибута начинается с определенных символов;
  • *= значение атрибута содержит определенные символы.

Перед тем, как задать параметры class в CSS, нужно понимать, что псевдоклассы селекторов – это CSS селекторы с двоеточием перед ними. Многие из них часто используются для ссылок или интерактивных элементов:

a:hover {}
a:active {}
a:focus {}
a:visited {}
:checked {}
:first-child {}
:last-child {}
// вы поняли

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

Селектор псевдокласса :not(x) удаляет из набора определенные элементы на основе переданного параметра. Это полезно при стилизации всех элементов:

<ul>
 <li>Blog</li>
 <li>About</li> 
 <li>Videos</li>
 <li>Music</li>
 <li>Merch</li>
</ul>

С его помощью можно выбрать все элементы за исключением элемента с классом highlight, как в этом примере:

.nav li:not(.highlight) {
  margin: 0 1em 0 0;
  padding: 5px 16px;
  display: inline-block;
}

Можно пойти дальше и выбирать любые атрибуты.

Например:

В CSS кроме псевдоклассов существуют и псевдоэлементы. К ним как раз относится псевдоэлемент ::first-letter. С его помощью можно стилизовать первую букву любого абзаца. Этот эффект часто применяется в печатных изданиях. Создать заглавную букву при помощи псевдоэлемента ::first-letter довольно просто:

p::first-letter {
  // стиль буквы
}

Если не хотите стилизовать первые буквы в каждом абзаце, можно выбрать только первый абзац во всем тексте. Для этого нужно использовать вместе псевдокласс и псевдоэлемент (:first-child и ::first-letter):

p:first-child::first-letter {
 // добавляем стили только к первой букве первого абзаца текста
}

Этот подход освобождает от необходимости использования JavaScript.

Этот псевдокласс я использую довольно часто. Он позволяет выбрать первый элемент определенного типа внутри родительского и применить к нему CSS class:

article:first-of-type {
  margin-top: 0;
}

:first-of-type не бывает без :last-of-type. Как вы уже наверное догадались, этот селектор работает противоположно селектору :first-of-type:

article:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

Вы познакомились с «продвинутыми» CSS class selector, о которых не слышали раньше или никогда не сталкивались с ними. В любом случае я рекомендую вам ознакомиться с ними поближе и, возможно, вы будете чаще использовать их для решения своих повседневных задач по верстке.

Данная публикация представляет собой перевод статьи «Advanced CSS Selectors you never knew about» , подготовленной дружной командой проекта Интернет-технологии.ру

телеграм канал. Подпишись, будет полезно!

Атрибут name тега | HTML справочник

HTML тег <input>

Значение и применение

Атрибут name (HTML тега <input>) задает имя для элемента. Атрибут name используется для поиска (выбора) элементов с использованием языка программирования JavaScript, а так же позволяет ссылаться на данные формы после их отправки.

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

Поддержка браузерами

Синтаксис:

<input name =  "text">

Значения атрибута

ЗначениеОписание
textЗадает имя для элемента <input>.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования атрибута name HTML тега <input></title>
</head>
	<body>
		<form name = "myForm"> <!-- создаем форму -->
			<label>Ваш логин<input type = "text" name = "Login"></label><br> <!-- поле для ввода текстовой информации -->
			<label>Ваш пароль<input type = "password" name = "Password"></label><br> <!-- поле для ввода пароля -->
			<input type = "submit" name = "submitForm" value = "войти"> <!-- кнопка для отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>). Внутри формы мы поместили три элемента управления <input>, которые предназначены для ввода текстовой информации, пароля и отправки формы. Обратите внимание, что для каждого элемента <input> мы указали атрибутом name его имя, в том числе указали имя и для нашей формы (элемент <form> имеет одноимённый атрибут).

Результат нашего примера:

Пример использования атрибута name HTML тега <input> (указание имени элемента).HTML тег <input>

Селекторы атрибутов | htmlbook.ru

Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type. При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.

Рассмотрим несколько типичных вариантов применения таких селекторов.

Простой селектор атрибута

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

[атрибут] { Описание правил стиля }
Селектор[атрибут] { Описание правил стиля }

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

В примере 13.1 показано изменение стиля тега <q>, в том случае, если к нему добавлен атрибут title.

Пример 13.1. Вид элемента в зависимости от его атрибута

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>

  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность 
   может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: 
  <q title="Из законов Фергюссона-Мержевича">После того, как веб-страница 
   будет корректно отображаться в одном браузере, выяснится, 
   что она неправильно показывается в другом</q>.</p>

 </body>
</html>

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

Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title

В данном примере меняется цвет текста внутри контейнера <q>, когда к нему добавляется title. Обратите внимание, что для селектора Q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q.

Атрибут со значением

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

[атрибут=»значение»] { Описание правил стиля }
Селектор[атрибут=»значение»] { Описание правил стиля }

В первом случае стиль применяется ко всем тегам, которые содержат указанное значение. А во втором — только к определённым селекторам.

В примере 13.2 показано изменение стиля ссылки в том случае, если тег <a> содержит атрибут target со значением _blank. При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.

Пример 13.2. Стиль для открытия ссылок в новом окне

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[target="_blank"] { 
    background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
   <p><a href="1.html">Обычная ссылка</a> | 
   <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>

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

Рис. 13.2. Изменение стиля элемента в зависимости от значения target

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

Значение атрибута начинается с определённого текста

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

[атрибут^=»значение»] { Описание правил стиля }
Селектор[атрибут^=»значение»] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не вводить в тег <a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере 13.3.

Пример 13.3. Изменение стиля внешней ссылки

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[href^="http://"] { 
    font-weight: bold /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  
  <p><a href="1.html">Обычная ссылка</a> | 
  <a href="http://htmlbook.ru" target="_blank">Внешняя 
  ссылка на сайт htmlbook.ru</a></p>
  
 </body>
</html>

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

Рис. 13.3. Изменение стиля для внешних ссылок

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

Значение атрибута оканчивается определённым текстом

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

[атрибут$=»значение»] { Описание правил стиля }
Селектор[атрибут$=»значение»] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определённым селекторам.

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

Пример 13.4. Стиль для разных доменов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
    background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */ 
    padding-left: 12px; /* Смещаем текст вправо */ 
   } 
   A[href$=".com"] { /* Если ссылка заканчивается на .com */
    background: url(images/com.png) no-repeat 0 6px; 
    padding-left: 12px;
   }
  </style>
 </head>
 <body>
  
  <p><a href="http://www.yandex.com">Yandex.Com</a> | 
     <a href="http://www.yandex.ru">Yandex.Ru</a></p>
  
 </body>
</html>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.

Рис. 13.4. Добавление картинки к ссылкам

Значение атрибута содержит указанный текст

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

[атрибут*=»значение»] { Описание правил стиля }
Селектор[атрибут*=»значение»] { Описание правил стиля }

В примере 13.5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».

Пример 13.5. Стиль для разных сайтов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   [href*="htmlbook"] { 
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> | 
  <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> | 
  <a href="http://webimg.ru">Графика для Веб</a></p>
 </body>
</html>

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

Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

Одно из нескольких значений атрибута

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

[атрибут~=»значение»] { Описание правил стиля }
Селектор[атрибут~=»значение»] { Описание правил стиля }

Стиль применяется в том случае, если у атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом (пример 13.6).

Пример 13.6. Стиль в зависимости от имени класса

HTML5CSS 2.1IECrOpSa 5Fx

<!DOCTYPE HTML> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Блок</title> 
  <style> 
   [class~="block"] h4 { color: green; } 
  </style> 
 </head>  
 <body> 
  <div> 
   <h4>Заголовок</h4> 
  </div> 
 </body> 
</html>

В данном примере зелёный цвет текста применяется к селектору h4, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.

Дефис в значении атрибута

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.

[атрибут|=»значение»] { Описание правил стиля }
Селектор[атрибут|=»значение»] { Описание правил стиля }

Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).

Пример 13.7. Дефисы в значениях

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Блок</title>
  <style>
   DIV[class|="block"] {
    background: #306589; /* Цвет фона */
    color: #acdb4c; /* Цвет текста */
    padding: 5px; /* Поля */
   }
   DIV[class|="block"] A {
    color: #fff; /* Цвет ссылок */
   }
  </style>
 </head>
 <body>
  <div>
   <h3>Термины</h3>
   <div>
     <ul>
      <li><a href="t1.html">Буквица</a></li>
      <li><a href="t2.html">Выворотка</a></li>
      <li><a href="t3.html">Выключка</a></li>
      <li><a href="t4.html">Интерлиньяж</a></li>
      <li><a href="t5.html">Капитель</a></li>
      <li><a href="t6.html">Начертание</a></li>
      <li><a href="t7.html">Отбивка</a></li>
     </ul>
   </div>
  </div>
 </body>
</html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |=»block», поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

[атрибут1=»значение1″][атрибут2=»значение2″] { Описание правил стиля }
Селектор[атрибут1=»значение1″][атрибут2=»значение2″] { Описание правил стиля }

Вопросы для проверки

1. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?

  1. INPUT[type=»text»] { background: #acdacc; }
  2. INPUT[type=»textinput»] { background: #acdacc; }
  3. INPUT[type=»textfield»] { background: #acdacc; }
  4. INPUT[type=»textarea»] { background: #acdacc; }
  5. INPUT[type=»texts»] { background: #acdacc; }

2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?

<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

  1. P[class|=»text2″] { color: red; }
  2. P[class^=»text2″] { color: red; }
  3. P[class~=»text2″] { color: red; }
  4. P[class*=»text2″] { color: red; }
  5. P[class$=»text2″] { color: red; }

3. К какому элементу будет применяться следующий стиль?

[class~=»lorem»] { background: #666; }

  1. <p>Lorem ipsum dolor sit amet</p>
  2. <div>Lorem ipsum dolor sit amet</div>
  3. <p>Lorem ipsum dolor sit amet</p>
  4. <div>Lorem ipsum dolor sit amet</div>
  5. <p><span>Lorem ipsum dolor sit amet</span></p>

Ответы

1. INPUT[type=»text»] { background: #acdacc; }

2. P[class*=»text2″] { color: red; }

3. <div>Lorem ipsum dolor sit amet</div>

Имя атрибута | htmlbook.ru

Internet Explorer Хром Opera Safari Firefox Android iOS
1.0+ 1.0+ 2.1+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4,01 5,0 XHTML: 1,0 1,1

Описание

Имя атрибута используется для определения якоря внутри страницы. Вначале следует указать в соответствующем месте закладку и установить ее имя при помощи атрибута имя тега . Имя ссылки на закладку начинается символом #, после чего идет название закладки. Название выбирается любое, соответствующее тематике.Можно также делать ссылку на закладку, находящуюся на другой веб-странице и даже другом сайте. Для этого в адресе ссылки надлежит указать ее адрес и в конце добавить символ решетки # и имя закладки.

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

Синтаксис 

   ...

Обязательный атрибут

Обязателен для якорей.

Значения

Любой текст с учетом регистра.

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

Нет.

Пример

HTML 4.01IECrOpSaFx

  

 
  
   Тег А, атрибут имя 
 
 

  
   

  
 Здесь много-много текста.Прокручивай его вниз. 

  
  
  Наверх

Примечание

В XHTML и HTML5 вместо имени для определения якоря требуется указывать атрибут id.

.

Имя атрибута | HTML | WebReference

Имя атрибута используется для определения закладки (иногда называют также якорь) внутри. Вначале следует указать в соответствующем месте закладку и установить ее имя при помощи атрибута name элемента . Имя ссылки на закладку начинается символом #, после чего идёт название закладки. Название выбирается любое, соответствующее тематике. Можно также делать ссылку на закладку, находящуюся на другом веб-сайте и другом сайте.Для этого в адресе ссылки надлежит указать адрес и в конце символ решётки # и имя закладки.

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

В XHTML и HTML5 вместо имени для определения закладки требуется указывать атрибут id.

Синтаксис 

   ...

Значения

Любой текст без пробелов.

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

Пример

А, атрибут name

Здесь много-много текста. Прокручивай его вниз.

Наверх

Браузеры

В таблице браузеров используются следующие обозначения.

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

Число указывает браузреа, начиная с которой устанавливается элемент.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 28.02.2020

Редакторы: Влад Мержевич

.

Имя атрибута тега | HTML-справочник

HTML тег

Значение и применение

Имя атрибута (HTML тега) определяет имя формы, которое используется для идентификации (задает имя для формы). Атрибут может ссылаться на элементы в JavaScript , или ссылаться на данные формы после отправки на сервер.

Обращаю Ваше внимание, что в XHTML устаревшее имя устаревшим. Используйте вместо него глобальный HTML атрибут id для идентификации формы.

Поддержка браузерами

Синтаксис:

Значения атрибута

Значение Описание
текст Задает имя формы.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования 




 Использование атрибута name HTML тега <form> 


 
Имя:  
Электронная почта:

В данном примере мы создали форму (HTML

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

Результат нашего примера:

Пример использования атрибута name HTML тега .HTML тег .

Селекторы по атрибутам в CSS

Селекторы по атрибутам в CSS

В CSS существует возможность обратиться к элементу html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:

  
 Дэвид Уолш

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы либо по его адресу (# first-title), либо по имени класса (.волшебный). Однако вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

  h3 [rel = friend] {
/ * ууууу! * /
}

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

[отн. = Внешний]
Атрибут точно соответствует заданному значению

В приведённом выше примере атрибута h3 был равенство «друг».Селектор, который мы написали на него, поскольку значение атрибута точно равно «друг». Именно точно. Давайте посмотрим на другой пример:

  
 Атрибут равен 
  
  h2 [rel = external] {цвет: красный; }

Более реальный пример — стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:

   Джефф Старр 
 Дэвид Уолш 
 Ричард Феликс

И вы хотите задать каждую ссылку свой стиль. Традиционный подход включает в том, что каждая ссылка указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определенного порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.

  a [href = http: //perishablepress.com] {цвет: красный; }

Я уверен, что наиболее часто этот тип селектора используется для элементов ввода (текст, радио и т.п.). Все эти элементы отличаются друг от друга, и писать что-нибудь типа input {padding: 10px; } в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:

  input [type = text] {padding: 3px; }
input [type = radio] {float: left; }

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

[отн. * = Внешнее]
Атрибут содержит заданное значение.

Теперь начинаются более интересные вещи. Знак равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования. Например, «* =» означает «заданное значение может находиться где угодно в значении атрибута». Взгляните на следующий пример:

  
 Атрибут содержит 
  
  h2 [rel * = external] {цвет: красный; }

Не забывайте, что электронные системы и классы — это тоже атрибуты и вы можете их селектора по атрибутам.= http: //perishablepress.com] {цвет: красный; }

[rel $ = external]
Атрибут заканчивается на заданное значение

Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?

  
 Концы атрибутов 
  
  h2 [rel $ = external] {цвет: красный; }

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

  a [href $ = #], a [href $ =?] {Цвет: красный; }
[отн. ~ = Внешний]
Атрибут находится в списке, разделённом пробелами

Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы можете сделать именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто.Если атрибуту присвоено несколько значений (разделенных пробелами), то вам необходимо использовать «~ =»;

  
 Разделено пространством атрибутов 
  
  h2 [rel ~ = external] {цвет: красный; }

Вы можете подумать, почему бы нам не использовать в этом случае «* =»? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а «* =» — нет.Таким образом, если у вас есть два элемента (один с rel = home friend-link, а второй с rel = home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.

[отн. | = Внешний]
Атрибут находится в списке, разделённом дефисами

Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с «* =».

  
 Атрибут тире с разделением 
  
  h2 [rel | = external] {цвет: красный; }
[title = one] [rel ^ = external]
Соответствие по нескольким атрибутам

Очень важно, что для выборки элементов есть возможность использовать сразу несколько селекторов по атрибутам.= Важно] {цвет: красный; }

Поддержка браузерами

Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

.

No related posts.

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Добавить комментарий

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