|
|
|
|
|
|
|
|||
|
JavaScript.nu
/
HTML-kurs
/
Style Sheets (CSS)
Style Sheets - CSS
Style sheets �r n�got som man kan ha p� sin sida s� att man kan �ndra t.ex. textstorlek, textf�rg, understrykningar p� l�nkar etc. Jag vill dock varna f�r att alla webbl�sare inte kan hantera style sheets och d�rf�r ignorerar allt som g�rs med style sheets och visar sidan som om style sheets inte hade funnits. Style sheets fungerar med Internet Explorer 3.0 och Netscape 4.0 eller b�ttre av respektive webbl�sare. Om denna text �r gr�n klarar din webbl�sare av Style Sheets.
M�nga av de saker man kan g�ra med style sheets kan man ocks� g�ra
med vanliga HTML-taggar, s� det kan l�tt h�nda att man som nyb�rjare
tycker att style sheets �r on�digt, vilket givetvis inte st�mmer.
Man kan anv�nda style sheets p� tre olika s�tt p� sin hemsida:
<FONT STYLE="font-size: 25pt">TEXT</FONT> <B STYLE="color: gold">TEXT</B> <A STYLE="font-family: 'Comic Sans MS'" HREF="hemsida.shtml">TEXT</A>
H�r �r allts� STYLE ett attribut.
Detta s�tt kan (om man vill) kombineras med de tv� ovanst�ende s�tten. Om du d� t.ex. har skrivit...
<STYLE TYPE="TEXT/CSS">
<!--
A {line-height: 50pt}
//-->
</STYLE>
...I HEAD men du har skrivit...
<A STYLE="A {line-height: 30pt}" HREF="hemsida.shtml">TEXT</A> ...P� sidan s� g�ller 30pt, eftersom style-attributen (n�r man skriver v�rdet inom en tagg) har h�gre prioritet �n de andra tv� s�tten. H�r har jag listat upp n�gra vanliga attribut som man kan anv�nda. Det finns fler, fast dessa �r n�gra vanliga som kan vara v�rda att k�nna till. Kom ih�g att det du ska skriva (exemplet) inte ska ha m�svingarna ({ och }) om du skriver detta i ett attribut (STYLE="v�rde"). M�svingarna ska bara finnas om du ska skriva detta l�ngst upp p� sidan (i HEAD) eller i en separat .css-fil (dvs. m�svingarna beh�vs bara f�r metod 1 och 2 ovan).
Man skriver ut dessa v�rden med ett separerande semikolon (;). Allts� kan man skriva s� h�r f�r att endast en FONT-tagg ska �ndras med style sheets: <FONT STYLE="font-size: 32pt; color: gray">TEXT</FONT>
...F�r att f� detta resultat:
Skulle jag d�remot vilja att all text som finns p� min sida inom FONT-taggarna (texten som finns mellan <FONT> och </FONT>) ska bli som texten ovan s� skriver jag s� h�r mellan <HEAD> och </HEAD>:
<STYLE TYPE="TEXT/CSS">
<!--
FONT {font-size: 32pt; color: gray}
//-->
</STYLE>
Skulle jag vilja att all text som kommer efter <P> ska
bli som texten ovan (gr�f�rgad och f�rstorad) s� skulle jag bara byta ut FONT mot P.
Om jag t.ex. hade skrivit ovanst�ende kod-snutt inom HEAD och sedan skrivit detta...
Vill man �ndra ett par ord till n�got speciellt skriver man: <SPAN STYLE="color: red">Dessa ord blir r�da</SPAN> (�r inte texten r�d f�r dig s� fungerar detta inte f�r dig). N�r du skriver namnen p� olika typsnitt (t.ex. arial, wild latin, times new roman etc.) s� kom ih�g att skriva citat (") runt namnet om namnet inneh�ller mellanrum. T.ex. ska du inte skriva: FONT {font-family: Comic Sans MS, Arial, sans-serif, wild latin} ...utan skriv... FONT {font-family: "Comic Sans MS", Arial, sans-serif, "wild latin"}
Om du skriver allt i ett attribut s� f�r du anv�nda '
ist�llet f�r ".
N�r du �ndrar sidans marginaler s� kan du alltid anv�nda negativa v�rden. Om du t.ex. vill att sidan ska vara tom en bra bit p� h�ger och v�nster sida s� kan du skriva:
<STYLE TYPE="TEXT/CSS">
<!--
BODY {margin-right: 100px; margin-left: 100px}
//-->
</STYLE>
Om du vill �ndra utseendet p� t.ex. l�nkar kan du anv�nda mer �n bara A. Du kan ange t.ex: A:link anv�nds d� man menar en l�nk som inte har anv�nts A:visited anv�nds d� man menar en l�nk som har anv�nts A:active anv�nds d� man menar en l�nk som �r nedtryckt A:hover anv�nds d� man har musen �ver l�nken (fungerar bara i Explorer)
Vill du t.ex. att dina l�nkar ska var utan understrykning kan du skriva:
<STYLE TYPE="TEXT/CSS">
<!--
A {text-decoration: none}
//-->
</STYLE>
Copyright © Omid Rouhani 1997-2022; Alla r�ttigheter reserverade. Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ] |
