HTML & CSS BODY - Grundstyling
När man vill styra den övergripande layouten på sin webbplats gör man det enklast genom att skapa en extern stilmall som man länkar till från de sidor man vill ska omfattas av mallen. Man kan också skriva in stilmallen i direkt sidans huvud. Läs mer om detta på sidan: Hur infogas CSS?
Taggarna skrivs in på Html-sidan precis som vanligt men egenskaperna som styr sidans utseende skrivs in i Stilmallen.
Man kan också skapa egna klasser som man ger egenskaper och sedan anropar från Html-dokumentet.
Vill du sedan ändra layouten på sidan behöver du bara ändra egenskaperna i Stilmallen. Vips!
Hela din webbplats kan få ett nytt utseende.
Själva css-koden ser likadan ut vilken metod du än använder. På den här sidan beskrivs några strategier som är användbara när du vill formatera din sidas övergripande utseende med CSS.
Inledning
Eftersom allt innehåll som syns för besökaren på en webbsida ska skrivas in mellan taggarna <body> och </body> i HTML-dokumentet - kan det vara bra att inledningsvis ge sidan en grundläggande stajling genom att skriva in några regler i stilmallen med body som selector.
Det innebär i praktiken att man anger en övergripande formatering - som kommer att gälla för hela webbsidan.
Textens Egenskaper
Till att börja med kan det vara bra att bestämma sig för hur man vill att texten på hela sidan ska se ut. Det gör man genom att använda body som selector i stilmallen.
Här anges textens storlek, teckensnitt och färg. Det som kan vara bra att hålla i minnet är att man i body bör använda sig av enheten procent när man bestämmer textens storlek. Detta för att undvika problem senare...
Så här kan det se ut i stilmallen:
body {
font-size: 76%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
|
Ovanstående CSS-kod ger instruktioner till webbläsaren om att koderna inom klamrarna { } kommer att omfatta all text som skrivs in mellan <body> och </body> i HTML-dokumentet - om man inte anger något annat.
Så här funkar det:
| CSS | Förklaring |
|---|---|
body { |
Startar den css-kod som har body som selector. |
font-size: 76%; |
Textens storlek ska vara 76% av webbläsarens inställning för textstorlek. |
font-family: Verdana, Arial, Helvetica, sans-serif; |
Teckensnittet ska vara Verdana i första hand. De andra är alternativ. |
color: #000000; |
Textens färg ska vara svart: #000000. |
} |
Avslutar den css-kod som har body som selector. |
Sidans Marginaler
Med följande egenskaper anges sidans marginaler i Stilmallen.
margin-top - avstånd från innehållet till sidans top
margin-right - avstånd från innehållet till sidans högra kant
margin-bottom - avstånd från innehållet till sidans slut - botten
margin-left - avstånd från innehållet till sidans vänstra kant
Så här skrivs de in i stilmallen:
body {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
|
- Högermarginalens placering kommer att påverkas av upplösningen på besökarens skärm.
- Här anges marginalerna med det fasta måttet pixlar. Men det går också bra att använda t.ex. em eller %.
För att sidmarginalerna ska se likadana ut i alla webbläsare bör man nollställa sidans marginaler och padding innan man anger själva marginalerna.
Så här:
body {
padding: 0; margin: 0;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
|
Komprimerad Deklaration: Margin
I stället för att skriva ut alla koderna ovan kan man använda en s.k: Short hand declaration. Vill man ange marginaler används: margin.
Koden nedan tolkas på precis samma sätt som den ovan.
body {
padding: 0; margin: 0;
margin: 10px 20px 10px 20px;
}
|
- Ovan anges marginalerna i ordningen: top, right, bottom, left.
OBS!
Riktigt, riktigt gamla webbläsare klarar inte av att tolka komprimerade deklarationer, Short hand declarations.
Bläddringslister, Rullningslister, Scrollbars - overflow
Med egenskapen overflow anges vad som ska hända med innehållet på en sida om det tar för stort utrymme i anspråk på bredden eller höjden för att få plats på det angivna utrymmet - här: Själva webbläsarfönstret.
Eftersom egenskapen i exemplen nedan knyts till taggen body gäller det för själva sidan. Men det går också bra att använda egenskapen owerflow med andra selektorer - t.ex. en box, tabell, iframe o.s.v.
Nedan några exempel på hur man skriver i stilmallen.
overflow: auto
Framkallar bläddringslister vid behov - vilket är standard som egentligen inte behöver anges - antingen vertikalt, horisontalt eller både och:
body { overflow: auto; }
|
- Observera att Internet Explorer som standard alltid visar en vertikal "tom" bläddringslist på sidan även om det inte behövs...
overflow: hidden
Döljer alla bläddringslister:
html, body { overflow: hidden; }
|
- html, body - anges för att det här ska fungera för hela sidan i flertalet webbläsare.
overflow: scroll
Framkallar bläddringslister både vertikalt och horisontalt oavsett om det behövs eller inte:
body { overflow: scroll; }
|
- Scroll för hela sidan fungerar dåligt i Opera som kommer att visa dubbla bläddringslister.
Internet Explorer
I det här sammanhanget har du kanske stött på egenskaperna: overflow-x och overflow-y.
De tillhör inte standarden och fungerar bara i Internet Explorer! De används i första hand för att ta bort den vertikala eller horisontala listen, men kan användas med alla andra värden ovan också.
Använder du dessa egenskaper kommer det alltså inte att fungera för alla dina besökare. Vill man envisas med att använda dem ändå gör man så här:
Döljer horisontal bläddringslist i IE:
html, body { overflow-x: hidden; }
|
Dölj vertikal bläddringslist i IE:
html, body { overflow-y: hidden; }
|
TIPS!
När man skapar sin sidas layout kan man ibland få problem med sina bläddringslister. Anger man ingen overflow ALLS visas ju bläddringslister vid behov. Men eftersom en del sidor är kortare än andra kan resultatet bli att det skapas en vertikal bläddringslist på vissa sidor men inte på andra.
Då kan man få intrycket att layouten hoppar i sidled när man bläddrar mellan sidorna på sajten - eftersom listen finns där ibland och försvinner ibland. Inte så snyggt. Håll här i minnet att en del besökare numer ser din sida i mycket hög upplösning!
Anger man då "overflow: scroll" visas BÅDE vertikal och horisontal bläddringslist - fast den horisontala kanske inte behövs. Inte så snyggt det heller! Dessutom fungerar inte värdet "scroll" tillfredställande i Opera och IE.
Nämnas bör att problemet inte uppstår i Internet Explorer som i detta fall alltid visar en "tom" vertikal list.
Här är i alla fall ett litet trix man kan ta till så att det blir likadant i alla webbläsare:
html { height: 101%; }
|
Resultatet blir att det oavsett sidans längd alltid visas en vertikal bläddringslist oavsett upplösning på skärmen. Fiffigt, va?
Avslutningsvis
Så här skulle det kunna se ut i stilmallen med ovanstående formateringar:
html { height: 101%; }
body {
padding: 0; margin: 0;
margin: 10px 20px 10px 20px;
overflow: auto;
font-size: 76%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}
|
