HTML in CSS - lastnosti povezav @ Slo-Tech

Forum » Programiranje »
HTML in CSS - lastnosti povezav

HTML in CSS - lastnosti povezav

RatedR :: 31. jan 2015, 18:23

Pozdrav, sem začetnik v HTML-ju in CSS-u in zanima me kako izvest da imam 2 različni povezavi, z različnimi CSS atributi.
Primer:

<!DOCTYPE html>

 <style>
 a {
   font-size: 40px;
   color: #000000;
   }
 </style>

   <body>
     <a href="www.google.com">Google</a>
     <a href="www.youtube.com">YouTube</a>
   </body>
</html>

Izpišeta se 2 povezavi, enake barve in velikosti, jaz pa hočem da ima prva drugačno velikost in barvo kot druga.

Če mi kdo pomaga vas prosim da ostanete na osnovah, sepravi čim manj dodatkov samo da naredi tisto osnovno stvar.
Hvala

garamond :: 31. jan 2015, 18:49

V "a" značko dodaj lastnost "class" z imenom novega stila:

<a class="style2" href="www.google.com">Google</a>

Pri definicijah stilov dodaj novo:

.style2{
   color: #FF0000;
}

Elementi z enakim stilom imajo ponavadi enak "class". Ena značka ima lahko več stilov.

- tole bi sicer moralo pisati v vsakem tutorialu za CSS, ker je osnova
- v html-ju ti manjka "head"

RatedR :: 31. jan 2015, 19:46

Hvala garamond, zaenkrat samo še spoznavam atribute CSS-a, kar se pa tiče head-a ga pa nisem dodal zato da bi bilo čim manj elementov.

RatedR :: 31. jan 2015, 22:45

Se oproščam za dvojni post, imam težavo z povezavami in obrobami.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 10;
    padding: 0;
}

a:link, a:visited {
                  color: #FFFFFF;
                  background-color: #525252;
                  width: 200px;
                  padding: 5px;
                  text-align: center;
                  }			  
a:hover {
    background-color: #E64016;
}

li {
   display:inline;
   }
   
a.class1 {
   font-size: 40px;
   color: white;
   }
   
a.class2 {
  font-size: 35px;
  color: white;
  background-color: none;
  }
  
a:hover {
	     background-color: #000000; !important;
		}
</style>
</head>

<body>

<ul>
  <li><a class="class1" href="#home">home</a></li>
  <li><a class="class1" href="#news">news</a></li>
  <li><a class="class1" href="#portal">portal</a></li>
  <li><a class="class1" href="#contact">contact</a></li>
</ul>

<div><a class="class2" href="#link1">Link 1</a></div>
<div><a class="class2" href="#link2">Link 2</a></div>
<div><a class="class2" href="#link3">Link 3</a></div>

</body>
</html>

Slika želenega rezultata:

garamond :: 31. jan 2015, 23:02

- v spletnem brskalniku odpri Developer tools (ctrl + shift + I v Chrome)
- ko klikneš element, ki ti povzroča probleme, se na desni pokažejo lastnosti: lastnost background-color: none; je neveljavna (pač ni take "barve")
- torej lahko poiščeš splet za "background-color: none;" kjer v prvem zadetku piše, da zamenjaj z background: none;
- še vedno pa moraš potem v .class2 popraviti barvo linka, ter dodati za :hover drugačno kodo kot za meni

Opomba:
- če imaš malce daljšo kodo jo daj na http://jsfiddle.net/ in prilepi link sem

blackbfm :: 31. jan 2015, 23:09

mal preveč kompliciraš z elementi.. pa priporočam da začneš uporabljat enoto em namesto px, importanta se tudi izogibaj

<!DOCTYPE html>
<html>
<head>
<style>
.class1 a:link, .class1 a:visited {
    color: #FFFFFF;
    background-color: #525252;
    width: 200px;
    padding: 5px;
}           
.class1 a:hover {
    background-color: #000000;
}
.class1 a {
    font-size: 40px;
    color: white;
}  
.class2 a {
    display: block;
    font-size: 35px;
    color: black;
    margin-top: .25em;
    
}
</style>
</head>
 
<body>

<div class="class1">
    <a href="#home">home</a>
    <a href="#news">news</a>
    <a href="#portal">portal</a>
    <a href="#contact">contact</a>
</div>

<div class="class2">
    <a href="#link1">Link 1</a>
    <a href="#link2">Link 2</a>
    <a href="#link3">Link 3</a>
</div>
 
</body>
</html>

Zgodovina sprememb…

spremenilo: blackbfm (31. jan 2015 ob 23:10)

RatedR :: 31. jan 2015, 23:45

Deluje super samo zanima me še tole,
- v čem se razlikujeta

.class a

a.class

- kaj si naredil z to vrstico

.class1 a:link, .class1 a:visited

hellboy123 :: 1. feb 2015, 11:49

http://www.w3schools.com/css/css_combin...

Gandalfar :: 1. feb 2015, 11:51

To si shrani, za en dan, ko boš hotel v miru prebrat kako selektorji res delajo: http://www.smashingmagazine.com/2007/07...

RatedR :: 1. feb 2015, 14:11

No te stvari razumem vse dokler smo na takih osnovnih primerih, zdej imam pa jaz svojo malo daljšo kodo za neko začetno spletno stran pa se še vedno ne morem odpravit nevšečnosti, ko uporabim 2 različni povezavi.

Lahko komu zaupam in pošljem na pvt kodo da mi pomaga uredit? Hvala

Vredno ogleda ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	Ogledi	Zadnje sporočilo
!	Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 ) Tody Oddelek: Izdelava spletišč	1298	345618 (4755)	sunniegoldie 11. sep 2024 05:12:48
»	Lampp problem Slovenia13 Oddelek: Izdelava spletišč	7	1692 (1595)	Slovenia13 17. avg 2009 10:10:02
»	CSS background-image in IE6? para! Oddelek: Izdelava spletišč	13	3065 (2931)	Road Runner 12. jun 2008 19:07:09
»	Problem z front page jack10 Oddelek: Izdelava spletišč	18	2042 (1848)	jack10 13. feb 2007 20:00:41
»	css ne dela tako kot bi moral krho Oddelek: Izdelava spletišč	14	1922 (1767)	pivmik 4. jan 2004 17:17:53

Več podobnih tem

Zadnje novice

Zadnji članki

Išči:

Forum » Programiranje »
HTML in CSS - lastnosti povezav

HTML in CSS - lastnosti povezav