forts.
Det finns olika sätt att använda stylesheets på:
1. direkt i en HTML-tag
2. globalt för hela dokumentet
3. inlänkat från en .CSS-fil (CSS står för Cascading Style Sheets)
Direkt i en HTML-tag
För att ange ett stylesheet direkt i en HTML-tag måste du använda dig av en contianer-tag, dvs en tag som har en slutdefinition t ex <DIV> </DIV> eller <FONT> </FONT>.
Ett exempel på stylesheets i en FONT-tag (den blåa texten illustrerar själva stylesheets-definitionen):
<FONT FACE="Geneva, Arial, Helvetica" SIZE="6" COLOR="#000000" STYLE="Font-size:24pt; Font-weight:medium; Color:#000000;
Font-family: Geneva, Arial, Helvetica, sans-serif" > Oj, så roligt! </FONT>
Resultatet blir:
Det fina med det här är att de webläsare som förstår stylesheetskoden läser in STYLE-delen och struntar i FACE- och SIZE-attributen, medans de som inte förstår stylesheets helt enkelt struntar i STYLE-delen men läser in FACE och SIZE.
Tycker du att det mest liknar ekvationer? Då tar vi och reder ut begreppen.
Vi tar och tittar närmare på den blå STYLE-delen ovan.
Font-size:24pt; --> vi "låser" fontstorleken vid 24 punkter.
Du kan använda dig av måttenheterna:
pt (punkter)
px (pixlar)
cm (centimeter)
in (inch)
Font-weight:medium; --> vi anger tjockleken på typsnittet.
Följande värden kan anges till Font-weight:
extra-light
light
demi-light
medium
demi-bold
bold
extra-bold
För att det ska fungera krävs det att typsnitten du definierar stöder weight-attributen som du anger. Medium och bold stöds dock av de flesta. Vill du ha helt vanlig text så anger du alltså värdet medium.
Color:#000000; --> Japp, det är färgen på texten.
Font-family: Geneva, Arial, Helvetica, sans-serif --> här anges tre
olika fontalternativ samt sans-serif, vilket gör att webläsaren väljer
ett annat sans-serif typsnitt om inget av de definierade typsnitten finns installerade. Det går naturligtvis lika bra att ange serif, om du nu vill ha ett sådant.
Skillnaden mellan serif och san-serif är att serifer har "fötter" och "flaggor".
ex.
T = serif
T = san-serif
Vill du pröva dig fram med andra attribut?
Ta en titt på översikten!
Globalt för hela dokumentet
Det här innebär att man längst upp i <HEAD>-delen i HTML-koden definierar ett stylesheet som gäller för en speciell HTML-tag (t ex <FONT>, <DIV> eller <A>).
Här är ett exempel på ett stylesheet som tar bort understrykningarna på samtliga länkar i dokumentet:
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
<!--
a { Text-decoration:none }
//-->
</STYLE>
</HEAD>
<BODY>
<A HREF="dinsida.html">Länkar utan understrykningar!</A>
</BODY>
</HTML>
Resultatet blir (förrutsatt att du har rätt webläsare):
Vi tar och tittar närmare på den blå STYLE-delen i exemplet ovan:
a --> vi talar om att definitionen gäller samtliga <A>-tagar.
{ Text-decoration:none } --> här definierar vi bort understrykningar med text-decoration-attributet.
Följande värden kan anges till Text-decoration:
underline
overline
line-through
blink
none
Det går även bra att definiera egna stilar som du kan plocka in lite var som helst i ditt html-dokument.
Säg att vi vill ha länkar i fet stil utan understrykningar plus att vissa länkar ska vara röda och andra gröna. Vi vill också kunna sätta olika färg på texten.
Då kan man bygga sidan så här:
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
<!--
.rodtext { Color:#FF0000 }
.grontext { Color:#009900 }
.rodlink { Font-weight: bold; Text-decoration:none; Color:#FF0000 }
.gronlink { Font-weight: bold; Text-decoration:none; Color:#009900 }
//-->
</STYLE>
</HEAD>
<BODY>
<FONT FACE="geneva, arial, helvetica" CLASS="rodtext" >Låt mig ta dig till ett <A HREF="dinsida.html" CLASS="gronlink">häftigt plejs,</A>
låt mig ta dig ut i sajberspejs!</FONT>
<BR>
<FONT FACE="geneva, arial, helvetica" CLASS="grontext" >Låt mig ta dig till ett häftigt plejs,
låt mig ta dig ut i <A HREF="dinsida.html" CLASS="gronlink">
sajberspejs!</A>
</FONT>
</BODY>
</HTML>
Resultatet blir (förrutsatt att du har rätt webläsare):
Om vi tar och tittar på definitionerna igen så ser vi att i stället för att ha definierat om en HTML-tag, så har vi skapat egna små definitioner. Dessa kan du lägga i vilken container-tag som helst (tagar som har en start- och sluttag t ex <FONT>, <DIV> och <TABLE>).
Vill du pröva dig fram med andra attribut?
Ta en titt på översikten!
Inlänkat från en .CSS-fil
Den här varianten är smart att använda sig av när man har många websidor som använder sig av samma typsnitt, färg och textstorlek.
Det bygger på att man länkar in ett dokument innehållande definitionerna till websidan. Om man sedan t ex vill ändra länkfärg på alla sina websidor, ja då räcker det med att ändra i .css-filen. Css står för Cascading Style Sheets.
Om du t ex vill använda samma stylesheets till tio olika websidor, samtidigt som du vill vara smidig och smart, då kan du utnyttja den här metoden:
– Skapa en helt tom sida i exempelvis programmet "anteckningar" eller "skriv text".
– Skriv in dina stylesheets:
font { Font-size:12pt; Font-weight:medium; Color:#000000;
Font-family: Geneva, Arial, Helvetica, sans-serif }
a { Text-decoration:none; Color:#009900 }
– Spara sedan dokumentet och döp det till nått häftigt med filändelsen .css (t ex ditt_stylesheet.css).
– Nu är det bara att länka in den här .css-filen till de websidor som du vill applicera stilarna på genom att i <HEAD>-delen på dessa sidor lägga till:
<LINK REL=STYLESHEET HREF=ditt_stylesheet.css TYPE=text/css>
Om du känner att det är läge att fördjupa dig ännu mer i stylesheets, då rekomenderas en titt på dessa sidor:
- W3C - allmän information.
- Htmlhelp - stylesheets attribut.
Då var det bara att önska lycka till och hoppas på att din sida blir riktigt bra och snygg!
<< Tillbaka