En stor brist I HTML som många upplevt är att det inte har varit så enkelt att ha kontroll över var text och bilder på skärmen. Man har fått använda sig av tabeller, tabeller i tabeller, listor och andra knep för att styra utformningen på sidan. Med hjälp av CSS har man större möjligheter att utforma sina sidor än i HTML.
Marginaler anger mellanrummet mellan ett element och andra element eller skärmkanten. Egenskapen för detta heter margin. Här nedan följer egenskapens olika alternativ.
Denna egenskap bestämmer toppmarginalen för ett element. Egenskapen kan ett längdvärde, ett procentvärde eller ett autovärde. Ett exempel:
H1 { margin-top: 3em }
Denna egenskap bestämmer högermarginalen för ett element. Egenskapen kan ett längdvärde, ett procentvärde eller ett autovärde. Ett exempel:
P { margin-right: 11% }
Denna egenskap bestämmer bottenmarginalen för ett element. Egenskapen kan ett längdvärde, ett procentvärde eller ett autovärde. Ett exempel:
H1 { margin-bottom: 5px }
Denna egenskap bestämmer vänstermarginalen för ett element. Egenskapen kan ett längdvärde, ett procentvärde eller ett autovärde. Ett exempel:
P { margin-left: 15mm }
Denna egenskap är ett kortkommando för att bestämma margin-top, margin-right, margin-bottom, och margin-left på ett och samma ställe i formatmallen. Om fyra längdvärden är specifierade tillämpas dom på respektive topp, höger, botten och vänstermarginal. Om endast ett värde är angivet tillämpas det på alla sidor. Om det är två eller tre värden angivna, tas det felande värdet från den motsatta sidan.
P { margin: 2em } /* Alla marginaler sätts till 2em */
P { margin: 1em 2em } /* top & bottom=1em, right och left=2em */
P { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em left=2em */
P { margin: 1em 2em 3em 4em } /* top=1em, right=2em, bottom=3em left=4em */
Den här egenskapen åstadkommer ett tomt utrymme mellan själva elementet och texten. Den egenskap som avgör vilken tjocklek som stoppningen ska ha kallas padding. Här nedan följer egenskapens olika alternativ.
Denna egenskap bestämmer toppstoppningen för ett element. Egenskapen kan ett längdvärde och ett procentvärde. Ett exempel:
P { padding-top: 1em; background: yellow }
Det här är ett exempel på padding-top. Det tomma utrymmet mellan själva elementet och texten blir i överkanten 1em.
Denna egenskap bestämmer högerstoppningen för ett element. Egenskapen kan ett längdvärde och ett procentvärde. Ett exempel:
P { padding-right: 150px; background: yellow }
Det här är ett exempel på padding-right. Det tomma utrymmet mellan själva elementet och texten blir i högerkanten 150px.
Denna egenskap bestämmer bottenstoppningen för ett element. Egenskapen kan ett längdvärde och ett procentvärde. Ett exempel:
P { padding-bottom: 5mm; background: yellow }
Det här är ett exempel på padding-bottom. Det tomma utrymmet mellan själva elementet och texten blir i underkanten 5mm.
Denna egenskap bestämmer vänsterstoppningen för ett element. Egenskapen kan ett längdvärde och ett procentvärde. Ett exempel:
P { padding-left: 15%; background: yellow }
Det här är ett exempel på padding-left. Det tomma utrymmet mellan själva elementet och texten blir i vänsterkanten 15%.
Denna egenskap är ett kortkommando för att bestämma padding-top, padding-right, padding-bottom, och padding-left på ett och samma ställe i formatmallen. Om fyra längdvärden är specifierade tillämpas dom på respektive topp, höger, botten och vänsterstoppning. Om endast ett värde är angivet tillämpas det på alla sidor. Om det är två eller tre värden angivna, tas det felande värdet från den motsatta sidan.
P { padding: 1em; background: yellow }
Det här är ett exempel på padding. Det tomma utrymmet mellan själva elementet och texten blir i alla kanter 1em.
Den här egenskapen gör att det skapas en ram runt elementet. Med egenskapen border-style bestämmer man vilken typ av ram som ska visas. Egenskapen border används för att bestämma tjocklek, färg och även typ på ramen.
Denna egenskap bestämmer tjockleken på ramen för ett element. Egenskapen kan ha värdena thin (tunn), medium (medium), thick (tjock) och ett längdvärde.
Denna egenskap bestämmer färgen på ramen för ett element. Egenskapen kan ha värdena color ( en färg), eller trasparent (ramen är transparent men kan ha en färg).
Denna egenskap bestämmer vilken typ ramen för ett element ska ha. Egenskapen kan ha värdena dotted, dashed, solid, double, groove, ridge, inset och outset.
Det här är ett exempel på dotted. Här är det meningen att en ram av punkter ska visas runt
stycket, men i Explorer 5 visas endast en vanlig ram. Skriv:
P { padding: 0.5em; margin: 1em; background: aqua; border: dotted; font-family: arial }
Det här är ett exempel på dashed. Här är det meningen att en streckad ram ska visas runt stycket,
men i Explorer 5 visas endast en vanlig ram. Skriv:
P { padding: 0.5em; margin: 1em; background: aqua; border: dashed; font-family: arial }
Det här är ett exempel på solid. Här blir det en homogen ram runt stycket. Skriv:
P { padding: 0.5em; margin: 1em; background: aqua; border: solid; font-family: arial }
Det här är ett exempel på double. Här blir det en dubbel ram runt stycket. Skriv:
P { padding: 0.5em; margin: 1em; background: aqua; border: double; font-family: arial }
Det här är ett exempel på groove. Här blir det en ram som ser ut som den är uthuggen ur
dokumentet. Skriv:
P { padding: 0.5em; margin-left: 60px; margin-right: 50px; background: aqua; border: groove; font-family: arial }
Det här är ett exempel på ridge. Här blir det en ram som ser ut som den kommer ut från
dokumentet. Skriv:
P { padding: 0.5em; margin: 1em; background: aqua; border: ridge; font-family: arial }
Det här är ett exempel på inset. Här ser det ut som att hela stycket ser ut som det var inbäddat
i dokumentet. Skriv:
P { padding: 0.5em; margin: 1em; background: aqua; border: inset; font-family: arial }
Det här är ett exempel på outset. Här ser det ut som att hela stycket ser ut som det kommer ut
från dokumentet. Skriv:
P { padding: 0.5em; margin: 1em; background: aqua; border: outset; font-family: arial }
Den här egenskapen gör att man får en toppram på elementet. Exempel
P { padding: 0.5em; background: aqua; border-top: ridge thick red; font-family: arial }
Här får man en ram på elementets uppkant.
Den här egenskapen gör att man får en högerram på elementet. Exempel
P { padding: 0.5em; background: aqua; border-right: groove thick red; font-family: arial }
Här får man en ram på elementets högerkant.
Den här egenskapen gör att man får en bottenram på elementet. Exempel
P { padding: 0.5em; background: aqua; border-bottom: inset thick red; font-family: arial }
Här får man en ram på elementets nederkant.
Den här egenskapen gör att man får en vänsterram på elementet. Exempel
P { padding: 0.5em; background: aqua; border-left: outset thick red; font-family: arial }
Här får man en ram på elementets vänsterkant.
Den här egenskapen är ett kortkommando för att bestämma samma färg och stil för alla ramar på elementet. Exempel
P { padding: 0.5em; background: aqua; border: solid thick red; font-family: arial }
Här får man ramar på elementets alla kanter.
Den här egenskapen, som bestämmer bredden på ett element, kan användas på textelement, men är kanske mest användbar för element av typen bilder. Egenskapen kan ha ett längdvärde, ett procentvärde, eller värdet auto. Bredden kan framtvingas genom att ändra storleken på en bild. Om man ändrar storleken, kommer bildens proportioner att behållas om egenskapen height har värdet auto. Negativa tal är inte tillåtna.
<CENTER>
P { padding: 0.5em; background: teal; border: inset thick teal; width: 300px; font-family: arial; color: white; text-align:left }
</CENTER>
Det här är ett exempel på hur man kan bestämma hur stor bredd ett textelement ska ha.
Den här egenskapen, som bestämmer höjden på ett element, kan användas på textelement, men är kanske mest användbar för element av typen bilder. Egenskapen kan ha ett längdvärde, ett procentvärde, eller värdet auto. Höjden kan framtvingas genom att ändra storleken på en bild. Om man ändrar storleken, kommer bildens proportioner att behållas om egenskapen width har värdet auto. Negativa tal är inte tillåtna.
|
Ursprunglig bild: <IMG SRC="gifs/html/tarning.gif" ALT="tärningar" STYLE="{ float: none }"> |
Förminskad bild med höjden 50 px: <IMG SRC="gifs/html/tarning.gif" ALT="tärningar" STYLE="{ float: none; height: 50px; width: auto }"> |
 |
|
Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.
Denna sida är skriven av Robert Karlsson.
E-post: karlsson.robert@vetlanda.mail.telia.com
Hemsida: http://w1.383.telia.com/~u38302477
Sidan uppdaterades senast:
© Copyright 1999