Css 3 - rkpomoce

Css 3
Co nowego
rkijanka
Co nowego ?
CSS3 to przede wszystkim wysyp pseudoklas.
Dodatkowo mamy 3 nowe selektory atrybutów oraz
oczekiwany selektor ogólnego rodzeństwa.
Pseudoelement :: selection to krok ku flesha.
29.09.2011 – otrzymał status oficjalnej rekomendacji.
Selektory elementów
Selektor ogólnego następującego rodzeństwa
Zwykły selektor rodzeństwa odnosił się tylko do brata.
Teraz możemy odnieść się do wszystkich braci danego elementu.
Np..:
H1-p{deklaracje}
<section>
<p> Zawartość</p>
<h1> Zawartość</h1>
<p> Zawartość</p>
<p> Zawartość</p>
<aside>
<p> Zawartość</p>
<h2> Zawartość</h2>
Formatowanie nie objęło
<p> Zawartość</p>
pierwszego akapitu
</aside>
<h1> Zawartość</h1>
</section>
Selektory atrybutów
Selektor atrybutu o wartości rozpoczynającej się od ….
Li[title^=element] {deklaracje}
<ul>
<li title=’’element 1 listy”>Punkt 1</li>
<li title=’’element 2 listy”>Punkt 2</li>
<li title=’’element 3 listy”>Punkt 3</li>
</ul>
Uwaga:brak odstępów między elementami a nawiasami
kwadratowymi
Przykładem zastosowania może być np. odniesienie do wszystkich linków do
tej samej witryny:
a[href=’’http//www.wp.pl”]{deklaracje}
Lib np. ostylowanie wszystkich linków
a[href=’’http”] {deklaracja}
Selektor atrybutu o wartości kończącej się na ….
Li[title$=listy] {deklaracje}
<ul>
<li title=’’element 1 listy”>Punkt 1</li>
<li title=’’element 2 listy”>Punkt 2</li>
<li title=’’ostatni punkt”>Punkt 3</li>
</ul>
selektorem tym możemy np. dostać się do linków prowadzących do
poszczególnych formatów plików np. PDF
a[href$=’’.pdf”]{deklaracja}
Selektor atrybutu zawierający określony tekst
li[title*=listy] {deklaracje}
<ul>
<li title=’’punkt 1 listy”>Punkt 1</li>
<li title=’’element 2 listy”>Punkt 2</li>
<li title=’’ostatni punkt”>Punkt 3</li>
</ul>
Jak widać sformatowano pierwszy i ostatni punkt listy.
PSEUDOELEMENTY
:: selection
:: selection
:: oznacza, że mamy do czynienia z pseudoelementem.
Np.. Możemy zmienić kolor i tło po zaznaczeniu kursorem tekstu
czy obrazka
Np..
p ::selection { color:#09C; background-color: transparent;}
<p>Zaznaczony fragment jest błękitny</p>
Kolor tła przeźroczysty – transparent
Czy w przypadku obrazka np.
przykład
img::selection {background: red;}
<img src=’’obrazek.jpg”>
Pseudoklasy interfejsu użytkownika