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.
[Algorytmy][CSS] Odnośniki do innych stron
-
- 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
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.
- 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.
- VBService
- 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
Możesz użyć CSS Selector Reference
on-line
Dodano po 4 dniach 15 godzinach 39 minutach 13 sekundach:
Możesz też po prostu zapisać tak
Kod: Zaznacz cały
www.w3schools.com/cssref/css_selectors.php
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>
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 (3.26 KiB) Przejrzano 522 razy