CSS
Download
1 / 20

CSS - PowerPoint PPT Presentation


  • 131 Views
  • Uploaded on
  • Presentation posted in: General

CSS. (Cascading Style Sheets). Rebecca Landm ér 2007 rebecca.landmer@hb.se. 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

CSS

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 2007rebecca.landmer@hb.se


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?

  • 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?

  • 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 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?

  • 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

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

  • 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

  • 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 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;

}


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 ä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

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; }


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

  • 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

  • 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

  • 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 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
  • Login