12:00Temat wykladu:
Css: Selektory w css (by Robol, 11.08.06) @ wyklady.net
12:04Robolwitam na dzisiejszym wykladzie poswieconym css-owi
Robola dokladniej selektorom
12:05Robolpostaram sie przedstawic fajne efekty ktore mozemy dzieki nim uzyskac
Robolw wykladzie tez bede systematycznie wprowadzal jakies style i je tlumaczyl
Robolmoje przyklady testowalem na:
RobolIE v. 6.0.2800.1106
Robolff v 1.5.0.6
RobolOpera v. 9.01
12:06Roboljezeli ktos ma nowsze wersje to moze mu chodzic lub nie, ale na tych jezeli powiem ze nie to zazwyczaj tak bedzie ;]
Robolno to jedziemy z pierwszym przykladem
Robolhttp://wyklady.net/robol/1.1.html
12:07Robolotwieramy i zagladamy do zrodla
Robolwidzimy zagniezdzony styl miedzy znacznikami <STYLE TYPE="text/css"> a </STYLE>
12:08Roboloraz widzimy pierwszy dzisiaj selektor zwany prostym
Roboloraz widzimy pierwszy dzisiaj selektor zwany prostym
Robolp{
Roboltext-align: center;
Robolfont-weight: bold;
Robol}
Roboloraz
Robolh1{
Robolcolor: #f00;
Roboltext-align: right;
Robol}
Robolpewnie niektorzy juz sie domyslaja jak to dziala
12:09Robolpo prostu mamy:
Robolznacznik {
Robolstyl1;
RobolstylN;
Robol}
Robolw kodzie teraz mozemy opcjonalnie tego uzyc:
Robol<znacznik>tekst</znacznik>
12:10Roboli teraz ten znacznik jest w takim stylu jak sobie zadeklarowalismy w naglowku
Robolteraz wytlumacze co oznaczaja te style
12:11Robolcolor: #f00; - po prostu kolor w RGB
Robolczyli nasycenie kolorow Red, Green, Blue
12:12Roboltext-align: right; - wyrownanie tekstu do prawej strony
Robolpytania?
Robolwszyscy spia?
Robolno dobra
12:13Slashprawie ;p
Robolnie ma pytan to jedziemy
GarG;;]
Robolhttp://wyklady.net/robol/1.2.html
Robolzagladamy do zrodla i widzimy...
Robollol, selektor uniwersalny, jakie super ;]
Robol*{
Roboltext-align: center;
Robolfont-weight: bold;
Robolfont-family: arial;
Robol}
Robol*Tomplus* nie pwoeidziałe\ że #abc to inaczej #aabbcc
Robolto teraz juz wszyscy wiedza
Robol;]
12:15Robolo tym wzmianka byla juz na wykladzie b3x`a
Robolwracamy do kodu
Robolwszystkie selektory w stylu dziedzicza po selektorze uniwersalnym
12:16Robolczyli od teraz wszystko bedzie wycentrowane, boldem (pogrobione) i czcionka arial
Robolp{
Robolcolor: #f00;
Robol}
Robolnawet ten akapit ;]
12:17Robolkolejny selektor: selektor potomka
Robol*Galileusz* a jesli do akapitu dam text-align: left ?
12:18Robolto wtedy ten styl przysloni styl z selektora uniwersalnego
Roboli wtedy akapit bedzie do lewej
Robolczasem tak jest lepiej, jezeli wiekszosc kodu ma byc zcentrowana i tylko jeden akapit do lewej
12:19Robolto lepiej zadeklarowac w selektorze uniwersalnym ze wszystko ma byc wycentrowane
Roboli zrobic wyjatek dla akapitu
Roboloszczedzamy cenne bajty
Robolno dobra, wracamy do selektora potomka
12:20Robol
Roboltutaj mamy kod zrodlowy
Robolbede sie na nim opieral
Robol
12:21Roboltutaj ten sam kod ale przedstawiony w sposob rysunkowy
Robolwidzimy ze znacznik <HTML> jest na samej gorze
Robolczyli jest przodkiem wszystkich innych znacznikow
12:22Roboli rodzicem znacznikow <HEAD> i <BODY>
Robol<HEAD> i <BODY> sa dziecmi znacznika <HTML>
12:23Robol<TITLE>, <META> sa dziecmi <HEAD>
Robol<P>, <H5> i <TABLE> sa dziecmi <BODY>
12:24Robolale <TITLE>, <META> oraz <P>, <H5> i <TABLE> sa juz potomkami <HTML>
Robolpytania?
Slashzieeeew ;]
Robol;]
12:25Robolgramy dalej
Robolhttp://wyklady.net/robol/1.3.html
Robolselektor potomka
Robolpatrzymy do zrodla i widzimy:
12:26Robolh3 h2 h1{
Roboltext-align: center;
Robolcolor: #f00;
Robol}
Robol*Tomplus* dlaczego "h3 h2 h1" a nie "h3, h2, h1"
Robol*Tomplus* ??
Robolpo prostu, tak sobie przyjolem
Robolmozna sie bawic z tym ile wlezie ;]
RobolNagłówek h1 <-- dopiero tutaj zadziałał zadeklarowany styl (nie działa pod ff)
12:27Roboltak jak tam pisze, styl nie dziala pod ff
12:28Robolprzejdzmy do kodu
12:29Roboljuz odpowiadam na pytania...
Robolstyl nie dziala pod ff poniewaz, ff nie obsluguje tego stylu
Robolw kolejnych przykladach odpowiednie style nie dzalaja jeszcze czasem pod IE i raz pod Opera
12:30Robolpo prostu, ludzie sobie wymyslili standard, ale niektorzy autorzy przegladarek nie pomysleli zeby zrobic niektore style
12:32Robolh3 h2 h1{ - no wiec widzimy styl
Roboli chodzi tutaj o to ze jest sobie <h3>
Robola jako potomkiem jest <h2>
Robolkolejnym potomkiem jest <h1>
12:33Roboli dopiero <h1> ktory jest potomkiem <h2>(ktory jest potomkiem <h3>) jest wyswietlony wg. stylu
12:34Robolpytanka?
BeReTtaa
BeReTkiedy koniec xD
Robol;]
Unavowedhttp://www.w3.org/TR/CSS21/selector.html#q1
Unavowedh3 h2 h1 to co innego niz h3, h2, h1
12:35Unavowedh3 h2 h1 to hierarchia
Robolech
Robolpomylka
Unavoweda z przecinkami to po prostu lista
Roboldobrze ze poprawiles
Unavowed;-)
Unavowedspoko
Robol;]
Robolktos jeszcze?
BeReTza ile koniec ?
12:36Slashwszyscy sluchaja ;]
Tomplusberet, dopiero sie zaczeło
Robolza jakias godzine
BeReTkazdy glosniki na maxa ustawia xD
BeReTi slucha xD
Robolhttp://wyklady.net/robol/1.4.html <-- kolejny stylik
Robolh1>I{
Robolcolor: #ff0000;
Robol}
12:39Robol<Tomplus> dlaczego "h3 h2 h1" a nie "h3, h2, h1"?
Roboljezeli w poprzednim przykladzie damy "h3, h2, h1" to wtedy styl zostanie zadeklarowany dla kazdego znacznika z osobna
12:40Robola przeciez chcemy zeby tylko ten najbardziej zaglebiony dostal styl
12:41Robolwracamy do kodu
12:43Robolw tym wypadku I musi byc dzieckiem h1
Roboli wtedy mamy styl
12:44Robolczyli bedziemy mieli kursywe automatycznie kolorowana na czerwono tylko jezeli znajdzie sie ona w obrebie znacznika h1
Robolacha
12:45Roboli I musi byc dzieckiem
Roboljezeli bedzie potomkiem to juz styl nie zadziala
12:46Robolw poprzednim stylu chodzilo o selektor potomka wiec chodzilo o to zeby kolejny znacznik byl potomkiem, nie musial byc dzieckiem
Robolpytania?
Robol3
Robol2
Robol1
GeorgeY2Kbrak;
Robolhttp://wyklady.net/robol/1.5.html
12:47Robolselektor braci
Robolna naszym rysunku, http://wyklady.net/robol/drzewo.jpg nie powiedzialem jeszcze jednej rzeczy
12:48Robolotoz <TITLE> i <META> to sa bracia
Robolponiewaz maja tego samego rodzica
Roboltak samo <H5>, <P> i <TABLE> sa bracmi
Robollub jak kto woli siostrzyczkami ;]
12:49Robolalbo uniwersalniej: rodzenstwem ;]
Roboltak samo <BODY> i <HEAD>
Robolwracamy do selektorow braci
12:50Robollookamy do zrodla i widzimy takie fajne bajery
Robolh1 + h2{
Robolline-height: 0px;
Robol}
Robolcala magia polega na tym ze jezeli h1 bedzie bratem h2 to wtedy styl zadziala
Robolczyli jezeli beda obok siebie
12:51Robollookamy 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:52Robol<h1> i <h3> sa bracmi
Robolale styl zadeklarowalismy tylko dla <h1> i <h2>
Roboltak wiec zadziala tylko dla nich
Robolten selektor czasem moze sie przydac
12:53Roboljezeli damy bezposrednio znaczniki <h1> i <h2> to wtedy odstep miedzy nimi bedzie duzy
Robolale kiedy zastosujemy selektor, to mozemy go zmniejszyc
Robolco prawda styl nie dziala pod IE
12:54Robolale mozemy wybrac mniejsze zlo ;]
Robol*Slash* bedziesz sie IE przejmowal ;p
Robolno wlasnie
Roboljak ludzie chca ogladac ladne efekty to niech Opere zainstaluja ;]
12:55Robolhttp://ranking.pl/
Robollooknijcie na stronke
Robolzobaczcie na tabele przegladarki ;\
Robolwygrywa IE ;\
12:56Roboli dla tego czasem trzeba sie przejac uzytkownikami IE
12:57Robolpiszac jakis styl nie wolno zapominac o sprawdzeniu czy ten styl dziala w innych przegladarkach
Robolkiedy w jednej przegladarce jest ladny efekt...
Robolw drogiej moze byc straszny syf
12:58Robol*drugiej ;]
Roboldla tego warto nasz styl sprawdzac pod Opera, FF, Mozilla, IE 5.5, IE 6.0
12:59Robolte przegladarki sa najpopularniejsze
Robolno dobra, wracamy do naszych selektorow
13:00Robola, i jeszcze jedno...
Roboljak by kogos interesowalo jak zainstalowac kilka IE pod jednym OS`em to: http://www.quirksmode.org/browsers/multipleie.html
13:01Robolnajpier pytanka potem dalej lecimy
Robolsa jakies?
Tomplusnie
Unavowednie wiesz czy ie 7 obsluguje te selektory?
Gutek_ile jeszcze bedzie trwal wyklad i czy duzo mnei ominelo?;)
RobolUnavowed: wystarczy zainstalowac IE 7 i sie przekonac ;]
13:02RobolGutek_: jakas polowa minela
Robolhttp://wyklady.net/robol/2.html
Robolteraz beda selektory atrybotow
13:03Robol[atrybut]{
Roboltutaj jest deklaracja stylu dla atrybutu atrybut
Robolczyli, jezeli jakis znacznik wyglada np. tak: <h1 atrybut></h1> to wtedy dziala ten styl
13:04Robolkolejna rzecz: h1[atrybut]{
Roboltutaj mamy bardziej sprecyzowane
Robolprzyklad teraz MUSI wygladac tak: <h1 atrybut></h1>
13:05Robolh1[atrybut="wartosc1"]{ - tutaj znacznik <h1> MUSI miec atrybut: "atrybut" o wartosci: "wartosc1"
13:06Robolh1[atrybut~="wartosc2"]{
Robolw tym przykladzie znacznik <h1> musi miec atrybut ktorego wartosc zawiera: "wartosc1"
13:07Robolczyli moze to wygladac np. tak <h1 atrybut="wartosc1 wartosc2 wartosc3">
Robolnalezy pamietac ze zeby to zadzialalo to wartosc podana w atrybucie musi byc odzielona spacjami
13:08Robolczyli nie moze byc tak: <h1 atrybut="wartosc1_wartosc2_wartosc3">
Roboli teraz kolejny przyklad:
Robolh1[atrybut|="wartosc3"]{
13:09Roboltutaj atrybut moze wygladac tak: atrybut="wartosc-jakis_tekst"
13:10Robolnalezy zauwazyc w tym i poprzednim przykladzie |= i ~-
13:11Robolwyskoczyla pomylka
Robolh1[atrybut~="wartosc2"]{
Robolw tym przykladzie znacznik <h1> musi miec atrybut ktorego wartosc zawiera: "wartosc1"
Robolaghr
Robol;]
Robolh1[atrybut~="wartosc2"]{
Robolw tym przykladzie znacznik <h1> musi miec atrybut ktorego wartosc zawiera: "wartosc2"
13:12Robolteraz jest dobrze
Robolpytania?
Galileuszczyli co oznacz ~ ?
Tomplusczyli nie warto stosować atrybutu
13:13Tomplus<h1 style="styl; styl2;">
Tomplus?
Robolto ze wartosc atrybutu musi sie pojawic i moze miec jakis dopisek w postaci -dopisek
RobolTomplus: nie, nie warto
Robolto wszystko zalezy od sytuacji
13:14Robolw pewnym momecie, kiedy bedziesz pisal swojego cms`a przypomnisz sobie o atrybutach
Robolbleh
Robolzle zrozumialem pytanie
Robol<h1 style="styl; styl2;"> - nie warto stosowac
13:15Tomplus(juz piszę i mam problem, ale z czym\ innym, ale o tym po wykladzie)
Robolnajlepiej styl zamiescic w pliku style.css i dolaczac go w <HEAD>
13:16Robolnp. tak: <LINK href="style.css" type=text/css rel=stylesheet>
Tomplusjeżeli styl miałby atrybut h1[styl!="styl; styl2;""]{ to nie zadziała tak?
Robolraczej nie
Tomplus! miałbyć ~
Robolmusisz poczytac dokumentacje
Robolaha
13:17Roboltak wlasciwie po co dales sredniki
Robol?
Robolmozesz zrobic tak:
Tomplusraczej chodziło mi o takei dziwne zapętlenie
Robolh1[styl]{ styl}
13:18Tomplustak, a po stylu daje się \rednik prawda?
Robolh1[styl=wartosc]
URMELsiemano robol
Robolh1[styl~=wartosc]
nemessica;)
Roboli wtedy mozemy zrobic duuuuuuzo takich stylow ktore beda dziedziczyly po sobie
Robolsiema URMEL
Robollecimy dalej
13:19Robolhttp://wyklady.net/robol/3.1.html
Robolselektory klas
Robolpatrzymy do zrodla i widzimy takie super rzeczy
Robol.formatowanie { - jakie super, jak to dziala?
13:20Robolotoz to jest klasa
Robolpewnie spotkaliscie sie juz z tym wiele razy
Robolmozemy zrobic taki bajer:
Robol.klasa{
Robolstyl1: wartosc;
Robolstyl2: wartosc;
Robol}
13:21Roboli uzywamy tego np. tak: <h1 class="klasa">
Roboli wtedy znacznik h1 ma taki styl jak zadeklarowany w klasie: "klasa"
13:22Roboldalej, widzimy:
Robolp.formatowanie {
Robol(...)
Robol}
Roboltutaj mamy jasno sprecyzowane
Robolstyl dotyczy tylko i wylacznie znacznika <P> czyli akapitow
13:23Robolstyl dziedziczy po klasie .formatowanie
13:24Robolklasy sa czesto uzywane w stylach i umilaja zycie wielu webmasterom na calym swiecie
13:25Robolpytania?
Robolto jedziemy z identyfikatorami
Tompluschłoniemy wszystko
Robolhttp://wyklady.net/robol/3.2.html
13:27Robolidentyfikatory 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:28Robolidentyfikatory deklarujemy tak:
Robol#identyfikator{ styl; }
Roboli mozemy je uzyc np. tak: <p id="formatowanie1">
13:29Robol?
Slash.
Robolhttp://wyklady.net/robol/4.html
Robolselektory pseudoklas
13:30Robolpatrzymy do zrodla i widzimy...
Robola:link {
Robollol mam pomylke
13:31Roboljezeli macie opere, to mozecie zamienic sobie a:link na a
Robolwtedy widzimy taki piekny czerwony kolor na linkach
13:32Robolnajpierw bierzemy to: a:visited
Robolod tego zaczyna sie deklaracja stylu kiedy link jest juz odwiedzony
Robolmozemy kliknac na link a potem powrocic na strone to zobaczymy efekt
13:33Robola:hover - widzimy ten styl kiedy najedziemy kursorem na link
13:34Robol"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:35Roboltextarea to obszar tekstowy
13:36Robola styl "focus" dziala kiedy kursor jest w srodku tego pola
13:37Robol"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:38Robolw przykladzie napisalem ze nie zobaczymy tego efektu
Robol;]
13:39Roboldo niedawna nie dalo sie tego widac, ale ja widze ;]
Robolpytania?
Slashodnosnie text area... jest jakas pseudoklasa w ktorej da sie zdefiniowac co sie dzieje po najechaniu na textarea czy trzeba to zrobic onmouseover'em?
13:40keidiiczy robić onclick="" czy a:hower i jaka jest różnica techniczna
RobolSlash: chyba trzeba onmouseover`em
Slashk
keidiitzn. nie onclick tylok onmouseover
Robolonclick okresla co sie stanie kiedy zostanie cos klikniete, a a:hover kiedy najedziemy link
13:41Robolkeidii: efekt jest chyba taki sam
keidiimi wlasnie chodzi czym to sie rozni
Robolchyba niczym ;]
keidii;]
13:42Robolnie wiem, dokladnie, ja jestem tylko smakoszem kodu
Robol;]
Robolhttp://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:43Robolja wole uzywac php i css zamiast js zawsze kiedy to mozliwe
keidiiok.tx
RobolSelektory pseudoelementów
Robolpatrzymy do zrodla przykladu i widzimy...
Robolp.klasa1:first-line {
13:44Robolkazdy chyba potrafi przetlumaczyc
Robolchodzi tu o to ze styl zadziala na akapicie z klasa: "klasa1" tylko na pierwszej linii tekstu
13:45Robolp.klasa2:first-letter { - tutaj styl zadziala na akapicie z klasa klasa2, ale tylko na pierwszej literze
13:46Robolp.klasa3:before { - tutaj deklarujemy styl dla akapitu o klasie "klasa3" ale tylko dla tekstu ktory znajduje sie przed akapitem
13:47Robol"content" oznacza zawartosc
13:48Roboltak samo mamy z pseudoelementem ":after"
13:49Roboloznacza on tekst ktory znajduje sie za akapitem
13:50Robolostatni efekt zobaczymy wylacznie pod IE
Robolwriting-mode: tb-rl; oznacza ze tekst zostanie napisany pionowo
Robolco dociekliwsi zauwazyli: t-top b-bottom r-right l-left
13:52Robolhttp://wyklady.net/robol/6.html
13:53Roboltutaj jeszcze widzimy kilka fajnych efektow fajny
Robolpodkreslenie, nadkreslenie, przekreslenie i miganie
Robolwszystko opiera sie na stylach:
Roboltext-decoration: underline;
13:54Roboltext-decoration: overline;
Roboltext-decoration: line-through;
Roboltext-decoration: blink;
Tomplusczęstotliwo\ć miganai można zmienic?
Robolnie wiem, trzeba poszukac w dokumentacji
13:55tomekddjuz po wykladzie:>
Robolmacie jeszcze linki: http://wyklady.net/robol/linki.txt
keidii;]
13:56tomekdduzywa ktos fvwm crystal ?:P
Robolpodsumowanie
Robolstyle to bardzo ciekawa rzecz
Robolmozna osiagnac bardzo fajne efekty
13:57Robolstyle mozna zadeklarowac w jednym pliku i dolaczac go do kolejnych
Robolsa wczytywane przez przegladarki tylko raz wiec otrzymujemy wzamian szybkosc
13:58Robolponiewaz wszystko mozemy miec w jednym pliku mozemy zmieniac wyglad dziesiatek stron
Roboljednak trzeba pamietac
Robolniektore przegradarki nie obsluguja niektorych stylow
13:59Roboldla tego przed opublikowaniem strony nalezy sprawdzic ja pod najpopularniejszymi
Robolno i to by bylo na tyle
Robolhttp://flumpcakes.co.uk/css/optimiser/ <--- pod tym linkiem mamy niezly skrypcik
14:00Robolktory optymalizuje nam kod css
Robolidzcie sie teraz pobawic stylami, selektorami, etc.