Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации.
В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 .
HTML
Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required ; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.
Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).
Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes .
CSS
Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!Стилизуем формы, используя CSS3
Во-первых, давайте назначим нашим формам базовый стиль.#subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; }
Здесь мы назначим свойства для шапки:
/**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); }
Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text , поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.
Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.
Теперь давайте позаботимся о полях ввода и придадим им приятный вид.
/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; }
Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.
/* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.
Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon ? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.
@font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; }
Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon) , чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.
Теперь назначим правила для кнопки отправки формы.
/*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; }
Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.
Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:
/* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; }
Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.
P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; }
Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!
Создаем анимацию
Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:#register{ z-index: 21; opacity: 0; }
Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.
Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none . Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).
#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }
Вот, что происходит: когда мы кликаем на кнопку Присоединиться
, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft
. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.
Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }
Форма, которая “исчезает”, будет иметь анимацию затемнения влево:
#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } }
Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.
Вот и все, друзья. Надеюсь вам понравился этот туториал!
Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.
P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!
Теги: Добавить метки
Артемия Лебедева.
На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять , и об этом я и расскажу вам сейчас.
Что касается минуса (−), о нём уже многим хорошо всё известно: минус используется в математических выражениях, имеет такую же ширину, как любая цифра, выравнивается по высоте заглавной буквы, в отличие от тире и дефиса, и записывается в HTML как − .
На этом месте все обычно переходят к тире. Но постойте, мы ещё не рассмотрели три символа!
Какой символ употребляется в записи номеров телефонов (555‒41‒72)? Дефис, скажете вы; а вот и нет! Для этого есть отдельный символ: цифровая чёрточка (figure dash). Выглядит она (‒) практически как минус, но минусом при этом не является.
Вы можете спросить: а почему тогда нельзя использовать минус, раз он выглядит точно так же? Потому что минус - это знак вычитания, а в номере телефона ничто ни из чего не вычитается. По той же причине, по которой для выделения текста нужно использовать em , а не i . Это нельзя объяснить, это можно только познать.
Цифровая чёрточка имеет код U+2012 и в HTML записывается как ‒ .
О символе переноса , также называемым мягким дефисом, тоже многим известно. Этот символ, обозначаемый в HTML как - , расставляется в словах между слогами в тех местах, где можно сделать перенос . На экране он не отображается, за исключением случая, когда попадает на конец строки; в этом случае браузер (говорят, с третьей версии даже Firefox научился это делать) не переносит всё слово целиком, а ставит дефис и переносит оставшуюся часть слова.
Это особенно помогает в длинных словах, перенос которых создаёт огромные пустые пространства в правой части экрана. Огромный недостаток символа переноса состоит в том, что его неудобно расставлять вручную (впрочем, с этим могут справиться программы автотипографирования) и в том, что его употребление захламляет и делает нечитаемым исходный код текста (поэтому лучше, если расстановка символов переноса производится CMS на этапе генерации HTML‐ кода из хранящегося в базе данных текста).
Ещё один похожий на дефис символ - чёрточка (⁃), употребляемая в качестве маркеров списков (чёрточный буллит ). В Студии Лебедева справедливо замечают , что в русской типографской традиции нет такого понятия, как буллит (имея в виду традиционные кружки с квадратиками), и предлагают в качестве маркера употреблять (длинное) тире; как вы можете заметить, они именно так делают (или делали) на своём сайте и даже разразились статьёй , рассказывающей, как это сделать.
На самом деле для маркеров списков существует специальный символ, имеющий код U+2043 (впрочем, Лебедев утверждает, что к русской типографике это не относится). В HTML сделать для списка такой маркер довольно просто, используя CSS:
Ul{ list-style: none inside; } ul>li: before{ content: "\2043"; margin-left: -1ex; margin-right: 1ex; }
(Разумеется, приведённый код не идеален, да и работать будет лишь в правильных браузерах, но идея вам ясна, надеюсь.)
Теперь наконец‐ то можем перейти к тире; здесь всё уже хорошо изъезжено: известна разница между коротким тире (-, en dash, чёрточка шириной с букву «n», -) и длинным тире (—, em dash, чёрточка шириной с букву «M», —). Известно, что в русской типографике употребляется исключительно длинное тире (хотя ведутся споры касательно возможности употребления короткого тире в числовых диапазонах), тогда как на Западе обычно предпочитают en dash.
Длинное тире также употребляется в русском языке в диалогах. На Западе же для этой цели часто употребляют отдельный символ горизонтальной черты (―):
― Je m’ennuie tellement, dit-elle.― Cela n’est pas de ma faute, rétorqua-t-il.
Итак, девять различных чёрточек:
| Знак | HTML | Название | Назначение и употребление |
|---|---|---|---|
| - | - | дефисоминус | вместо всех остальных чёрточек при отсутствии технической возможности |
| ‐ | ‐ | дефис | для разделения частей слова: «светло‐ серый», «по‐ моему», «кое‐ кто» и т. п. |
| − | − | минус | математические выражения: 2 − 3 = −1 |
| ‒ | ‒ | цифровая чёрточка | номера телефонов и другие цифровые коды |
| | - | символ переноса | в (длинных) словах в тех местах, где можно сделать перенос |
| ⁃ | ⁃ | чёрточный буллит | маркер списка |
| - | - | короткое тире | западная типографика |
| — | — | длинное тире | русская типографика |
| ― | ― | горизонтальная черта | диалоги (в западной типографике) |
И, для сравнения, в одной строке:
- ‐
−
‒
⁃
-
—
Машинописный текст состоит из печатных знаков - графических символов.
Графические символы - это символы, которые имеют в тексте видимое отображение.
Все графические символы собраны в наборе единой универсальной системы Юникод.
Вставить графический символ Юникод в html-документ
- главное и единственное назначение для этой таблицы.
Вставить символ в html-документ можно одним из способов:
- скопировать изображение символа из окна браузера в окно своего визуального html-редактора
- скопировать html-код символа непосредственно в код html-документа
- вставлять визуальное в визуальное
- вставлять код в код.
Шрифт для символа, его размер и цвет в HTML можно задать кодом, вида:
КОД_СИМВОЛА
где,
Arial - шрифт,
10px - размер шрифта в пикселях,
#ff0000 - код цвета шрифта (красный)
Например:
☎
- размер шрифта символа 30px,
☎
- размер шрифта символа 30px, цвет - красный
☎
- размер шрифта символа 20px,
☎
- размер шрифта символа 10px.
Прим. Рекомендуемые шрифты для вставки спецсимволов - Arial, Verdana и Tahoma. Эти шрифты корректно отображают символы Юникод и сами, в свою очередь, корректно поддерживаются веб-приложениями.
- «Символ»
(видимое отображение символа)
Из этой графы можно скопировать изображение символа и вставить его в окно текстового html-редактора. Символ скопируется с размером шрифта 20px. После завершения копирования может потребоваться индивидуальная подгонка размера шрифта непосредственно для скопированного знака. - «Наименование»
(только для важных или непонятных символов)
Пояснение назначения символа, его область применения, примеры... - «Мнемоника»
Мнемоника - это буквенная конструкция вида ", обозначающая буквенный код символа в HTML. Вставляется непосредственно в html-код html-документа. Мнемоники очень популярны среди профессиональных верстальщиков. Они прекрасно запоминаются человеком и поддерживаются всеми html-приложениями. Каждая мнемоника содержит буквенное имя (обозначение) своего символа и служебный знак (&), который служит сигналом к прочтению кода для браузера и не отображается на экране монитора. Имя каждой мнемоники уникально и легко читаемо, потому что образовано от англоязычного слова, характеризующего символ.Мнемоника (греч.) - искусство запоминать что-либо. Мнемотехника применяется для облегчения восприятия труднозапоминаемой информации, когда объект запоминания приводится в ассоциативное состояние с чем-либо.
- «Код»
Код - числовой десятичный код символа в HTML, вида &. Вставляется непосредственно в html-код html-документа. Числовой десятичный код состоит из числа, обозначающего порядковый номер символа в системе Юникод и нескольких служебных знаков (& и #), которые служат сигналом к прочтению кода для браузера и не отображаются на экране монитора. Числовой десятичный код имеет широкое распространение и применение, благодаря своей универсальности и простоте восприятия.
Символы управления в HTML (XHTML)
Символы управления в HTML (XHTML) - это служебные символы HTML-языка, которые используются при HTML-вёрстке веб-страницы. Эти символы обязан поддерживать любой браузер, поскольку без них невозможно правильное отображение HTML-текста. Символы управления не отображаются в тексте и, при прямом введении с клавиатуры - интерпретируются браузером как знаки препинания, призывающие к выполнению какого-либо действия при отрисовке страницы на экране.
Допускается использовать символы управления в обычных текстах, где они символизируют общечеловеческие понятия и трактуются браузером как обычные типографские знаки. При таком использовании служебных символов в HTML-текстах требуется вводить не значение самого символа, а именно его HTML-код. Ибо, повторяюсь - в противном случае браузер будет воспринимать служебный символ, как призыв к действию и не будет корректно отображать HTML-текст на экране монитора.
Символы управления и их HTML-код знают и понимают все браузеры без исключения, чего нельзя сказать, увы - про остальные знаки, которые могут отображаться некорректно в разных браузерах или, что ещё хуже - не отображаться совсем.
Синтаксис и пунктуация
| пробел длины N (обычный пробел) | |||||
| пробел длины M (длинныйпробел) | |||||
| - | мягкий перенос (непечатный знак) | - | | ||
| ‑ | дефис | ‑ |
|||
|---|---|---|---|---|---|
| - | тире длины N (обычное тире) | - | – | ||
| — | тире длины M (длинное тире) | — | — | ||
| . | точка | . | |||
| , | запятая | , | |||
| … | многоточие | … |
… |
||
| : | двоеточие | : | |||
| ; | точка с запятой | ; | |||
| ! | знак восклицания | ! ǃ |
|||
| ? | вопросительный знак | ? | |||
| @ | «собачка» | @ | |||
| * | «звездочка» | * | |||
| # | «решетка» | # | |||
| ‘ | одиночная верхняя левая кавычка | ‘ | ‘ |
||
| ’ | одиночная верхняя правая кавычка | ’ | ’ |
||
| ‚ | одиночная нижняя правая кавычка | ‚ | ‚ |
||
| “ | двойная верхняя левая кавычка | “ | “ |
||
| ” | двойная верхняя правая кавычка | ” | ” |
||
| „ | двойная нижняя правая кавычка | &bdquo | „ |
||
| « | двойная левая угловая кавычка (рус) | « | « | ||
| » | двойная правая угловая кавычка (рус) | » | » | ||
| ́ | знак ударения, пример: Вася́ | ́ | |||
| " | апостроф, пример: Вас"я | " | |||
| ´ | акут, пример: Вас´я | ´ | ´ | ||
| ¶ | абзац (непечатный знак) | ¶ | ¶ | ||
| § | параграф | § | § | ||
| ˆ | акцент (перевёрнутая птичка) | ˆ | ˆ |
||
| ˜ | малая тильда | ˜ | ˜ |
||
| ¦ | вертикальный пунктир | ¦ | ¦ | ||
| ( | круглая скобка влево | ( | |||
| ) | круглая скобка вправо | ) | |||
| 〈 | угловая скобка влево | 〈 | 〈 | ||
| 〉 | угловая скобка вправо | 〉 | 〉 | ||
| ‹ | угловая скобка влево, вариант | ‹ | ‹ | ||
| › | угловая скобка вправо, вариант | › | › | ||
| [ | квадратная скобка влево | [ | |||
| ] | квадратная скобка вправо | ] | |||
| / | слэш (slash) - cимвол косой черты | / | |||
| \ | обратный слэш (backslash) | \ | |||
| ⁄ | косая дробная черта (знак деления) | ⁄ | ⁄ | ||
| ǀ | вертикальная черта | ǀ | |||
| ǁ | двойная вертикальная черта | ǁ | |||
| ‾ | надчеркивание, пример: Вася‾вася | ‾ | ‾ | ||
| ¯ | macron, пример: Вася¯вася | ¯ | ¯ | ||
Товарные знаки и валюта
| + | плюс | + | + | ||
|---|---|---|---|---|---|
| − | минус | − | - − |
||
| = | равно | = | |||
| ± | плюс-минус | ± | ± | ||
| × | знак умножения | × | × | ||
| ÷ | знак деления | ÷ | ÷ | ||
| ⋅ | оператор «точка» (середина строки) | ⋅ | · ⋅ |
||
| ∗ | оператор «звёздочка» (середина строки) | ∗ | ∗ | ||
| ∼ | оператор «тильда» | ∼ | ∼ | ||
| . | маркер списка (середина строки) | . | |
||
| ¹ | верхний индекс «1» | ¹ | ¹ | ||
| ² | верхний индекс «2» | ² | ² | ||
| ³ | верхний индекс «3» | ³ | ³ | ||
| Надстрочный и подстрочный индекс в HTML (XHTML) можно вставить при помощи тегов и , соответственно: ЧИСЛОНадстрочный индекс → ЧИСЛО Надстрочный индекс ЧИСЛОПодстрочный индекс → ЧИСЛО Подстрочный индекс |
|||||
| ½ | дробь «одна вторая» | ½ | ½ | ||
| ⅓ | дробь «одна треть» | ⅓ | |||
| ¼ | дробь «одна четвёртая» | ¼ | ¼ | ||
| ¾ | дробь «три четверти» | ¾ | ¾ | ||
| № | знак номера | № | |||
| % | процент | % | |||
| ‰ | промилле | ‰ | ‰ |
||
| ° | градусы | ° | ° | ||
| ′ | штрих (минуты, футы) | ′ | ′ | ||
| ″ | двойной штрих (секунды, дюймы) Пример 1: 30° 25′ 12″ Пример 2: 25′ 12″ |
″ | ″ | ||
| µ | микро | µ | µ | ||
| π | Пи | π | π | ||
| ƒ | знак функции (не путать с «интеграл») |
ƒ | ƒ |
||
| ∫ | интеграл | ∫ | ∫ | ||
| ∅ | перечеркнутый ноль, пустое множество (не путать с «диаметр») |
∅ | ∅ | ||
| ⌀ | диаметр (не путать с перечёркнутой латинской «о») | ⌀ | |||
| ø | латинская "o" диагонально перечёркнутая | ø | ø | ||
| Ø | латинская заглавная "O" диагонально перечёркнутая | Ø | Ø | ||
| ∏ | знак произведения | ∏ | ∏ | ||
| ∑ | знак суммирования | ∑ | ∑ | ||
| √ | радикал (квадратный корень или корень степени x) |
√ | √ | ||
| ∝ | пропорционально | ∝ | ∝ | ||
| ∞ | бесконечность | ∞ | ∞ | ||
| ∠ | угол | ∠ | ∠ | ||
| ⊥ | ортогонально (перпендикулярно) | ⊥ | ⊥ | ||
| ∴ | знак «cледовательно» | ∴ | ∴ | ||
| ≅ | приблизительно равно | ≅ | ≅ | ||
| ≈ | почти равно | ≈ | ≈ | ||
| ≠ | не равно | ≠ | ≠ | ||
| ≡ | идентично | ≡ | ≡ | ||
| ≤ | меньше или равно | ≤ | ≤ | ||
| ≥ | больше или равно | ≥ | ≥ | ||
| ∧ | логическое И | ∧ | ∧ | ||
| ∨ | логическое ИЛИ | ∨ | ∨ | ||
| ⊕ | знак «плюс в круге» (прямая сумма) |
⊕ | ⊕ | ||
| ⊗ | знак «умножение в круге» (векторное произведение, стрела от наблюдателя) |
⊗ | ⊗ | ||
| ʘ | точка в круге (стрела на наблюдателя) |
ʘ | |||
|
✵ ✵ |
|||||
В тексте HTML-документа разрешено применять не все символы, которые вы видите на клавиатуре. Впрочем, это логично. Если каждый тег начинается с символа (<) и заканчивается символом (>), то вполне логично, что эти символы нельзя указывать внутри обычного текста. Эти символы имеют особое значение в HTML-документах. Когда браузер их видит он думает, что это HTML-теги и пытается интерпретировать их как таковые.
Для решения проблемы с добавлением символов, запрещенных к вводу в тексте HTML-документа, был разработан набор спецсимволов – последовательностей, которые заменяют запрещенные для ввода с клавиатуры символы. Символы, которые не присутствуют на вашей клавиатуре, также могут быть заменены спецсимволами. Каждая такая последовательность (ссылка-мнемоника) обязательно начинается с символа амперсанда (&) и заканчиваются точкой с запятой (;). Между (&) и (;) можно ввести:
- имя спецсимвола (&имя;);
- числовой код, который вводится после знака (#), то есть при наборе спецсимвола путем указания его числового кода нужно использовать следующую запись: (&#код;);
Например, чтобы отобразить знак меньше (<) мы должны написать: < (имя символа) или < (числовой код в десятичной системе) или < (числовой код в шестнадцатиричной системе).
Неразрывный пробел
Основное назначение неразрывного пробела () (от non-breaking space ) — разделять слова, но запрещать в этом месте переход на новую строку. Поскольку размер окна браузера непостоянен, переход на новую строку в абзаце происходит автоматически. При этом браузер будет разрывать строку в любом месте, где стоит пробел или дефис. Согласно правилам орфографии существуют языковые конструкции, которые нельзя разрывать. К конструкциям с неразрывным пробелом, например, можно отнести:
- фамилии с инициалами;
- длинные тире с предшествующим им словом;
- односложные слова с последующим словом;
- цифры с последующими единицами измерения.
- 15 м/с
- 100 км/час
Как вы уже знаете, в HTML несколько идущих подряд обычных пробелов заменяются одним пробелом. Если вы напишете 10 пробелов в тексте, браузер удалит 9 из них. Чтобы добавить в тексте реальные пробелы, вы можете использовать неразрывный пробел () .
Кавычки.
В полиграфии существует три вида кавычек: двойные угловые кавычки или "елочки" (« »), типографские кавычки (“ ”) и рукописные "лапки" („ ”). При работе с программными кодами вы будете пользоваться двойными прямыми кавычками (" ") и одинарными прямыми кавычками (" ").
По традиции в русском языке основным видом кавычек считаются “елочки”. В HTML "елочкам" соответствуют символы «
и »
. Во многих изданиях вместо "елочек" используются также типографские кавычки и двойные прямые кавычки.
Левой и правой типографским кавычкам соответствуют символы “
и ”
соответственно, а нижней левой кавычке — „
.
Прямым двойным кавычкам соответствует спецсимвол "
.
Применение спецсимволов кавычек показано в следующем примере:
Пример: Использование кавычек
Дефис и тире.
В полиграфии существует три очень похожих друг на друга знака: длинное тире, короткое тире и дефис. Из них на компьютерной клавиатуре есть только один — это дефис. Именно его обычно и используют во всех случаях, когда в тексте нужно поставить дефис или тире. Тем не менее следует придерживаться определенных правил пунктуации относительно применения этих знаков.
Так, дефис (-) применяется только внутри слов или между цифрами. Длинное тире (—), ставится между словами в предложении и отделяется от этих слов пробелами. Длинному тире соответствует ссылка-мнемоника —
. Короткое тире (-) ставится между цифрами без букв или между словами, которые набраны прописными буквами, а также используется в качестве знака "минус" в математических формулах. Между коротким тире и словами пробел не ставится. Короткому тире соответствует ссылка-мнемоника -
.
Применение дефиса и тире показано в следующем примере:
Пример: Спецсимволы — и -
- Попробуй сам »
Время - деньги...
Веб-страница что-то слишком долго открывается.
Она должна загружаться за 2-4 секунды.
Время - деньги...
| Символ | Описание | Мнемоническое имя | Числовой код |
|---|---|---|---|
| неразрывный пробел | < | меньше чем | < |
| > | больше чем | > | > |
| & | амперсанд | & | & |
| " | прямая двойная кавычка | " | " |
| " | апостроф | " | " |
| « | левая двойная угловая кавычка | « | « |
| » | правая двойная угловая кавычка | » | » |
| ‘ | левая одинарная кавычка | ‘ | ‘ |
| ’ | правая одинарная кавычка | ’ | ’ |
| ‚ | нижняя одинарная кавычка | ‚ | ‚ |
| “ | левая двойная кавычка | “ | “ |
| ” | правая двойная кавычка | ” | ” |
| „ | нижняя двойная кавычка | „ | „ |
| € | euro | € | € |
| копирайт | © | ||
| ® | знак зареrистрированной торrовой марки | ® | ® |
Разновидности спецсимволов
На обычной клавиатуре вы не найдете большенство математических, технических, геометрических и других спецсимволов.
Чтобы применить такие символы в HTML-странице, вы можете использовать соответствующие им мнемонические имена.
В слудующем примере видно как один и тот-же символ можно отобразить, использую разные коды.
