Skip navigation.

Kirtan's Office

Opera CSS Tutorial v.1

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

,

Ponieważ już kilka osób prosiło mnie o pomoc (dwie to też kilka :D) 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 :D. 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 12. November 2006, 12:50

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 Krasuski 12. November 2006, 13:04

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

Kasia 12. November 2006, 19:32

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

Marcin 1. February 2008, 12:57

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 >
 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 >
 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 >
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 >
 <div >
  sample text
 </div>
</div>

voila... :wink:
...eee..chyba sie za bardzo rozpisalem :D

Marcin 1. February 2008, 12:59

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 >

jest poprawnie.
p.s
tak tak, wiem, html 5 pozwala na to :smile:

Maciej Krasuski 1. February 2008, 17:39

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

Marcin 1. February 2008, 22:21

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 :D, 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 Krasuski 2. February 2008, 16:22

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?

Marcin 2. February 2008, 18:11

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

Anonymous 23. May 2008, 19:12

diablohero writes:

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

Anonymous 13. July 2009, 15:36

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ą

Marcin 13. July 2009, 20:04

@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:

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies