dokumentu - Kurs HTML i CSS
Kaskadowe Arkusze Stylów / Cascading Style Sheets...(Standard Generalized Markup Language - Standardowy Uogólniony Język Oznaczania). SGML miał opisywać ogólną strukturę strony: nagłówek oraz ciało dokumentu, w którym mogły znajdować się akapity z tekstem, wykazy, tabele i inne elementy. SGML odpowiada tylko za wstawienie tych elementów, ale nie określa ich wyglądu. Jak łatwo się domyślić, szybko przestało to wystarczać - dlatego wprowadzono HTML. Zawarcie poleceń formatujących w samym HTML spowodowało jednak, że modyfikacja wyglądu...
- Wstawianie stylów CSS / Sposoby osadzania stylów CSS
Kaskadowe Arkusze Stylów CSS nie mogą funkcjonować samodzielnie, ponieważ definiują jedynie sposób formatowania (wygląd) elementów dokumentu, ale same ich nie tworzą. Elementy muszą zostać wstawione do dokumentu w postaci struktury znaczników np. za pomocą języka XHTML lub HTML. Dlatego aby poznać ogrom dodatkowych możliwości, jakie dają style CSS, konieczna jest wcześniejsza znajomość zasad języka HTML. Zapamiętaj zatem prostą zasadę: za pomocą języka HTML wstawia się znaczniki do kodu...
- Wstawianie stylów CSS / Wydzielone bloki <div style>
...atrybuty formatowania nam chodzi (opisane w kolejnych rozdziałach). Natomiast jako wyraz "wartość" wpisujemy dokładną wartość atrybutu. Fragment dokumentu wydzielony za pomocą bloku <div>...</div> możemy swobodnie formatować. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy uzyskać. Metoda ta jest bardzo podobna do SPAN, lecz obejmuje zwykle większe fragmenty dokumentu (może...
- Selektory elementów CSS / Selektor potomka
...wyrazy "przodek1, przodek2,..." oraz "potomek" (wielokropek należy pominąć!) są selektorami typu, przy czym przodek leży wyżej w hierarchii drzewa dokumentu [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach. Selektor tego typu pozwala nadać atrybuty elementom, które leżą niżej w hierarchii drzewa dokumentu (zawierają się w innych zewnętrznych znacznikach). Dzięki temu możemy zmienić typ formatowania...
- Selektory elementów CSS / Selektor dziecka
...> dziecko { cecha: wartość } gdzie wyrazy "rodzic" oraz "dziecko" są selektorami typu, przy czym rodzic leży o jeden rząd wyżej w hierarchii drzewa dokumentu [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach. Selektor tego typu pozwala nadać atrybuty elementom, które leżą o jeden rząd niżej w hierarchii drzewa dokumentu (zawierają się w innym zewnętrznym znaczniku). W odróżnieniu do poprzedniego...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
...np. deklaracja: selektor#B\&W\? { cecha: wartość } odpowiada identyfikatorowi: id="B&W?". Identyfikator może wystąpić tylko raz w hierarchii drzewa dokumentu, czyli w pojedynczym dokumencie nie mogą się znaleźć dwa elementy z takimi samymi identyfikatorami! Polecenie to pozwala, na nadanie określonych atrybutów formatowania dla elementu, który ma jednoznaczny identyfikator (ID), czyli występuje tylko raz w drzewie dokumentu (w odróżnieniu od klasy). Przykład <... id> Jeżeli w arkuszu stylów...
- Selektory pseudoelementów CSS / Co to są pseudoelementy CSS?
...jest nieoptymalne i czasochłonne. Z pomocą przychodzą pseudoelementy CSS, które pozwalają odnieść się do takich specjalnych elementów struktury dokumentu bez konieczności wprowadzania żadnych dodatkowych znaczników do kodu źródłowego. Pseudoelementy pozwalają również automatycznie generować pewną zawartość w określonych miejscach dokumentu, która normalnie nie znajduje się w kodzie źródłowym. Chodzi tutaj o specjalny tekst poprzedzający lub następujący np. po akapicie.
- Selektory pseudoklas CSS / Co to są pseudoklasy CSS?
Style CSS normalnie są dodawane do elementów na podstawie ich pozycji w drzewie dokumentu. Taki model nie zawsze jednak jest wystarczający. Pseudoklasy klasyfikują elementy inaczej niż po ich nazwie, atrybutach czy zawartości, tzn. w zasadzie nie są ustalane na podstawie drzewa dokumentu. Mogą być dynamiczne w tym sensie, że element "nabywa" lub "traci" pseudoklasę podczas interakcji z użytkownikiem. Przykładem jest podświetlenie elementu po wskazaniu go myszką przez użytkownika. Wszystkie...
- Selektory pseudoklas CSS / Pierwsze dziecko :first-child
...nadać określone atrybuty formatowania dla elementów, będących pierwszym dzieckiem dowolnego innego elementu - o jeden rząd niżej w hierarchii drzewa dokumentu. Rodzaj znacznika rodzica nie ma w tym przypadku znaczenia. Natomiast drugie polecenie pozwala dodatkowo określić nazwę znacznika rodzica. Przykład :first-child Po wpisaniu w arkuszu stylów: b:first-child { color: red } a w dowolnym miejscu strony: <p>To jest akapit, wewnątrz którego znajduje się <b>pierwsze pogrubienie (powinno być...
- Pozycjonowanie CSS / Nakładanie {z-index}
...mają się nakładać elementy pozycjonowane. Normalnie kolejność nakładania (zakrywania) zależy od kolejności wpisywania elementów w kodzie źródłowym dokumentu, tzn. elementy które zostały wpisane na końcu, zakrywają te poprzednie. Dzięki z-index możemy to dowolnie zmieniać. Nawet jeśli jakiś element został wpisany jako ostatni, może on być na samym spodzie (zakryty przez inne) - wystarczy nadać mu parametr z-index: 1. Polecenie to możemy zastosować, tylko jeśli element jest poddany...