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

Содержание

Атрибут 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 Да Да Да Да Да
input 1.0 2.0 1.0 1.0 1.0
map Да Да Да Да Да
meta Да Да Да Да Да
object Да Да Да Да Да
output 10.0 Не поддерживается 4.0 5.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 используется в качестве ссылки при отправке данных.

Для элемента