kaxigt.com

Lästid: 42 minuter

Välkommen till fjärde lektionen!

Så här långt har vi gått igenom css-syntax, class och ID selector samt egenskaperna för font. Nu ska gå vi vidare med själva text-formateringen. Det finns en oändlig mängd olika möjligheter att med css kombinera sin font och text.

Inte nog med att vi kan ge varje font sitt speciella utseende, form och storlek, vi kan därutöver styra hur fonten ska bete sig i olika textsammanhang.

• text-indent
• text-decoration
• text-align
• text-transform
• letter-spacing
• line-height
• word-spacing
• textfärg och bakgrundsfärg på en text
• No-wrap, radbrytning och paginerade dokument

Text-indent

Text-indent betyder indrag av text i den första meningen på varje stycke och används därför alltid med paragrafen p. Indraget ligger från vänster till höger och med css kan man sedan styra hur mycket som den första meningen i varje nytt stycke ska vara indraget.

I detta stycke har den här första meningen en text-indent (indragning) på 50px. Som vi kan se så är det bara den första meningen i stycket som formateras. Resterade meningar berörs inte såvida du inte väljer att göra ett nytt stycke. CSS-syntax:

p {text-indent:50px;}

Text-decoration

Text-decoration anger om texten ska formateras med värdet none, overline, underline, line-through och blink. Vill du till ta bort linjen exempelvis under dina länkar så anger du denna css-syntax:

a {text-decoration: none;}

Selektorn a utgör här ett globalt värde för a:link, a:visited, a:hover, a:active och det innebär att om du anger värdet none så kommer aldrig linjen synas, inte ens när du för musen över länken. Dock man kan för varje pseudo-class ange ett specifikt värde.

Css-syntaxen för en pseudo-class:

selector:pseudo-class {property:value;}

För vår del när vi anger våra länkar kommer det i praktiken se ut så här om vi väljer olika egenskaper för varje pseudo-class:

a:link{text-decoration: none;}

a:visited{text-decoration: line-through;}

a:hover{text-decoration: underline;}

a:active{text-decoration: none;}

Selektorn är alltså a, pseudo-classen är :link, :visited, :hover, :active och kombinationen skrivs innan klammern, därefter kommer property (egenskap) och value (värde) precis som vi tidigare har lärt oss.

När vi skapar en pseudo-class så följer alltså ett kolon omedelbart efter selektorn (HTML-elementet) som skiljer detta från vår pseudo-class.

Vill du lägga en linje under på exempelvis rubriken h1 så anger du följande:

h1 {text-decoration: underline;}

Vill du hellre lägga linjen över rubriken h1 så anger du detta istället:

h1 {text-decoration: overline;}

Låt oss säga att du har en artikel som delvis har reviderats, vissa delar i artikeln är inte längre aktuella, men du vill inte skriva om eller ta bort artikeln. Då kan du skapa en överstrykning på de delar som är inaktuella.

Universum består av stjärnor och planeter och solen kretsar runt jorden. Css-syntax för ett helt stycke:

p {text-decoration: line-through;}

Css-syntax som class-attribut:

.line-through {text-decoration: line-through;}

Universum består av stjärnor och planeter <span class="line-through">och solen kretsar runt jorden</span>

Vill du skriva in din css direkt i html-koden använder du ett dataavsnitt speciellt för css och det heter style följt av property (egenskap) och value (värdet). Utförligare information finns i kommande lektioner, dock kan du kika på koden här under.

Universum består av stjärnor och planeter <span style="text-decoration:line-through;">och solen kretsar runt jorden</span>

Text-align

Text-align använder vi när vi vill positionera en text. Alignment anger hur texten ska vara ställd med värdet text-align:right; text-align:left; text-align:center; eller text-align:justify;. Css-syntax:

p {text-align: left;}

Den här texten är vänsterställd. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

p {text-align:right;}

Den här texten är högerställd. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

p {text-align:center;}

Den här texten är centrerad. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

p {text-align:justify;}

Den här texten är ställ i justify. Texten har raka marginaler på alla sidor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo.

Text-transform

Text-transform förändrar bokstävernas utseende (ex till enbart versaler) genom att vi kan använda värdet none, capitalize, lowercase och uppercase.

Värdet capitalize gör så att varje första bokstav i varje nytt ord blir stor bokstav, det vill säga en versal. Hej Hur Mår Du Idag?

Css-syntax:

p {text-transform:capitalize;}

Lowercase däremot gör alla bokstäver gemena, till små bokstäver. hej hur mår du idag?

Css-syntax:

p {text-transform:lowercase;}

Motsatsen till lowercase är således uppercase. Värdet uppercase gör om alla bokstäver till versaler. HEJ HUR MÅR DU IDAG?

Css-syntax:

p {text-transform:uppercase;}

Vid värdet none har man ingen transformation utan texten kommer att visas som den är tänkt att presenteras i html-koden.

p {text-transform:none;}

Letter-spacing

Letter betyder ord och space utrymme. Med letter-spacing anger man alltså avståndet mellan bokstäverna (ökar eller minskar).

I den här meningen har jag angett 3 pixlars avstånd mellan bokstäverna.

p {letter-spacing:3px;}

I den här meningen har jag däremot angett -1 pixlars avstånd mellan bokstäverna. De kommer därför att stå närmare varandra än ”normaltexten”.

p {letter-spacing:-1px;}

Line-height

zdiv class=”inform”>I ett stycke och när man skriver en text är det bra att ha ”luft” mellan raderna för den ska vara läsbar och användarvänlig. Avståndet mellan raderna kallas för line-height – en exakt översättning är linjehöjd men vi säger radavstånd.

Line-height är med andra ord avståndet mellan baslinjerna. Brukar du skriva dokument i MS Word eller Open Office anger du kanske 1 1/2 radavstånd. Det motsvarar 150%. Utifrån tillgänglighet och standardisering är det en bra idé att använda just procentenheter.

p {line-height:150%;}

Word-spacing

Om man med letter-spacing kunde öka eller minska avståndet mellan bokstäverna så har word-spacing en liknande funktion – man kan öka avståndet mellan orden. Låt oss som vanligt se på ett exempel:

I denna text har jag angett word-space med 25 pixlar. Som du ser så blir det ett större avstånd mellan orden är vanligt.

p {word-space:25px;}

Textfärg och bakgrundsfärg på en text

Det finns några viktiga saker man bör tänka på när man skriver för webben. Om vi tittar till användbarheten så ska det finnas kontrast mellan textfärg och sidans bakgrundsfärg, men man kan inte välja vilken textfärg eller bakgrundsfärg som helst.

Det ska vara lugnt för ögat att läsa en text, likaså bör man tänka på de som är färgblinda. Därför bör man undvika att blanda röda eller gröna färger tillsammans – likaså kombinationen gult och blått eftersom de är komplementfärger till grönt.

Ditt val av textfärg kan med andra ord ställa till problem om det vill sig illa. En bra kombination är att använda färgerna #333 på texten och #f8f8f8 på sidans bakgrundsfärg. Vit bakgrund kan faktiskt också vara arbetsamt för ögat.

Ibland kanske man vill framhäva vissa partier eller rubriker i en text, då kan man ange en bakgrundsfärg på själva textavsnittet.

Css-syntax för textfärgen är denna:

p {color:#333;}

Så har vi det här med bakgrundsfärg till texten. Vi ska här se på två alternativ, i det första alternativet lägger vi in textens bakgrundsfärg som en egenskap i selektorn och i det andra använder vi ett class-attribut.

Här har jag lagt in en vit bakgrundsfärg som en global egenskap.

Css-syntax:

p {background-color:#fff;}

Här har jag lagt in en vit bakgrundsfärg som ett class-attribut med märkningen span.

Css-syntax:

.highlight {background-color:#fff;}

HTML-koden:

<p><span class="highlight">Här har jag</span> lagt in en vit bakgrundsfärg som ett <span class="hightlight">class-attribut med märkningen span</span></p>

Som ni ser så finns det ingen luft, padding, runt bokstäverna i det sista alternativet, och det vill vi väl ha. Därför lägger vi in en padding.

.highlight {background-color:#fff;padding:5px 5px;}

Som globalt värde

Css-syntax för både textfärg och bakgrundfärg som globalt värde:

p {color:#333; background-color:#fff;}

Som class-selector

Css-syntax för både textfärg och bakgrundfärg som class-selector:

.highlight {color:#333;background-color:#fff;}

No-wrap, radbrytning och paginerade dokument

Skulle man av någon anledning inte vilja ha en radbrytning för sin text kan man använda egenskapen white-space i kombination med no-wrap. Det fungerar så att texten aldrig bryts där den normalt brukar brytas, det vill säga till en ny rad.

Istället så fortsätter den ända tills du bokstavligen sätter punkt genom att avsluta stycket. Jag lägger inte upp ett exempel på detta eftersom det förstör layouten.

Global css-syntax:

p {white-space: nowrap}

Word-break är en egenskap man kan använda när meningarna blir för långa. Då avstavas texten ungefär som när vi avstavar med ett bindestreck. Naturligtvis finns det olika värden som vi kan använda.

Syntaxen ser ut så här:

word-break:  normal | break-all | keep-all | initial | inherit).

normal: här används grundläget för hur ord avstavas enligt avstavningsreglerna.

break-all: alla ord/bokstäver bryts till nästa baslinje.

keep-all: det här värdet är bra att använda om texten innehåller ord som inte bryts, exempelvis kinesiskt, japanskt, och koreanskt teckensnitt. I annat fall fungerar det som normalläget.

initial anger egenskaperna till deras grundläge.

inherit utgår från egenskaperna i word-break som ”föräldraelement” har angivits i något som heter computed value.

Till de här egenskaperna är det inte ovanligt att koppla värdet hyphen – bindestreck, så man tvingar in avstavningen där ordet normalt brukar avstavas.

Nedanstående break-all innebär att vi får en ny radbrytning vid varje bokstav.

p {word-break: break-all;}

   
         H
         Ä
         R
         M
         A
         P
         A

Läs gärna mer om att formatera texten med white-space och word-wrap.

---

Sidbrytning däremot kan vara bra att ha om man vill ha utskriftsvänliga webbsidor. Och det är just till utskrift vi använder denna märkning. Page-break – automatisk sidbrytning – ligger på nivå 2/CSS2.1.

Det finns möjlighet att välja om sidan ska brytas före märkningen, då används egenskapen page-break-before. Men vi måste ju också definiera värdet för detta och då har vi fem värden att välja mellan; auto | always | avoid | left | right.

Auto har ingen alls påverkan på texten utan den bryts där sidan normalt tar slut. I detta fall vill vi att sidan alltid ska brytas innan märkningen.

Css-syntax för denna är då:

.page-break {page-break-before: always;}

HTML-koden:

<div class="page-break">Här kommer texten </div>

Alternativ två är att lägga in värdet så att sidbrytningen kommer efter märkningen. Även här har vi samma värden att välja mellan; auto | always | avoid | left | right. Givetvis vill att regeln alltid ska gälla.

Css-syntax:

.page-break {page-break-after: always;}

HTML-koden:

<div class="page-break">Här kommer texten </div>

Låt oss säga att du har en hel del text och vill dela upp sidan i olika stycken. Då skriver man sin html-kod så här:

<p class="page-break">Här kommer texten</p>

Vissa webbläsare stöder inte kombinationen page-break-after tillsammans med taggarna <br>, <br /> eller <hr>, <hr />. Tänk på detta.

Hur fungerar detta i praktiken?

Via CSS-regeln @page så finns det en möjlighet att bryta ett dokument till att bli flera bläddringsbara segment, i dessa kan du sedan styra hur marginalerna ska se ut vid utskriften, storleken, och i vilka riktningar segmenten ska ligga.

@page-regeln innebär att du också kan presentera segmenten med pseudo-classer. En del väljer att koppla sina märkningar till rubriker – sidan bryts då antingen före eller efter rubriken.

Andra tycker hellre om att dela in varje sida i ”boxar” och från dem koppla sin sidbrytning. Vad man väljer är alltså en smaksak. Dock är det viktigt att veta att pagineringen inte fungerar om boxarna har absolut position.

När vi som använder WordPress skriver en sida (Pages) eller post kan vi ju använda en knapp i quicktags som heter page och more om vi vill dela upp innehållet på fler sidor, till exempelvis sidan 1, sidan 2, sidan 3 och så vidare. Precis som jag har gjort i denna guide.

< !–nextpage– > och < !–more–> knapparna har samma funktion som paginationen Page-break. Jonathan Snook använder alltid följande märkning för att inte kommentarerna också ska följa med i utskriften:

#comments {page-break-before:always;}

Page-break-before gör alltså en sidbrytning före ett element, t ex H1, eller en box medan page-break-after gör en sidbrytning efter ett element, t ex DIV, eller en box. Denna typ av dokumentpaginering lämpar sig i huvudsak till media type print och projection.

Förenklat media-type dokument för utskriftsvänliga sidor

<html>
<head>
<title>Paginering</title>
<style>
@media print {div.pagebreak{page-break-before: always}}
</style>
</head>
<body>
Sidan 1
<div class="pagebreak">Här kommer texten</div>
Sidan 2
<div class="pagebreak">Här kommer ytterligare lite text</div>
Sidan 3
</body>
</html>

Textformateringar

color	anger textfärgen
letter-spacing	anger avståndet mellan bokstäverna (ökar eller minskar)
text-align	anger hur texten ska vara ställd med värdet text-align:right; text-align:left; text-align:center; text-align:justify(raka marginaler på alla sidor);
text-decoration	anger om texten ska formateras med värdet none, overline, underline, line-through, blink
text-indent	ger ett indrag på första meningen
text-transform	förändrar bokstävernas utseende (ex enbart versaler) genom att använda värdet capitalize, lowercase, uppercase
word-spacing	ökar eller minskar avståndet mellan orden
line-height	avståndet mellan baslinjen, ex mellan varje rad i ett stycke

I lektion 5 ska vi kika på bakgrunder av alla de slag.

Välkommen dit!