Klassificeringegenskaper

[Display] [White-space] [List-style-type] [List-style-image] [List-style-position] [List-style]

Med dessa egenskaper kan du klassificera elementen i olika kategorier, t ex alla blockelement för sig.

värden: block | inline | list-item | none (utgångsvärde - block)
kan tilldelas: alla element
arv: nej

Med denna egenskap kan du specificera om och hur ett element visas:

block öppnar en ny box för blockelementen, t ex P eller H1, som är relativ till andra närliggande boxar.

inline öppnar en ny box för inline elementen, t ex EM eller STRONG som visas på samma linje som föräldraelement.

list-item öppnar en ny blockbox och lägger till postmarkeringar, t ex LI

none stänger av display

P, H1 {display: block}
EM, STRONG {display: inline}
LI {display: list-item}
IMG {display: none}

Du kan lista i mallen vilka element som tillhör vilken kategori. Du behöver inte lista e alla. Bara dem som du använder. Flytande och ersättningselement kan visas både som block och inline.

H1, H2, H3, H4, H5, H6, ADDRESS, P, DL, DT, DD, UL, OL, DIR, MENU, LI, DIV, CENTER, BLOCKQUOTE, PRE, HR, ISINDEX, TABLE, FORM {display: block}

EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, TT, I, B, U, STRIKE, BIG, SMALL, SUB, SUP, A, IMG, APPLET, FONT, BASEFONT, BR, SCRIPT, MAP, INPUT, SELECT, TEXTAREA {display: inline}

LI {display: list-item; }

värden: normal | pre | nowrap (utgångsvärde - normal)
kan tilldelas: alla blockelement
arv: ja

Denna egenskap specificerar hur mellanslag som finns inuti ett element ska hanteras.

normal multipla mellanslag visas som ett
pre som elementet PRE, dvs preformaterad text
nowrap nya rader infogas enbart med elementet BR

PRE {white-space: pre}
P {white-space: normal}

värden: disc | circle | square | decimal | lower-roman | upper-roman | upper-alpha | none (utgångsvärde - disc)
kan tilldelas: element med egenskapen {display: list-item}
arv: ja

Med denna egenskap kan du välja hur poster i en lista ska markeras.

UL {list-style-type: disc} /* punkter */
UL {list-style-type: circle} /* ringar */
UL {list-style-type: square} /* kvadrater */ OL {list-style-type: decimal} /* 1 2 3 osv */
OL {list-style-type: lower-alpha} /* a b c osv */
OL {list-style-type: upper-alpha} /* A B C osv */
OL {list-style-type: lower-roman} /* i ii iii osv */
OL {list-style-type: upper-roman} /* I II III osv */

värden: <url> | none (utgångsvärde - none)
kan tilldelas: element med egenskapen {display: list-item}
arv: ja

Med denna egenskap kan du byta ut posters markeringspunkter i en lista mot bilder.

UL {list-style-image: url(bild.gif)}

värden: inside | outside (utgångsvärde - outside)
kan tilldelas: element med egenskapen {display: list-item}
arv: ja

Med denna egenskap kan du specificera hur posters markeringar ska visas i förhållande till innehållet.

UL {list-style-position: outside}

skapar "hängande indrag"

• här kommer texten...
  och sedan fortsätter här

UL {list-style-position: inside}

texten på nästa rad fortsätter precis i början av raden:

• här kommer texten...
  och fortsätter sedan här

värden: <list-style-type> | <list-style-image> | <list-style-position> (utgångsvärde - inget)
kan tilldelas: till element med egenskapen {display: list-item}
arv: ja

Denna egenskap är en förkortning för alla list-style egenskaperna, dvs type, image och position.

UL {list-style: square outside}
OL {list-style: decimal inside}

Upp | CSS-referensbok | Referensböcker