diff options
Diffstat (limited to 'files/ru/learn/css/styling_text/styling_links/index.html')
| -rw-r--r-- | files/ru/learn/css/styling_text/styling_links/index.html | 10 |
1 files changed, 5 insertions, 5 deletions
diff --git a/files/ru/learn/css/styling_text/styling_links/index.html b/files/ru/learn/css/styling_text/styling_links/index.html index 29ecf37729..861d27909c 100644 --- a/files/ru/learn/css/styling_text/styling_links/index.html +++ b/files/ru/learn/css/styling_text/styling_links/index.html @@ -7,7 +7,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links <div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> -<p class="summary">При стилизации ссылок, важно понимать как использовать псевдо-классы, чтобы стилизировать состояния ссылок эфективно, и как стилизировать ссылки для использования в общих разнообразных функциях интерфейса: таких как например навигационное меню и вкладки. Мы расмотрим все эти темы в этой статье.</p> +<p class="summary">При стилизации ссылок, важно понимать как использовать псевдо-классы, чтобы стилизировать состояния ссылок эффективно, и как стилизировать ссылки для использования в общих разнообразных функциях интерфейса: таких как например навигационное меню и вкладки. Мы рассмотрим все эти темы в этой статье.</p> <table class="learn-box standard-table"> <tbody> @@ -182,7 +182,7 @@ Firefox</a>, <a href="https://www.google.com/chrome/index.html">Goog <li>Наконец, <code>a:active</code> используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!</li> </ul> -<h3 id="Активное_изучение_Стилизуйте_ссылки_самостояельно">Активное изучение: Стилизуйте ссылки самостояельно</h3> +<h3 id="Активное_изучение_Стилизуйте_ссылки_самостоятельно">Активное изучение: Стилизуйте ссылки самостоятельно</h3> <p>В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте свое воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все еще так же функциональное, как и наш пример выше.</p> @@ -328,10 +328,10 @@ a[href*="http"] { <p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p> -<p>Ну вот и все — попробуте посетить секцию активного изучения выше и испытайте этот новый метод!</p> +<p>Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!</p> <div class="note"> -<p><strong>Обратите вниманиеe</strong>: Не переживайте если вы еще не знакомы с <a href="/en-US/docs/Learn/CSS/Styling_boxes">фоном </a>и <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p> +<p><strong>Обратите внимание</strong>: Не переживайте если вы еще не знакомы с <a href="/en-US/docs/Learn/CSS/Styling_boxes">фоном </a>и <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p> </div> <h2 id="Стилизация_ссылок_в_виде_кнопок">Стилизация ссылок в виде кнопок</h2> @@ -404,7 +404,7 @@ a:active { <li>как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.</li> <li>Далее мы устанавливаем {{cssxref("display")}} на <code>inline-block</code> — элементы {{htmlelement("a")}} являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением <code>block</code>, мы хотим иметь возможность менять их размер. <code>inline-block</code> позволяет нам делать это.</li> <li>Теперь только изменение размера! Мы хотим заполнить всю ширину элемента {{htmlelement("ul")}}, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаем {{cssxref("width")}} на 19.5%, а {{cssxref("margin-right")}} на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <code><ul></code> и выпадет вниз на следующую строку. <span class="tlid-translation translation" lang="ru"><span title="">Тем не менее, мы возвращаемся к 100%, используя следующее правило</span></span>, которое выбирает только последний <code><a></code> в списке и удаляет его margin. Сделано!</li> - <li>Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаем {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет приемущество в центрировании текста по вертикали) и задаем для текста черный цвет.</li> + <li>Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаем {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаем для текста черный цвет.</li> </ul> </li> </ul> |