Создание анимированных эффектов на css3: анимация картинки, плавная анимация при наведении курсора

Дефис и тире.

В полиграфии существует три очень похожих друг на друга знака: длинное тире, короткое тире и дефис. Из них на компьютерной клавиатуре есть только один — это дефис. Именно его обычно и используют во всех случаях, когда в тексте нужно поставить дефис или тире. Тем не менее следует придерживаться определенных правил пунктуации относительно применения этих знаков.
Так, дефис (-) применяется только внутри слов или между цифрами. Длинное тире (—), ставится между словами в предложении и отделяется от этих слов пробелами. Длинному тире соответствует ссылка-мнемоника —. Короткое тире (–) ставится между цифрами без букв или между словами, которые набраны прописными буквами, а также используется в качестве знака «минус» в математических формулах. Между коротким тире и словами пробел не ставится. Короткому тире соответствует ссылка-мнемоника –.

Применение дефиса и тире показано в следующем примере:

Пример: Спецсимволы — и –

Результат
HTML-код
Попробуй сам »

Веб-страница что-то слишком долго открывается.
Она должна загружаться за 2–4 секунды.
Время – деньги…

Символ
Описание
Мнемоническое имя
Числовой код

неразрывный пробел
 
 

>
больше чем
>
>
&
амперсанд
&
&
»
прямая двойная кавычка
"
"
‘
апостроф
'
'
левая двойная угловая кавычка
«
«
правая двойная угловая кавычка
»
»
‘
левая одинарная кавычка
‘
‘
’
правая одинарная кавычка
’
’
‚
нижняя одинарная кавычка
&sbquo;
‚
“
левая двойная кавычка
“
“
”
правая двойная кавычка
”
”
„
нижняя двойная кавычка
&bdquo;
„
€
euro
€
€

копирайт
©
©

знак зареrистрированной торrовой марки
®
®

Адрес и Контакты места/организации

Описание поддерживаемых в рамках схемы полей Яндексом — http://help.yandex.ru/webmaster/supported-schemas/address-organization.xml

Как видим некоторые поля, поддерживаемые схемой не используются яндексом по состоянию на 24.10.2015, однако могут быть использованы в будущем. Так же эти поля могут использоваться Google.

Компонент поддерживает следующие поля (⊗ — обязателен к использованию, иначе схема не валидируется Яндекс/Google, ⊗ — поддерживается Яндекс как полноценное свойство):

⊗⊗Тип схемы (место, либо организация, а так же все типы мест/организаций по состоянию на 23.10.2015)
⊗⊗Название
Краткое описание
⊗URL сайта
Логотип (картинка)
⊗⊗Адрес
- ⊗Почтовый индекс
- ⊗Страна
- ⊗Город
- ⊗Регион
- ⊗Адрес (улица, дом, офис и т.п.)
⊗Факс
⊗⊗Телефон (несколько штук)
E-mail (несколько штук)
ИНН
⊗Время работы (только для типов «Бизнес» и «Административное Здание»)
Географические координаты (только для типа «Бизнес»)
Является свойством другого объекта Schema.org
Полный набор свойств «Ретинг» с передачей массива параметров компоненту coffeediz:schema.org.AggregateRating
Скрыть информации от пользователей (микроразметка видна только поисковикам, но не видна простым юзерам)

Компонент поддерживает 4 уровня типов организаций (начиная с базового Организация/Место), описанные в Schema.org. Рекомендуется выбирать максимально близкий к вашей специфике тип (если такого нет, то просто общий).

Пример микроразметки для организации типа «Веб-студия» (такого типа нет, поэтому будем использовать довольно общий тип «Бизнес» 2 уровня):

Поскольку компонент является всего лишь оболочкой для оформления в виде микроразметки массива входных параметров, то вы всегда можете использовать его внутри своих компонентов с параметром «SHOW» => «Y» для скрытого отображения, чтобы микроразметку видели только поисковики.

Навигационные цепочки или Хлебные крошки

Google даёт вполне чётки рекомендации на этот счёт — https://support.google.com/webmasters/answer/185417?hl=ru

Яндекс, к сожалению, пишет расплывчато, http://help.yandex.ru/webmaster/search-results/site-description.xml#nav-chains, но судя по другим источникам (рекомендациям в разделе Яндекс.Метрики) любые действия в этом направлении будут учтены как плюс.

Поскольку 1С-Битрикс уже имеет удобный компонент хлебных крошек и API методы для добавления в его цепочки элементов для других компонентов, то мы не будем городить велосипед, а просто воспользуемся bitrix:breadcrumb.

Достаточно добавить на страницу этот компонент и выбрать один из шаблонов, поставляющихся с модулем:

coffeediz.data-vocabulary.org — схема http://www.data-vocabulary.org/Breadcrumb/ (рекомендуется Google)
coffeediz.schema.org — схема https://schema.org/breadcrumb

Оба варианта проходят валидацию микроразметки Google/Яндекс.

При этом с дефолтными стилями цепочка навигации выглядит так:

Естественно вы можете самостоятельно кастомизировать стили в шаблоне компонента.

Однако на случай если необходимо создать цепочку навигации, но из эстетических соображений она не должна показываться пользователям, вы можете использовать компонент coffeediz:breadcrumb с теми же шаблонами, добавляющий возможность скрыть компонент:

Примеры микроразметки хлебных крошек:

схема data-vocabulary.org	схема schema.org

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL

HTML CSSHTML Links
Links
Link Colors
Link Bookmarks

HTML Images
Images
Image Map
Background Images
The Picture Element

HTML FaviconHTML Page TitleHTML Tables
HTML Tables
Table Borders
Table Sizes
Table Headers
Padding & Spacing
Colspan & Rowspan
Table Styling
Table Colgroup

HTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists

HTML Block & InlineHTML DivHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetsHTML URL EncodeHTML vs. XHTML

Неразрывный пробел

Основное назначение неразрывного пробела ( ) (от non-breaking space) — разделять слова, но запрещать в этом месте переход на новую строку.
Поскольку размер окна браузера непостоянен, переход на новую строку в абзаце происходит автоматически. При этом браузер будет разрывать строку в любом месте, где стоит пробел или дефис. Согласно правилам орфографии существуют языковые конструкции, которые нельзя разрывать. К конструкциям с неразрывным пробелом, например, можно отнести:

фамилии с инициалами;
длинные тире с предшествующим им словом;
односложные слова с последующим словом;
цифры с последующими единицами измерения.

Примеры:

§ 7
15 м/с
100 км/час

Как вы уже знаете, в HTML несколько идущих подряд обычных пробелов заменяются одним пробелом. Если вы напишете 10 пробелов в тексте, браузер удалит 9 из них. Чтобы добавить в тексте реальные пробелы, вы можете использовать неразрывный пробел ( ).

	Неразрывный дефис (&&num;8209;), как и неразрывный пробел не допускает разрыв текста в месте его использования.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in <div> tag:

CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
CSS font-size property sets the size of the font.
CSS font-weight property defines whether the font should be bold or thick.
CSS text-transform property controls text case and capitalization.
CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in <div> tag:

CSS color property describes the color of the text content and text decorations.
CSS background-color property sets the background color of an element.

Text layout styles for <div> tag:

CSS text-indent property specifies the indentation of the first line in a text block.
CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
CSS white-space property specifies how white-space inside an element is handled.
CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <div> tag:

Кавычки.

В полиграфии существует три вида кавычек: двойные угловые кавычки или «елочки» (« »), типографские кавычки (“ ”) и рукописные «лапки» („ ”). При работе с программными кодами вы будете пользоваться двойными прямыми кавычками (» «) и одинарными прямыми кавычками (‘ ‘).
По традиции в русском языке основным видом кавычек считаются “елочки”. В HTML «елочкам» соответствуют символы « и ». Во многих изданиях вместо «елочек» используются также типографские кавычки и двойные прямые кавычки. Левой и правой типографским кавычкам соответствуют символы “ и ” соответственно, а нижней левой кавычке — &bdquo;. Прямым двойным кавычкам соответствует спецсимвол ".

Применение спецсимволов кавычек показано в следующем примере:

Some Useful HTML Character Entities

Result	Description	Name	Number
	non-breaking space			Try it »
<	less than	<	<	Try it »
>	greater than	>	>	Try it »
&	ampersand	&	&	Try it »
«	double quotation mark	"	"	Try it »
‘	single quotation mark	'	'	Try it »
¢	cent	¢	¢	Try it »
£	pound	£	£	Try it »
¥	yen	¥	¥	Try it »
€	euro	€	€	Try it »
	copyright	©	©	Try it »
	trademark	®	®	Try it »

Combining Diacritical Marks

A diacritical mark is a «glyph» added to a letter.

Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.

Diacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in
the character set (encoding) used in the page.

Here are some examples:

Mark	Character	Construct	Result
̀	a	à	à	Try it »
́	a	á	á	Try it »
̂	a	â	â	Try it »
̃	a	ã	ã	Try it »
̀	O	Ò	Ò	Try it »
́	O	Ó	Ó	Try it »
̂	O	Ô	Ô	Try it »
̃	O	Õ	Õ	Try it »

There are more examples in the next chapter.

❮ Previous
Next ❯

Non-breaking Space

A commonly used HTML entity is the non-breaking space:  

A non-breaking space is a space that will not break into a new line.

Two words
separated by a non-breaking space will stick together (not break into a new
line). This
is handy when breaking the words might be disruptive.

Examples: