Name css: Which characters are valid in CSS class names/selectors?

Leave a Comment / Css / By /

Содержание

Атрибут 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.=»#»] {background-color:gold} a[href$=».cn»] {color: red;} a[href*=»example»] {background-color: #CCCCCC;} 

<div>
    <a href="http://example.com">English:</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div>
    <a href="#portuguese">Portuguese:</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div>
    <a href="http://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好！</span>
</div>
<div>
    <a href="http://example.cn">Chinese (Traditional):</a>
    <span lang="zh-TW">世界您好！</span>
</div>

BCD tables only load in the browser

Свойство animation-name | CSS справочник

CSS свойства

Определение и применение

CSS свойство animation-name указывает имя анимации/список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает на правило (@keyframes), которое определяет значения свойств анимации.

Обращаю Ваше внимание на то, что, как правило, удобнее использовать сокращенное обозначение свойства анимации — animation, чтобы установить все свойства анимации в одном объявлении.

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

CSS синтаксис:

animation-name:"keyframename /-s | none | initial | inherit";

JavaScript синтаксис:

object.style.animationName = "iliketomoveit"

Значения свойства

ЗначениеОписание
keyframename /-sУказывает имя анимации / список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает на правило (@keyframes), которое определяет значения свойств анимации.
Имя анимации может состоять из латинских букв без учета регистра от A до Z, цифр от 0 до 9, знака подчеркивания (_), и/или тире (-). Первый символ должен быть буквой (то есть не должен начинаться с числа, даже если перед ним ставится тире). Кроме того, два тире запрещены в начале имени. Не могут использоваться специальные зарезервированные слова, такие как none, unset, initial или inherit в любом сочетании.
noneУказывает, что ключевые кадры (@keyframes) отсутствуют. Используется для отключения анимации. Это значение по умолчанию.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования CSS свойства animation-name</title>
<style> 

 .test {
width: 75px; /* устанавливаем ширину блока */
height: 75px;  /* устанавливаем высоту блока */
border-radius: 50px;  /* определяем форму углов элемента */
position: relative;  /* элемент с относительным позиционированием (position:static - по умолчанию и, как следствие, значение свойства left не повлияли бы на позиционирование элемента) */
-webkit-animation-name: iliketomoveit; /* для поддержки ранних версий браузеров */ 
-webkit-animation-duration: 5s; /* для поддержки ранних версий браузеров */ 
-webkit-animation-iteration-count: infinite; /* для поддержки ранних версий браузеров */ 
animation-name: iliketomoveit;  /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах)  */
animation-duration: 5s;  /* задаём продолжительность анимации */
animation-iteration-count: infinite;  /* указываем, что анимация будет повторяться бесконечно  */
} 
@-webkit-keyframes iliketomoveit
 
 { /* для поддержки ранних версий браузеров */ 
	0%   {left: 0px;} /* задаем начало анимации */ 
	25%  {left: 400px; background: red;} /* сдвигаем элемент на 400px от левого края при этом устанавливаем цвет заднего фона */ 
	75%  {left: 200px;}  /* уменьшаем сдвиг от левого края */ 
	100% {left: 0px; background: black;} /* возвращаем элемент на первоначальную точку и изменяем цвет заднего фона */ 
	} 
@keyframes iliketomoveit {
	0%   {left: 0px;} 
	25%  {left: 400px; background: red;} 
	75%  {left: 200px;} 
	100% {left: 0px; background: black;} 
	} 
</style>
</head>
	<body>
		<div class = "test"></div>
	</body>
</html>
Пример использования CSS свойства animation-name (указывает имя анимации / список анимаций, которые должны быть применены к выбранному элементу).CSS свойства

Соглашение по именованию / Методология / БЭМ

Имя БЭМ-сущности уникально. Во всех технологиях (CSS, JavaScript, HTML) одна и та же БЭМ-сущность всегда называется одинаково. Основная идея соглашения по именованию — вложить смысл в имена и сделать их максимально информативными для разработчика.

Можно сравнить одно и тоже имя CSS-селектора, написанное разными способами:

  • menuitemvisible

  • menu-item-visible

  • menuItemVisible

Чтобы понять смысл первого имени, нужно вчитаться в каждое слово. В последних двух примерах имя явно разделяется на логические части. Но ни одно из имен пока не помогает точно определить, что menu — это блок, item — элемент, а visible — модификатор. Чтобы имена сущностей были однозначными и понятными, в БЭМ были разработаны правила формирования имен БЭМ-сущностей.

Правила формирования имен

block-name__elem-name_mod-name_mod-val

  • Имена записываются латиницей в нижнем регистре.

  • Для разделения слов в именах используется дефис (-).

  • Имя блока задает пространство имен для его элементов и модификаторов.

  • Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

  • Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

  • Значение модификатора отделяется от имени модификатора одним подчеркиванием (_).

  • Значение булевых модификаторов в имени не указывается.

Важно! В методологии БЭМ не существует элементов элементов. Правила именования запрещают создавать элементы элементов, но в DOM-дереве элементы можно вкладывать друг в друга.

Примеры

В HTML БЭМ-сущности представлены атрибутом class. В БЭМ во всех технологиях происходит обращение к классу:

Примеры правил формирования имен приведены на CSS.

Имя блока

menu

Почему префиксы в именах блока не нужны?

HTML

<div>...</div>

CSS

.menu { color: red; }
Имя элемента

menu__item

Важно! Имена одинаковых элементов одного и того же блока совпадают. Например, все пункты в блоке меню называются menu__item.

HTML

<div>
  ...
  <span></span>
</div>

CSS

.menu__item { color: red; }
Имя модификатора блока

menu_hidden

menu_theme_islands

HTML

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

CSS

.menu_hidden { display: none; }
.menu_theme_islands { color: green; }
Имя модификатора элемента

menu__item_visible

menu__item_type_radio

HTML

<div>
  ...
  <span>...</span>
</div>

CSS

.menu__item_visible {}
.menu__item_type_radio { color: blue; }

Альтернативные схемы именования

Описанные выше правила формирования имен — это классическая схема именования БЭМ-сущностей. Все инструменты БЭМ по умолчанию настроены на классическую схему.

Существуют альтернативные схемы именования, которые активно используются в БЭМ-сообществе. Чтобы во всех технологиях применять одинаковые имена, созданные по альтернативным схемам, используйте инструмент bem-naming. По умолчанию bem-naming содержит настройки соглашения по именованию, предложенного методологией, но позволяет добавлять правила для применения альтернативных схем.

Стиль Two Dashes

block-name__elem-name--mod-name--mod-val

  • Имена записываются латиницей в нижнем регистре.

  • Для разделения слов в именах БЭМ-сущностей используется дефис (-).

  • Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

  • Булевые модификаторы отделяются от имения блока или элемента двумя дефисами (--).

  • Значение модификатора отделяется от его имени двумя дефисами (--).

Важно! Двойной дефис внутри комментария (--) может вызвать ошибки при валидации HTML-документа.

Стиль CamelCase

blockName__elemName_modName_modVal

  • Имена записываются латиницей.

  • Каждое слово внутри имени пишется с заглавной буквы.

  • Разделители элементов и модификаторов совпадают с классической схемой.

Стиль React

BlockName-ElemName_modName_modVal

  • Имена записываются латиницей.

  • Имена блоков и элементов пишутся с заглавной буквы. Имена модификаторов — со строчной.

  • Каждое слово внутри имени пишется с заглавной буквы.

  • Имя элемента отделяется от имени блока одним дефисом (-).

  • Разделители имени и значения модификаторов совпадают с классической схемой.

Стиль No-namespace

_available

  • Имена записываются латиницей.

  • Имя блока или элемента перед модификатором не указывается.

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

Ваша схема именования

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

Атрибут name


Определение и использование

Атрибут name указывает имя элемента.

Атрибут name может использоваться для ссылки на элемент в JavaScript.

Для элементов формы он также используется в качестве эталона при отправке данных,

Для элемента iframe он может быть использован для назначения формы отправки.

Для элемента map атрибут name связывается с атрибутом usemap <img> и создает связь между изображением и картой.

Для элемента meta атрибут name указывает имя для информации/значения content атрибут.

For the param element, the name attribute is used together with the value attribute to specify parameters for the plugin specified with the <object> tag.

Относится к

The name attribute can be used on the following elements:

Пример

Пример

Две кнопки с одинаковыми именами, которые представляют различные значения при щелчке:

<form action=»/action_page.php» method=»get»>
  Choose your favorite subject:

  <button name=»subject» type=»submit» value=»HTML»>HTML</button>
  <button name=»subject» type=»submit» value=»CSS»>CSS</button>
</form>

Пример поля

<fieldset> с атрибутом name:

<fieldset name=»personalia»>
  Name: <input type=»text»><br>
  Email: <input type=»text»><br>
</fieldset>

Пример формы

HTML-форма с атрибутом name:

<form action=»/action_page.php» method=»get» name=»myForm»>
  First name: <input type=»text» name=»fname»><br>
  Last name: <input type=»text» name=»lname»><br>
  <input type=»button» value=»Send form data!»>
</form>

Пример iframe

<iframe>, который выступает в качестве целевого объекта для ссылки:

<a href=»https://html5css.ru» target=»iframe_a»>HTML5CSS.ru</a>

Пример ввода

HTML-форма с тремя полями ввода; два текстовых поля и одна кнопка Submit:

<form action=»/action_page.php»>
  Name: <input type=»text» name=»fullname»><br>
  Email: <input type=»text» name=»email»><br>
  <input type=»submit» value=»Submit»>
</form>

Пример карты

Изображение-карта, с щелчком области:

<map name=»planetmap»>
  <area shape=»rect» coords=»0,0,82,126″ href=»sun.htm» alt=»Sun»>
  <area shape=»circle» coords=»90,58,3″ href=»mercur.htm» alt=»Mercury»>
  <area shape=»circle» coords=»124,58,8″ href=»venus.htm» alt=»Venus»>
</map>

Пример мета

Используйте атрибут Name для определения описания, ключевых слов и автора HTML-документа:

<head>
<meta name=»description» content=»Free Web tutorials»>
<meta name=»keywords» content=»HTML,CSS,JavaScript»>
<meta name=»author» content=»Hege Refsnes»>
</head>

Пример объекта

Элемент <object> с атрибутом Name:

<object data=»helloworld.swf» name=»obj1″></object>

Пример вывода

Выполните вычисление и Покажите результат в элементе <output>:

<form oninput=»x.value=parseInt(a.value)+parseInt(b.value)»>0
  <input type=»range» value=»50″>100
  +<input type=»number» value=»50″>
  =<output name=»x» for=»a b»></output>
</form>

Пример param

Установите параметр «autoplay», в значение «true»,, поэтому звук начнет воспроизводиться сразу после загрузки страницы:

<object data=»horse.wav»>
  <param name=»autoplay» value=»true»>
</object>

Выберите пример

Раскрывающийся список с атрибутом name:

<select name=»cars»>
  <option value=»volvo»>Volvo</option>
  <option value=»saab»>Saab</option>
  <option value=»opel»>Opel</option>
  <option value=»audi»>Audi</option>
</select>

Пример текстового

Текстовая область с атрибутом name:

<form action=»/action_page.php»>
  <textarea name=»comment»>Enter text here…</textarea>
  <input type=»submit»>
</form>

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

Атрибут multiple имеет следующую поддержку браузера для каждого элемента:

Элемент
buttonДаДаДаДаДа
fieldsetДаНе поддерживаетсяДаДаДа
formДаДаДаДаДа
iframeДаДаДаДаДа
input1.02.01.01.01.0
mapДаДаДаДаДа
metaДаДаДаДаДа
objectДаДаДаДаДа
output10.0Не поддерживается4.05.1 11.0
paramДаДаДаДаДа
selectДаДаДаДаДа
textareaДаДаДаДаДа

Свойства animation-name и animation-duration — учебник CSS

После того, как будут созданы ключевые кадры @keyframes, вы можете применить анимацию к нужному элементу через CSS. Для этого понадобится добавить к стилю элемента как минимум два свойства группы animation — это animation-name и animation-duration.

Свойство animation-name

Свойство animation-name позволяет привязать к элементу одну или больше анимаций. Для примера возьмем ту анимацию, которую мы создали на прошлом уроке. Мы задали ей имя changeBackgroundColor (оно указано сразу после слова @keyframes). Теперь, чтобы применить ее, например, к элементу <div> с классом .traffic-light, нужно написать такой код:


.traffic-light {
    animation-name: changeBackgroundColor;
}

Итак, мы сообщили браузеру, какую анимацию нужно применить к элементу .traffic-light, указав ее имя в качестве значения свойства animation-name. Но чтобы анимация выполнилась, потребуется задать еще и ее длительность.

Свойство animation-duration

Данное свойство похоже на рассмотренное нами ранее свойство transition-duration. Оно принимает аналогичные значения времени и устанавливает продолжительность анимации для конкретного элемента.

Предположим, мы хотим, чтобы анимация с именем changeBackgroundColor, примененная к элементу .traffic-light, длилась 6 секунд. Добавим к стилю еще одну строку:


.traffic-light {
    animation-name: changeBackgroundColor;
    animation-duration: 6s;
}

Рядом со свойствами для запуска анимации допускается записывать и другие стили элемента. Так, полный CSS-код для нашего блока выглядит следующим образом:


.traffic-light {
    animation-name: changeBackgroundColor;
    animation-duration: 6s;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
}

Результат работы анимации показан на GIF-изображении ниже:


Подключение нескольких анимаций

К одному элементу можно применить сразу две или больше анимаций. Для этого следует перечислить их названия через запятую в свойстве animation-name. Если при этом вы хотите задать разную длительность для каждой анимации (animation-duration), то перечислите в таком же порядке время исполнения:


.traffic-light {
    animation-name: firstAnimation, secondAnimation;
    animation-duration: 3s, 1s;
}

Порядок расположения названий анимаций в свойстве animation-name влияет на последовательность их выполнения. В примере выше сначала будет воспроизведена анимация под названием firstAnimation длительностью 3 секунды, а затем запустится анимация secondAnimation с продолжительностью 1 секунда.

Далее в учебнике: свойства animation-timing-function и animation-delay.

усовершенствование внешнего облика приложения с использованием технологии CSS

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

На примере ниже показано, как можно улучшить внешний вид страницы index.php .

  1. Для разрешения использования классов CSS, которые были определены, введите следующий код в блок <head></head> :

<link href="wishlist.css" type="text/css" rel="stylesheet" media="all" />

Стили «body» и «input» автоматически применяются внутри соответствующих тегов, поэтому их необходимо указать явно.

  1. Для применения любого другого стиля (класса) к области заключите код, который реализует область, в теги <div></div> :

<div>
    <input type="submit" name="showWishList" value="Show Wish List of >>"/>

    <form name="wishList" action="wishlist.php" method="GET">
       <input type="text" name="user"/>
       <input type="submit" value="Go" />
    </form>
</div>

Примечание. Если класс указывается в теге <div>, в начале не нужно указывать точки.

  1. Можно использовать вложенные теги <div>:

<div>
    <input type="submit" name="myWishList" value="My Wishlist"/>
    <form name="logon" action="index.php" method="POST"
             hidden"; else echo "visible";?>">
        Username: <input type="text" name="user"/>
        Password:  <input type="password" name="userpassword"/><br/>
        <div>
          <?php
             if (!$logonSuccess) echo "Invalid name and/or password";
           ?>
        </div>
        <input type="submit" value="Edit My Wish List"/>
    </form>
</div>

Класс «logon» применяется ко всей форме, а класс «error» применяется к сообщению об ошибке внутри формы.

Атрибут имени HTML

Определение и использование

Имя Атрибут определяет имя для элемента HTML.

Атрибут name может использоваться для ссылки на элемент в JavaScript.

Для элемента

, Атрибут name используется в качестве ссылки при отправке данных.

Для элемента