Problem z linkami HTML/CSS

pytanie zadane 26 sierpnia 2020 w HTML i CSS przez _Kuba_ Początkujący (250 p.)

Mam taki mały problem z linkami w HTMLu. Zaraz po włączeniu kolor linku jest fioletowy, a chwilę później już biały. W CSS wszystkie kolory linków ustawione są na białe :/ Poniżej screeny i kod CSS

#nav a:link
{
	text-decoration:none;
	font-size:17px;
	transition-duration:1s;
	color:white;
}

#nav a:hover {
	text-shadow: 3px 0 0 #00DDDD;
	transition: all 1s;
	padding: 10px;
	color:gray;
	}
	
#nav a:visited
	{
		color:white;
		text-decoration:none;
	}
	
#nav a:active
{
		color:white;
}

1	komentarz 26 sierpnia 2020 przez JakSky Stary wyjadacz (14,770 p.) Wygląda to tak jakby CSS był ładowany po wczytaniu HTML

komentarz 26 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

@_Kuba_, Pokaż kod HTML.

2 odpowiedzi

odpowiedź 26 sierpnia 2020 przez VBService Ekspert (256,320 p.)
edycja 27 sierpnia 2020 przez VBService

Masz niejawnie ustawione transition: all 1s 0s linear; gdy masz taki zapis, transition-duration:1s; w tej części:

#nav a:link
{
    text-decoration:none;
    font-size:17px;
    transition-duration:1s; <-- ten wpis
    color:white;
}

transition-duration:1s - automatycznie resztę przeglądarka ustawia z domyślnych (default).

transition-property: all; // default
transition-duration: 1s; // Twoje ustawienie
transition-delay: 0s; // default
transition-timing-function: linear; // default

Pseudo klasa :link działa w css w dużym uproszczeniu jak w html wywołanie coś na wzór beforeonload, czyli zaraz po uruchomieniu (ładowaniu, załadowaniu) strony i sparsowaniu jej, w trakcie ustawiania css-a na elementach strony, wykonuje się ten kod na elementach <a>.

W pewnym sensie oba te zapisy są równoznaczne:
#nav a { ... } i #nav a:link { ... }

zrób taki zapis a zobaczysz różnicę

#nav a:link
{
    text-decoration:none;
    font-size:17px;
    /* transition-duration:1s; */
    color:white;
}

albo

#nav a:link
{
    text-decoration:none;
    font-size:17px;   
    color:white;
}

albo

#nav a:link
{
    text-decoration:none;
    font-size:17px;
    transition-duration:5s;
    color:white;
}

[ css - transition ]

komentarz 26 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Masz nie jawnie ustawione transition: all 1s linear; gdy masz taki zapis, transition-duration:1s

Ciekawy pomysł. :) Można prosić źródło tej informacji? Styl transition: all 1s; jest ustawiany dopiero na :hover, więc jestem ciekaw, czy to mimo wszystko ma jakiś związek.

komentarz 26 sierpnia 2020 przez VBService Ekspert (256,320 p.)
edycja 26 sierpnia 2020 przez VBService

Wejdź tu: https://codepen.io/vbservice/pen/GRZmJeb

i usuń znaki komentarza.

:hover w tym zapisie, w dużym uproszczeniu, działa jak toggle() po najechaniu myszą na <a> i zjechaniu myszy z <a> (czyli transition w hover zachodzi tylko dla tego zdarzenia)

mysz nad <a>
#nav a:hover {
    text-shadow: 3px 0 0 #00DDDD;
    transition: all 1s;
    padding: 10px;
    color:gray;
    }

mysz poza <a>
#nav a:link
{
    text-decoration:none;
    font-size:17px;
    transition-duration:1s;
    color:white;
}

/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

1	komentarz 26 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.) Hmm, faktycznie: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property#Formal_definition Initial value all Szukałem nie tam gdzie trzeba.

odpowiedź 26 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)

Sprawdź czy jest dobrze podlinkowany plik i zrób twardy reset zazwyczaj ctrl + f5 --> zazwyczaj przeglądarka nie zaciąga za każdym razem pliku css tylko korzysta z zaciągniętego wcześniej i dlatego czasami zmiany nie są widoczne. Poza tym użyj narzędzi developerskich w narzędziach przeglądarki. Prawy klik gdziekolwiek i zbadaj element.

komentarz 26 sierpnia 2020 przez _Kuba_ Początkujący (250 p.)

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>TOP 5 SERIALI - Subiektywne top 5</title>
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, przecinku" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	
</head>

<body>
	
	<div id="container">
		
			<div id="logo">
				<h2>Najlepsze seriale - Top 5</h2>
			</div>
			
			<div id="nav">
				 <br/><br/><li><a href="index.html" >Dr House</a><br/><br/><br/></li>
				<li> <a href="breakingbad.html" >Breaking Bad</a><br/><br/><br/></li>
				<li> <a href="bigbang.html">Big Bang Theory</a><br/><br/><br/></li>
				 <li><a href="archx.html">Z Archiwum X</a><br/><br/><br/></li>
				 <li><a href="tdec.html">True Detective</a><br/><br/><br/></li>
			
			</div>
			
			<div id="content">
						<div class="tekst">
						<h2>Dr House</h2>
									Miał premierę na antenie 16 listopada 2004 roku. Fabuła serialu koncentruje się na osobie dr Gregory’ego House’a (Hugh Laurie), niekonwencjonalnego, szalonego, a zarazem genialnego lekarza, kierującego zespołem diagnostycznym w fikcyjnym Szpitalu Klinicznym Princeton-Plainsboro (PPTH) w New Jersey. W każdym odcinku dr House wraz ze swoim zespołem próbuje zdiagnozować i wyleczyć pacjentów przejawiających rozmaite objawy, niewyjaśnione wcześniej przez innych lekarzy. W pierwszych trzech seriach zespół dra House’a tworzyli: dr Allison Cameron (Jennifer Morrison), dr Robert Chase (Jesse Spencer) i dr Eric Foreman (Omar Epps), od czwartej serii dr Chris Taub (Peter Jacobson), dr Lawrence Kutner (Kal Penn) oraz dr Remy „Trzynastka” Hadley (Olivia Wilde), w siódmym sezonie w zespole pojawiła się Martha Masters (Amber Tamblyn), a w ósmym do zespołu dochodzą dr Chi Park (Charlyne Yi) oraz lekarka z więzienia dr Jessica Adams (Odette Annable). Ponadto serial ukazuje prywatne życie House’a i członków jego zespołu, najlepszego i jedynego przyjaciela dr Jamesa Wilsona (Robert Sean Leonard), ordynatora oddziału onkologii oraz dr Lisy Cuddy (Lisa Edelstein), dyrektor szpitala Princeton‑Plainsboro.
						<div class="film"><iframe width="880" height="520" src="https://www.youtube.com/embed/xja_n137T4k" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>									
						</div>
			</div>
			
			<div id="ad">
			</div>
			
			<div id="footer">
			Najlepsze seriale TOP 5! &copy - Wszelkie prawa zastrzeżone!
			</div>
	
	</div>
	
</body>
</html>

Tak to wygląda w HTMLu
Poza tym twardy reset nie pomógł :/

komentarz 26 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Czy masz jakieś wtyczki, które wpływają na ładowanie assetów na stronie? Czy w trybie incognito/prywatnym ten problem występuje? Czy możesz tę stronę upublicznić i dać linka?

komentarz 26 sierpnia 2020 przez _Kuba_ Początkujący (250 p.)

Ogólne to wszystko jest okej, kiedy usunę:

#nav a:link
{
    text-decoration:none;
    font-size:17px;
    transition-duration:1s; <--- TO
    color:white;
}

Ale kiedy 'zdejmę' kursor z linku to nie przechodzi on tak płynnie do swojej pozycji

komentarz 27 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)

Koledzy już w sumie wyjaśnili w czym problem. Ponadto polecam skróconą formę. Czyli transition daj na stałe a nie tylko dla :hover.

Mniej więcej tak

#nav a{
 transition: color 1s;
}

Podobne pytania

0 głosów

0 odpowiedzi 139 wizyt

Własna tablica BBCODE, problem z linkami url

pytanie zadane 23 listopada 2019 w PHP przez okti00 Obywatel (1,590 p.)

0 głosów

1 odpowiedź 325 wizyt

Problem z linkami do plików - przyjazne adresay URL

pytanie zadane 19 września 2016 w PHP przez Grzdaczek Obywatel (1,070 p.)

0 głosów

2 odpowiedzi 351 wizyt

Problem z wstawieniem CSS do HTML

pytanie zadane 2 listopada 2019 w HTML i CSS przez tomekkyu Nowicjusz (140 p.)

Problem z linkami HTML/CSS

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

Advent of Code 2024

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci