Text och Fonter
Text är nog det vanligaste innehållet på sidor och det är därför inte konstigt att det finns många alternativ för att stilsätta text. Det finns ju en hel del sätt att göra det redan i HTML men eftersom meningen med dessa är inte att få fram sjävla stilen utan mer att ange meningen så bör dessa aldrig användas för stilsättning. Flera av metoderna att sätta stil på text gör egentligen samma sak men man skiljer på själva stilen och innehållet vilket är väldigt viktigt.
Ett vanligt sätt, som de flesta med lite datorvana känner till, är att helt enkelt byta font. Det är i sig ganska enkelt men det finns också en hel del komplikationer med det. Alla plattformar stödjer inte alla fonter och faktum att hitta någon font som har generellt stöd är inte alltför enkelt men lyckligtvis finns det ganska simpla lösningar för detta problem. Fonter brukar delas upp i olika kategorier och jag kommer exemplifiera tre av dom: Serif, Sans-serif och Monospace. Monospace fonter är nog den enklaste att förklara för vad dessa fonter har gemensamt är helt enkelt att varje tecken har precis samma bredd. Serif och Sans-serif skiljer genom att Sans-serif är lite mer minimalistisk och är i allmänhet lite enklare att läsa (dock ej alltid bekvämare).Denna text är skriven i en Sans-serif font medans Denna är skriven i en Serif font och Denna är skriven i en Monospace font. Texten på denna sida är skriven i Times New Roman som är en Serif font. För att ange font i CSS så skriver man helt enkelt: font-family:Courier;. Det kanske har märkts att när det kommer kodexempel så byts det till en monospace font, detta är till för att kod inte alltid är så lätt att läsa flytande och därför är det bra med simplistisk font. Man kan, och bör, ange fallbacks för fonter utifall att den som läser det inte har stöd för just den fonten. Det görs helt enkelt med att skriva flera på rad separerade med ett ",". Ex: font-family:Scala, "Times New Roman", Times;. Vad som då händer att webläsare använder den första font den kan. Det är bra att alltid lägga en font som har universiellt stöd sist för säkerhets skull. Som synes så hamnade Times New Roman inom citattecken och det är för att namnet på fonten innehåller tecken (i detta fall mellanslag) som kräver dem. Om man har något tecken som inte är en bokstav måste man ha citattecken.
För att ändra storleken på en font så skriver man font-size:...;. Värdet man anger kan vara en av de olika enhetsmåtten som gicks igenom i tidigare kapitel eller så det vara ett nyckelord. Nyckelord är ett enkelt ord som relaterar till något förbestämt, brukar vara väldigt logiska och fungerar till många olika typer av stilsättning, inte bara fontstorlek. Så värdet man ger till font-size skulle kunna vara "16px" (för pixlar), 2cm (för centimeter), large, 2em (dubbelt så stor som den använda fonten) eller kanske 75% (75% av fonten för parent). Notera att om man använder sig av procent så är det en procent av ens förälders storlek vilket betyder att om du ändrar förälderns storlek ändras barnets. Som ett exempel tänkte jag ange två stycken <div> element med font-size:75%; där den sista div har ett <p> element med samma font-size.
Sjuttiofem
Som det syns så blir fonten väldigt snabbt för liten och det är enkelt att glömma bort dessa relative enheter när man bygger sidor. Om inte annat anges så skrivs alla dessa precis som annan stilsättning med attribut:värde;. Alla kan också ha inherit som värde.
Det finns en hel del sätt att ändra stilen på en font på något litet sätt. Nedan kommer exempel på några.
Font-style är för att göra texten snedställd. Det finns tre olika värden och dessa är: normal, italic och oblique.Normal , Italic , Oblique. Som synes så är skillnaden mellan Italic och Oblique inte alltför stor (det kan skilja mer eller mindre med olika fonter) men Oblique har inte samma utbredda stöd som Italic.
Font-variant är till för att göra texten till versaler fast där de bokstäver som inte är specifikt angivna som versaler blir mindre. Möjliga värden är normal och small-caps. Ex: Stockholms Universitet blir Stockholms Universitet.
Font-weight är hur tjocka tecknena ska vara. Värdena man kan använda är: Bold, Bolder, Lighter eller ett numeriskt värde i hela hundratal från 100 till 900 (100,200,300,...,900). Långt ifrån alla fonter har stöd alla dessa alternativ och det är faktiskt svårt att hitta någon som har fullt stöd. Varje duglig font bör ha stöd för åtminstånde Bold.
Font-size-adjust är till för att ha bättre kontroll på fontstorleken när fallback fonterna blir använda. Värdet man anger är en sk aspect rating vilket alla fonter har och är skillnaden i höjd mellan gemena x och versala X. I skrivande stund har bara Mozilla Firefox stöd för denna stilsättning.
Font-stretch är till för ungefär vad det låter som. Det är till för att göra fonten bredare eller smalare. Värdet som anges är ett nyckelord och det finns ganska många av dom: wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded. Ingen av de större webläsarna har i skrivande stund stöd för font-stretch.
Det finns också en hel del möjligheter att stilsätta texten oberoende av fonten. De fungerar på ungefär samma sätt som stilsättning av font men ger lite annorlunda resultat.
Text-align är till för att ställa texten till olika delar av sitt förälderelement. Möjliga värden är: left, right, center eller justify.
Text-decoration är för att lägga till extra dekorationer till text. Ett bra exempel är länkar som per standard blir understrykt. Med text-dekoration kan man välja bort detta eller lägga till det till någon annan text. De möjliga värdena är: Underline, Overline, Line-through, Blink. I skrivande stund saknar Chrome, Internet Explorer och Safari stöd för Blink. Om man skulle vilja bli av med underline för länkar så anger man helt enkelt bara värdet none.
Text-indent är till för att lägga till indentering till första raden i ett stycke text. Värdet anges med de vanliga enheterna.
Första raden blir indenterad 50px.
Andra raden blir det inte.
Text-shadow är till för att lägga till skugga under text. Det finns fyra olika möjliga värden man kan ange och dessa är: horisontell position, vertikal position, utsuddning och färg. Positionerna är då relaterade till texten och utsuddningen menar hur långt ifrån texten utsuddningen sträcks. Position och utsuddning anges i standard enheter och färg i färgangivelse (som gås igenom senare). Om man inte skriver ut ett värde så blir det automatiskt 0. Hur man skriver detta i CSS koden är ganska viktigt och det är inte helt enkelt att förstå vilket värde som hör till vad. Värdena skrivs i den ordning som de skrevs innan. Ex: text-shadow:2px 2px 4px #CC0066;. Så första "2px" är horisontell position, andra "2px" är vertikal position, "4px" är utsuddningens distans och #CC0066 är en hexadecimal färgangivelse. Resultat blir då: skuggad text. Om man t.ex inte vill ange en vertikal position men en utsuddningsdistans så måste man ange 0 för den vertikala positionen annars antar webläsaren att utsuddningen är ett annat värde.
Text-transform är till för att forcera texten till gemena tecken, versala tecken eller ett versalt tecken i början på varje ord. Värdena anges med en av följande: uppercase (för versaler), lowercase (för gemener) eller capitalize (för första bokstav versalt). Ex: Upper, Lower, eller kanske capitalize.
Letter-spacing är för att ändra avståndet mellan tecken. Om man vill minska så anger man bara ett negativt värde. Värdet anges i standard enheter. Bredare avstånd - Smalare avstånd.
Word-spacing är till för att öka eller minska avståndet mellan ord. Värdet anges precis som med letter-spacing. Bredare avstånd mellan orden - Smalare avstånd mellan orden.
Line-height är till för att sätta radavstång. Värdet som anges är en vanlig enhet.
Rad 1
Rad2
Rad 1
Rad2
White-space är till för att ange vad som ska hända med blanktecken. Det finns några olika värden man kan ange och de fungerar ganska annorlunda. Normalt i HTML så trycks blanksteg som är mer än ett i rad ihop till bara ett tecken och det blir radavbrott först när texten inte får plats eller man direkt angivet ett radavbrott med <br>. Med nowrap som värde så blir blanksteg fortfarande bara max ett långt men det blir inte några radavbrott utan ett specifikt <br>. Med pre så beter den sig precis likadant som om man använde HTML taggen <pre>, alltså att alla blanksteg behålls precis som i texten och radavbrott kommer bara om det finns sådana i texten och inte på grund av platsbrist. Med pre-line så försvinner blanksteg och det kommer radavbrott när det behövs men till skillnad från normalt så kommer också radavbrott om de finns i texten. Med pre-wrap så behålls alla blanksteg som i texten och det blir radavbrott av dom angivna i texten men med den skillnaden från pre att det kommer radavbrott där texten inte får plats.
Nowrap: Massa text. Massa text. Massa text. Massa text. Massa text. Massa text.
Pre: Massa text. Massa text. Massa text. Massa text. Massa text.
Pre-Line: Massa text. Massa text. Massa text. Massa text. Massa text.
Pre-Wrap: Massa text. Massa text. Massa text. Massa text. Massa text.
Det finns också några sätt att stilsätta stycken. De två som gås igenom stilsätter antingen första raden eller första ordet i ett stycke.
First-line är till för att ange första raden i ett stycke för stilsättning. När man anger detta i CSS är det lite annorlunda mot hur det brukar fungera. Istället för ett attribut så är det en del av selektorn: p:first-line{...}. Om man vill ange ett id eller en klass går det utmärkt: p#chapter:first-line{...}. Det fungerar precis på samma sätt för first-letter. Resultatet blir då:
Första raden får annan stil.
Andra raden får det inte.
Första bokstaven får annan stil.