☰

» »

HTML in CSS - lastnosti povezav

HTML in CSS - lastnosti povezav

RatedR ::

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 ::

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 ::

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 ::

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 ::

- 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 ::

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 ()

RatedR ::

Deluje super samo zanima me še tole,
- v čem se razlikujeta 
.class a
in 
a.class

- kaj si naredil z to vrstico 
.class1 a:link, .class1 a:visited

hellboy123 ::

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

Gandalfar ::

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

RatedR ::

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 ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1297331065 (55214) htmltroubles
»

Lampp problem

Oddelek: Izdelava spletišč		71602 (1505) Slovenia13
»

CSS background-image in IE6?

Oddelek: Izdelava spletišč		132926 (2792) Road Runner
»

Problem z front page

Oddelek: Izdelava spletišč		181899 (1705) jack10
»

css ne dela tako kot bi moral

Oddelek: Izdelava spletišč		141831 (1676) pivmik

Več podobnih tem