NAZIV OBJEKTA ZNANJA
Selektori CSS3
PROLOG
Autor *
Katarina Kaplarski
Klasifikacija *
IM-lD-PVA- Selektori
Težina *
Osnovni nivo
Ključne reči *
css3, selektori
Ko sluša *
Student OAS
Trajanje *
30min
Komentari autora
SADRŽAJ
Apstrakt
Ponovićemo šta su selektori i neke od osnovnih načina stilizacije markapa, a zatim ćemo pregledati tri nova
attribute selektora u CSS3
Cilj *
Korišćenje novih attribute selektora u CSS3 za stilizaciju linkova.
Uvodne napomene
Naziv sekcije (1)
CSS3 Selektori
Sadržaj sekcije (1)
Selektori spadaju među nove module CSS3. Kao što smo rekli CSS3 je podeljen u "module". Neki
od najvažnijih modula su:
•
Selektori
•
Box Model
•
Pozadine i okviri (Backgrounds and Borders)
•
Efekti na tekstu (Text Effects)
•
2D/3D Transformacije
•
Animacije
•
Višestruke kolumne (Multiple Column Layout)
•
Korisnički interfejs (User Interface)
Šta su selektori?
Svi HTML elementi su selektori.
Stilizovanje HTML tagova <h1></h1> sa CSS selektorom h1, tagova <p></p> sa p selektorom itd...
Svaki HTML element može biti selektor. Možete modifikovati <ul> , <table> i ceo <body> selektovanjem ul,
table, body
Vežba/primer : http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand
Stilizovanje linkova
Linkovi se mogu stilizovati sa bilo kojim propertijem CSSa – boja, font, pozadina..
Takođe mogu biti stilizovani u odnosu na njihovo stanje aktivacije.
Četiri stanja su:
a:link - normalni, neposećeni link
a:visited – link koji je korisnik posetio
a:hover - link kada pređete mišem preko njega (nema na tabletima i mobilnim uređajima)
a:active – u trenutku kada je kliknut
Primer:
http://www.w3schools.com/css/tryit.asp?filename=trycss_link
Dekoracija linkova (text decoration):
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Primer:
http://www.w3schools.com/css/tryit.asp?filename=trycss_link_decoration
Pozadinska boja linkova (highlight)
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
http://www.w3schools.com/css/tryit.asp?filename=trycss_link_background
Stilizovanje listi
U HTMLu postoje dve vrste listi:
-
Neuređene - obeležene buletima
-
Uređene – obeležene brojevima i slovima
U CSSu možete dodati i slike za markiranje listi.
Primer:
http://www.w3schools.com/css/css_list.asp
Stilizovanje tabela
Mreža tabele se stilizuje sa border propertijem
table, th, td
{
border: 1px solid black;
}
Primer:
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border
Border-collapse properti određuje da li će biti jedinstvena linija ili će biti odvojene mreže na tabeli.
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Primer:
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_border-collapse
Još o stilizovanju tabela:
http://www.w3schools.com/css/css_table.asp
ID i CLASS selektori
http://www.w3schools.com/css/css_id_class.asp
Novi selektori u CSS3
Jedna grupa selektora se odnosi na klasu , tip i atribute HTML dokumenta (class, type, i attribute), a druga
sadrži pseudo-selektore koji se odnose na elemente ili inforacije izvan strukture HTML dokumentra, poput
prvog slova paragrafa ili poslednjeg child elementa od parent elementa.
Pseudo selektori
primer:
http://www.w3schools.com/css/tryit.asp?filename=trycss_firstline
Četiri attribute selektora koji su uvedeni u CSS2 su
E[attr] {} /* Simple Attribute Selector */ Jednostavni atribute selektor
E[attr='value'] {} /* Exact Attribute Value Selector */ Tačni atribute selektor
E[attr~='value'] {} /* Partial Attribute Value Selector */ Delimični atribut selektor
E[attr|='value'] {} /* Language Attribute Selector */ Jezični atribut selektor
Referenca:
---> media file
CSS2-Selektori-R1.pdf
media file <--
CSS3 ima tri nova attribute selektora i jedan novi combinator (selektor koji spaja druge selektore )
U CSS3 su uvedeni:
1. Početni selektor (Beginning Substring Attribute Value Selector): Vršimo selekciju atributa koji se
počinju sa nekom vrednošću. Označava se sa simbolom (^)
sintaksa: E[attr^='value'] {}
Koristan je kada želimo da dodamo vizuelne informacije na hiperlink
primer: a[href^='http'] {
html markap:
<p>Lorem <a href="http://example.com/" title="Image Library">ipsum</a></p>
<p>Lorem <a href="http://example.com/" title="Free Image Library">ipsum</a></p>
U CSSu to izgleda ovako:
a[href^='http'] {
background: url('link-go.png') no-repeat left center;
display: inline-block;
padding-left: 20px;
}
PRIMER2:
To dalje možemo proširiti i na druge protokole – email, ftp, https ...
CSS:
a[href^='mailto'] { background-image: url('email_go.png'); }
a[href^='ftp'] { background-image: url('folder_go.png'); }
a[href^='https'] { background-image: url('lock_go.png'); }
Markap:
<p>Lorem ipsum dolor <a href="mailto:[email protected]">email</a> sit amet.</p>
<p>Nulla lacus metus <a href="ftp://example.com">FTP server</a> luctus eget.</p>
<p>Etiam luctus tortor <a href="https://example.com">secure server</a> quis.</p>
2. Završni selektor (Ending Substring Attribute Value Selector)
Radi isto što i početni selektor samo obrnuto. Vršimo selekciju atributa koji se završavaju sa nekom
vrednošću. Obeležava se sa dolarom ($)
sintaksa: E[attr$='value'] {}
primer: a[title$='library'] {}
I sa ovim selektorom možemo da dodamo slike hiperlinkovima ali sada biramo ekstenzije dokumenta
kao vrednost kojoj pridajemo atribut – sliku, u ovom slučaju popularne file ekstenzije.
Markap:
<ul>
<li>Lorem ipsum dolor <a href="/example.pdf">PDF</a> sit amet.</li>
<li>Lorem ipsum dolor <a href="/example.doc">MS Word</a> sit amet.</li>
<li>Nulla lacus metus <a href="/example.rss">RSS Feed</a> luctus eget.</li>
</ul>
CSS:
a[href$='.pdf'] { background-image: url('pdf.png'); }
a[href$='.doc'] { background-image: url('word.png'); }
a[href$='.rss'] { background-image: url('feed.png'); }
3. Proizvoljni selektor - Arbitrary Substring Attribute Value Selector
Radi isto što i prethodna dva selektora ali sada traži niz (substring) vrednosti bilo gde u navedenom atributu.
Obeležava se zvezdicom (*)
Sintaksa: E[attr*='value'] {}
Na primer:
markap:
<a href="http://example.com/example.pdf?something=something">Lorem</a>
Napomena: Ovde Ending selektor ne bi radio jer PDF nije na samom kraju niza, ali ga arbitrarni slektor
pronalazi bilo gde u nizu.
css:
a[href*='.pdf'] { background-image: url('pdf.png'); }
4. Višestruki atribut selektori
Takođe možete da vežete više selektora zajedno. Na primer ako imate dva identična fajla u različitim
folderima, a hoćete samo drugi da izaberete
<p><a href="http://example.com/folder1/file.pdf"Lorem ipsum</a></p>
<p><a href="http://example.com/folder2/file.pdf"Lorem ipsum</a></p>
Možete ih selektovati:
a[href^='http://'] [href*='/folder2/'] [href$='.pdf'] {}
Naziv sekcije (2, ...n)
Sadržaj sekcije (2, ...n)
LINKOVI SA SLIČNIM SADRŽAJEM
Opis
URL
CSS stanje po
W3C
http://www.w3.org/Style/CSS/current-work.en.html
CSS linkovi
http://www.w3schools.com/css/css_link.asp
30 selektora koje
morate zapamtiti
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-youmust-memorize/
CSS atribute
selektori
http://css-tricks.com/attribute-selectors/
CSS selektori explained
http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
Download

SELECT statement basic form