Microcut Dk - Microcuts into your brain!

Lav et stylesheet
I denne tutorial vil jeg prøve at beskrive hvordan man laver et stylesheet (Anvendes når man koder i php). Det er ikke sikkert at alle syntes min måde at lave et stylesheet på, er 100% korrekt, og det vil jeg heller ikke kunne svare på om den er, da det er selvlært. Men mit stylesheet funkere for mig, så måske gør det også for dig? Inden jeg afsløre yderligere vil jeg lige påpege at dette er en fortsættelse på turorialen "lav en header" som du kan finde Hér. Koderne kan også andvendes individuelt, men jeg tror at man vil have størrer forståelse af dem, hvis man har kendskab til den header, dette stylesheet bliver lavet ud fra.
.

I denne tutorial vil jeg prøve at beskrive hvordan man laver et stylesheet (Anvendes når man koder i php). Det er ikke sikkert at alle syntes min måde at lave et stylesheet på, er 100% korrekt, og det vil jeg heller ikke kunne svare på om den er, da det er selvlært. Men mit stylesheet funkere for mig, så måske gør det også for dig?

Inden jeg afsløre yderligere vil jeg lige påpege at dette er en fortsættelse på turorialen "lav en header" som du kan finde Hér. Koderne kan også andvendes individuelt, men jeg tror at man vil have størrer forståelse af dem, hvis man har kendskab til den header, dette stylesheet bliver lavet ud fra.

.

Hvad indgår i stylesheetet?
I det stylesheet vi nu skal lave, indgår følgende: - Styling af skrift overordnet set (farver, skrifttype, skriftstørrelse osv) - Styling af et tables header (farver, tekst, skriftstørrelse osv) - Styling af et tables indhold (farver, tekst, skriftstørrelse osv) - Styling af links (farver, tekst, skriftstørrelse osv) - Styling af links (farver, tekst, skriftstørrelse osv) - Styling af scoolbars (farver) Hvis der er nogen af udtrykkende som du ikke forstår, så ikke gå i panik. Det kommer til at give sig selv hen af vejen, når man får lidt mere erfaring med det. Først vil jeg præsentere jer for den fulde kode. Dernæst vil jeg punktvis, forklare hvilken funktioner hver del af koden har.
.

I det stylesheet vi nu skal lave, indgår følgende:
- Styling af skrift overordnet set (farver, skrifttype, skriftstørrelse osv)
- Styling af et tables header (farver, tekst, skriftstørrelse osv)
- Styling af et tables indhold (farver, tekst, skriftstørrelse osv)
- Styling af links (farver, tekst, skriftstørrelse osv)
- Styling af links (farver, tekst, skriftstørrelse osv)
- Styling af scoolbars (farver)

Hvis der er nogen af udtrykkende som du ikke forstår, så ikke gå i panik. Det kommer til at give sig selv hen af vejen, når man får lidt mere erfaring med det.

Først vil jeg præsentere jer for den fulde kode. Dernæst vil jeg punktvis, forklare hvilken funktioner hver del af koden har.

.

Den fulde kode
Kopir den koden som står her under, og indsæt den som et nyt dokument (Hvis du ikke er klar over hvilket program du skal bruge, så kan du fx. anvende notesblok). Som sagt er denne style kodet udfra "navne" som indgår i headeren man laver ved at følge min Lav en header tutorial. Derfor kan du alligevel godt bruge dele af koden, men så skal du huske at tilrette navne så de stemmer overens med de navne som du fx. har kaldt dine tables. Gem dit nye dokument som "style.css". Meget vigtigt at alt er skrevet med småt.
.

Kopir den koden som står her under, og indsæt den som et nyt dokument (Hvis du ikke er klar over hvilket program du skal bruge, så kan du fx. anvende notesblok). Som sagt er denne style kodet udfra "navne" som indgår i headeren man laver ved at følge min Lav en header tutorial. Derfor kan du alligevel godt bruge dele af koden, men så skal du huske at tilrette navne så de stemmer overens med de navne som du fx. har kaldt dine tables.

BODY { font-family: verdana, sans-serif; font-size: 11px; color: #000000; text-decoration:none; } .header { text-transform:uppercase; color:#ffffff; font-size:17px; line-height:20px; font-weight:bold; background-color: #ffffff; font-family:arial-black; text-align:left; border-bottom:1px solid #000000; margin:0px; padding: 1 1 1 5; letter-spacing:3px; } .menuen { font-size:9px; background:#ffffff; color: #000000; font-family: tahoma; border-bottom:1px solid #ffffff; } BODY{ scrollbar-face-color:000000; scrollbar-shadow-color:ffffff; scrollbar-highlight-color:#000000; scrollbar-3dlight-color:000000; scrollbar-arrow-color:#FFFFFF; scrollbar-darkshadow-color:000000; scrollbar-track-color:#FFFFFF; } a:link {color: #000000; text-decoration: none; border-bottom:0px solid #000000; } a:visited {color: #000000; text-decoration: none; border-bottom:0px solid #000000; } a:active {color: #000000; text-decoration: none; border-bottom:0px solid #000000; } a:hover {color: #000000; text-decoration: none; border-bottom: 1px dashed #000000;} b{ color: #000000; } k{ color: #ffffff; }

Gem dit nye dokument som "style.css". Meget vigtigt at alt er skrevet med småt.

.

Styling af skrift overordnet set
Jeg vil starte med at tage fat i stylingen af al tekst på siden. Senere vil denne måske blive overflødig, da jeg ihvertfald selv fortrækker at kode hver enkel type table, så skriften nødvendigvis ikke behøver at være den samme overalt. Men derfor er det en god idé at have en grund farve, en grundt skrifttype, en grund skriftstørrelse, og en grundfarve. Dette er "grund" skriften: Når det er includeret i BODY's { og } kan man på en måde godt sige at det er noget som gælder for den overordnede helhed. Altså ikke noget der kun spiller ind på et lille stykke tekst. De overstående koder er forholdvis lige til. Men alligevel vil jeg lige hurtigt dele koden op i små bider, så vi er sikker på, at vi kigger på det samme stykke. Overstående kode er stylingen af skrifttypen. I dette tilfælde er den valgte skrifttype "verdana, sans-serif". Hvis du bedre fortrækker fx. tahoma, times new roman osv. skal du bare erstatte "verdana, sans-serif" med navnet på den ønskede skrifttype. Overstående del af koden, er stylingen af skriftstørrelsen. I dette tilfælde er den valgte skrift størrelse "11". Fortrækker du en størrer eller mindre skriftstørrelse, erstatter du bare "11" med den ønskede størrelse, fx. "9". Overstående del af koden, er stylingen af skriftfarven. I dette tilfælde er den valgte skriftfarve sort (#000000). Fortrækker du en anden farve erstatter du bare "000000" med den ønskede farvekode. Hvis du fx. ønsker en hvid baggrund, skriver ikke "000000", men "ffffff". Overstående del af koden, er stylingen af decoration på skriften. Dette kan fx. være stiplede linjer under skriften (Ingen af denne art kan anbefales). I dette tilfælde står der "none" hvilket betyder at der ingen text decorationer er. Hvis du alligvel ønsker det, kan du erstatte "none;" med fx. "1px dashed #000000;" , eller "underline #000000;". Underline er en sort linje under skriften (farven kan ændres ved at ændre farvekoden bagved), og dashed er en sort stiblet linje (farven kan ændres ved at ændre farvekoden bagved).
.

Jeg vil starte med at tage fat i stylingen af al tekst på siden. Senere vil denne måske blive overflødig, da jeg ihvertfald selv fortrækker at kode hver enkel type table, så skriften nødvendigvis ikke behøver at være den samme overalt. Men derfor er det en god idé at have en grund farve, en grundt skrifttype, en grund skriftstørrelse, og en grundfarve. Dette er "grund" skriften:

BODY { font-family: verdana, sans-serif; font-size: 11px; color: #000000; text-decoration:none; } Når det er includeret i BODY's { og } kan man på en måde godt sige at det er noget som gælder for den overordnede helhed. Altså ikke noget der kun spiller ind på et lille stykke tekst. De overstående koder er forholdvis lige til. Men alligevel vil jeg lige hurtigt dele koden op i små bider, så vi er sikker på, at vi kigger på det samme stykke.

font-family: verdana, sans-serif; Overstående kode er stylingen af skrifttypen. I dette tilfælde er den valgte skrifttype "verdana, sans-serif". Hvis du bedre fortrækker fx. tahoma, times new roman osv. skal du bare erstatte "verdana, sans-serif" med navnet på den ønskede skrifttype.

font-size: 11px; Overstående del af koden, er stylingen af skriftstørrelsen. I dette tilfælde er den valgte skrift størrelse "11". Fortrækker du en størrer eller mindre skriftstørrelse, erstatter du bare "11" med den ønskede størrelse, fx. "9".

color: #000000; Overstående del af koden, er stylingen af skriftfarven. I dette tilfælde er den valgte skriftfarve sort (#000000). Fortrækker du en anden farve erstatter du bare "000000" med den ønskede farvekode. Hvis du fx. ønsker en hvid baggrund, skriver ikke "000000", men "ffffff".

text-decoration:none; Overstående del af koden, er stylingen af decoration på skriften. Dette kan fx. være stiplede linjer under skriften (Ingen af denne art kan anbefales). I dette tilfælde står der "none" hvilket betyder at der ingen text decorationer er. Hvis du alligvel ønsker det, kan du erstatte "none;" med fx. "1px dashed #000000;" , eller "underline #000000;". Underline er en sort linje under skriften (farven kan ændres ved at ændre farvekoden bagved), og dashed er en sort stiblet linje (farven kan ændres ved at ændre farvekoden bagved).

.

Styling af et tables header
Jer som anvendte min tutorial om hvordan man lavede en header, husker måske at vi byggede sitebaren op i tables. Disse tables gav vi navne. Vi navngav overskriften på disse tables med "header". Derfor har jeg også valgt at den table vi skal style nu, skal være døbt "header". Som i kan se står der ikke BODY denne gang med ".header". Dette skyldes at vi som sagt specifikt styler tablets overskrift område som hedder "header" (Sæt altid et punktum foran navnet i stylesheetet). Denne gang tager vi kun fandt i dele vi ikke allerede har gennemgået i det overstående punkt (Da nogle af tingene er fuldstændig det samme). Endnu engang opdeler jeg koden i små bider, så det er til at finde rundt i. Dette er højden på linjerne (gør at du kan have længere imellem linjerne når du skriver noget). I dette tilfælde er linjehøjden sat til "20" som er et forholdsvis højt tal, men denne højde stemmer overens med skriftstørrelse valget. Du kan altid ændre "20" til en anden højde, fx. "9". Denne koder skriften til automatisk at være skrevet med fed Denne kode bestemmer hvilken baggrundsfarve der skal være i dit tables overskrift. I dette tilfælde er der valgt hvid (#ffffff), denne farve kan du selvfølgelig erstatte med hvilken som helst farve. Du erstatter bare den nuværende farvekode (ffffff) med fx. sorts farvekode, som er "000000". Overstående kode, styler i hvilken side skriften skal være placeret. "left" (venstre) kan erstattes med "right" (højre) eller "Center" (i midten). Overstående kode, laver en linje som danner bund for din tables. Tykkelsen af linjen kan tilpasses dit ønske ved at rette på "1px". Fx. kan du ændre den til "2px". Overstående kode gør også at det ikke er en stiblet linje. Hvis du ønsker en stiblet linje skal du erstatte "solid" med "dashed". I dette tilfælde er der valgt hvid (#ffffff), denne farve kan du selvfølgelig erstatte med hvilken som helst farve. Du erstatter bare den nuværende farvekode (ffffff) med fx. sorts farvekode, som er "000000". Overstående kode tilpasser hvor stort mellemrum der skal være imellem hvert ord (udover det normale). I dette tilfælde er der valgt "0px" hvilket vil sige at der ikke er tilføjet størrer mellemrum imellem ordene. Dette tal kan selvfølgelig erstattes af det antal px. du vil have til at være imellem hvert ord. Fx. "9px". Overstående kode tilpasser hvor stort mellemrum der skal være imellem hvert bogstav. I dette tilfælde er der valgt "3px" hvilket hvilket ikke er så forfærdelig meget i forhold til hvordan mellemrummet normalt er imellem bogstaverne.. Dette tal kan selvfølgelig erstattes af det antal px. du vil have til at være imellem hvert ord. Fx. "9px".
.

Jer som anvendte min tutorial om hvordan man lavede en header, husker måske at vi byggede sitebaren op i tables. Disse tables gav vi navne. Vi navngav overskriften på disse tables med "header". Derfor har jeg også valgt at den table vi skal style nu, skal være døbt "header". .header { text-transform:uppercase; color:#ffffff; font-size:17px; line-height:20px; font-weight:bold; background-color: #ffffff; font-family:arial-black; text-align:left; border-bottom:1px solid #000000; margin:0px; padding: 1 1 1 5; letter-spacing:3px; }

Som i kan se står der ikke BODY denne gang med ".header". Dette skyldes at vi som sagt specifikt styler tablets overskrift område som hedder "header" (Sæt altid et punktum foran navnet i stylesheetet).
Denne gang tager vi kun fandt i dele vi ikke allerede har gennemgået i det overstående punkt (Da nogle af tingene er fuldstændig det samme). Endnu engang opdeler jeg koden i små bider, så det er til at finde rundt i.

line-height:20px; Dette er højden på linjerne (gør at du kan have længere imellem linjerne når du skriver noget). I dette tilfælde er linjehøjden sat til "20" som er et forholdsvis højt tal, men denne højde stemmer overens med skriftstørrelse valget. Du kan altid ændre "20" til en anden højde, fx. "9".

font-weight:bold; Denne koder skriften til automatisk at være skrevet med fed

background-color: #ffffff; Denne kode bestemmer hvilken baggrundsfarve der skal være i dit tables overskrift. I dette tilfælde er der valgt hvid (#ffffff), denne farve kan du selvfølgelig erstatte med hvilken som helst farve. Du erstatter bare den nuværende farvekode (ffffff) med fx. sorts farvekode, som er "000000".

text-align:left; Overstående kode, styler i hvilken side skriften skal være placeret. "left" (venstre) kan erstattes med "right" (højre) eller "Center" (i midten).

border-bottom:1px solid #ffffff; Overstående kode, laver en linje som danner bund for din tables. Tykkelsen af linjen kan tilpasses dit ønske ved at rette på "1px". Fx. kan du ændre den til "2px". Overstående kode gør også at det ikke er en stiblet linje. Hvis du ønsker en stiblet linje skal du erstatte "solid" med "dashed". I dette tilfælde er der valgt hvid (#ffffff), denne farve kan du selvfølgelig erstatte med hvilken som helst farve. Du erstatter bare den nuværende farvekode (ffffff) med fx. sorts farvekode, som er "000000".

margin:0px; Overstående kode tilpasser hvor stort mellemrum der skal være imellem hvert ord (udover det normale). I dette tilfælde er der valgt "0px" hvilket vil sige at der ikke er tilføjet størrer mellemrum imellem ordene. Dette tal kan selvfølgelig erstattes af det antal px. du vil have til at være imellem hvert ord. Fx. "9px".

letter-spacing:3px; Overstående kode tilpasser hvor stort mellemrum der skal være imellem hvert bogstav. I dette tilfælde er der valgt "3px" hvilket hvilket ikke er så forfærdelig meget i forhold til hvordan mellemrummet normalt er imellem bogstaverne.. Dette tal kan selvfølgelig erstattes af det antal px. du vil have til at være imellem hvert ord. Fx. "9px".

.

Styling af et tables indhold
Nu er det indholdet i selve tablesne i sidebaren vi lavede som skal styles. Der kan selvfølgelig tilføjes så mange andre funktioner (Som fx. der er gjort i overskriften), men det lader jeg op til dig, selv at tilføje hvis du ønsker. Hvis du har læst de andre punkter, så ved du forhåbentlig efterhånden hvad de forskellige ting betyder, derfor ser jeg ingen grund til at vi gennemgår det yderligere, udover at du nu ved at dette stykke af den fulde kode, er det stykke som bestemmer tablets indholds farver, skrifttype mm.
.

Nu er det indholdet i selve tablesne i sidebaren vi lavede som skal styles. Der kan selvfølgelig tilføjes så mange andre funktioner (Som fx. der er gjort i overskriften), men det lader jeg op til dig, selv at tilføje hvis du ønsker.

.menuen { font-size:9px; background:#ffffff; color: #000000; font-family: tahoma; border-bottom:1px solid #ffffff; } Hvis du har læst de andre punkter, så ved du forhåbentlig efterhånden hvad de forskellige ting betyder, derfor ser jeg ingen grund til at vi gennemgår det yderligere, udover at du nu ved at dette stykke af den fulde kode, er det stykke som bestemmer tablets indholds farver, skrifttype mm.

.

Styling af links
Nu skal vi style hvordan linksne på din side skal se ud. Du lære hvordan linksne skal se ud når de ikke er brugt endnu, når de er under brug, når du hovér med musen, osv. osv. Lige kort vil jeg fortælle at "a:link" er når linket endnu er urørt. "a:visited" er når linket er besøgt. "a:active" er når linket er under brug. "a:hover" er når du føre musen hen over linket. Jeg gennemgår den ene af linjerne i koden, da de andre så giver sig selv. Udfra "color: #000000;" kan du ændre linkets farve, ved at ændre farvekoden. Udfra "Text-decoration: none;" kan du tilføje text decorationer (Understreget linje, eller stiblet linje) ved at fx. ændre "none;" til fx. "1px dashed #000000;" , eller "underline #000000;". Underline er en sort linje under skriften (farven kan ændres ved at ændre farvekoden bagved), og dashed er en sort stiblet linje (farven kan ændres ved at ændre farvekoden bagved). "border-bottom:0px solid #000000; " er også en underlinje under teksten. Den er på 0px hvilket vil sige at den faktisk slet ikke er synlig. Hvis den var synlig ville du kunne se at den var sort da farvekoden sort (#000000) står bagved. Du kan altid ændre tykkelsen af underlinjen ved at ændre "0px" til fx. "9px". Farven kan også altid ændres. Dette kan du gøre ved at ændre farvekoden fra sort (#000000) til fx. hvid (#ffffff). Solid kan også erstattes med dashed hvis du ønsker stiblet linje under dine link. Grunden til at du har mulighed for at lave Underlinje/stibletlinje to steder, er til hvis du ønsker begge dele. Hvis du fx. placere "dashed" som text-decoration, vil den ligge ovenover "solid" som i dette tilfælde er bundlinjen.
.

Nu skal vi style hvordan linksne på din side skal se ud. Du lære hvordan linksne skal se ud når de ikke er brugt endnu, når de er under brug, når du hovér med musen, osv. osv.

a:link {color: #000000; text-decoration: none; border-bottom:0px solid #000000; } a:visited {color: #000000; text-decoration: none; border-bottom:0px solid #000000; } a:active {color: #000000; text-decoration: none; border-bottom:0px solid #000000; } a:hover {color: #000000; text-decoration: none; border-bottom: 1px dashed #000000;} Lige kort vil jeg fortælle at "a:link" er når linket endnu er urørt. "a:visited" er når linket er besøgt. "a:active" er når linket er under brug. "a:hover" er når du føre musen hen over linket. Jeg gennemgår den ene af linjerne i koden, da de andre så giver sig selv.

a:link {color: #000000; text-decoration: none; border-bottom:0px solid #000000; } Udfra "color: #000000;" kan du ændre linkets farve, ved at ændre farvekoden. Udfra "Text-decoration: none;" kan du tilføje text decorationer (Understreget linje, eller stiblet linje) ved at fx. ændre "none;" til fx. "1px dashed #000000;" , eller "underline #000000;". Underline er en sort linje under skriften (farven kan ændres ved at ændre farvekoden bagved), og dashed er en sort stiblet linje (farven kan ændres ved at ændre farvekoden bagved). "border-bottom:0px solid #000000; " er også en underlinje under teksten. Den er på 0px hvilket vil sige at den faktisk slet ikke er synlig. Hvis den var synlig ville du kunne se at den var sort da farvekoden sort (#000000) står bagved. Du kan altid ændre tykkelsen af underlinjen ved at ændre "0px" til fx. "9px". Farven kan også altid ændres. Dette kan du gøre ved at ændre farvekoden fra sort (#000000) til fx. hvid (#ffffff). Solid kan også erstattes med dashed hvis du ønsker stiblet linje under dine link.
Grunden til at du har mulighed for at lave Underlinje/stibletlinje to steder, er til hvis du ønsker begge dele. Hvis du fx. placere "dashed" som text-decoration, vil den ligge ovenover "solid" som i dette tilfælde er bundlinjen.

.

Styling af scollbars
Styling af scoolbars er meget simpel. Find stedet i den fulde kode som ser således ud: Du ændre bare farvekoderne ovenover til de ønskede farver. Hvis du ikke er klar over hvad de forskellige ting er, så kommer der lige et par hurtige oversættelser her, til hjælp: scrollbar-face-color: = Scrollbarens "hovedfarve" (den dims der køre op og ned, når du scroller) scrollbar-shadow-color: = Scrollbarens skygges farve scrollbar-highlight-color: = Farven som scrollbaren er "optegnet" med. scrollbar-3dlight-color: = Det lys som gør at scrollbaren virker 3D agtigts' farve scrollbar-arrow-color: = Scrollbarens piles farve scrollbar-darkshadow-color:= Endnu en skygge på scrollbaren (Denne gang den mørkeste af dem) scrollbar-track-color: = Scrollbarens farve Nu skulle dit stylesheet være færdig. Så skal du bare gemme den (som tidligere nævnt skal navnet være "style.css"). Stylesheetet skal være gemt i din rodmappe. Du kan nu gå ind og se hvilke ændringer der er sket i din header ved at klikke ind på http://dinside.dk/header.php . hvis der opstår problemer du ikke selv kan løse, eller du mener der er en fejl eller misledning i min tutorial, er du velkommen til at kontakte mig.
.

Styling af scoolbars er meget simpel. Find stedet i den fulde kode som ser således ud:

BODY{ scrollbar-face-color:000000; scrollbar-shadow-color:ffffff; scrollbar-highlight-color:#000000; scrollbar-3dlight-color:000000; scrollbar-arrow-color:#FFFFFF; scrollbar-darkshadow-color:000000; scrollbar-track-color:#FFFFFF; } Du ændre bare farvekoderne ovenover til de ønskede farver. Hvis du ikke er klar over hvad de forskellige ting er, så kommer der lige et par hurtige oversættelser her, til hjælp:
scrollbar-face-color: = Scrollbarens "hovedfarve" (den dims der køre op og ned, når du scroller)
scrollbar-shadow-color: = Scrollbarens skygges farve
scrollbar-highlight-color: = Farven som scrollbaren er "optegnet" med.
scrollbar-3dlight-color: = Det lys som gør at scrollbaren virker 3D agtigts' farve
scrollbar-arrow-color: = Scrollbarens piles farve
scrollbar-darkshadow-color:= Endnu en skygge på scrollbaren (Denne gang den mørkeste af dem)
scrollbar-track-color: = Scrollbarens farve

Nu skulle dit stylesheet være færdig. Så skal du bare gemme den (som tidligere nævnt skal navnet være "style.css"). Stylesheetet skal være gemt i din rodmappe. Du kan nu gå ind og se hvilke ændringer der er sket i din header ved at klikke ind på http://dinside.dk/header.php .

hvis der opstår problemer du ikke selv kan løse, eller du mener der er en fejl eller misledning i min tutorial, er du velkommen til at kontakte mig.