 |
|
|
| Autor |
Wiadomość |
Razi
Książe postów
Dołączył: 17 Sie 2006
Posty: 936
Przeczytał: 0 tematów
Ostrzeżeń: 0/5
|
 Wysłany: Pon 21:02, 11 Sie 2008 Temat postu: CSS cz.1 - Umiejscowienie i selektory |
|
|
Mały przewodnik po CSS
Na początek. CSS - Kaskadowy arkusz stylów. Jest to "nakładka" do pliku html, aby strona była atrakcyjniejsza. Oferuje dużo większe możliwości niż sam html.
1. Sposoby umieszczania
- Bezpośrednio do obiektu - bardzo niewygodne. Utrudnia edycje, kod jest paskudny. przydatne tylko wtedy, gdy potrzebny jest w jednym miejscu. Przykład:
| Kod: | | <div class="background: #333;"> |
Wewnętrzny - wkleja się do sekcji head pliku. Przydatne, gdy strona jest w jednym pliku:
| Kod: | <style type="text/css">
klasa { background: #333; }
</style> |
Zewnętrzny - plik ze stylami jest poza plikiem, może być używany przez inne. Można kilka takich wrzucić na jednej stronie:
| Kod: | | <link rel="Stylesheet" type="text/css" href="style.css" /> |
2. Wielostylowość
użyteczna, gdy mamy stworzone kilka arkuszy, a user sam może sobie wybrać(o ile przeglądarka pozwala, Firefox i Opera pozwalają).
| Kod: | <link rel="Stylesheet" type="text/css" href="style1.css" title="Styl1" />
<link rel="Alternate stylesheet" type="text/css" href="style1.css" title="Styl2" /> |
Jeżeli używa się kilku plików css jednocześnie, muszą mieć jednakowe nazwy (title).
3. Selektory
Styl musi obejmować konkretne "obiekty" na stronie.
1. Klasy - wtedy znacznikowi trzeba przypisać klasę (np. <div class=naglowek>), a w css nazwę poprzedzić kropką(.naglowek {})
2. id - podobnie jak wyżej, tylko bardziej xhtmlowo. Zamiast class, trzeba nadać id znacznikowi, a w stylu zamiast kropką, poprzedzić krzyżykiem # nazwę.
3. Ogólnie znacznik - w stylu css nie trzeba niczym poprzedzać. Działają na cały znacznik (CSS: div { font-size: 12px;}, html: <div>)
4. Dziedziczenie
Czasem trzeba ustawić, żeby obrazek miał ramkę tylko w określonym miejscu. Po co wtedy przypisywać klasę, skoro można określić? Załóżny, że obrazek (znacznik <IMG>) znajduje się w innym znaczniku, np <div class=galeria>. Wtedy aby styl obejmował tylko taki obrazek, należy napisać: .galeria img{border: 1px solid black;}
Określa się od "najwyższego" rodzica do znacznika końcowego.
5. ustalanie wielu klas
Zdarza się, że 2 klasy mają mieć wspólne cechy. Po co je pisać osobno. Wystarczy w arkuszu CSS oddzielić przecinkami:
| Kod: | | div, p {font-size: 12px;} |
6. Podklasy
Tu taka mała wygoda. W CSS dostępne są podklasy pozwalające na większą precyzję. Odwołuje się do nich poprzez :nazwa_podsklasy, np div:first-letter. Dostępne podklasy (najważniejsze):
first-letter - pierwsza litera
first-child - pierwsze wystąpienie klasy w obrębie rodzica
last-child - ostatnie w obrębie rodzica
link - dotyczy znacznika <a>. Link nieodwiedzony
visited - j.w. tyle że dotyczy odwiedzonych
hover - znajduje się nad nim myszka. Dodaje "dynamiki" stronie
CSS3:
nth-child(n) - n-ilość pierwszych klas w obrębie rodzica
nth-last-child(n) - j.w. tylko ostatnich
Post został pochwalony 0 razy
Ostatnio zmieniony przez Razi dnia Pon 21:03, 11 Sie 2008, w całości zmieniany 1 raz
|
|
| Powrót do góry |
|
 |
|
|
 |
Xenesiss
Wymiatacz
Dołączył: 21 Kwi 2008
Posty: 279
Przeczytał: 0 tematów
Ostrzeżeń: 1/5
|
| Wysłany: Pon 21:07, 11 Sie 2008 Temat postu: |
|
|
Zią niesamowite ja sie w tym połapać nie umiem  Awesome d00d
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
wisnia232
Najaktywniejszy user
Dołączył: 11 Kwi 2006
Posty: 2456
Przeczytał: 0 tematów
Pomógł: 7 razy
Ostrzeżeń: 0/5
Skąd: C:\WINDOWS
|
| Wysłany: Pon 21:54, 11 Sie 2008 Temat postu: |
|
|
Jak zwykle nikomu się to nie przyda, ale aw3s0m3 j0b d00d
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
Razi
Książe postów
Dołączył: 17 Sie 2006
Posty: 936
Przeczytał: 0 tematów
Ostrzeżeń: 0/5
|
| Wysłany: Wto 0:36, 12 Sie 2008 Temat postu: |
|
|
Druga część będzie zawierała funkcje. Będe musiał pare screenów porobić
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
musialmati
Administrator
Dołączył: 04 Lut 2006
Posty: 6753
Przeczytał: 0 tematów
Pomógł: 16 razy
Ostrzeżeń: 0/5
Skąd: Wrocek
|
| Wysłany: Wto 9:30, 12 Sie 2008 Temat postu: |
|
|
Eee, czy awesome to nie powiedzialbym  bo to jest nietrudne, a Razi robi to jako poradniki dla zaawansowanych-bez wytlumaczen 
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
Lejgo
Administrator
Dołączył: 10 Maj 2008
Posty: 1321
Przeczytał: 0 tematów
Pomógł: 21 razy
Ostrzeżeń: 0/5
Skąd: Wrocław
|
| Wysłany: Wto 19:37, 09 Cze 2009 Temat postu: |
|
|
Czy ktoś ma słownik Raziowo-polski? Bo przydałoby mi isę...
Post został pochwalony 0 razy
|
|
| Powrót do góry |
|
|
|
|
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
|
fora.pl - załóż własne forum dyskusyjne za darmo
|
