Veebilehe kujundamine CSS keeles

STIILID (CSS)

Anu Kurm

ANU KURMI ARVUTIKLASS

Täiskasvanute koolitusasutus

www.arvutiklass.ee


Mis on CSS?

Lihtne võimalus lisada HTML või ka XHTML dokumentidele kujundust – fondid, värvid, paigutused jne

Stiililehed (CSS - Cascading Style Sheets)


Huvitavaid linke

http://www.w3.org/TR/REC-CSS2/ http://jigsaw.w3.org/css-validator/ http://www.thepcmanwebsite.com/

webmaster_tools.shtml


Tekkelugu

W3C soovitas CSS1 kasutada juba 1996 aastast

CSS2 on ametlikuks soovituseks W3C poolt aastast 1998

Hetkel käib töö juba CSS kolmanda versiooniga


CSS validaator

CSS validaatoriga http://jigsaw.w3.org/css-validator/ on võimalik kontrollida koodi vastavust CSS kehtivale standardile.


Näide 1 Pealkirja kujundamine HTML dokumendi

päise osas

<html> <head> <title>Bach's home page</title> <style type="text/css"> h1 { color: blue } </style> </head> <body> <h1>Minu kodulehekülg</hi> </body> </html>


Näide 2 Pealkirja kujundamine eraldi .css

laiendiga failis

<html><head><title>Bach's home page</title> <link rel="stylesheet" href="bach.css" type="text/css"></head> <body> <h1>Bach's home page</h1> </body> </html>

CSS faili sisu

h1 { color: blue }


Näide 3

CSS saab kirjeldada tegelikult ka body osas tag-isse, kusjuures stiil kehtib siis ainult selle tag-i sisule

Lõigu kujundus<body> <p style="color:green">See lõik on rohelise värviga.</p><p>Järgmine lõik on taas standardvärviga.</p></body>

Nupu kujundus<input type="submit" value="Kinnita" style="background-color:#ffffff">


SüntaksCSS süntaks koosneb kolmest osast:

selektor (selectror) omadus (property) väärtus (value)

selector {property: value}

Selektor on tavaliselt HTML element/tag omadus on atribuut, mida soovite muuta ja atribuudil on väärtus.

body {color: black}


Süntaks Kui väärtus on mitmesõnaline pannakse see

jutumärkidesse:

p {font-family: "sans serif"}

Kui kasutatate rohkem kui ühte omadust, peavad nad olema eraldatud semikoolonitega.

p {text-align:center;color:red}


Mõõtühikud, mida saab väärtusena kasutada

in: 1 toll on võrdne 2.54 cm-gacm: sentimeetermm: millimeeterpt: punkti väärtus on 1/72 ühest tollist. pc: 1 pica väärtus on 12 punkti

Näide:h1 { margin: 0.5in } /* inches */ h2 { line-height: 3cm } /* centimeters */ h3 { word-spacing: 4mm } /* millimeters */ h4 { font-size: 12pt } /* points */ h4 { font-size: 1pc } /* picas */


Süntaks Kui soovite, et stiilikirjeldusi oleks parem

lugeda, võite paigutada nad eri ridadele.

p { text-align: center; color: black; font-family: arial }


Grupeerimine Võimalik on selektoreid ka grupeerida.

h1,h2,h3,h4,h5,h6 { color: green }


CLASS selektor Class selektoriga saate defineerida erinevaid

stiile samat tüüpi HTML elementidele. Näiteks, kui soovite kahe erineva kujundusega lõike oma dokumendis kasutada.

p.right {text-align: right} p.center{text-align: center}


CLASS selektori kasutamine HTML dokumendi BODY osas

<p class="right"> Paremjoondatud lõik. </p> <p class="center"> Keskjoondusega lõik. </p>


CLASS selektori kasutamine HTML dokumendi BODY osas Class selektori defineerimisel ei pea kindlasti

kasutama HTML elemendi nimetust.

.center {text-align: center}

Sellisel juhul saate class selektorit kasutada HTML dokumedis koos erinevate HTML elementidega.

<h1 class="center"> Keskjoondusega pealkiri </h1> <p class="center"> Keskjoondusega lõik. </p>


ID selektor Id selektoriga saate defineerida sama stiili

erinevatele HTML elementidele

#green {color: green}

<h1 id="green">Some text</h1> <p id="green">Some text</p>


CSS kommentaarid

CSS kommentaaridesse saate panna oma koodi kohta käiva selgituse, mida ignoreeritakse brauseri poolt.

/* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial }


Stiilide kirjeldamisevariandid

Variant 1Sobib üksikute lehtede kujundamisel.

<head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style>

</head>


Variant 2

Variant 2Sama asja saab ette anda ka viitena välisele stiililehele. Kasutage, kui on vaja kujundada palju lehti ülesuguste stiilidega.

<head> <link rel="stylesheet"

type="text/css" href="mystyle.css" /> </head>


Stiililehe sisu variant 2 puhul Stiililehe (fail mystyle.css) sisu võib olla

järgmine

hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}


Stiilide kirjeldamisevariandid

Variant 3Stiile saate kirjeldada ka otse HTML elemendi

tagis.

<p style="color: red; margin-left: 20px"> See on lõik.</p>


Vanemad brauserid Vanemad brauserid stiile ei toeta, selleks et nad

ignoreeriksid stiilide kirjeldusi, lisage kommentaari tagid.

<head> <style type="text/css"> </style> </head>


Milliseid HTML elemente saan CSS-iga muuta?

heading - tagid (H1 - H6) paragrahv - tag (P) dokumendi nn. "keha" (BODY) lingid (A:link ja V:link) lehekülje jaotus (DIV) jne


Font font-size

NÄIDEmärgib fondi suurust

punktides (pt), tollides (in), sentimeetrites (cm), pikselites (px), protsentides (%)

h1 {font-size: 20pt}


font-family

NÄIDEmärgib fondi nägu e. šrifti võib kasutada kõikvõimalikke fonte

Võimalikud variandid: [ verdana | gill | arial | courier | times new roman | helvetica | tahoma | western | Zapf-Chancery | ams-serif ]

h1 {font-family: arial, courier}p { font-family : verdana }


color

NÄIDEmärgib teksti värvi #värvikood

Võimalikud variandid: kasutada võib nii värvikoode kui

värvide inglise keelseid nimetusi [ #CCCCCC | red ]

h1 {color: #0000FF}

p { color : #CCCCCC }


Näited

h3 {color: #ffffff;letter-spacing: 0.2cm; text-align: left; font-family: verdana; font-size: 110%}

Tabeli lahtri kujundamine td {color: #ffffff; font-family:

verdana}


Background

body {background-color: #000000} body {background-image: http://www.domeen.ee/pilt.gif}

body {background-color: blue;background-image: url('ul10.jpg')}

body {background-repeat: repeat-y}

fixed body {background-attachment: fixed}


Lingi omadused

a:link { color: red } /* külastamata link */ a:visited { color: blue } /* külastatud link */ a:hover { color: yellow } /* kasutaja liikumisel lingile */ a:active { color: lime } /* aktiivne link */


Lingi kujunduse näide

<style type="text/css">a {font-family : verdana; font-size: 12;

text-decoration: none}a:link {color : #00000ff}a:visited {color : #ff000ff}a:hover {color : #008000}</style>


Raamide kasutamine lõigu kujundamisel

<style type="text/css">p{border-style: double; border-color:

#ffffff}</style></head><body><p>Raamis tekst</p>…


Kasutatud allikad http://www.w3schools.com/css/default.asp http://www.w3.org/Style/CSS/

http://www.w3.org/TR/REC-CSS2/

Technology

Veebilehe kujundamine CSS keeles