F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 ·...

F10 – Mer CSS

Dagens agenda

• Stila formulär

• CSS-genererat innehåll

• Mediatyper

• Utskrift

• Negativa marginaler

• Sprites

• Gridbaserade layouter

• Ramverk

Formulär

<br />

Prydliga formulär

#cform { width: 500px;}

#cform label {

width:140px;

text-align:right;

display:block;

float:left;

padding-right:10px;

clear:left;

}

#cform input, #cform textarea, #cform select

{

width:300px;

margin-bottom:20px;

}

#cform textarea { height:100px; }

#cform .checkbox { width:auto; }

CSS-genererat innehåll Vi har möjlighet att lägga till innehåll till vårt HTML-dokument med CSS. (Obs!

Hamnar inte i DOM)

#mainnav li:after {

content: "…";

}

#divtwo:before {

content:"";

height:5px;

width:5px;

background:red;

}

content: url(pin.png);

Stöds först från och

med IE8

CSS-genererat innehåll

http://nicolasgallagher.com/pure-css-gui-icons/demo/#non

http://css-tricks.com/9516-pseudo-element-roundup/

Mediatyper

<body>

<head>

<link rel="stylesheet" media="print" href="print.css" />

<title>Våra produkter</title>

</head>

…

Stilmallen "print.css" kommer bara att laddas då dokumentet skrivs ut.

Vi har bland andra tillgång till:

all, handheld, print, projection, speech, tv, screen

default

Flera mediatyper samtidigt

<body>

<head>

<link rel="stylesheet" href="basic.css" />

<link rel="stylesheet" media="screen" href="screen.css" />

<link rel="stylesheet" media="print" href="print.css" />

…

</head>

…

Alla enheter

Vid utskrift kommer nu basic.css att

användas tillsammans med print.css

Användare vid en vanlig skärm kommer

att få basic.css att användas

tillsammans med screen.css

?

@media-direktivet <body>

<head>

<link rel="stylesheet" href="basic.css" />

…

</head>

…

p {

color: red;

}

#content {

float:left;

}

@media print

p {

color:black;

}

@media screen

…

@media print

…

@media handheld

…

Tänk på vid utskrift

http://alistapart.com

#mainnav {

display: none;

}

…

Länkar och utskrift

Hur göra med länkar vid utskrift?

@media print

#content a:after {

content: " (" attr(href) ")";

}

Marginaler

margin:5px 10px 30px 10px;

alternativt:

margin-top:5px;

margin-right:10px

margin-bottom:30px;

margin-left:10px;

Negativa marginaler margin-right:-10px;

margin-left:-10px;

margin-bottom:-10px;

margin-top:-10px;

Layout med CSS, del 2 body

div #container

• start • sida 1

div #wrapper

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum mi quis ligula pretium sed rutrum tortor posuere. Vivamus aliquet velit a mauris vestibulum commodo. Etiam cursus suscipit lorem, vel mattis metus facilisis ac. Proin gravida lacinia aliquet. Mauris arcu sem, tempor id gravida quis, lacinia non mauris. Etiam ac ante ligula, a tincidunt odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tristique euismod ipsum, mattis venenatis odio condimentum ac.

div #content

div #sidebar

div #footer

div #top

div #navigation

Layouter med CSS – en bra grund

Exempel på klassiska layouter

Negativa marginaler

Problem:

ordningen i HTML-

koden

<div id="wrapper">

<div id="content">

<p>…</p>

</div>

</div>

+

negativa marginaler

Lösning:

Lösningen 1

float:left

width:150px

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris

#wrapper

width:100%

float:left

Lösningen 2

float:left

width:150px

margin-right:-150px


#wrapper

width:100%

float:left

Lösningen 3


#wrapper

width:100%

float:left

margin-left:150px;

float:left

width:150px

margin-right:-150px

Lösningen 4

width:160px;

float:right;


#wrapper

width:100%

float:left

margin-left:150px;

float:left

width:150px

margin-right:-150px

Lösningen 5


#wrapper

width:100%

float:left

margin-left:150px;

margin-right:160px;

float:left

width:150px

margin-right:-150px

width:160px;

float:right;

Lösningen 6


#wrapper

width:100%

float:left

margin-right:-180px

margin-left:150px;

margin-right:160px;

float:left

width:150px

margin-right:-150px

width:160px;

float:right;

Lösningen 7

Navigation


Sidebar

Se demo

#7

min/max width/height

Stöds först från och

med IE7

egenskaper

min-width

min-height

max-height

min-height

min-width max-width

#container {

max-width: 1480px;

min-width: 960px;

}

Sprites

CSS Sprites

CSS Sprites socialsprite.png

#fbIcon #fbIcon:hover

Se demo

CSS Sprites

Fördelar

• Minskad totalstorlek på bilder

• Färre HTTP-anrop till servern

• Färre HTTP-anrop från klienten

• Vi riskerar inte ”flickering” • Ovana utvecklare riskerar att lägga bilder som

hör hemma i HTML-koden som CSS Sprites.

• Jobbigare att underhålla stora CSS Sprites

• Kan bli jobbigare CSS att koda.

Nackdelar

Gridbaserade layouter Bygger på att man försöker arbeta

med kolumner i multipler om 3

eller 4.

Fokuserar på kolumner, men rader

kan användas i viss utsträckning

Ger ett proffsigare intryck och ofta

per automatik en snyggare och

behagligare sida att titta på.

Bygger på kolumner med

marginaler.

Gridbaserade layouter

Ramverk

• Ökad produktivitet

• Du undviker vanliga misstag

• Du arbetar in en standard för namngivning

• Förenklar samarbete

• Du slipper tänka på webbläsarkompabilitet

• Du får ren och välstrukturerad kod

Fördelar

• Tar tid att lära sig

• Riskerar att ärva fel och buggar

• Du mister genuin kunskap om CSS

• Källkod som innehåller mycket onödig kod

• Du riskerar att fastna i gamla hjulspår

Nackdelar

Källa: http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/

F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 ·...

Documents

Transcript of F10 Mer CSS - lnu.seorion.lnu.se/pub/education/course/1IK415/ht12/lecture/F10... · 2012-09-24 ·...