Облегчить ссылку для Спойлера

@victorija · Регистрация: 05.03.2017

Студворк — интернет-сервис помощи студентам

Добрый день! Необходимо облегчить ссылку, расположенную в спойлере

HTML5
1
<a href="https://ru.wikipedia.org/wiki/%D0%A0%D0%BE%D1%81%D1%82%D0%BE%D0%B2%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C" style="font-size: 18px; color: #499300"><img style="box-shadow: 1px 1px 15px -1px #b2f088" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Rostov_Oblast_small.png">&nbsp;&nbsp;<font size="6">Ростовская область</font></a>

P.S. Планируется большое количество однотипных изображений (флагов), классифицируемым по континентам и странам, и расположенных в разных спойлерах (на одной странице).

@zme9 · 08.04.2017, 15:33

victorija, не совсем понятно что именно нужно сделать.

@victorija · 08.04.2017, 16:49 **[ТС]**

Вот один из таких спойлеров в раскрытом состоянии.
Можно ли вынести стилевое решение за пределы HTML-кода, поскольку такой код

HTML5
1
2
3
4
5
6
7
8
9
[su_spoiler title="Южный Федеральный Округ" style="fancy" icon="caret" class="FO"]
<a href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C" style="font-size: 18px; color: #499300"><img style="box-shadow: 1px 1px 15px -1px #b2f088" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_respublika_Adyge_small.png">&nbsp;&nbsp;<font size="6">Республика Адыгея</font></a><br>
<a href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C" style="font-size: 18px; color: #499300"><img style="box-shadow: 1px 1px 15px -1px #b2f088" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Astrakhan_Oblast_small.png">&nbsp;&nbsp;<font size="6">Астраханская область</font></a><br>
<a href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C" style="font-size: 18px; color: #499300"><img style="box-shadow: 1px 1px 15px -1px #b2f088" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Volgograd_Oblast_small.png">&nbsp;&nbsp;<font size="6">Волгоградская область</font></a><br>
<a href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C" style="font-size: 18px; color: #499300"><img style="box-shadow: 1px 1px 15px -1px #b2f088" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_respublika_Kalmykia_small.png">&nbsp;&nbsp;<font size="6">Республика Калмыкия</font></a><br>
<a href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C" style="font-size: 18px; color: #499300"><img style="box-shadow: 1px 1px 15px -1px #b2f088" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Krasnodar_Krai_small.png">&nbsp;&nbsp;<font size="6">Краснодарский край</font></a><br>
<a href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C" style="font-size: 18px; color: #499300"><img style="box-shadow: 1px 1px 15px -1px #b2f088" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_respublika_Crimea_small.png">&nbsp;&nbsp;<font size="6">Республика Крым</font></a><br>
<a href="https://ru.wikipedia.org/wiki/%D0%A0%D0%BE%D1%81%D1%82%D0%BE%D0%B2%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C" style="font-size: 18px; color: #499300"><img style="box-shadow: 1px 1px 15px -1px #b2f088" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Rostov_Oblast_small.png">&nbsp;&nbsp;<font size="6">Ростовская область</font></a><br>
[/su_spoiler]

(дублирование стилей, применяемых непосредственно к флагу), слишком утяжеляет страницу!

[del]

[del]

@mrtoxas · 08.04.2017, 21:59

Сообщение от victorija

Можно ли вынести

Не только можно, но еще и нужно.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .flag__link {
      font-size: 18px;
      color: #499300;
    }
    .flag__img{
    box-shadow: 1px 1px 15px -1px #b2f088; 
    }
    .flag__title{
      font-size:32px
    }
  </style>
</head>
<body>
  <a class="flag__link" href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C"><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_respublika_Adyge_small.png ">
  <span class="flag__title ">Республика Адыгея</span>
</a><br>
<a class="flag__link " href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Astrakhan_Oblast_small.png ">
  <span class="flag__title ">Астраханская область</span>
</a><br>
<a class="flag__link " href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Volgograd_Oblast_small.png ">
  <span class="flag__title ">Волгоградская область</span>
</a><br>
<a class="flag__link"  href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_respublika_Kalmykia_small.png ">
  <span class="flag__title ">Республика Калмыкия</span>
</a><br>
<a class="flag__link" href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Krasnodar_Krai_small.png ">
  <span class="flag__title ">Краснодарский край</span>
</a><br>
<a class="flag__link" href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_respublika_Crimea_small.png ">
  <span class="flag__title ">Республика Крым</span>
</a><br>
<a class="flag__link" href="https://ru.wikipedia.org/wiki/%D0%A0%D0%BE%D1%81%D1%82%D0%BE%D0%B2%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Rostov_Oblast_small.png ">
  <span class="flag__title ">Ростовская область</span>
</a>
</body>
</html>

@victorija · 08.04.2017, 22:32 **[ТС]**

[del]

Немного не то! Не отображаются требуемые параметры!

@mrtoxas · 08.04.2017, 23:01

Какие стили вы дали в третьем сообщении, такие и отображаются

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
  .flag__link {
      font-size: 18px;
      color: #499300;
      text-decoration: none;
      border-bottom: 1px dotted green;
    }
 
    .flag__img {
      box-shadow: 1px 1px 15px -1px #b2f088;
    }
 
    .flag__title {
      font-size: 32px
    }
  </style>
</head>
<body>
   <a class="flag__link" href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C"><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_respublika_Adyge_small.png ">
  <span class="flag__title ">Республика Адыгея</span>
</a><br>
<a class="flag__link " href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Astrakhan_Oblast_small.png ">
  <span class="flag__title ">Астраханская область</span>
</a><br>
<a class="flag__link " href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Volgograd_Oblast_small.png ">
  <span class="flag__title ">Волгоградская область</span>
</a><br>
<a class="flag__link"  href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_respublika_Kalmykia_small.png ">
  <span class="flag__title ">Республика Калмыкия</span>
</a><br>
<a class="flag__link" href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Krasnodar_Krai_small.png ">
  <span class="flag__title ">Краснодарский край</span>
</a><br>
<a class="flag__link" href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D1%8F%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_respublika_Crimea_small.png ">
  <span class="flag__title ">Республика Крым</span>
</a><br>
<a class="flag__link" href="https://ru.wikipedia.org/wiki/%D0%A0%D0%BE%D1%81%D1%82%D0%BE%D0%B2%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C "><img class="flag__img" src="http://pro-flo.ru/wp-content/uploads/2017/04/Flag_of_Rostov_Oblast_small.png ">
  <span class="flag__title ">Ростовская область</span>
</a>
</body>
</html>

@victorija · 08.04.2017, 23:18 **[ТС]**

Я просто скопировала код, расположенный в Спойлере! Сылочку на страницу, где расположен данный спойлер, я скинула Вам в Личку!))

Нет зеленоватой тени вокруг флага! Она ОЧЕНЬ важна, поскольку часть флагов с белым фоном!

@mrtoxas · 08.04.2017, 23:22

В шестом сообщении тень вокруг флага присутствует.
http://codepen.io/anon/pen/vxqPxW

@victorija · 08.04.2017, 23:32 **[ТС]**

Извините, не заметила! Монитор был не под тем наклоном!))
А как настроить размер шрифта, чтобы было как на примере?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	08.04.2017, 15:33
	victorija, не совсем понятно что именно нужно сделать. 0

@victorija 6 / 6 / 2 Регистрация: 05.03.2017 Сообщений: 118
	08.04.2017, 22:32 [ТС]
	[del] Немного не то! Не отображаются требуемые параметры! 0

@victorija 6 / 6 / 2 Регистрация: 05.03.2017 Сообщений: 118
	08.04.2017, 23:18 [ТС]
	Я просто скопировала код, расположенный в Спойлере! Сылочку на страницу, где расположен данный спойлер, я скинула Вам в Личку!)) Нет зеленоватой тени вокруг флага! Она ОЧЕНЬ важна, поскольку часть флагов с белым фоном! 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	08.04.2017, 23:22
	В шестом сообщении тень вокруг флага присутствует. http://codepen.io/anon/pen/vxqPxW 0

@victorija 6 / 6 / 2 Регистрация: 05.03.2017 Сообщений: 118
	08.04.2017, 23:32 [ТС]
	Извините, не заметила! Монитор был не под тем наклоном!)) А как настроить размер шрифта, чтобы было как на примере? 0