⇓ OBS! ⇓

Den där blå remsan nere på botten av sidan innehåller en HTML & CSS redigerare och fungerar så här – om du vill visa/gömma redigeraren kan du göra det genom att klicka på den blå remsan där det står “Klicka här för att visa/gömma redigerare” – klicka på fliken medtexten “HTML Redigerare” och skriv in din HTML, klicka på fliken med texten “CSS Redigerare” och skriv in din CSS och för att se resultat klickar du på fliken där det står “Resultat visas här”.

 

Nu ska vi börja leka med CSS styling, och med det menar jag att formatera element med färg, typsnitt, bredd, höjd och en massa annat roligt!

 

font-egenskap för typsnitt

Vi börjar med font-egenskaper med vilka man anger värden för: storlek, typsnittsfamilj, tjocklek, stil och variant. Med font-egenskaper kan man varkligen göra skillnad på en sida med små medel, så du vinner en hel del på att lära dig font-egenskaperna riktigt bra.

 

font-family

Egenskap för att välja ett/flera specifika typsnitt av typsnittsfamiljer som: serif , sans-serif , monospace, cursive, fantasy m.fl. Om du lägger in flera värden till egenskapen font-family måste dom separeras med ett kommatecken. Teckensnittsnamn som innehåller flera ord med blanktecken emellan måste den omges av enkla citatteck ‘ ‘ eller dubbla ” ”, så att ‘Helvetica Neue’ måste använda citatteck men inte sans-serif, då den inte har någon blanktecken. font-family kan appliceras på alla text selektorer.

font-family tillåter en prioriterad lista över font familjenamn och / eller generiska familjenamn, och då är värden separerade med ett kommatecken för att visa att de är alternativ, och man skriver det namn man vill använda i första hand först och sedan nästa alternativ så här är ‘Courier New’ i första hand, sedan sans-serif, och till sist serif:

Exempel:

En användaragent / klientprogram kommer sedan att använda den första familjen som är tillgänglig.

 

font-style

Väljer mellan kursiv och normal, med värdena: italic och normal

 

font-variant

Välj mellan två värden: normal, eller small-caps:

 

font-weight

Anger text-tjocklek och värdena är: bold, normal, light, bolder eller ett numeriskt värde som anges i hela hundratal mellan 100900.

 

normal är samma som 400.

bold är samma som  700.

lighter ger en font weight som är ett värde tunnare än förälder elementet element (bland tillgängliga tjocklekar för typsnittet).

bolder ger en tjovklek som är ett värde tjockare än förälderns font-weight (bland tillgängliga tjocklekar för typsnittet).

100, 200, 300, 400, 500, 600, 700, 800, 900

Numeriska font weight värden ger lite  mer precision. Om inte den exakta värdet av 600 – 900 inte finns tillgängligt kommer närmast värde som är tjockare att användas (annars om ingen finns ett tunnare värde), och mellan 100 – 500 kommer den närmaste tunnare värdet att användas (annars om ingen finns ett tjockare värde). Detta betyder att för typsnittsfamiljer som bara har normal och tjock variant, blir 100 – 500  för normal, och 600 – 900 för bold.

OBS!  Många datortypsnitt finns endast tillgängliga i ett begränsat antal tjocklekar (ofta bara två alternativ: normal och fet).

 

font-size

Ställer den absoluta storleken (pt, in, cm, px), relativa storleken (em, exrem), eller en procentuell värde % som baseras på den normal storlek.

Storleksvärden kan vara: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller eller ett numeriskt värde + enhet.

 

font

Ställer alla teckensnittsvärden i en egendoms deklaration. Den föredragna ordningen för värden är:

Alla är dock Inte nödvändiga:

Du kan titta närmare på så kallade CSS kortformer (shorthand) i artikeln CSS kortform / shorthand guide.

 

text-align

text-align anväds för den horisontella textjustering, antingen till vänster, mitten högereller justify (ser till så att både vänster- och högermarginalerna blir jämna):

Med hjälp av text-align kan man även placera bilder i sidled.

 

text-indent

Gör så  att första raden i varje nytt stycke börjar [nummer+enhet] längre in på sidan än kommande rader:

 

line-height

Med hjälp av line-height kan man reglera avståndet mellan raderna vertikalt:

 

word-spacing

Används för att reglera avståndet mellan ord:

 

letter-spacing

Med letter-spacing kan man reglera avståndet mellan tecken:

 

Gå vidare till sida 2 genom att klicka här nedanför.

Skapa din första webbsida – CSS styling

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

%d bloggare gillar detta: