[Algorytmy][CSS] Odnośniki do innych stron

Elayne
Użytkownik
Użytkownik
Posty: 926
Rejestracja: 24 paź 2011, o 01:24
Płeć: Mężczyzna
Lokalizacja: Polska
Podziękował: 75 razy
Pomógł: 274 razy

[Algorytmy][CSS] Odnośniki do innych stron

Post autor: Elayne »

Załóżmy, że mamy stronę internetową na której znajdują się odnośniki do innych stron. W jaki sposób można przypisać kolor wyświetlania odnośnika na stronie, w zależności od tego dokąd prowadzi dany odnośnik. Na przykład:
- odnośnik prowadzący do strony głównej wyświetlamy w kolorze zielonym;
- odnośnik prowadzący do strony w sub-domenie I wyświetlamy w kolorze niebieskim;
- odnośnik prowadzący do strony w sub domenie II wyświetlamy w kolorze żółtym;
- odnośnik prowadzący do strony zewnętrznej wyświetlamy w kolorze czerwonym.
Ponury123
Użytkownik
Użytkownik
Posty: 128
Rejestracja: 5 lip 2015, o 14:48
Płeć: Mężczyzna
Lokalizacja: nie wiem
Podziękował: 11 razy
Pomógł: 24 razy

Re: [Algorytmy][CSS] Odnośniki do innych stron

Post autor: Ponury123 »

W samym CSS tego nie zrobisz, proponuję:
- w CSS zdeklarować kolory
- w HTML dodać customowy atrybut i ręcznie zadbać o jego poprawną wartość
- w JS napisać funkcję do ustawiania koloru bazując na atrybucie.
Awatar użytkownika
VBService
Użytkownik
Użytkownik
Posty: 1
Rejestracja: 3 gru 2022, o 12:37
Płeć: Mężczyzna
wiek: 20
Lokalizacja: Polska
Podziękował: 1 raz
Pomógł: 1 raz

Re: [Algorytmy][CSS] Odnośniki do innych stron

Post autor: VBService »

Możesz użyć CSS Selector Reference

Kod: Zaznacz cały

www.w3schools.com/cssref/css_selectors.php
on-line

Kod: Zaznacz cały

codepen.io/przyklady-online/pen/ZERmLgZ

Kod: Zaznacz cały

<style>
  ul {
    display: flex;
    list-style-type: none;
    margin: 1em;
    background-color: black;
  }
  li {
    padding: 1em;
  }
  a {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  a[href="https://moja_glowna.pl"] {
    color: lime; /* strony głównej ... kolorze zielonym */
  }
  a[href^="https://sub1"] {
    color: blue; /* sub-domenie I ... kolorze niebieskim */
  } 
  a[href^="https://sub2"] {
    color: yellow; /* sub-domenie I ... kolorze żółtym */
  }
  a:not([href$="moja_glowna.pl"]) {
    color: red; /* strony zewnętrznej ... kolorze czerwonym */
  }
</style>

<ul>
  <li>
    <a href="https://moja_glowna.pl">Home</a>    
  </li>
  <li>
    <a href="https://sub1.moja_glowna.pl">Sub1</a>
  </li>
  <li>
    <a href="https://sub2.moja_glowna.pl">Sub2</a>
  </li>
  <li>
    <a href="https://matematyka.pl/informatyka-f13/algorytmy-css-odnosniki-do-innych-stron-t452641.html">[CSS] Odnośniki do innych stron</a>
  </li>
</ul>
Dodano po 4 dniach 15 godzinach 39 minutach 13 sekundach:
Możesz też po prostu zapisać tak

Kod: Zaznacz cały

<ul>
  <li>
    <a href="https://moja_glowna.pl" class="home-link">Home</a>    
  </li>
  <li>
    <a href="https://sub1.moja_glowna.pl" class="sub1-link">Sub1</a>
  </li>
  <li>
    <a href="https://sub2.moja_glowna.pl" class="sub2-link">Sub2</a>
  </li>
  <li>
    <a href="https://matematyka.pl/informatyka-f13/algorytmy-css-odnosniki-do-innych-stron-t452641.html" class="external-link">[CSS] Odnośniki do innych stron</a>
  </li>
</ul>

Kod: Zaznacz cały

.home-link {
  color: lime;
}
.sub1-link {
  color: blue;
}
.sub2-link {
  color: yellow;
}
.external-link {
  color: red;
}
Załączniki
css.png
css.png (3.26 KiB) Przejrzano 470 razy
ODPOWIEDZ