II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007

CSS, Selektorer Typ selektor,p { } Klass selekto,.intro { }p.intro { } ID selektor,#ny { } Arv selektor,li a { }#ny a { } Universell selektor * { } Pseudoelement selektora:link { }

Attributet class class för att kunna formatera samma märke på olika sätt. Ex: p.utkast {margin-left: 0} p.kommentar {margin-left: 1 cm} Man kan också ta bort märket och då gäller klassen för alla märken.center {text-align: center} Ex: …..

Attributet id Då man vill skapa en stil för ett enda märke #storSilver { font-size: 500%, color:silver} Min stora silvertext Exempel

Stilregler psedo-class En länk kan vara besökt/obesökt, användaren för musen över märket etc. a:link{color:blue;} a:visited{color:black} a:active{color:green;} a:hover{color:red;} Selector: psedo-class { egenskap: värde } Exempel

DIV Elementet är en generell behållare som kan användas för att lägga till struktur i ett html-dokument. Ex: En vacker blomma

Span Formatera en del av en text med :.red {background-color: red;} Jag vill ha bakgrundsfärg på följande text : min bästa färg Exempel

Mer CSS, nedsänkt tecken a 2, upphöjt tecken a 2 Lista : list-style-type: none, square, disc, circle, upper-roman, lower-roman,upper-alpha, lower-alpha, decimal.

Meny En CSS meny utgår från en punktlista val 1 val 2 Exempel

Färg Anges på samma sätt som i html Men även med RGB-värde (Red Green Blue) h1 {color:#000000} h1 {color: red} h1 {color:rgb(25%,25%,50%)} h1 {color:rgb(50,75,100} (max 255)

Bilder Skaffa bilder: -rita själv -fotografera -skapa med grafiska program -skana-leta på webben -köpa en samling clipart bilder Att tänka på: upphovsrätten viktig

Bildformat GIF (Graphics Interchange Format), 8-bitar, gif-animering, transparent(av/på) JPEG(JPG) (Joint Photographic Experts Group), 24-bitar PNG (Portable Network Graphics), 8-, 24-bitar, transarent (gradvis) SVG (Scalable Vector Graphics) (m.fl.)

Bilder vektorgrafikbitmapgrafik

Bilder -upplösningen dpi (dots per inch) -storleken, miniatyrer för att förstora efter hand -antalet bilder -beskärningen av bilden, ta bort det som inte behövs -antal färger ( färgpalettens storlek)

Bilderi i dokumentet: html taggen -som enkel bild -som länk -som bildkarta (kommer senare)

Bild, syntaxen /* minsta syntax */ Attribute: src=”URL” alt=”text” height=”number” width=”number” longdesc=”URL” ( alternativtext för textbaserad webbläsare) Width och height behövs ej men snabbar upp sidan. (storleken bestäms innan bilden anländer) Om bredd och höjd inte stämmer med den verkliga bilden gör webbläsaren om bilden så den stämmer.

Bakgrundsbilder, body background-color: grey; background-image: url(blomma.jpg); /* bild ligger över bakgrundsfärg*/ background-repeat:repeat-x ; background-repeat: repeat-y; background-repeat: no-repeat; background-position:300px 6em ; background-position:left; /*center, right top, center, bottom */

Validering Länk till validator:

Länkar