veebilehe kujundamine css keeles
Post on 24-Jun-2015
957 Views
Preview:
DESCRIPTION
TRANSCRIPT
STIILID (CSS)
Anu Kurm
ANU KURMI ARVUTIKLASS
Täiskasvanute koolitusasutus
www.arvutiklass.ee
ANU KURMI ARVUTIKLASS
Mis on CSS?
Lihtne võimalus lisada HTML või ka XHTML dokumentidele kujundust – fondid, värvid, paigutused jne
Stiililehed (CSS - Cascading Style Sheets)
ANU KURMI ARVUTIKLASS
Huvitavaid linke
http://www.w3.org/TR/REC-CSS2/ http://jigsaw.w3.org/css-validator/ http://www.thepcmanwebsite.com/
webmaster_tools.shtml
ANU KURMI ARVUTIKLASS
Tekkelugu
W3C soovitas CSS1 kasutada juba 1996 aastast
CSS2 on ametlikuks soovituseks W3C poolt aastast 1998
Hetkel käib töö juba CSS kolmanda versiooniga
ANU KURMI ARVUTIKLASS
CSS validaator
CSS validaatoriga http://jigsaw.w3.org/css-validator/ on võimalik kontrollida koodi vastavust CSS kehtivale standardile.
ANU KURMI ARVUTIKLASS
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>
ANU KURMI ARVUTIKLASS
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 }
ANU KURMI ARVUTIKLASS
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">
ANU KURMI ARVUTIKLASS
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}
ANU KURMI ARVUTIKLASS
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}
ANU KURMI ARVUTIKLASS
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 */
ANU KURMI ARVUTIKLASS
Süntaks Kui soovite, et stiilikirjeldusi oleks parem
lugeda, võite paigutada nad eri ridadele.
p { text-align: center; color: black; font-family: arial }
ANU KURMI ARVUTIKLASS
Grupeerimine Võimalik on selektoreid ka grupeerida.
h1,h2,h3,h4,h5,h6 { color: green }
ANU KURMI ARVUTIKLASS
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}
ANU KURMI ARVUTIKLASS
CLASS selektori kasutamine HTML dokumendi BODY osas
<p class="right"> Paremjoondatud lõik. </p> <p class="center"> Keskjoondusega lõik. </p>
ANU KURMI ARVUTIKLASS
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>
ANU KURMI ARVUTIKLASS
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>
ANU KURMI ARVUTIKLASS
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 }
ANU KURMI ARVUTIKLASS
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>
ANU KURMI ARVUTIKLASS
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>
ANU KURMI ARVUTIKLASS
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")}
ANU KURMI ARVUTIKLASS
Stiilide kirjeldamisevariandid
Variant 3Stiile saate kirjeldada ka otse HTML elemendi
tagis.
<p style="color: red; margin-left: 20px"> See on lõik.</p>
ANU KURMI ARVUTIKLASS
Vanemad brauserid Vanemad brauserid stiile ei toeta, selleks et nad
ignoreeriksid stiilide kirjeldusi, lisage kommentaari tagid.
<head> <style type="text/css"> <!-- hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --></style> </head>
ANU KURMI ARVUTIKLASS
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
ANU KURMI ARVUTIKLASS
Font font-size
NÄIDEmärgib fondi suurust
punktides (pt), tollides (in), sentimeetrites (cm), pikselites (px), protsentides (%)
h1 {font-size: 20pt}
ANU KURMI ARVUTIKLASS
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 }
ANU KURMI ARVUTIKLASS
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 }
ANU KURMI ARVUTIKLASS
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}
ANU KURMI ARVUTIKLASS
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}
ANU KURMI ARVUTIKLASS
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 */
ANU KURMI ARVUTIKLASS
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>
ANU KURMI ARVUTIKLASS
Raamide kasutamine lõigu kujundamisel
<style type="text/css">p{border-style: double; border-color:
#ffffff}</style></head><body><p>Raamis tekst</p>…
ANU KURMI ARVUTIKLASS
Kasutatud allikad http://www.w3schools.com/css/default.asp http://www.w3.org/Style/CSS/
http://www.w3.org/TR/REC-CSS2/
ANU KURMI ARVUTIKLASS
top related