Embed Size (px)
Citation preview
CSS
http://www.csszengarden.com/
CSS• CSS - Cascading Style Sheets • Stilovi određuju kako ispisati HTML dokumenta• Obično se pohranjuju u listove stila (style sheets)• Dodani su HTML verziji 4.0 • Vanjski list stila može donijeti uštedu vremena• Vanjski stil se pohranjuje u .css dokument• Višestruke definicije stila kaskadno će se
poredati u jedan stil
3
Problem koji rješavaju stilovi• HTML tagovi određuju način na koji će se
tretirati pojedini elementi teksta• Dodavanjem tagova koji manipuliraju
izgledom stranice (font i color) teško jerazlikovati sadržaj od forme
• W3C rješava ovaj problem dodavanjemstilova
• IE4.0 i NN4.0 podržavaju stilove
4
CSS štedi trud i vrijeme• Promijeniti boju fonta svim naslovima :
–HTML 3.2 – promijeniti atribut color za svakinaslov
–HTML 4.0 – promijeniti vanjski dokument u kojem je definiran stil
• Primijeniti isti stil na više dokumenata• Promjenom stila mijenja se izgled svih
dokumenata
5
Umetanje Style Sheet-a • Cascading Style Sheet može se umetnuti u HTML na 3
načina. • INLINE - style elementi mogu se dodati direktno u HTML
tag. • INTERNAL - style sheet može biti dio HTML dokumenta,
a to podrazumijeva direktno upisivanje u HTML dokument u <head> područje.
• EXTERNAL - odvojeni dokument koji će se pozivatipomoću web adrese (URL-a) svaki puta kad se HTML dokument bude učitavao. Link za odvojeni external style sheet također će se smjestiti u <head> element.
6
7
Zaglavlje Zaglavlje
CSS
doc
CSS
Zaglavlje Zaglavlje
Sintaksa CSS-aselector { property: value }
8
Obično html tag na koji će se primjenjivati stil
Svojstvo, atribut kojiželimopromijeniti
Vrijednost nakojupostavljamoatribut
Npr.body {color: black}
Za inline CSS dodaje se atribut stylestyle=“property1: value1[; property2: value3 ] ”
HTML dohvat CSS-om• Element Selektori
<p> -p {color: red; }
• Class Selektori<p class=“code"> -
p.code {color: cyan; font-family: courier }
or .code {color: #F0F; font-family: courier }
• ID Selektori <p id="sig"> -
p#sig {color: cyan; }
or #sig {color: #F0F; }
Blokovi
Klasifikacija• Svojstva klasifikacije omogućavaju nam:
– podešavanje kako će se ispisati element– podesiti gdje će se slika prikazati u drugom elementu– pozicionirati element relativno u odnosu na njegov
normalni položaj – pozicionirati element korištenjem apsolutne vrijednosti– Kontrolirati vidljivost elementa
– Svojstva: clear, cursor, display, float, position, align, visibility.
Kalsifikacija
• Clear: s koje strane elementa nisu dozvoljeni drugi elementi
• Cusrsor: različiti izgledi kursora (crosshair, help, wait)
• Display : kako prikazati element (block, table-cell, inline, none)
• Float:
Pozicioniranje• Svojstva pozicioniranja omogućavaju nam
da odredimo položaj elementa• Možemo odrediti left, right, top, i bottom
položaj elementa• Postaviti oblik elementa• Postaviti jedan element iza drugoga• Definirati što će se dogoditi ako je sadržaj
elementa prevelik da stane određeno područje
Property Description Values NN IE W3C
bottom Specifies the bottom edge of an element auto%
length
6.0 5.0 CSS2
clip Sets the shape of an element. The element is clipped into this shape, and displayed
shape
auto6.0 4.0 CSS2
left Specifies the left edge of an element auto%
length
4.0 4.0 CSS2
overflow Sets what happens if the content of an element overflow its area
visiblehiddenscrollauto
6.0 4.0 CSS2
position Places an element in a static, relative, absolute or fixed position
staticrelativeabsolutefixed
4.0 4.0 CSS2
right Specifies the right edge of an element auto%
length
5.0
CSS2
top Sets how far the top edge of an element is above/below the top edge of the parent element
auto%
length
4.0 4.0
CSS2
vertical-align
Sets the vertical alignment of an element baselinesubsupertoptext-topmiddlebottomtext-bottomlength
%
4.0 4.0
CSS1
z-index Sets the stack order of an element autonumber
6.0 4.0
CSS2
Display• Block
– Uzima cijelu širinu, dodaje liniju prije i nakon– (display:block;)
• Inline – Uzima samo onoliko širine koliko mu je potrebno i ne
zahtjeva više linija– (display:inline;)
• Not displayed – Neki tagovi nisu vidljivi, poput <meta /> i <style> – (display:none;)
Pozicioniranje: Static•{position: static;}
Pozicioniranje: Relative•{position: relative;}
Pozicioniranje: Float•{float: left;}
Pozicioniranje: Absolute•{position: absolute;}
Pozicioniranje: Fixed•{position: fixed;}
Clear
{clear: left;}{clear: left;}
Pseudo elementi i pseudo klase
:after:lang
:beforea:focus
:first-childa:active
:first-lettera:visited
:first-linea:link
Pseudo elementiPseudo klase
Pseudo klase anchor tagaa:link
a:visiteda:hovera:active
• Pravila:• a:hover mora se definirati nakon a:link i
a:visited u definiciji CSSa da bi imali efekta!!• a:active mora se definirati nakon a:hover• Imena pseudo klasa nisu case-sensitive.• Podžano u IE 4, NN4.5 N6 samo dijelomično
Vrste medija• Vrste medija (media types) omogućavaju nam da
se web stranica prikazuje različito u različitim medijima
• Mediji : ekran, papir, zvučni preglednik• Neka css svojstva definirana su posebno za
neke medije – Voice-family – samo za zvukovne preglednike– Text-size – može se koristiti za ekran i papir
• Potrebna su nam veća slova na ekranu nego na papiru• Na ekranu je lakše čitati sans-serif , a na papiru serif
@media pravilo• Pomoću @media pravila odabiremo na
koji se medij odnosi stil• @media screen • { stil koji se odnosi sadržaj prikazan na
ekranu } • @media print• { stil koji se odnosi na ispisani sadržaj } • @media screen,print• { stil koji se odnosi na oba medija }
OOCSS
• Objektno orjentirani CSS– Separate Structure and skin– Separate Container and content
CSS3 primjeri• Primjer 5 novih tehnologija novog CSS-a
–Zaobljeni rubovi–Slike za rubove–Sjene–Prozirnosti–Vlastiti fontovi @Font-Face
CSS3 – zaobljeni rubovi
CSS3 – slika za rubove
CSS3 – slika za rubove• [ <image> [ <number> | <percentage> ]{1,4} [/ <border-
width>{1,4}]? ] && [ stretch | repeat | round ]{0,2}
1 vrijednost: 1. sva 4 ruba slike
2 vrijednosti: 1. gornji i donji rub
2. lijevi i desni rub
3 vrijednosti: 1. gornji rub
2. lijevi i desni rub
3. donji rub
4 vrijednosti: …
Sjena• Box-shadow
Sjena• Text-shadow
Prozirnost (uz pomoć rgba)
rgba
@Font-Face• Korištenje vlastitih fontova
–Nije nužno da klijent ima instaliran dotični font–Kako bi se prije prikazao takav font?
CSS3 - dodatak• Tri nove vrste selektora:
– [att^="value"]• Elementi čiji atributi započinju sa specificiranom
vrijednosti
– [att$="value"]• Elementi čiji atributi završavaju sa specificiranom
vrijednosti
– [att*="value"]• Elementi čiji atributi sadrže specificiranu vrijednost
–http://tools.css3.info/selectors-test/test.html
Što ćete naučiti
• Internet općenito• HTML• CSS
• XML• XHTML• Javascript• DOM• DHTML
� AJAX
� jQuery
� PHP
� ASP.NET
� Ruby On Rails
� MS Silverlight
� FLASH, SMIL, SVG
� ...
![[HTML, Css] HTML & Css Learning](https://img.dokumen.tips/doc/110x75/55cf9813550346d0339570eb/html-css-html-css-learning.jpg)
