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