Kirtan's Office

Opera CSS Tutorial v.1

Sunday, November 12, 2006 11:50:46 AM

,

Ponieważ już kilka osób prosiło mnie o pomoc (dwie to też kilka bigsmile) z CSS'em operowym, postanowiłem wypuścić kilku częściowego tutoriala na ten temat.


W internecie można w łatwy sposób znaleźć sporo tutoriali dotyczących CSS'a i rzeczywiście na początek są one nieocenione. Potem człowiek zaczyna dostrzegać błędy ich autorów... Do tego dochodzą te wszystkie prawa autorskie... Dlatego lepiej, jak sam coś sklecę:-)

Ok, zaczynajmy. Teoretycznie na początku powinniśmy zapoznać się ze specyfikacją CSS'a, która znajduje się na stronie W3C pod tym linkiem, zwłaszcza, jeżeli zależy nam na tym, by pisać zgodnie ze specyfikacją. Jeżeli nam nie zależy, możemy sobie darować tę lekturę.

1.1. Czym jest CSS? Zacznijmy od tego, czym jest CSS: Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Czyli w skrócie, CSS służy do tego, by nadawać obiektom (znacznikom) dokumentów sieciowych atrybuty definiujące ich wygląd (takie, jak kolor czcionki, tło, krój czcionki itp.) oraz zachowanie (najechanie myszką na obiekt, kliknięcie itp.).

1.2. Przypisywanie atrybutów do obiektów (tagów). Przypisywanie atrybutów do obiektów (tagów) HTML można robić na dwa sposoby: przez klasę i przez ID. Czym są klasy i ID? W skrócie są to bloki instrukcji, które mają być wykonane na tagu, do którego zostaną przypisane. Klasa różni się ok ID tym, iż w kodzie HTML może być tylko jedno odwołanie do ID, natomiast takie ograniczenie nie obowiązuje klas.

1.3. Definiowanie klas i ID. Klasę obiektu w CSS definiujemy w następujący sposób: 

tag.nazwa_klasy { blok instrukcji }
bądź: 
.nazwa_klasy { blok instrukcji }
W pierwszym przypadku klasa nazwa_klasy będzie mogła być użyta tylko dla tagu <tag>. Np.: 
<style> div.klasa1 { color: red; } </style>
<div class="klasa1">Tekst w div</div> // wyświetli czerwony tekst
<p class="klasa1">Tekst w p</div> // wyświetli zwykły tekst
Natomiast w drugim wypadku, klasa nazwa_klasy może być użyta dla dowolnego tagu. Np.: 
<style> .klasa1 { color: red; } </style>
<div class="klasa1">Tekst w div</div> // wyświetli czerwony tekst
<p class="klasa1">Tekst w p</div> // wyświetli czerwony tekst
ID definiuje się w ten sam sposób: 
tag#nazwa_ID { blok instrukcji }
bądź: 
#nazwa_ID { blok instrukcji }
Analogiczne są również różnice między tymi dwoma zapisami (z tym, że zamiast class="" używamy id="").

1.4. Implementacja kodu CSS do HTML'a. Nasz styl możemy implementować do kodu strony na dwa sposoby: 1. Przez tag style: 

<head><style type="text/css"> ... </style></head>
2. Przez zaimplementowanie zewnętrznego pliku z kodem: 
<head><link rel="stylesheet" href="style.css" type="text/css" /></head>
Odwoływanie się do konkretnych klas i ID przedstawiłem przy ich definiowaniu.

Na pierwszy raz to chyba wystarczy. Nie rozpisywałem się nad listą atrybutów dla klas i ID, a to z prostego powodu, że jest ich od zarąbania bigsmile. Chętnych do zapoznania się z listą atrybutów odsyłam tutaj.

W następnej części tutoriala przedstawię budowę CSS'a Opery i postaram się go omówić.

Hogfather!Deadline

Comments

Borys Sunday, November 12, 2006 12:50:11 PM

Dobry towar serwujesz, czarny bracie. p Ale mam takie oto pytania:

1. Nie bardzo rozumiem rozróżnienia pomiędzy klasami a ID. To znaczy rozumiem, ale jak niby ma wyglądać odwoływanie się do kilku klas jednocześnie w kodzie HTML? Przecież jeśli instrukcje są sprzeczne, to wtedy wszystko zacznie się kiełbasić. Jeżeli klasa A zaznacza tekst na czerwono, a klasa B na zielono, to jeśli jakiś element HTML-owego tekstu oznaczę jako obie klasy... to co wtedy?

2. Gdy zrozumiem to, o co pytam powyżej, chciałbym dowiedzieć się, kiedy dobrze jest używać klas, a kiedy ID.

3. Punkt 1.4 -- rozumiem, że po prostu definicję styli albo wrzucamy w całości do nagłówka pliku HTML-a, albo do osobnego pliku, a w rzeczonym nagłówku podlinkowujemy tylko ten plik, tak?

Maciej KrasuskiKirtan Sunday, November 12, 2006 1:04:48 PM

1. Ach widzisz, zle napisalem. Odwolanie do kilku klas jednoczesnie w KODZIE oznacza: 
<div class=klasa1>
   <div class=klasa2></div>
</div>

// troche kodu

<div class=klasa1>
   <div class=klasa2></div>
</div>
Aaa juz wiem jak powinno byc. "Do jednej klasy w mozesz sie odwolywac w kodzie kilka razy dla roznych znacznikow." Pamietaj jednak, ze dany tag moze miec naraz zdefiniowana jedna klase, jak powyzej. Jezeli chcesz np polaczyc dzialanie dwoch klas musisz zrobic takie zagniezdzenie. W stosownej chwili bede musial poprawic ten tekst;-) 2. Do konkretnego ID w kodzie html mozesz sie odwolac TYLKO raz. To znaczy, że: 
<div id=id1>
   <div id=id2></div>
</div>

// troche kodu

//
// To jest bledne, ponowne wywolanie ID
<div id=id1>
   <div id=id2></div>
</div>
Nie wywola moze bledu kompilacyjnego, ale wg specyfikacji tak sie nie robi. Dlatego ID uzywasz tylko wtedy, gdy masz do zdefiniowania jeden element (dajmy na to #top, ktory okresla obrazek loga. jest definiowany tylko raz, bo na stronie w jednej chwili logo pojawia sie tylko raz). Klas zas uzywasz wtedy, gdy chcesz dla kilku(nastu) znacznikow zastosowac jedno formatowanie. Dzieki klasie, definiujesz je tylko raz i potem sie do niego odwolujesz. 3. Tak

KasiaNimue Grafell Sunday, November 12, 2006 7:32:43 PM

O przyda się smile Dzięki wielkie Herr Loor. Może w końcu zrozumiem, o co w tym chodzi.

Marcinsuperlolek Friday, February 1, 2008 12:57:23 PM

ok, to i ja cos dorzuce od siebie, jesli chodzi o ID, to na jedna strone mozesz miec zdefiniowane maksymalnie jeden element z tymze id, nie mozesz do kilku elementow przypisac tego samego Id, od tego sa wlasnie klasy, idac dalej, to tak, dla jednego elementu mozesz przypisac wiecej niz jedna klase, przyklad: 
<style type="text/css">
.redColor {color: #f00;} 
.justifyLeft { text-align: left;}
</style>

<div class="redColor justifyLeft">
 sample text
</div>
i to jest poprawne wink .. zapytales co w wypadku gdy np zrobimy taki trick: 
<style type="text/css">
.colorRed { color:#f00;}
.colorGreen {color: #0f0;}
</style>

<div class="colorRed colorGreen">
 sample text
</div>
wowczas przypisany bedzie ostatni kolor, gdyz kolor z pierwszej klasy bedzie nadpisany przez kolor klasy drugiej. Idac tym tropem dalej, dochodzimy do innych bajerow, ktore niestety sa niedozwolone teoretycznie i validator ich nie lubi... 
<style type="text/css">
.margins {
 margin: auto;
 margin-top: 5px;
 width: 200px;
}
</style>

<div class="margins">
sample text
</div>
wywali blad validatora, ale bedzie to tylko warning a nie error, czyli teoretycznie dopuszczalne.. wink co sie stanie z tym? otoz gdy wsadzisz to na strone w ramach znacznika <body>, ten div'ek bedzie ustawiony do srodka strony, oraz margines gory zostanie ustawiony na 5px, problem w tym ze niestety ie olewa deklaracje: margin: auto;, wobec czego ustawianie elementu na srodku robi sie w inny sposob: 
<style type="text/css">
.dlaIe {
 text-align: center;
}
.pozycjonuj {
 margin: auto;
 text-align: left;
 width: 200px;
}
</style>

<div class="dlaIe">
 <div class="pozycjonuj">
  sample text
 </div>
</div>
voila... wink ...eee..chyba sie za bardzo rozpisalem bigsmile

Marcinsuperlolek Friday, February 1, 2008 12:59:27 PM

male info dla kolegi @kirtan, specyfikacja xhtml 1.0 strict i wyzej nie dopuszcza otwartych atrybutow, czyli: 
<div class=mojaKlasa>
wywali blad skladni, musisz uzyc apostrofow, czyli: 
<div class="mojaKlasa">
jest poprawnie. p.s tak tak, wiem, html 5 pozwala na to smile

Maciej KrasuskiKirtan Friday, February 1, 2008 5:39:09 PM

Wiem, ze wywala. Sam tak nie pisze, ale to byl przyklad, pisany na szybko.
Hm, niby czemu .margins wywola blad walidatora?

Marcinsuperlolek Friday, February 1, 2008 10:21:06 PM

nie tyle .margins co margins-top, wywola dlatego ze wczesniej juz zostal zdefiniowany: .margins.. teoretycznie nie mozna redefiniowac tego w taki sposob.. powinno sie zrobic nowa klase i przypisac dwie klasy do jednego obiektu, tak jak na jednym z przykladow jakie pokazalem...
o ile mi wiadomo na chwile obecna, wszystkie dostepne na rynku przegladarki obsluguja redefinicje tak wiec nie ma bolu.. nawet stary poczciwy ie 5.x to lyka...
aaa tak z innej beczki, dogrzebalem sie nawet osotanio do jednej rzeczy, mianowicie jak zmusic ie do wyswietlania png'ow bez trickow js'a, czysty css, fakt, validator sie pluje, ale mamy za to pngi w ie bigsmile, co najlepsze dziala tak samo dla ie6/ie7, wiec nie trzeba kombinowac, ani nie trzeba robic zadnych mykow odnosnie komentarzy warunkowych, jedyny problem jest taki, ze niestety ma to dosc spore problemy z mod_rewrite, nie wiedziec czemu ;/

Maciej KrasuskiKirtan Saturday, February 2, 2008 4:22:34 PM

Hm, w IE 7 dzialaja przezroczyste pngi ;]
Co do redefinicji. O ile pamietam mozna zrobic cos w stylu:
.margins
{
   margin: 5px auto;
}


I nie pamietam, zeby mi sie plul walidator na redefinicji ;]
Co do pngow: A czego uzywasz? opacity?

Marcinsuperlolek Saturday, February 2, 2008 6:11:42 PM

hmm w ie7 wiem ze dzialaja ale w ie6 ? ponadto ie7 ma tak samo skopana obsluge png jak ie6 (chodzi mi o kolory, nie o przezroczystosc)....
a uzywam filtrow...dx

Unregistered user Friday, May 23, 2008 7:12:31 PM

diablohero writes: dzieki za wytlumaczenie zaleznosci miedzy classami a id - przydalo sie ;]

Unregistered user Monday, July 13, 2009 3:36:09 PM

sir radoslaw writes: uniwerslane atrybuty do centrowaniato: position: relative; margin: 0 auto; jeśli element ma nad sobą tylko element body to będzie wycentrowany względem całej przeglądarki, a jak nie to względem bloku w którym jest zagnieżdżony, proste i działa pod każdą przeglądarką

Marcinsuperlolek Monday, July 13, 2009 8:04:39 PM

@anonim... niestety nie moge sie z Toba zgodzic, by uzywanie position: relative do centrowania strony bylo... dobrym rozwiazaniem...
dodatkowo nie zaleca sie stosowania position:relative z niezerowymi wartosciami top/left (nie okresliles ich :/)
z drugiej strony faktem jest, ze nie okreslenie top/left z position:relative sprawia iz element ktory ma taki atrybut stanie sie tzw elementem zawierajacym i nie zmieni to jego wygladu. Kolejna natomiast bolaczka, lub tez nie, jest fakt iz position:relative nie dziala na tabelach.. ale na ich zawartosci.
I to by bylo chyba na tyle ode mnie wink

Write a comment

New comments have been disabled for this post.

June 2012
M T W T F S S
May 2012July 2012
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30

Blogi

Inne

Teksty/Pliki

Przeczytane