2.2 Text och listor



Fontfamilj

Font-family egenskaperna specificerar att teckenstinnett som ett element. Font-famlilj kan besitta olika teckensnittsnamn som en backup plan. Om en webbläsare inte klarar det första teckensnitttet så kan de använda nästa. Det finns två typer av font familjer. Family-name och generic-family.

Serif

Seriff som det kallas på svenska, består då av en klack schattering, vilket utmärker en typ av bokstäver i en teckenuppsättning.

Sans-serif

När seriffer saknas i ett teckensnitt kallas de sans-seriffer. är ett teckensnitt som inte har seriffer (Sans betyder utan). Används ofta i rubriker eller korta texter.

Monospace

Dessa teckensitt är ett teckensnitt som är jämnställd där alla bokstäver tar upp exakt lika mycket plats storlek på bredden och längden. Vilket andra typsnitt inte alltid gör

Enheter

För att kunna påverka storleken på teckensnitten, använder man sig av olika enheter.

Nyckelord

Nyckelord kan man Öka eller minska storleken baserad på den relativa "parent"storleken. Man kan gå upp tre steg (large, x-large, xx-large). eller gå ned tre steg (small, x-small, xx-small).

%

Procent består av ett tal och ett procenttecknet %. Vilket är relativt till den "parent" vilket gör att den kan användas på många olika webbläsare utan at det ser allt för konstigt ut.

Em

Enheten Em är relativt till font-storleken hos det elementet som anges. 2em betyder 2 gånger font-storleken hos elementet.

Färg

Man kan ange teckenfärg på två sätt. Med RGB-värden, hexakod eller förbestämda kommandon.

Exempel:

Färgen på den här texten kallas för aqua, vilket går att skriva direkt i css.


HTML
<p id="aqua"> Färgen på den här texten kallas för <b>aqua</b>, vilket går att skriva direkt i css. </p>

CSS
#aqua { color: aqua; }

Färgen på denna text är Blue Violet. Denna färg är definerad med hexakoden koden


HTML
<p id="VioletBlue"> Detta är Blue Violet </p >

CSS
#VioletBlue { color: #8A2BE2; }

Teckensnitt

Font

Teckensnittet i dokumentet kan ändras genom att ändra fonten. Vilket bland annat ändrar utseendet.

Exempel:

Detta är time med storlek 1.5em.

Detta är Lucida Console med storlek 30px.

Listor

List-Style

Genom list- style kan man ändra hur en lisa kan se ut.
Exempel: