Uppgift 2a och b

Uppgift 2ab är stilsatt med ett externt css dokument nämligen ip3.css !

Teckensnitt

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
font Se nedan +
caption
icon
menu
message-box
small-caption
status-bar 		Alla. Ja. Se nedan. Övergripande egenskap för teckensnittet som bestämmer font-family, font-size, font-style, font-variant, font-weight och line-height.
font: italic bold normal 16pt Arial, sans-serif
font-family <specifik-familj>
<generisk-familj> 		Alla. Ja. - Bestämmer teckensnittets familj. Sist bör man ange en generisk typ.
font-family: Times New Roman, Times, serif
font-family: Arial, Helvetica, sans-serif
font-family: Courier, monospace
font-family: cursive
font-family: fantasy
font-stretch normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded 		Alla. Ja. - Bestämmer hur breda tecknen ska vara.
font-stretch: wider
font-stretch: narrower
font-stretch: ultra-condensed
font-stretch: extra-condensed
font-stretch: condensed
font-stretch: semi-condensed

font-stretch: semi-expanded

font-stretch: expanded

font-stretch: extra-expanded

font-stretch: ultra-expanded
font-size <längd>
<procent>
<absolute-storlek>
<relativ-storlek> 		Alla. Ja. Relativ föräldern. Bestämmer teckensnittets storlek.
font-size: xx-small
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: xx-large
font-size-adjust <nummer>
none 		Alla. Ja. - Bestämmer förhållandet mellan typsnittets dimensioner. Stöds ännu inte av IE och Mozilla.
font-size-adjust: 0.67
font-style normal
italic
oblique 		Alla. Ja. - Bestämmer teckensnittets stil.
font-style: italic
font-style: oblique
font-variant normal small-caps Alla. Ja. - Bestämmer teckensnittets variant.
font-variant: small-caps
font-weight normal
lighter
bold
bolder
100
200
300
400
500
600
700
800

900

 Alla. Ja. - Bestämmer graden av fetstil hos teckensnittet.
font-weight: lighter
font-weight: bold
font-weight: bolder
font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400
font-weight: 500
font-weight: 600
font-weight: 700
font-weight: 800

font-weight: 900

Text

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
letter-spacing normal
<längd> 		Alla. Ja. - Bestämmer avståndet mellan tecken.
letter-spacing: 7px
word-spacing normal
<längd> 		Alla. Ja. - Bestämmer avståndet mellan ord.
word-spacing: 1cm;
line-height <nummer>
<längd>
<procent> 		Alla. Ja. Relativ font-size. Bestämmer avståndet mellan rader.
line-height: 200%; line-height: 200%; line-height: 200%; line-height: 200%; line-height: 200%; line-height: 200%; line-height: 200%; line-height: 200%; line-height: 200%; line-height: 200%; line-height: 200%; line-height: 200%;  
text-align left
right
center
justify
<sträng> 		Block Ja. - Bestämmer hur texten skall vara justerad i förhållande till marginalerna.
text-align: left
text-align: right
text-align: center
text-align: justify
text-decoration none
underline
overline
line-trough
blink 		Alla. Ja. - Bestämmer en texts dekoration.
text-decoration: underline
text-decoration: overline
text-decoration: line-through
text-decoration: blink
text-shadow none
<skugga>
<skugga>
inherit 		Alla. Nej. - Bestämmer en texts skugga. Stöds inte ännu av någon browser.
text-shadow: yellow 10px 10px 2px
text-shadow: purple -5px -5px, orange 10px 10px
text-indent <längd>
<procent> 		Block. Ja. Refererar till förälderns bredd. Bestämmer en texts indrag.
text-indent: 1in
text-indent: 3em
text-indent: 20%
text-transform none
capitalize
uppercase
lowercase 		Alla. Ja. - Omvandlar text.
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
white-space normal
pre
nowrap 		Block. Ja. - Bestämmer hur utrymmen mellan texten skall behandlas (tabbar, space och radbryt).

white-space: pre

white-space: nowrap

Listor

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
list-style Se nedan. De med display satt till list-item. Ja. Se nedan. Övergripande egenskap för listor som bestämmer list-style-type, list-style-image och list-style-position.
  • list-style: lower-roman url(2ab_flower.gif) outside;
  • list-style: lower-roman url(2ab_flower.gif) outside;
list-style-image none
<url> 		De med display satt till list-item. Ja. - Bestämmer bilden som används som punkt i listan.
  • list-style-image: url(2ab_flower.gif);
  • list-style-image: url(2ab_flower.gif);
list-style-position inside
outside 		De med display satt till list-item. Ja. - Bestämmer hur texten runt listan placeras.
  • list-style-position: inside
  • list-style-position: outside
list-style-type none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
lower-latin
upper-alpha
upper-latin
lower-greek
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hirigana-iroha
katekane-iroha 		De med display satt till list-item. Ja. - Bestämmer utseendet på listmarkeringen.
  1. list-style-type: disc
  2. list-style-type: circle
  3. list-style-type: square
  4. list-style-type: decimal
  5. list-style-type: decimal-leading-zero
  6. list-style-type: lower-roman
  7. list-style-type: upper-roman
  8. list-style-type: lower-alpha
  9. list-style-type: lower-latin
  10. list-style-type: upper-alpha
  11. list-style-type: upper-latin
  12. list-style-type: lower-greek
  13. list-style-type: hebrew
  14. list-style-type: armenian
  15. list-style-type: georgian
  16. list-style-type: cjk-ideographic
  17. list-style-type: hirigana
  18. list-style-type: katanka
  19. list-style-type: hirigana-iroha
  20. list-style-type: katekane-iroha
marker-offset auto
<längd> 		De med display satt till marker Nej. - Bestämmer listpunktens läge. Stöds ännu inte av IE och Mozilla.
  • marker-offset: 10px
  • marker-offset: 10px

Färg

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
color <färg> Alla. Ja. - Bestämmer färgen.
color: red

Synlighet

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
visibility visible
hidden 		Alla. Ja. - Bestämmer om något ska synas.
visibility: visible
visibility: hidden
clip auto
<shape>
inherit 		Block. Nej. - Låter dig visa endast en del av ett element. clip: rect(15px, 83px, 26px, 15px)
display none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-caption 		Alla. Nej. - Bestämmer om och hur ett element skall visas.

display: inline

display: block

display: list-item

display: run-in

display: compact

display: marker

display: table

display: inline-table

display: table-row-group

display: table-header-group

display: table-footer-group

display: table-row

display: table-column-group

display: table-column

display: table-cell

display: table-caption

overflow visible
hidden
scroll
auto 		Block. Nej. - Bestämmer vad som händer med innehållet i ett element om det är större än dess givna area.
overflow: visible; overflow: visible; overflow: visible; overflow: visible;

overflow: hidden; overflow: hidden; overflow: hidden; overflow: hidden;

overflow: scroll; overflow: scroll; overflow: scroll; overflow: scroll;

overflow: auto; overflow: auto; overflow: auto; overflow: auto;

Bakgrund

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
background Se nedan. Alla. Nej. Se nedan. Övergripande egenskap för bakgrund som bestämmer background-image, backgrund-attachment, background-color, background-position och background-repeat.

background: #ff00ff

background-image none
<url> 		Alla. Nej. - Bestämmer bakgrundsbild.

background-image: url(2ab_valid_css.gif)

backgrund-attachment scroll
fixed 		Alla. Nej. - Bestämmer om en bakgrundsbild skall scrolla med fönstret eller vara fast fixerad.

background-attachment: fixed

background-attachment: scroll

background-color transparent
<color> 		Alla. Nej. - Bestämmer färgen på bakgrunden då bakgrundsbild inte används.

background-color: #00ff00

background-position <procent>
<längd>
top
center
bottom
left
center
right 		Alla. Nej. Refererar till elementet själv. Bestämmer hur och var bakgrundsbilden skall placeras.

background-position : top center

background-repeat repeat
repeat-x
repeat-y
no-repeat 		Alla. Nej. - Bestämmer om och hur en bakgrundsbild skall upprepas.

background-repeat: repeat

background-repeat: repeat-x

background-repeat: repeat-y

background-repeat: no-repeat

Marginaler

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
margin Se nedan. Alla. Nej. Refererar till bredden i blocket. Övergripande egenskap för marginalerna som bestämmer margin-left, margin-right, margin-top och margin-bottom.

margin: 10mm

margin-top auto
<längd>
<procent> 		Alla. Nej. Refererar till bredden i blocket. Bestämmer övre marginal.

margin-top: 30px

margin-right auto
<längd>
<procent> 		Alla. Nej. Refererar till bredden i blocket. Bestämmer höger marginal.

margin-right: 4cm

margin-bottom auto
<längd>
<procent> 		Alla. Nej. Refererar till bredden i blocket. Bestämmer nedre marginal.

margin-bottom: 2%

margin-left auto
<längd>
<procent> 		Alla. Nej. Refererar till bredden i blocket. Bestämmer vänster marginal.

margin-left: 3pc

Kantlinjer

Övergripande

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
border Se border-color, border-style och border-width. Alla. Nej. - Övergripande egenskap för kantlinjerna som bestämmer färg, form och tjocklek.
border: thick solid #0000ff
border-top Se border-color, border-style och border-width. Alla. Nej. - Övergripande bestämmare av färg, form och tjocklek för den övre kantlinjen.
border-top: thin dotted #00ff00
border-right Se border-color, border-style och border-width. Alla. Nej. - Övergripande bestämmare av färg, form och tjocklek för den högra kantlinjen.
border-right: 0 none
border-bottom Se border-color, border-style och border-width. Alla. Nej. - Övergripande bestämmare av färg, form och tjocklek för den undre kantlinjen.
border-bottom: 0 none
border-left Se border-color, border-style och border-width. Alla. Nej. - Övergripande bestämmare av färg, form och tjocklek för den vänstra kantlinjen.
border-left: medium dashed

Färg

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
border-color <färg> Alla. Nej. - Övergripande egenskap för färgen på kantlinjerna som bestämmer border-top-color, border-right-color, border-bottom-color och border-left-color.
border-color: red blue green purple
border-top-color <färg> Alla. Nej. - Bestämmer färgen på den övre kantlinjen.
border-top-color: yellow;
border-right-color <färg> Alla. Nej. - Bestämmer färgen på den högra kantlinjen.
border-right-color: pink
border-bottom-color <färg> Alla. Nej. - Bestämmer färgen på den undre kantlinjen.
border-bottom-color: olive
border-left-color <färg> Alla. Nej. - Bestämmer färgen på den vänstra kantlinjen.
border-left-color: magenta

Form

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
border-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset 		Alla. Nej. - Övergripande egenskap för formen på kantlinjerna som bestämmer border-top-style, border-right-style, border-bottom-style och border-left-style.
border-style: dotted dashed solid double
border-style: groove ridge inset outset
border-top-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset 		Alla. Nej. - Bestämmer formen på den övre kantlinjen.
border-top-style: none
border-right-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset 		Alla. Nej. - Bestämmer formen på den högra kantlinjen.
border-right-style: hidden
border-bottom-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset 		Alla. Nej. - Bestämmer formen på den undre kantlinjen.
border-bottom-style: none
border-left-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset 		Alla. Nej. - Bestämmer formen på den vänstra kantlinjen.
border-left-style: hidden

Tjocklek

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
border-width <längd>
thin
medium
thick 		Alla. Nej. - Övergripande egenskap för tjockleken på kantlinjerna som bestämmer border-top-width, border-right-width, border-bottom-width och border-left-width.
border-width: thick thin medium
border-top-width <längd>
thin
medium
thick 		Alla. Nej. - Bestämmer tjockleken på den övre kantlinjen.
border-top-width: thin
border-right-width <längd>
thin
medium
thick 		Alla. Nej. - Bestämmer tjockleken på den högra kantlinjen.
border-right-width: thick
border-bottom-width <längd>
thin
medium
thick 		Alla. Nej. - Bestämmer tjockleken på den undre kantlinjen.
border-bottom-width: 2ex
border-left-width <längd>
thin
medium
thick 		Alla. Nej. - Bestämmer tjockleken på den vänstra kantlinjen.
border-left-width: medium

Outlines

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
outline Se outline-width, outline-style och outline-color. Alla. Nej. - Övergripande egenskap för outline som bestämmer outline-color, outline-style, och outline-width.

Outline är en yttre linje som ligger utanför kantlinjen för att ge intrycket att elementet står ut. Stöds ännu inte av någon browser.

outline: #ff00ff thin dashed
outline-color <färg>
invert 		Alla. Nej. - Bestämmer färgen på outline. Stöds ännu inte av någon browser. outline-color: green
outline-style none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset 		Alla. Nej. - Bestämmer formen på outline. Stöds ännu inte av någon browser.

outline-style: double

outline-width <längd>
thin
medium
thick 		Alla. Nej. - Bestämmer tjockleken på outline. Stöds ännu inte av någon browser. outline-width: thick

Padding

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
padding <längd>
<procent> 		Alla. Nej. Refererar till bredden i blocket. Övergripande egenskap för outline som bestämmer padding-top, padding-right, padding-bottom och padding-left. 

Padding bestämmer avståndet mellan ett elements kantlinje och dess innehåll.

padding: 0.5cm 2cm 1.3cm 1.7cm
padding-top <längd>
<procent> 		Alla. Nej. Refererar till bredden i blocket. Bestämmer avståndet till övre kantlinjen.
padding-top: 18mm
padding-right <längd>
<procent> 		Alla. Nej. Refererar till bredden i blocket. Bestämmer avståndet till högra kantlinjen.
padding-right: 20px
padding-bottom <längd>
<procent> 		Alla. Nej. Refererar till bredden i blocket. Bestämmer avståndet till nedre kantlinjen.
padding-bottom: 2pc
padding-left <längd>
<procent> 		Alla. Nej. Refererar till bredden i blocket. Bestämmer avståndet till vänstra kantlinjen.
padding-left: 2ex

Tabeller

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
table-layout auto
fixed 		Tabeller. Nej. - Bestämmer hur tabellen skall läggas ut.
table-layout: fixed
border-collapse collapse
separate 		Tabeller. Ja. - Bestämmer kantlinje-modellen.
border-collapse: separate
X11 X12
X21 X22
border-collapse: collapse
X11 X12
X21 X22
border-spacing <längd> Tabeller. Ja. - Bestämmer avståndet mellan kantlinjerna i näraliggande celler.
border-spacing: 25pt 25pt
X11 X12
X21 X22
caption-side top
bottom
left
right
inherit 		Caption. Ja. - Bestämmer captions placering i förhållande till tabellen.
caption-side: top
X11
caption-side: bottom
X11
empty-cells show
hide 		Tabell celler. Ja. - Bestämmer om celler utan synligt innehåll skall ha kantlinjer eller ej.
empty-cells: show
empty-cells: hide

Storlek

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
width <längd>
<procent>
auto 		Block. Nej. Refererar till föräldern. Bestämmer bredden på ett element. sunman
height <längd>
auto 		Block. Nej. - Bestämmer höjden på ett element. sun.jpg (1.88Kb)
max-width none
<längd>
<procent>
inherit 		Block. Nej. Refererar till block. Bestämmer den maximala bredden på ett element.
max-width: 50px; max-width: 50px; max-width: 50px; max-width: 50px;
max-height none
<längd>
<procent>
inherit 		Block. Nej. Refererar till block. Bestämmer den maximala höjden på ett element.
max-height: 20px; max-height: 20px; max-height: 20px; max-height: 20px;
min-width <längd>
<procent>
inherit 		Block. Nej. Refererar till block. Bestämmer den minsta bredden på ett element.
min-width: 100mm
min-height <längd>
<procent>
inherit 		Block. Nej. Refererar till block. Bestämmer den minsta höjden på ett element.
min-height: 50px
vertical-align <längd>
<procent>
baseline
sub
super
top
text-top
middle
bottom
text-bottom 		Inline. Nej. Refererar till line-height hos elemetet självt. Bestämmer den vertikala placeringen av ett element i förhållande till ett tidigare element.
vertical-align: baselinesun.jpg (1.88Kb)
vertical-align: subsun.jpg (1.88Kb)
vertical-align: supersun.jpg (1.88Kb)
vertical-align: topsun.jpg (1.88Kb)
vertical-align: text-topsun.jpg (1.88Kb)
vertical-align: middlesun.jpg (1.88Kb)
vertical-align: bottomsun.jpg (1.88Kb)
vertical-align: text-bottomsun.jpg (1.88Kb)

Position

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
position static
relative
absolute
fixed 		Alla. Nej. - Bestämmer om ett elements position skall vara statisk, relativ absolut, eller fixerad.

position: static

position: relative

position: absolute

position: fixed

top <längd>
<procent>
auto 		Element med position ej static. Nej. Relativt bredden eller höjden av blocket. Bestämmer det övre avståndet mellan ett element och dess förälder.

top: 30px

right <längd>
<procent>
auto 		Element med position ej static. Nej. Relativt bredden eller höjden av blocket. Bestämmer avståndet til höger mellan ett element och dess förälder

right: 10px

bottom <längd>
<procent>
auto 		Element med position ej static. Nej. Relativt bredden eller höjden av blocket. Bestämmer avståndet nedåt mellan ett element och dess förälder.

bottom: -20px

left <längd>
<procent>
auto 		Element med position ej static. Nej. Relativt bredden eller höjden av blocket. Bestämmer avståndet till vänster mellan ett element och dess förälder.

left: 45px

z-index auto
<heltal> 		Positionerade element. Nej. - Bestämmer i vilken ordning ett element skall placeras i z-led, d.v.s om det skall placeras framför eller bakom ett annat element. z-index: 2 sun.jpg (1.88Kb)
float none
left
right 		Alla. Nej. - Bestämmer hur ett element som befinner sig inom ett annat element skall förhålla sig till föräldern. T.ex att texten skall röra sig till vänster eller höger i en tabellcell.

float: left

float: right

clear none
left
right
both 		Alla. Nej. - Bestämmer var runt ett element där float-element inte är tillåtna.
sun.jpg (1.88Kb) clear: none
sun.jpg (1.88Kb) clear: left
sun.jpg clear: right
sun.jpg clear: both

Övrigt

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
cursor <url>
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
inherit 		Alla. Ja. - Bestämmer vilken typ av muspekare som skall användas när man placerar musen över ett viss element.
cursor: url("2ab_dino.ani")
cursor: auto
cursor: crosshair
cursor: default
cursor: pointer
cursor: move
cursor: e-resize
cursor: ne-resize
cursor: nw-resize
cursor: n-resize
cursor: se-resize
cursor: sw-resize
cursor: s-resize
cursor: w-resize
cursor: text
cursor: wait
cursor: help

Taggar

Egenskap Värde...................... XHTML-
element 		Ärvd % Beskrivning Exempel............................................
p:first-line, p:first-letter - p Nej. - Bestämmer utseendet på första bokstaven resp. första raden i ett stycke. Fungerar buggigt och därför har jag lagt detta test i ett eget dokument. p:first-letter {
  color: red; 
  background-color: silver; 
}

p:first-line {
  font-weight: bold; 
}