Сила CSS

Удивительная сила CSS3 для оформления внешних и внутренних ссылок на страницах сайта, без изменения кода HTML.

  1. Этот пример CSS заливает фон для простых ссылок в тексте, после этого ссылки становятся очень заметными:
    a[href=""] {
      background: red;
      color: white;
      font-size: x-large;
    }
  2. Также можно назначить стиль абсолютным ссылкам отличающиеся от относительных ссылок:
    a[href^=http] {
      display: inline-block;
      color: red;
      transform: rotate(180deg);
    }
  3. Если вы хотите применить стиль для исходящих ссылок (на другой домен) вы можете использовать селектор: not(). Делаем маленькую стрелку рядом с внешними ссылками:
    a[href^='http']:not([href*='htmlhook.ru']):after {
      content: url(data:image/png;base64,R0lGODlhCQAMAMQAAPr7/Cpdi6q/0X2duURxmjRlkfz9/vz8/TVlkae8z4+qwoWivTlplDVmkvv8/Up1nUVymvn6/LrL2i1gjStejKS6zkNwmUFvmD5slkJwmbjJ2DZnkqm90Cdbiv///wAAACH5BAEAAB4ALAAAAAAJAAwAAAU6oCeOY7R0aNoByWURQUoOMTpqD0p1Ird1hEGGJ/gVJB5Ip9gpcESYDqOD4BxEFcWkwTGMHACSeDwKAQA7);
      padding-left: 2px;
    }

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

    img[src$=.png] {
    filter: invert(100%);
    }

    Другие способы оформить внешние и внутренние ссылки смотрите страницу «Cелекторы CSS для ссылок»

  4. Еще с помощью CSS можно сделать видимым заголовок страницы HTML (head) или другие элементы в документе HTML: script, style, link, footer и т.д.
    head {
      display: block;
      border-bottom: 5px solid red;
    }
    script, style, link {
      display: block;
      white-space: pre;
      font-family: monospace;
    }
  5. Если вам нужен значок для ссылки на определённый внешний ресурс, например:
    <a class="px" href="https://htmlhook.ru/">htmlhook.ru</a>

    проще сделать это так:

    .px::before {
      content: url(https://htmlhook.ru/favicon.ico);
    }
  6. Вы можете использовать огромную мощь CSS attr(), функция CSS для заполнения после элемента HTML и до элемента.
    script:before {
      content: "<script src=\"" attr(src) "\" type=\"" attr(type) "\">";
    }
    script:after {
      content: "</script>";
    }
    style:before { content: "
    <style type=\"" attr(type) "\">";
    }
    style:after { content: "< /style>";
    }
    link:before { content: "<link rel=\"" attr(rel) "\" type=\"" attr(type) "\" href=\"" attr(href) "\" />";
    }

    Обратите внимание что attr() считывает значения атрибутов для элемента, так что если вы используете его для id: сначала он прочтёт атрибуты id.

    Еще функция attr() вставляет значение указанного атрибута, который является единственным параметром. Если у соответствующего элемента нет атрибута, то возвращается пустая строка.

    HTML

    <ul>
      <li><a href="https://htmlhook.ru/category/html5">HTML5</a></li>
      <li><a href="https://htmlhook.ru/category/css3">CSS3</a></li>
      <li><a href="https://htmlhook.ru/category/php">PHP</a></li>
    </ul>

    CSS

    a::after {
      content: " (" attr(href) ") ";
    }
54321
(0 голосов, в среднем: 0 из 5)