Свойства текста в аннотации (цвет, размер и т.д.)

Автор: Наталья Изотова / Добавлено: 17.04.19, 01:37:08

 

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

Параметров много, все можно посмотреть в этом справочнике. 

Просто перебирать элементы и искать те, что нужны вашему тексту (выравнивание, фон, тень):

 

Или воспользоваться уже созданной подборкой в правом углу сайта:

 

Я испробовала лишь некоторые свойства текста и предлагаю вам.

 

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

<a style="свойство 1; свойство 2; свойство 3">ТЕКСТ</a>

*да, я знаю, что обозначения не по правилам, но так понятнее*

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

При наведении курсора текст такой аннотации будет подчеркиваться, как ссылка, но вести никуда не будет. Чтобы избавиться от подчеркивания, используйте свойство "text-decoration:none" (описано в п.6).

 

Теперь можно перейти к описанию самих свойств (их может быть практически любое число, ограниченное лишь количеством символов в аннотации. И браузером, но вряд ли у вас 10 поместится).

 

1. color:#0000CD - цвет текста.

Изменяется значение после # (изменяющиеся значения свойств выделены красным), таблица html-кодов цветов тут.

Я не всегда буду перечислять все значения, остальные можно найти на сайте, но они весьма специфичны.

 

2. font-size:15pt -размер текста

 Можно так же задать в виде процентов от обычной величины текста, например 250% или 40%.

 

3. font-weight:bold - жирность текста

Возможные варианты значений:

bold - полужирное;

bolder - жирнее предыдущего текста;

lighter - тоньше предыдущего текста;

normal - обычное;

100|200|300|400|500|600|700|800|900 - изменение жирности от 100 до 900 с шагом в 100 единиц.

Стандартный текст соответствует  400, полужирный - 700.

 

Примеры:

Полужирный текст (по умолчанию он синий), без подчеркивания при наведении.
<a style="font-weight:bold; text-decoration:none">Попаданство в фэнтези: классическое, но несерьезное.</a>

 

Полужирный черный без подчеркивания при наведении.
<a style="font-weight:bold; text-decoration:none; color:#000000">Попаданство в фэнтези: классическое, но несерьезное.</a>

 

Максимально жирный, красный, крупный, без подчеркивания при наведении.
<a style="font-weight:900; text-decoration:none; color:red; font-size:15pt">Попаданство в фэнтези: классическое, но несерьезное.</a>

 

4. font-style:italic - начертание шрифта

italic - курсив;

oblique - просто наклонное;

normal - нормальное (если вдруг до этого был курсив).

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

 

Пример:

Черный неподчеркнутый курсив:
<a style="font-style:italic; text-decoration:none; color:#000000">Попаданство в фэнтези: классическое, но несерьезное.</a>

 

5. background-color:#F08080 - цвет фона

Опять же, код с этого сайта. В принципе, цвета можно обозначать и словами, но для этого надо точно знать их названия (они есть на том же сайте). Например, background-color:Bisque выглядит так:

Обратите внимание, что фон находится только за текстом.

 

6. text-decoration:underline - подчеркивание, перечеркивание и т.д.

Мерцание не работает.

line-through - перечеркнутый текст;

overline - линия над текстом;

underline - подчеркнутый текст;

none - снимает все эффекты, в том числе подчеркивание у ссылок и у текста нашей аннотации.

 

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

text-decoration-color:red - цвет черты. Можно названием или кодом.

и 

text-decoration-style: solid - тип черты

solid - одиночная линия;

double - двойная линия;

dotted - точечная линия;

dashed - пунктирная линия;

wavy - волнистая линия.

 

Примеры:

 <a style="color:#000000; font-size:15pt; font-weight:bold; text-decoration:underline; text-decoration-color:blue; text-decoration-style:wavy">Попаданство в фэнтези: классическое, но несерьезное.</a>

 или

 <a style="color:#000000; font-size:15pt; font-weight:bold; text-decoration:line-through; text-decoration-color:red; text-decoration-style:double">Попаданство в фэнтези: классическое, но несерьезное.</a>

 

7. text-shadow: 1px 1px 2px black  или text-shadow: 0 0 1em red - тень

text-shadow:<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

<сдвиг по x>  - сдвиг тени по горизонтали относительно текста. При отрицательном значении - влево, при положительном - вправо;

<сдвиг по y> - сдвиг тени по вертикали относительно текста. При отрицательном значении - вверх, при положительном - вниз;

<радиус размытия> - чем он больше, тем шире и светлее тень. Можно игнорировать, тогда он равен 0. Зависит от браузера.

<цвет> - названием или кодом.

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

text-shadow: 1px 1px 2px black, 0 0 1em red;

 

Примеры:

 <a style="color:#000000; font-size:15pt; text-shadow: 3px 3px 1px Silver">Попаданство в фэнтези: классическое, но несерьезное.</a>

Или вот такой "смущенный" текст:

 <a style="color:#0000CD; font-size:15pt; font-weight:bold; font-style:italic; text-shadow: 0 0 1em red">Попаданство в фэнтези: классическое, но несерьезное.</a>

 

8. border: 4px double black - граница вокруг текста

border: <ширина линии> <стиль обводки> <цвет обводки>

<ширина линии> - в пикселях 

<цвет обводки> - кодом или названием

<стиль обводки>:

Пример:

 <a style="color:#0000CD; font-size:15pt; font-weight:bold; font-style:italic; border: 7px dotted Thistle">Попаданство в фэнтези: классическое, но несерьезное.</a>

 

Почему не работает выравнивание текста text-align, я не пока не знаю. Поэтому про него не писала.

Пока все. Позже, взможно, добавлю еще какие-то парамеры.

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

 

Кстати, если вам было инересно, можете заглянуть в тот самый рассказ "Подвиг", чью аннотацию я так долго мучила для написания этой статьи. Довольно легкое юмористическое фэнтези про двух компьютерщиков из серии "наши там"))

 

Комментарии:

Всего веток: 17

Мария Шурухина 17.04.2019, 23:19:45

В аннотации работает HTML? Вот ведь! Смотрю, другие как-то прилепляют и разные цвета и кнопочки, я пробовала - не получилось. Так, попробую что-нибудь из вашего!
Спасибо!

В ветке 3 Комментариев. Показать

Последний комментарий в ветке:

Мария Шурухина 17.04.2019, 23:24:42

Наталья Изотова, Спасибо еще раз!

Алина Демина 17.04.2019, 17:30:19

Здорово, спасибо! Как раз недавно хотелось поправить аннотацию и кое-что выделить))

В ветке 3 Комментариев. Показать

Последний комментарий в ветке:

Алина Демина 17.04.2019, 18:02:27

Наталья Изотова, ))) Спасибо еще раз, одних восклицательных знаков и вправду не хватает))

София Чайка 17.04.2019, 17:22:54

Спасибо волшебнице! Все Ваши блоги у меня в библиотеке)

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 17:53:21

София Чайка, Спасибо огромное! Очень приятно)

Таша Океан 17.04.2019, 16:37:51

Ой, какой внезапно полезный не только в работе с аннотациями сайт) Спасибо, магистр туториалов!

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 16:39:40

Таша Океан, *смущенно* Я только учусь)) Спасибо!

Аврора Лимонова 17.04.2019, 14:29:33

Спасибо!

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 14:56:12

Аврора Лимонова, :) Пользуйтесь на здоровье)

Татьяна Май 17.04.2019, 12:09:52

Наталья, спасибо большое!
Вашим блогом про оформление кнопок до сих пор пользуюсь))

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 12:58:08

Татьяна Май, Спасибо) Надеюсь, и этот пригодится)

Евгения Серпента 17.04.2019, 09:15:30

Спасибо, отложила про запас

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 09:35:37

Евгения Серпента, Авось, пригодится)

Лана Мур 17.04.2019, 09:12:39

Офигеть!
Спасибо за ваш труд

В ветке 3 Комментариев. Показать

Последний комментарий в ветке:

Лана Мур 17.04.2019, 09:16:00

Наталья Изотова, тоже вариант))

Юлия Шевченко 17.04.2019, 09:08:28

Спасибо огромное!!! Пригодится.

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 09:13:53

Юлия Шевченко, Рад быть полезной)

Джина Шэй 17.04.2019, 08:29:36

Полезная штука *заложила*

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 08:37:26

Джина Шэй, Спасибо)

Разия Оганезова 17.04.2019, 08:25:03

Спасибо!

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 08:25:51

Разия Оганезова, Спасибо, что заглянули)

igra-20 17.04.2019, 07:37:13

Благодарю, полезный блог!

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 08:20:28

igra-20, Спасибо)

Шейла Лютаж 17.04.2019, 07:52:38

Спасибо, ценно и своевременно.

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 08:20:17

Шейла Лютаж, Спасибо)

Шейла Лютаж 17.04.2019, 07:52:45

Спасибо, ценно и своевременно.

Галина Турбина 17.04.2019, 06:32:28

Спасибо, что делитесь полезной информацией.

В ветке 3 Комментариев. Показать

Последний комментарий в ветке:

Галина Турбина 17.04.2019, 07:11:13

Наталья Изотова, О, да, конечно, вашей информацией (пока не этой, другой) я уже пользовалась. Еще раз спасибо.

Крися 17.04.2019, 05:52:02

Спасибо огромное!

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 07:08:36

Крися, Спасибо, что заглянули)

Елизавета Визир 17.04.2019, 04:26:10

Спасибо! Очень полезно))

Последний комментарий в ветке:

Наталья Изотова 17.04.2019, 07:08:17

Елизавета Визир, Спасибо)

Books language: