CSS
Download
1 / 20

CSS - PowerPoint PPT Presentation


  • 138 Views
  • Uploaded on

CSS. (Cascading Style Sheets). Rebecca Landm ér 2007 [email protected] DAGENS FÖRELÄSNING. Introduktion till CSS Vad är CSS och varför? -------------------------------- Syntax, regler och selektorer Klasser och ID Färger och typografi Mått Justering och marginaler Listformat

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' CSS' - len


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

CSS

(Cascading Style Sheets)

Rebecca Landmér [email protected]


Dagens f rel sning
DAGENS FÖRELÄSNING

  • Introduktion till CSS

  • Vad är CSS och varför?--------------------------------

  • Syntax, regler och selektorer

  • Klasser och ID

  • Färger och typografi

  • Mått

  • Justering och marginaler

  • Listformat

  • Tabeller


Varf r css
VARFÖR CSS?

  • Förenklar underhåll

    Separerar struktur (innehåll) och presentation (form/layout), vilket:

  • ger mindre filstorlekar

  • ökar tillgängligheten

  • gör HTML-sidorna enhetsoberoende


Vad r css
VAD ÄR CSS?

  • CSS ger fullständig kontroll över layout, utan att stöka till dokumentets innehåll

  • CSS är ett språk som används för att kontrollera stil och layout på dokument uppmärkta med HTML, XML eller XHTML

  • Med CSS kan all formatering flyttas från (X)HTML-dokumentet och förvaras separat, i en CSS-fil


Vad r css1
VAD ÄR CSS?

  • Styr typsnitt (familj, storlek, färg, stil), justering (”alignement”), symboler i listor, marginaler, kantlinjer (tjocklek, strecktyp, färg), storlek och position, bakgrundsbilder, visning/synlighet...

  • Håkon Wium Lie (Opera) primär upphovsman

  • CSS finns i tre versioner: 1 (1996), 2 (1998), 3 (under utveckling), men än så länge har endast version 1 bra stöd hos webbläsarna


Vad g r css
VAD GÖR CSS?

  • Gör designändringar lättare genom att information och presentation är skilda åt.

  • Möjliggör multipla användningsområden för varje dokument.

  • En stilmall kan styra en ändlös mängd dokument.

  • Ger slutanvändaren större kontroll och tillgänglighet.


Placering i xhtml fil
PLACERING I XHTML-FIL

Alternativ 1 – i en sektion i <head>:

<head><title>Valans spådom</title><style type=”text/css”> H1 { color: red; }</style></head>

Alternativ 2 – i en separat fil:

<head><title>Valans spådom</title><link rel=”stylesheet” type=”text/css” href=”stil.css” /></head>


Syntax
SYNTAX

  • En CSS-regel består av en selektor (”väljare”) och en eller flera deklarationer.

  • Selektorn avgör vilket eller vilka XHTML-element som påverkas av regeln.

  • Varje deklaration i sin tur består av en egenskap och ett värde. Selektor {egenskap: värde;}

  • Deklarationer omges av { } (måsvingar/krullparanteser), och varje deklaration i ett deklarationsblock avslutas med ; (semikolon).


Regler och selektorer
REGLER OCH SELEKTORER

  • Regel: ett direktiv som anger hur ett XHTML-element skall presenteras.

  • Selektor: identifierar det eller de element som skall presenteras med hjälp av en regel.


Regler och selektorer1
REGLER OCH SELEKTORER

Selektorer:

Element:

td {text-align: left; …}

Klasser:

div.menuitem {border: 1px solid; …}

Identifierare:

#firstword {font-weight: bold; …}

Kontextuella selektorer:

table.menu td {color: white; …}

Regel:

H1 {

font-family: Arial;

font-size: 16px;

}


Klasser och id

Namnge klasser och ID efter funktion, inte efter utseende!

KLASSER OCH ID

En klass är en grupp av element. Gruppen identifieras med ett klassnamn. Klass markeras med punkt (.).

I stilmallen (CSS):

div.menuitem {color: white; ...}

I XHTML-dokumentet:

<div class=“menuitem”>Introduktion</div>

En identifierare (ID) refererar till exakt ett (1) element i ett dokument. Fungerar som en klass. ID markeras med staket (#).

I stilmallen (CSS):

#firstword {font-weight: bold; …}

I XHTML-dokumentet:

<span id=“firstword”>Hören</span>


Pseudoklasser
PSEUDOKLASSER

  • Pseudoklasser är klasser som inte finns i dokumentstrukturen.

  • Används bland annat för länkegenskaper: a:link {color: #FF0000}

    a:visited {color: #00FF00}

    a:hover {color: #FF00FF}

    a:active {color: #0000FF}

”LoVe/HAte”: Pseudoklasser för länkar ska specificeras i ordningen

Link, Visited, Hover, Active


F rger och typografi
FÄRGER OCH TYPOGRAFI

I (X)HTML/CSS kan en färg anges genom en kombination av tre grundfärger: röd, grön och blå – RGB (Red, Green, Blue):

  • Normal hexadecimal notation: #99CC33

  • Förkortad notation: #9C3

  • RGB-funktion: rgb(153, 204, 51)

h1 {background-color: #CCFF33;}

  • Vissa färger kan också anges med en färgkonstant:

  • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white och yellow

Teckensnitt, färg, storlek, stil, position, osv. anges i deklarationen.

p {font-family: verdana; font-size: 11px; font-color: maroon}


MÅTT

Absoluta mått

  • mm = millimeter

  • cm = centimeter

  • in = inch

  • pt = point (72pt = 1inch)

  • pc = pica (1pc = 12pt)

  • px = pixel

    Relativa mått

  • em = fyrkanten (emspace)

  • ex = x-höjden

  • % = procent


MÅTT

Exempel:

body { font-size: 12pt; }

p { font-size: 1em; }

h1 { margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; }


Css l dmodell

innehåll

margin

padding

border

CSS LÅDMODELL

kantlinje

”TRouBLed”: När man använder kortformen för att specificera margin, padding eller border för ett element börjar man med den övre sidan och går medsols: Top, Right, Bottom, Left.

Ex.: h1 { margin: 1em 1em 0 1em; }


Block och inline element
BLOCK- OCH INLINE-ELEMENT

  • Blocknivåelement visas normalt som textblock med radbrytningar före och efter. Exempel:p, h1, div.

  • Radnivåelement visas i raden utan radbrytning. Exempel:strong, em, span.

  • Elementen fungerar enligt lådmodellen/ boxmodellen.


Justering och marginaler
JUSTERING OCH MARGINALER

  • Text kan justeras åt höger, vänster, centreras eller marginaljusteras.

  • CSS-egenskapen margin definierar området runt ett element, enligt lådmodellen.

.center {text-align: center;}

<p class=”center”>Centrerad!</p>

h1 {margin: 10px}

<h1>Huvudrubrik</h1>


Listformat
LISTFORMAT

  • Punktlistor <ul> eller numrerade listor <ol> formateras med CSS.

  • Hela listan, listelement <li> eller bara vissa listelement kan formateras.

ul {list-style-type: circle;}

Oordnade listor fungerar bra till t.ex. navigationsmenyer.


Tabeller
TABELLER

Tabeller kan formateras på liknande sätt som andra element.

table {

font-family: sans-serif; border: 1px; }

td {

font-family: serif;}

Tabeller är användbara för presentation av data. För layout är det lämpligare att använda sektioner (div) och positionering.


ad