Kaskadni opisi stilova

Kaskadni opisi stilova

Vežba VII

Upravljanje kursorom

CSS svojstvo cursor ukazuje čitaču koji oblik pokazivača miša da upotrebi

Promenom podrazumevanog kursora, posetiocima se daje do znanja da su tekst ili slika ispod njega po nečemu posebni

Primer:

abbr, acronym, .help {border-bottom:1px dotted black; cursor:help}

Kursor dobija oblik znaka pitanja kad god posetilac pređe mišem preko elementa <acronym>, <abbr> ili elementa klase help

Atribut title može se postaviti u HTML oznake da bi ukazao na pomoćni tekst koji će čitač pokazati kada se pokazivač miša nalazi iznad elementa čija oznaka sadrži atribut

Primer 16.

<html><head>

<title> Web stranica s pomoćnim tekstom </title><style type="text/css">abbr, acronym, .help {border-bottom:1px dotted black; cursor:help}</style>

</head><body><acronym title=“HTML & Web Design Tips and Techniques”> HTWDTT </acronym> provides great tips you can use to exploit <span class=“help” title=“tables, forms, CSS, ASP, Graphics”> Web technologies </span></body>

</html>Snimite dokument pod nazivom Primer16.html na D disk (D:\Grupa I\CSS\Primer16.html)

tables, forms, CSS, ASP, Graphics

Akronimi i abrevijacije

Akronim Svakidašnje skraćenice: sms, cm, kg, www.

Abrevijacija Označava skraćenicu koja se izgovara kao reč. Abrevijacije su

akronimi na putu da postanu regularne opšteprihvaćene reči. Takva je na primer nato, a svojevremeno bile su i laser, radar.

U nekim Web čitačima abbr i acronym elementi su defaultno stilizovani podvlačenjem skraćene reči sa tankom tačkastom linijom, kako bi dali korisniku do znanja da taj deo teksta nije običan tekst, nego krije nešto više — samim tim i poziva na prvu logičnu akciju.

Tipovi kursora u CSS-uVrednost kursora Opis

auto Prikazani kursor zavisi od konteksta

default Podrazumevani kursor čitača, obično strelica

hand Šaka, obično iznad mesta koje može da se pritisne u okviru slike ili hipertekstualne veze

move Strelica sa četiri vrha, koja naznačava da element može da se pomera

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize

Kursor za promenu veličine elementa. Obično je u pitanju strelica koja pokazuje u naznačenom smeru, e=istok, strelica na desno, s=jug, strelica nadole, itd.

text Kursor u obliku slova I za obeležavanje teksta ili pronalaženje mesta za umetanje

wait Kursor za čekanje, obično peščani sat

help Pomoćni kursor, obično znak pitanja

Oznaka <span>

<span> je osnova savremenog pristupa organizaciji Web stranica, koji se zasniva na kombinaciji jezika HTML verzije 4.01 i kaskadnih opisa stilova (CSS).

Oznaka <span> može stajati uz bilo koji objekat, jer ga ona samo obeležava za promenu.

Ako se bilo koji objekat nađe između oznaka <span> i </span> ništa se neće promeniti, a neće se pojaviti ni greška.

Oznaka <span> - Web homonim

Oznaka <span> prepoznaje i klase stilova. Na primer, može se napraviti klasa:

<style type="text/css“>.novitekst {font-size:18pt; color:#ff0000; font-family:arial}</style>

a kasnije se ona može iskoristiti unutar oznaka <span> na sledeći način:

<span class="novitekst“> Prikaz pomoću klase </span>

Ivice

Ivice se koriste za razdvajanje slika od teksta koji ih okružuje, da bi se označili naslovi ili istakli posebni pasusi, i slično.

HTML tabele sa atributom border podešenim na debljinu željenih ivica pikselima sa definisanom bojom i stilom ivica – malo čitača omogućava

CSS svojstvo border omogućava nezavisno upravljanje debljinom, stilom i bojom svake ivice oko objekta

Ivice

Pomoću CSS svojstva mogu se nacrtati ivice oko svakog objekta ili elementa na Web stranici

Na primer, ivice oko naslova prvog nivoa mogu se definisati CSS pravilom:h1 {border:solid 3px red}

Čitač će sve ivice nacrtati isto border-style - stil ivice - solid border-width – debljina ivice – 3px border-color – boja ivice - red

Ivice

Izgled svake ivice može se zadati zasebno. Pravilo za ivice iz prethodnog primera izgledalo bi:h1 {border-top-style:solid;

border-left-style:solid;border-right-style:solid;border-bottom-style:solid;border-top-width:3px;border-left-width:3px;border-right-width:3px;border-bottom-width:3px;border-top-color:red;border-left-color:red;border-right-color:red;border-bottom-color:red;

Ivice

CSS dopušta kombinovanje eksplicitnih i implicitnih (skraćenih) deklaracija svojstva border: Na primer – puna zlatna ivica:

h1 {border-style:solid;

border-color:#ffd700;

border-width:2px} Dupla plava linija od 0,5 inča:

h1 {border-style:double;

border-color:blue:

border-width:.5in}

Boja i širina ivica

Boja se u CSS stilovima može definisati imenom ili heksadecimalnim zapisom

Debljina ivice može se definisati bilo kojom CSS jedinicom mere: in, cm, pt, px, itd.

CSS stilovi ivica

CSS stilovi ivice, koji se naznačavaju u okviru svojstva border-style mogu biti: none dotted dashed ridge double groove solid inset outset

Primer 17. Uz pomoć definicije klasa za različite CSS stilove ivica, realizovati

sledeći primer, koji sadrži pet naslova prvog nivoa uokvirenih zelenom ivicom, širine 5px i navedenog stila.

Snimite dokument pod nazivom Primer17.html na D disk (D:\Grupa I\CSS\Primer17.html)

Primer 17.<html> <head> <title> Inline Styles </title><style>

.dotted {border-style:dotted;border-color:green;border-width:5px}

.dashed {border-style:dashed;border-color:green;border-width:5px}

.double {border-style:double;border-color:green;border-width:5px}

.groove {border-style:groove;border-color:green;border-width:5px}

.inset {border-style:inset;border-color:green;border-width:5px}

</style></head><body>

<h1 class="dotted"> Stil ivica:dotted </h1><h1 class="dashed"> Stil ivica:dashed </h1><h1 class="double"> Stil ivica:double </h1><h1 class="groove"> Stil ivica:groove </h1><h1 class="inset"> Stil ivica:inset </h1>

</body> </html>

Prilagođavanje izgleda hiperveze

Ako se za sidro (tj. hipervezu) ne definišu osobine u HTML kodu, čitači Weba podvlače tekst hiperveze i koriste jednu boju (najčešće plavu) za prikazivanje hiperveza neposećenih, a drugu (najčešće ljubičastu) za prikazivanje hiperveza posećenih lokacija

CSS pravila omogućavaju: Promenu boje teksta hiperlinka Dodavanje boje pozadine Uklanjanje linije kojima se tekst hiperveze podvlači Prikazivanje različitih hiperveza različitim stilom u okviru jedne

stranice


Svojstva font-family; font-style; font-size, color definišu izgled teksta hiperveze

Podešavanjem svojstva background-color ističe se pozadina teksta hiperveze

Podešavanjem svojstva text-decoration na none ukida se podvlačenje hipertkesta


Za podešavanje izgleda hiperveza mogu se koristiti sledeće 4 pseudoklase:

a:link Neposećene

a:visited Posećene: što znači da u listi posećenih lokacija Web čitača postoji ulaz koji pokazuje na cilj hiperveze (tj.URL naznačen atributom href hiperveze)

a:hover Pokazivač miša posetioca se nalazi nad hipervezom.

a:active Pokazivač miša posetioca se nalazi nad hipervezom, a posetilac pritiska ili pušta levi taster miša.

Primer 18.

Pozadina teksta: svetlo žuta

Tekst nije podvučen

Neposećene stranice: boja teksta zelena

Posećene stranice: boja teksta magenta

Pokazivač miša iznad hiperveze: pozadina: cyan, tekst: magenta,

italic, veličine 1,5em

Kliknite za prelazak na Primer 1.

Primer 18.

Neposećene stranice: zelena

Posećene stranice: magenta

Pozadina teksta: svetlo žuta

Tekst nije podvučen

Pokazivač miša iznad hiperveze: Pozadina: cyan, tekst: magenta,

italic, veličine 1.5em

a:link Neposećene

a:visited Posećene: što znači da u lisit posećenih lokacija Web čitača postoji ulaz koji pokazuje na cilj hiperveze (tj.URL naznačen atributom href hiperveze)

a:hover Pokazivač miša posetioca se nalazi nad hipervezom.

a:active Pokazivač miša posetioca se nalazi nad hipervezom, a posetilac pritiska ili pušta levi taster miša.

Kliknite za prelazak na Primer 1.

Primer 18.<html> <head>

<title> Hipertekstualne veze </title><style>

a {text-decoration:none; background-color:lightyellow}a:link {color:green}a:visited {color:magenta}a:hover {font-size:1.5em; font-style:italic; color:magenta; background-color:cyan}

</style></head><body> <a href="D:\Grupa I\CSS\Primer 1">Kliknite za prelazak na

primer 1.</a><br><a href="D:\Grupa I\CSS\Primer 2">Kliknite za prelazak na

primer 2.</a></body></html>Snimite dokument pod nazivom Primer18.html na D disk (D:\Grupa I\CSS\Primer18.html)

Plutajuće slike i tekst

Kada se CSS svojstvo float primeni na neki element, elemenat se izvlači iz uobičajenog rasporeda i pomera levo ili desno od elementa koji ga prate u HTML kodu stranice

Na primer: kôd stranice sadrži oznaku <img> iza koje sledi tekst pasusa: pri uobičajenom rasporedu, čitač će sliku staviti na stranicu i

pomeriti se do leve margine reda ispod slike da bi tu prikazao tekst da bi čitač pomerio sliku levo od pasusa dodaje se svojstvo float

oznaci <img>

<img style=“float:left” border=“0” src=“C:/ ...Sunset.jpg” width=“146” height=“148”>

Primer 19.

<html><head>

<title> Dodavanje slike </title></head><body>

<h1 style="float:left; background:blue; color:white"> Naslov prvog nivoa </h1>

<p>Tekst pasusa postavljen je desno od naslova prvog nivoa.</p><br> <hr>

<img style="float:right" border="0" src="C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Sunset.jpg" width=“200" height="75"><p> Kada se CSS svojstvo float primeni na neki element, elemenat se izvlači iz uobičajenog rasporeda i pomera levo ili desno od elementa koji ga prate u HTML kodu stranice. </p>

</body> </html>Snimite dokument pod nazivom Primer19.html na D disk (D:\Grupa I\CSS\Primer19.html)

<img style=“float:left” border=“0” src=“C:/ ...Sunset.jpg” width=“146” height=“148”>

Poravnanje natpisa s elementima obrasca i dodavanje boje na obrasce

Formatiranje celog obrasca moguće je postavljanjem elemenata obrasca unutar odeljka između oznaka <div></div>

<div style=“width:475px; background-color:#ffffe0; border:limegreen 1px solid; padding:5px”>

<form>

... Elementi obrasca...

</form>

</div>

Izbegavati opsežno formatiranja polja obrasca HTML-om ili kaskadnim stilovima

Polja obrasca uglavnom treba ređati odozgo nadole

Koristiti tabele umesto kaskadnih stilova prilikom rasporeda polja obrazaca

Primer 20. Postavite obrazac iz Primera 45. koji se nalazi na D disku (D:\Grupa I\

HTML 1\ Primer 45.) unutar oznaka <div></div> definisanih u nastavku:

<div style=“width:475px; background-color:#ffffe0; border:limegreen 1px solid; padding:5px”>

<form>

... Elementi obrasca...

</form>

</div>


Primer 21.

U opisu stila definišite tri klase:div.row {clear:both; padding-top:12px}

span.label {float:left; width:110px; text-align:right}

span.element {float:right; width:350px; text-align:left}

Potom upotrebite definisane klase za kreiranje obrasca prikazanog na slici.

div

labelelement

divdiv

div

div

Primer 21.<html> <head><title> CSS i obrasci </title><style>div.row {clear:both; padding-top:12px} span.label {float:left; width:110px; text-align:right}span.element {float:right; width:350px; text-align:left} </style></head><body> <div style="width:475px; background-color:#ffffe0 :#ffffe0; border:limegreen 1px

solid; padding:5px"> <form>

<div class="row"><span class="label"> First Name: </span><span class="element"> <input type="text" size="30"> </span> </div>

<div class="row"><span class="label"> Last Name: </span><span class="element"> <input type="text" size="30"> </span> </div>

<div class="row"><span class="label"> eMail Address: </span><span class="element"> <input type="text" size="30"> </span> </div>

<div class="row"><span class="label"> Comments: </span><span class="element"> <textarea style="background-color:magenta" cols="40" rows="10"> </textarea> </span> <p> </p> </div>

<div class="row"<br> <input type="submit" value="Submit"> <input type="reset" value="Reset"><br> </div>

</form></div></body></html>


Kaskadni opisi stilova

Vežba VII