12:00 | | Temat wykladu: |
| | Css: Selektory w css (by Robol, 11.08.06) @ wyklady.net |
12:04 | Robol | witam na dzisiejszym wykladzie poswieconym css-owi |
| Robol | a dokladniej selektorom |
12:05 | Robol | postaram sie przedstawic fajne efekty ktore mozemy dzieki nim uzyskac |
| Robol | w wykladzie tez bede systematycznie wprowadzal jakies style i je tlumaczyl |
| Robol | moje przyklady testowalem na: |
| Robol | IE v. 6.0.2800.1106 |
| Robol | ff v 1.5.0.6 |
| Robol | Opera v. 9.01 |
12:06 | Robol | jezeli ktos ma nowsze wersje to moze mu chodzic lub nie, ale na tych jezeli powiem ze nie to zazwyczaj tak bedzie ;] |
| Robol | no to jedziemy z pierwszym przykladem |
| Robol | http://wyklady.net/robol/1.1.html |
12:07 | Robol | otwieramy i zagladamy do zrodla |
| Robol | widzimy zagniezdzony styl miedzy znacznikami <STYLE TYPE="text/css"> a </STYLE> |
12:08 | Robol | oraz widzimy pierwszy dzisiaj selektor zwany prostym |
| Robol | oraz widzimy pierwszy dzisiaj selektor zwany prostym |
| Robol | p{ |
| Robol | text-align: center; |
| Robol | font-weight: bold; |
| Robol | } |
| Robol | oraz |
| Robol | h1{ |
| Robol | color: #f00; |
| Robol | text-align: right; |
| Robol | } |
| Robol | pewnie niektorzy juz sie domyslaja jak to dziala |
12:09 | Robol | po prostu mamy: |
| Robol | znacznik { |
| Robol | styl1; |
| Robol | stylN; |
| Robol | } |
| Robol | w kodzie teraz mozemy opcjonalnie tego uzyc: |
| Robol | <znacznik>tekst</znacznik> |
12:10 | Robol | i teraz ten znacznik jest w takim stylu jak sobie zadeklarowalismy w naglowku |
| Robol | teraz wytlumacze co oznaczaja te style |
12:11 | Robol | color: #f00; - po prostu kolor w RGB |
| Robol | czyli nasycenie kolorow Red, Green, Blue |
12:12 | Robol | text-align: right; - wyrownanie tekstu do prawej strony |
| Robol | pytania? |
| Robol | wszyscy spia? |
| Robol | no dobra |
12:13 | Slash | prawie ;p |
| Robol | nie ma pytan to jedziemy |
| GarG | ;;] |
| Robol | http://wyklady.net/robol/1.2.html |
| Robol | zagladamy do zrodla i widzimy... |
| Robol | lol, selektor uniwersalny, jakie super ;] |
| Robol | *{ |
| Robol | text-align: center; |
| Robol | font-weight: bold; |
| Robol | font-family: arial; |
| Robol | } |
| Robol | *Tomplus* nie pwoeidziałe\ że #abc to inaczej #aabbcc |
| Robol | to teraz juz wszyscy wiedza |
| Robol | ;] |
12:15 | Robol | o tym wzmianka byla juz na wykladzie b3x`a |
| Robol | wracamy do kodu |
| Robol | wszystkie selektory w stylu dziedzicza po selektorze uniwersalnym |
12:16 | Robol | czyli od teraz wszystko bedzie wycentrowane, boldem (pogrobione) i czcionka arial |
| Robol | p{ |
| Robol | color: #f00; |
| Robol | } |
| Robol | nawet ten akapit ;] |
12:17 | Robol | kolejny selektor: selektor potomka |
| Robol | *Galileusz* a jesli do akapitu dam text-align: left ? |
12:18 | Robol | to wtedy ten styl przysloni styl z selektora uniwersalnego |
| Robol | i wtedy akapit bedzie do lewej |
| Robol | czasem tak jest lepiej, jezeli wiekszosc kodu ma byc zcentrowana i tylko jeden akapit do lewej |
12:19 | Robol | to lepiej zadeklarowac w selektorze uniwersalnym ze wszystko ma byc wycentrowane |
| Robol | i zrobic wyjatek dla akapitu |
| Robol | oszczedzamy cenne bajty |
| Robol | no dobra, wracamy do selektora potomka |
12:20 | Robol | |
| Robol | tutaj mamy kod zrodlowy |
| Robol | bede sie na nim opieral |
| Robol | |
12:21 | Robol | tutaj ten sam kod ale przedstawiony w sposob rysunkowy |
| Robol | widzimy ze znacznik <HTML> jest na samej gorze |
| Robol | czyli jest przodkiem wszystkich innych znacznikow |
12:22 | Robol | i rodzicem znacznikow <HEAD> i <BODY> |
| Robol | <HEAD> i <BODY> sa dziecmi znacznika <HTML> |
12:23 | Robol | <TITLE>, <META> sa dziecmi <HEAD> |
| Robol | <P>, <H5> i <TABLE> sa dziecmi <BODY> |
12:24 | Robol | ale <TITLE>, <META> oraz <P>, <H5> i <TABLE> sa juz potomkami <HTML> |
| Robol | pytania? |
| Slash | zieeeew ;] |
| Robol | ;] |
12:25 | Robol | gramy dalej |
| Robol | http://wyklady.net/robol/1.3.html |
| Robol | selektor potomka |
| Robol | patrzymy do zrodla i widzimy: |
12:26 | Robol | h3 h2 h1{ |
| Robol | text-align: center; |
| Robol | color: #f00; |
| Robol | } |
| Robol | *Tomplus* dlaczego "h3 h2 h1" a nie "h3, h2, h1" |
| Robol | *Tomplus* ?? |
| Robol | po prostu, tak sobie przyjolem |
| Robol | mozna sie bawic z tym ile wlezie ;] |
| Robol | Nagłówek h1 <-- dopiero tutaj zadziałał zadeklarowany styl (nie działa pod ff) |
12:27 | Robol | tak jak tam pisze, styl nie dziala pod ff |
12:28 | Robol | przejdzmy do kodu |
12:29 | Robol | juz odpowiadam na pytania... |
| Robol | styl nie dziala pod ff poniewaz, ff nie obsluguje tego stylu |
| Robol | w kolejnych przykladach odpowiednie style nie dzalaja jeszcze czasem pod IE i raz pod Opera |
12:30 | Robol | po prostu, ludzie sobie wymyslili standard, ale niektorzy autorzy przegladarek nie pomysleli zeby zrobic niektore style |
12:32 | Robol | h3 h2 h1{ - no wiec widzimy styl |
| Robol | i chodzi tutaj o to ze jest sobie <h3> |
| Robol | a jako potomkiem jest <h2> |
| Robol | kolejnym potomkiem jest <h1> |
12:33 | Robol | i dopiero <h1> ktory jest potomkiem <h2>(ktory jest potomkiem <h3>) jest wyswietlony wg. stylu |
12:34 | Robol | pytanka? |
| BeReT | taa |
| BeReT | kiedy koniec xD |
| Robol | ;] |
| Unavowed | http://www.w3.org/TR/CSS21/selector.html#q1 |
| Unavowed | h3 h2 h1 to co innego niz h3, h2, h1 |
12:35 | Unavowed | h3 h2 h1 to hierarchia |
| Robol | ech |
| Robol | pomylka |
| Unavowed | a z przecinkami to po prostu lista |
| Robol | dobrze ze poprawiles |
| Unavowed | ;-) |
| Unavowed | spoko |
| Robol | ;] |
| Robol | ktos jeszcze? |
| BeReT | za ile koniec ? |
12:36 | Slash | wszyscy sluchaja ;] |
| Tomplus | beret, dopiero sie zaczeło |
| Robol | za jakias godzine |
| BeReT | kazdy glosniki na maxa ustawia xD |
| BeReT | i slucha xD |
| Robol | http://wyklady.net/robol/1.4.html <-- kolejny stylik |
| Robol | h1>I{ |
| Robol | color: #ff0000; |
| Robol | } |
12:39 | Robol | <Tomplus> dlaczego "h3 h2 h1" a nie "h3, h2, h1"? |
| Robol | jezeli w poprzednim przykladzie damy "h3, h2, h1" to wtedy styl zostanie zadeklarowany dla kazdego znacznika z osobna |
12:40 | Robol | a przeciez chcemy zeby tylko ten najbardziej zaglebiony dostal styl |
12:41 | Robol | wracamy do kodu |
12:43 | Robol | w tym wypadku I musi byc dzieckiem h1 |
| Robol | i wtedy mamy styl |
12:44 | Robol | czyli bedziemy mieli kursywe automatycznie kolorowana na czerwono tylko jezeli znajdzie sie ona w obrebie znacznika h1 |
| Robol | acha |
12:45 | Robol | i I musi byc dzieckiem |
| Robol | jezeli bedzie potomkiem to juz styl nie zadziala |
12:46 | Robol | w poprzednim stylu chodzilo o selektor potomka wiec chodzilo o to zeby kolejny znacznik byl potomkiem, nie musial byc dzieckiem |
| Robol | pytania? |
| Robol | 3 |
| Robol | 2 |
| Robol | 1 |
| GeorgeY2K | brak; |
| Robol | http://wyklady.net/robol/1.5.html |
12:47 | Robol | selektor braci |
| Robol | na naszym rysunku, http://wyklady.net/robol/drzewo.jpg nie powiedzialem jeszcze jednej rzeczy |
12:48 | Robol | otoz <TITLE> i <META> to sa bracia |
| Robol | poniewaz maja tego samego rodzica |
| Robol | tak samo <H5>, <P> i <TABLE> sa bracmi |
| Robol | lub jak kto woli siostrzyczkami ;] |
12:49 | Robol | albo uniwersalniej: rodzenstwem ;] |
| Robol | tak samo <BODY> i <HEAD> |
| Robol | wracamy do selektorow braci |
12:50 | Robol | lookamy do zrodla i widzimy takie fajne bajery |
| Robol | h1 + h2{ |
| Robol | line-height: 0px; |
| Robol | } |
| Robol | cala magia polega na tym ze jezeli h1 bedzie bratem h2 to wtedy styl zadziala |
| Robol | czyli jezeli beda obok siebie |
12:51 | Robol | lookamy dalej w zrodlo i widzimy... |
| Robol | <h1>Nagłówek h1</h1> |
| Robol | <h3>Nagłówek h2 - na górze mamy za duży odstęp</h3> |
| Robol | (...) |
| Robol | <h1>Nagłówek h1</h1> |
| Robol | <h2>Nagłówek h2 - tutaj nie ma tego problemu (nie działa pod IE)</h2> |
12:52 | Robol | <h1> i <h3> sa bracmi |
| Robol | ale styl zadeklarowalismy tylko dla <h1> i <h2> |
| Robol | tak wiec zadziala tylko dla nich |
| Robol | ten selektor czasem moze sie przydac |
12:53 | Robol | jezeli damy bezposrednio znaczniki <h1> i <h2> to wtedy odstep miedzy nimi bedzie duzy |
| Robol | ale kiedy zastosujemy selektor, to mozemy go zmniejszyc |
| Robol | co prawda styl nie dziala pod IE |
12:54 | Robol | ale mozemy wybrac mniejsze zlo ;] |
| Robol | *Slash* bedziesz sie IE przejmowal ;p |
| Robol | no wlasnie |
| Robol | jak ludzie chca ogladac ladne efekty to niech Opere zainstaluja ;] |
12:55 | Robol | http://ranking.pl/ |
| Robol | looknijcie na stronke |
| Robol | zobaczcie na tabele przegladarki ;\ |
| Robol | wygrywa IE ;\ |
12:56 | Robol | i dla tego czasem trzeba sie przejac uzytkownikami IE |
12:57 | Robol | piszac jakis styl nie wolno zapominac o sprawdzeniu czy ten styl dziala w innych przegladarkach |
| Robol | kiedy w jednej przegladarce jest ladny efekt... |
| Robol | w drogiej moze byc straszny syf |
12:58 | Robol | *drugiej ;] |
| Robol | dla tego warto nasz styl sprawdzac pod Opera, FF, Mozilla, IE 5.5, IE 6.0 |
12:59 | Robol | te przegladarki sa najpopularniejsze |
| Robol | no dobra, wracamy do naszych selektorow |
13:00 | Robol | a, i jeszcze jedno... |
| Robol | jak by kogos interesowalo jak zainstalowac kilka IE pod jednym OS`em to: http://www.quirksmode.org/browsers/multipleie.html |
13:01 | Robol | najpier pytanka potem dalej lecimy |
| Robol | sa jakies? |
| Tomplus | nie |
| Unavowed | nie wiesz czy ie 7 obsluguje te selektory? |
| Gutek_ | ile jeszcze bedzie trwal wyklad i czy duzo mnei ominelo?;) |
| Robol | Unavowed: wystarczy zainstalowac IE 7 i sie przekonac ;] |
13:02 | Robol | Gutek_: jakas polowa minela |
| Robol | http://wyklady.net/robol/2.html |
| Robol | teraz beda selektory atrybotow |
13:03 | Robol | [atrybut]{ |
| Robol | tutaj jest deklaracja stylu dla atrybutu atrybut |
| Robol | czyli, jezeli jakis znacznik wyglada np. tak: <h1 atrybut></h1> to wtedy dziala ten styl |
13:04 | Robol | kolejna rzecz: h1[atrybut]{ |
| Robol | tutaj mamy bardziej sprecyzowane |
| Robol | przyklad teraz MUSI wygladac tak: <h1 atrybut></h1> |
13:05 | Robol | h1[atrybut="wartosc1"]{ - tutaj znacznik <h1> MUSI miec atrybut: "atrybut" o wartosci: "wartosc1" |
13:06 | Robol | h1[atrybut~="wartosc2"]{ |
| Robol | w tym przykladzie znacznik <h1> musi miec atrybut ktorego wartosc zawiera: "wartosc1" |
13:07 | Robol | czyli moze to wygladac np. tak <h1 atrybut="wartosc1 wartosc2 wartosc3"> |
| Robol | nalezy pamietac ze zeby to zadzialalo to wartosc podana w atrybucie musi byc odzielona spacjami |
13:08 | Robol | czyli nie moze byc tak: <h1 atrybut="wartosc1_wartosc2_wartosc3"> |
| Robol | i teraz kolejny przyklad: |
| Robol | h1[atrybut|="wartosc3"]{ |
13:09 | Robol | tutaj atrybut moze wygladac tak: atrybut="wartosc-jakis_tekst" |
13:10 | Robol | nalezy zauwazyc w tym i poprzednim przykladzie |= i ~- |
13:11 | Robol | wyskoczyla pomylka |
| Robol | h1[atrybut~="wartosc2"]{ |
| Robol | w tym przykladzie znacznik <h1> musi miec atrybut ktorego wartosc zawiera: "wartosc1" |
| Robol | aghr |
| Robol | ;] |
| Robol | h1[atrybut~="wartosc2"]{ |
| Robol | w tym przykladzie znacznik <h1> musi miec atrybut ktorego wartosc zawiera: "wartosc2" |
13:12 | Robol | teraz jest dobrze |
| Robol | pytania? |
| Galileusz | czyli co oznacz ~ ? |
| Tomplus | czyli nie warto stosować atrybutu |
13:13 | Tomplus | <h1 style="styl; styl2;"> |
| Tomplus | ? |
| Robol | to ze wartosc atrybutu musi sie pojawic i moze miec jakis dopisek w postaci -dopisek |
| Robol | Tomplus: nie, nie warto |
| Robol | to wszystko zalezy od sytuacji |
13:14 | Robol | w pewnym momecie, kiedy bedziesz pisal swojego cms`a przypomnisz sobie o atrybutach |
| Robol | bleh |
| Robol | zle zrozumialem pytanie |
| Robol | <h1 style="styl; styl2;"> - nie warto stosowac |
13:15 | Tomplus | (juz piszę i mam problem, ale z czym\ innym, ale o tym po wykladzie) |
| Robol | najlepiej styl zamiescic w pliku style.css i dolaczac go w <HEAD> |
13:16 | Robol | np. tak: <LINK href="style.css" type=text/css rel=stylesheet> |
| Tomplus | jeżeli styl miałby atrybut h1[styl!="styl; styl2;""]{ to nie zadziała tak? |
| Robol | raczej nie |
| Tomplus | ! miałbyć ~ |
| Robol | musisz poczytac dokumentacje |
| Robol | aha |
13:17 | Robol | tak wlasciwie po co dales sredniki |
| Robol | ? |
| Robol | mozesz zrobic tak: |
| Tomplus | raczej chodziło mi o takei dziwne zapętlenie |
| Robol | h1[styl]{ styl} |
13:18 | Tomplus | tak, a po stylu daje się \rednik prawda? |
| Robol | h1[styl=wartosc] |
| URMEL | siemano robol |
| Robol | h1[styl~=wartosc] |
| nemessica | ;) |
| Robol | i wtedy mozemy zrobic duuuuuuzo takich stylow ktore beda dziedziczyly po sobie |
| Robol | siema URMEL |
| Robol | lecimy dalej |
13:19 | Robol | http://wyklady.net/robol/3.1.html |
| Robol | selektory klas |
| Robol | patrzymy do zrodla i widzimy takie super rzeczy |
| Robol | .formatowanie { - jakie super, jak to dziala? |
13:20 | Robol | otoz to jest klasa |
| Robol | pewnie spotkaliscie sie juz z tym wiele razy |
| Robol | mozemy zrobic taki bajer: |
| Robol | .klasa{ |
| Robol | styl1: wartosc; |
| Robol | styl2: wartosc; |
| Robol | } |
13:21 | Robol | i uzywamy tego np. tak: <h1 class="klasa"> |
| Robol | i wtedy znacznik h1 ma taki styl jak zadeklarowany w klasie: "klasa" |
13:22 | Robol | dalej, widzimy: |
| Robol | p.formatowanie { |
| Robol | (...) |
| Robol | } |
| Robol | tutaj mamy jasno sprecyzowane |
| Robol | styl dotyczy tylko i wylacznie znacznika <P> czyli akapitow |
13:23 | Robol | styl dziedziczy po klasie .formatowanie |
13:24 | Robol | klasy sa czesto uzywane w stylach i umilaja zycie wielu webmasterom na calym swiecie |
13:25 | Robol | pytania? |
| Robol | to jedziemy z identyfikatorami |
| Tomplus | chłoniemy wszystko |
| Robol | http://wyklady.net/robol/3.2.html |
13:27 | Robol | identyfikatory to cos podobnego do klas, ale tak jak mowil unknow klasy tycza sie danego rodzaju znacznikow, a identyfikatory sa dla znacznikow ktorym chcemy zrobic indywidualny styl |
13:28 | Robol | identyfikatory deklarujemy tak: |
| Robol | #identyfikator{ styl; } |
| Robol | i mozemy je uzyc np. tak: <p id="formatowanie1"> |
13:29 | Robol | ? |
| Slash | . |
| Robol | http://wyklady.net/robol/4.html |
| Robol | selektory pseudoklas |
13:30 | Robol | patrzymy do zrodla i widzimy... |
| Robol | a:link { |
| Robol | lol mam pomylke |
13:31 | Robol | jezeli macie opere, to mozecie zamienic sobie a:link na a |
| Robol | wtedy widzimy taki piekny czerwony kolor na linkach |
13:32 | Robol | najpierw bierzemy to: a:visited |
| Robol | od tego zaczyna sie deklaracja stylu kiedy link jest juz odwiedzony |
| Robol | mozemy kliknac na link a potem powrocic na strone to zobaczymy efekt |
13:33 | Robol | a:hover - widzimy ten styl kiedy najedziemy kursorem na link |
13:34 | Robol | "a:active" - widzimy ten styl kiedy link jest aktywny, mozemy to zobaczyc szczegolnie w IE kiedy klikniemy na link robi sie wokol niego ramka |
| Robol | "textarea:focus" |
13:35 | Robol | textarea to obszar tekstowy |
13:36 | Robol | a styl "focus" dziala kiedy kursor jest w srodku tego pola |
13:37 | Robol | "p:lang(en)" - styl dziala kiedy akapit ma zadeklarowany atrybut z jezykiem w jakim jest napisany |
| Robol | "p:first-child" - okresla pierwsze dziecko danego elementu czyli tutaj akapitu |
13:38 | Robol | w przykladzie napisalem ze nie zobaczymy tego efektu |
| Robol | ;] |
13:39 | Robol | do niedawna nie dalo sie tego widac, ale ja widze ;] |
| Robol | pytania? |
| Slash | odnosnie text area... jest jakas pseudoklasa w ktorej da sie zdefiniowac co sie dzieje po najechaniu na textarea czy trzeba to zrobic onmouseover'em? |
13:40 | keidii | czy robić onclick="" czy a:hower i jaka jest różnica techniczna |
| Robol | Slash: chyba trzeba onmouseover`em |
| Slash | k |
| keidii | tzn. nie onclick tylok onmouseover |
| Robol | onclick okresla co sie stanie kiedy zostanie cos klikniete, a a:hover kiedy najedziemy link |
13:41 | Robol | keidii: efekt jest chyba taki sam |
| keidii | mi wlasnie chodzi czym to sie rozni |
| Robol | chyba niczym ;] |
| keidii | ;] |
13:42 | Robol | nie wiem, dokladnie, ja jestem tylko smakoszem kodu |
| Robol | ;] |
| Robol | http://wyklady.net/robol/5.html |
| Robol | *Unavowed* onmouseover przyjmuje funkcje w javascript jako parametr a :hover definiuje styl css dla elementu po najechaniu mysza |
13:43 | Robol | ja wole uzywac php i css zamiast js zawsze kiedy to mozliwe |
| keidii | ok.tx |
| Robol | Selektory pseudoelementów |
| Robol | patrzymy do zrodla przykladu i widzimy... |
| Robol | p.klasa1:first-line { |
13:44 | Robol | kazdy chyba potrafi przetlumaczyc |
| Robol | chodzi tu o to ze styl zadziala na akapicie z klasa: "klasa1" tylko na pierwszej linii tekstu |
13:45 | Robol | p.klasa2:first-letter { - tutaj styl zadziala na akapicie z klasa klasa2, ale tylko na pierwszej literze |
13:46 | Robol | p.klasa3:before { - tutaj deklarujemy styl dla akapitu o klasie "klasa3" ale tylko dla tekstu ktory znajduje sie przed akapitem |
13:47 | Robol | "content" oznacza zawartosc |
13:48 | Robol | tak samo mamy z pseudoelementem ":after" |
13:49 | Robol | oznacza on tekst ktory znajduje sie za akapitem |
13:50 | Robol | ostatni efekt zobaczymy wylacznie pod IE |
| Robol | writing-mode: tb-rl; oznacza ze tekst zostanie napisany pionowo |
| Robol | co dociekliwsi zauwazyli: t-top b-bottom r-right l-left |
13:52 | Robol | http://wyklady.net/robol/6.html |
13:53 | Robol | tutaj jeszcze widzimy kilka fajnych efektow fajny |
| Robol | podkreslenie, nadkreslenie, przekreslenie i miganie |
| Robol | wszystko opiera sie na stylach: |
| Robol | text-decoration: underline; |
13:54 | Robol | text-decoration: overline; |
| Robol | text-decoration: line-through; |
| Robol | text-decoration: blink; |
| Tomplus | częstotliwo\ć miganai można zmienic? |
| Robol | nie wiem, trzeba poszukac w dokumentacji |
13:55 | tomekdd | juz po wykladzie:> |
| Robol | macie jeszcze linki: http://wyklady.net/robol/linki.txt |
| keidii | ;] |
13:56 | tomekdd | uzywa ktos fvwm crystal ?:P |
| Robol | podsumowanie |
| Robol | style to bardzo ciekawa rzecz |
| Robol | mozna osiagnac bardzo fajne efekty |
13:57 | Robol | style mozna zadeklarowac w jednym pliku i dolaczac go do kolejnych |
| Robol | sa wczytywane przez przegladarki tylko raz wiec otrzymujemy wzamian szybkosc |
13:58 | Robol | poniewaz wszystko mozemy miec w jednym pliku mozemy zmieniac wyglad dziesiatek stron |
| Robol | jednak trzeba pamietac |
| Robol | niektore przegradarki nie obsluguja niektorych stylow |
13:59 | Robol | dla tego przed opublikowaniem strony nalezy sprawdzic ja pod najpopularniejszymi |
| Robol | no i to by bylo na tyle |
| Robol | http://flumpcakes.co.uk/css/optimiser/ <--- pod tym linkiem mamy niezly skrypcik |
14:00 | Robol | ktory optymalizuje nam kod css |
| Robol | idzcie sie teraz pobawic stylami, selektorami, etc. |