docp - rkpomoce
download 
Reklamacja Transkrypt
p - rkpomoce
Pseudoklasy
interfejsu
użytkownika
Css3 /2
rkijanka
W punkcie tym pojawiła się aż 17 nowych pseudoklas.
Nowe pseudoklasy możemy podzielić na 3 grupy:
- interfejsu użytkownika;
- strukturalne;
- inne nie pasujące do żadnej z tych grup.
Pola formularza
Potrzebne nam będą pojęcia disabled i enabled niedostępne, dostępne ,
dzięki czemu grupowo użytkownikowi wskażemy pola aktywne i nie
aktywne.
Przykład:
:enabled {
background:#dedede;
outline: 1px solid #3C0;
border: none;
height: 20px;
margin:3px;
}
<input type=’’text”><br>
<input type=’’email”><br>
<textarea disabled> tekst zblokowany</textarea>
Niedostępne pole formularza
Pseudoklasa :disabled pozwala zablokować wszystkie pola formularza
:enabled {
background-color:#dedede;
outline: 1px solid #3C0;
border:none;
height:20px;
margin:3px;
}
:disabled {outline:1px solid red; border:none;}
<input type=’’text”><br>
<input type="text" name="email"disabled><p>
<textarea disabled> pole zablokowane</textarea>
przykład
Pole wyboru
W html mamy dwa rodzaje pól jednokrotnego wyboru
- radio button /kółko/
i wielokrotnego wyboru
- checkbox /kwadracik/
po najechaniu myszką (:hover) na pole formularza podświetla on się lekko, a po
kliknięciu - ustawieniu fokusu (:focus) podświetla się mocniej.
: checked {outline: 1px solid green; width: 20px; height: 20px;}
input type=”checkbox”>checkbox<br>
input type=”radio”> Radio button<br>
przykład
Pseudoklasy strukturalne
Korzeń dokumentu
:root odnosi się do elementu pierwotnego.
w przypadku HTML będzie to <html> zaś synonimem selektora html dlaczego nie
miał by być body?
:root{background:black;}
body{background:blue;}
<html>
<head></head>
<body> </body>
</html>
przykład
Puste elementy
:empty – elementy puste na stronie- bez treści i znaczników;
Po co w takim razie go stosować?
- chociażby do eliminowania pustych niepotrzebnych elementów lub
elementów komentarzy
:empty {deklaracja}
<article>
<h1> Nagłówek stopnia pierszego.</h1>
<p>akapit</p>
<p><!—KOMENTARZ --></p>
</ article >
Pierwsze dziecko
:first-child – zaznacza pierwsze dziecko elementu nadrzędnego czyli dziecko brata
poprzedzającego
Zwykły selektor rodzeństwa
Dziecko nadrzędne
H1+p {deklaracja}
<section>
<h1>zawartość</h1>
<p>zawartość</p>
<p>zawartość</p>
<h1>zawartość</h1>
<aside>
<h1>zawartość</h1>
<h2>zawartość</h2>
<p>zawartość</p>
</aside>
</section>
Tu oscylujemy tylko 1 akapit po bracie
najbliższym nie po wszystkich braciach
p:first-child {deklaracja}
<div>
<p> Akapit1</p>
<h1> Nagłówek 1</h1>
<p> Akapit 2</p>
</div>
Nastąpiło tu odwrócenie selektora
rodzeństwa
Ostatnie i jedyne dziecko
:last-child – jak i pierwsze to może też być ostatnie.
Jedyne dziecko
Pierwsze dziecko
li:first-child {deklaracja}
<ul>
<li> punkt 1</li>
<li> punkt 2</li>
<li> punkt 3</li>
</ul>
Ostatnie dziecko
przykład
li:last-child {deklaracja}
<ul>
<li> punkt 1</li>
<li> punkt 2</li>
<li> punkt 3</li>
</ul>
li:only-child {deklaracja}
<p>
<ul>
<li> punkt 1</li>
<li> punkt 2</li>
<li> punkt 3</li>
</ul>
</p>
<article>
<ul>
<li> jedyne dziecko</li>
</ul>
</article>
przykład
Pierwszy- ostatni- jedyny element danego typu
:first-of-type
p:first-of-type {deklaracja}
<article>
<h1>Nagłówek</h1>
<p>Akapit pierwszy.</p>
<p>Akapit drugi.</p>
<p>Akapit trzeci.</p>
<div>
<p>Akapit wewnątrz .</p>
</div>
</article>
przykład
|
:last-of-type
| only-of-type
przykład
p:last-of-type {deklaracja}
<article>
<h1>Nagłówek</h1>
<p>Akapit pierwszy.</p>
<p>Akapit drugi.</p>
<p>Akapit trzeci.</p>
<div>
<p>Akapit wewnątrz .</p>
</div>
</article>
<style>
h1:only-of-type{deklaracja}
</style>
<article>
<h1>Nagłówek</h1>
<p>Akapit pierwszy.</p>
<p>Akapit drugi.</p>
<p>Akapit trzeci.</p>
<div>
<p>Akapit wewnątrz 1.</p>
<p>Akapit wewnątrz 2.</p>
</div>
</article>
przykład
Pseudoklasa :nth-child(n)
Child – dziecko, n- niewidoma , th – końcówka liczebników
- zarządzamy dziećmi elementu
Bardziej namieszamy
li:nth-child(2n+3) {deklaracja}
Dowolne dziecko
elementu
Tu zaczynamy od dziecka 3
li:nth-child(3) {deklaracja}
i zaznaczamy co drugi element
<ul>
<li>Punkt 1</li>
odd – nieparzyste
Użycie np.
<li>Punkt 2</li>
even – parzyste
(2n-2) – zaczniemy odliczanie od
<li>Punkt 3</li>
abstrakcyjnego punktu -2
<li>Punkt 4</li>
li:nth-child(odd) {color:red}
(-2n+5) – odwracamy kolejność,
<li>Punkt 5</li>
li:nth-child(even) {color:blue}
odliczanie od końca
</ul>
Punkt 1
Punkt 2
Punkt 3
Punkt 4
Punkt 5
:nth-child(1) = :first-child
Pseudoklasa :nth-last-child(n)
Klasa odwrotna do poprzedniej.
Znaczy , że elementy numerują się od ostatniego
Pseudoklasa :nth-of-type(n)
p:nth-of-type(2n+1) {deklaracja}
<article>
<h1>Nagłówek</h1>
<p>Akapit pierwszy.</p>
<p>Akapit drugi.</p>
<h1>Nagłówek 2</h1>
<h1>Nagłówek 3</h1>
<p>Akapit trzeci.</p>
<div>
<p>Akapit wewnątrz .</p>
<p>Akapit wewnątrz .2</p>
</div>
</article>
Jak widać – pomijane są tu
elementy inne niż akapit.
Wszystko rozpoczyna się od
pierwszego z nich.
Pseudoklasa :nth-last-of-type(n)
p:nth-last-of-type(2n+1){deklaracja}
<article>
<h1>Nagłówek</h1>
<p>Akapit pierwszy.</p>
<p>Akapit drugi.</p>
<h1>Nagłówek 2</h1>
<h1>Nagłówek 3</h1>
<p>Akapit trzeci.</p>
<div>
<p>Akapit wewnątrz .</p>
<p>Akapit wewnątrz .2</p>
</div>
</article>
Negacja :not( )
Aby wszystko zadziałało, sama pseudoklasa musi zostać poprzedzona
jakimś elementem, natomiast w nawiasie może mieścić się tylko jeden
selektor, który nie może być pseudoelementem.
p:not(.jeden) {deklaracja}
<div class=”jeden”>
<p class=”jeden”>Akapit pierwszy</p>
<p> Akapit drugi </p>
<p class=”dwa”>Akapit trzeci</p>
<p> Akapit czwarty </p>
<div class=”jeden”>Blok</div>
</div>
Mamy tu odniesienie do
wszystkich akapitów,
które nie mają
przypisanej klasy jeden
:not ( ) a selektor uniwersalny
*{color:black;}
:not(p) {color: #CCC}
<div>
<h1>Nagłówek</h1>
<p> Akapit </p>
<span> Linia</span>
</div>
Nagłówek
Akapit
Linia
Formatowanie kotwic
Jak pamiętamy tworzymy je atrybutem name elementu <a>, a następnie
odnosimy się do href i znaku #.
i tu mamy : target
/pamiętamy że aktywna może być tylko jedna kotwica/
body {font-family: Verdana, Geneva, sans-serif;}
:target {font-size: 25px;}
<a href=”#kotwica”>Nagłówek</a><br>
<a href=”#kotwica2”>Nagłówek drugi</a><br>
<p><a name=”#kotwica”>Akapit</a></p>
<p><a name=”#kotwica2”>Akapit drugi</a></p>
Gdy zostanie kliknięta właściwa kotwica,
akapit się powiększy.
cdn. Czcionka i tekst
