CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

Koko: px

Aloita esitys sivulta:

Download "CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia."

Jarno Jaakkola
7 vuotta sitten
Katselukertoja:

1 CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim. <HTML> <HEAD> <STYLE TYPE= text/css > H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color: #990000;}.omatyyli { font-size: 24pt; color: #990000; </STYLE> </HEAD> <BODY> <H1>Otsikko</H1> background: rgb(200,100,20); } <P CLASS= omatyyli >Tekstia omala tyylilla</p> </BODY> </HTML>

2 CSS2 <STYLE TYPE= text/css >  H1 { font-size: 12pt; (fontti koko) font-family: Arial; (fontin tai fonttiperheen nimi) font-weight: bold; (lihavointi normal tai bold) font-style: italic; (kursiivi normal tai italic) font-variant: smallcaps; (pienet kirjaimet isoiksi) }  P { line-height: 20px; (rivien välinen tila) text-decoration: underline; (tekstin korostus none, underline, overline, line-through) text-align: center; (vaakasuora tasaus left. right, center) text-indent: 1cm; (sisentää ensimmäisen rivin 1cm) vertical-align: baseline; (pystysuora tasaus baseline, sub, super, top, text-top, middle, bottom, text-bottom, %, arvo) text-transform: uppercase (muuntaa tekstin uppercase, lowercase, capitalize) letter-spacing: 5px; (kirjainten välinen tila) } </STYLE>

3 Lisää ominaisuuksia Taustaväri ja taustakuva color: rgb(0,0,0); tekstin väri (värikoodi #000000, värin nimi black, väriarvot rgb(0,0,0) ) background: rgb(255,0,0); elementin taustan väri tai kuva background-color: rgb(255,0,0); elementin taustaväri background-image: url(kuva.jpg); elementin taustakuva background-repeat: repeat-x; toistetaanko taustakuvaa repeat toista vaaka- ja pystysuunnassa repeat-x toista vaakasuunnassa repeat-y toista pystysuunnassa no-repeat ei toistoa vain yksi kuva background-attachment: scroll; miten taustakuva seuraa selainta fixed taustakuva ei muutu scroll taustakuva vierii sivun mukana background-position: 10,0; määrittää kuvan paikan x,y koordinaatit x%, y% paikka prosentteina top center bottom left center middle

4 Kaikki web-sivun elementit ovat laatikoiden sisässä. Laatikon ominaisuudet Marginaalit margin-left: 20px; etäisyys vasemmasta reunasta margin-right: 100px; etäisyys oikeasta reunasta margin-top: 10px; etäisyys edellisen elementin alareunasta margin-bottom: 10px; etäisyys edellisen elementin yläreunasta margin: 20px,100px,10px,10px; etäisyydet elementin ympärillä Tyhjä tila padding: 1px,1px,1px,1px; tyhjä tila joka jää laatikon ympärille Reunat järjestys top, right, bottom, left border-width: 1px,1px,1px,1px; reunuksen paksuus border-color: rgb(1,1,1); reunuksen väri järjestys top, right, bottom, left border-style: solid; reunuksen tyyli none, solid, double, groove, ridge, inset, outset

5 CSS3 Asemointi visibility: visible; position: absolute; left: 20px; top: 30px; height: 300px; width: 400px; Näkyykö elementti vai ei visible(kyllä), hidden(ei) Voidaanko elementti asemoida absolute elementti asetetaan koko sivun suhteen relative elementti asetetaan suhteessa isäntäelementtiin static ei asemointia (oletus) Vasemmanpuoleinen asemointi Yläpuolinen asemointi Elementin korkeus Elementin leveys clip: rect(10px 20px 30px 40px); Määrittää elementtiin läpinäkyvän alueen Järjestys on top right left bottom z-index: 3; Määrittää päällekkäisistä elementeista kumpi on etualalla Suuremman arvon omaava on etualalla, voi antaa myös negatiivisia arvoja, kätevä kun position on relative. Esim. Haluan kuvan näkyvän etualalla web-sivun vasemmasta yläkulmasta katsoen 300 pikseliä oikealla ja 20 pikeseliä alaspäin yläreunasta. CSS-tiedostossa.tyylini { position: absolute; top:20px; left: 300px; z-index: 30; (30 varmaankin riittänee..) } HTML-tiedostossa <IMG SRC= kuva.jpg CLASS= tyylini >

6 CSS4 Listat list-style-type: disk; luettelomerkki disk; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none list-style-image: url(kuva.gif); luettelomerkkinä käytettävä kuvasq list-style-position: inside; luettelomerkkien sijainti inside, outside Hiiren kursorit cursor: default; kursori kun elementti on kohdistettuna default, crosshair, hand, pointer, move, text, wait, help, n-resize, ne-resize, e-resize, se-resize, s-resize, swresize, w-resize, nw-resize, progress, not-allowed, nodrop, vertical-text, all-scroll, col-resize, row-resize, url(kuva.cur) Huom! Omat kursorit tulee olla.cur formaatissa. ecimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none

Samankaltaiset tiedostot

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Kuvat. 1. Selaimien tunnistamat kuvatyypit Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai