Kaskadowe arkusze stylów CSS

Arkusze stylów CSS (Cascading Style Sheets) pozwalają określać wygląd większości elementów strony www. Styl pozwala globalnie lub lokalnie zmieniać sposób formatowania wybranego elementu dokumentu HTML.

Zaletą arkuszy CSS jest możliwość oddzielenia układu strony od właściwości jej elementów. Za pomocą języka HTML tworzy się tylko strukturę dokumentu, a korzystając ze stylów odpowiednio się go formatuje, ustawia się np. kolor czcionki, tło, wielkość liter itp. W ten sposób nasz dokument staje się bardziej przejrzysty.

Za pomocą arkusza stylów można:

• formatować tekst,
• ustawiać rodzaj czcionki,
• kolor tekstu,
• rozmiar tekstu oraz inne własności tekstu,
• zmieniać tło strony,
• zmieniać tło tabelki
• zmieniać tło paragrafu,
• tworzyć obramowania,
• zmieniać kształt kursora,
• wygląd odsyłaczy,
• kolory suwaków,
• właściwości wykazów
• i wiele, wiele więcej.

Nie ma już potrzeby ustawiać tych właściwości za pomocą atrybutów znaczników HTML. Niektóre z tych właściwości są praktycznie niemożliwe do osiągnięcia za pomocą znaczników języka HTML. Arkusze stylów w dużym stopniu rozszerzają skalę naszych możliwości, wprowadzają możliwości formatowania tekstu tak jak w zaawansowanych edytorach tekstowych.

Ważną zaletą stylów jest to, że niezwykle ułatwiają i przyspieszają pracę. Gdy chcemy zmienić wygląd wybranych elementów strony bądź całego serwisu wystarczy wykonać odpowiednie zmiany w arkuszu stylów, a efekt będzie widoczny od razu we wszystkich elementach oznaczonych tym stylem. Jakakolwiek zmiana wyglądu dokumentów formatowanych bezpośrednio poprzez znaczniki HTML wymagała dokonania poprawek na każdej stronie, w każdym elemencie z osobna.

Osadzanie stylów na stronie

Definicję stylów możemy dołączyć do dokumentu na dwa sposoby:

• jako style wewnętrzne - wewnątrz pojedynczego pliku HTML
• jako style zewnętrzne - w osobnym pliku (style.css) do którego odwołują się pliki HTML

Budowa arkusza stylów

Kaskadowy arkusz stylów to zwykły tekst - lista reguł ustalających sposób formatowania elementów treści.

Budowa reguły

Pojedyncza reguła może określać style dla jednego lub wielu elementów dokumentu. Każda reguła składa się z dwóch części:

• selektora
• deklaracji

Wykaz właściwości (cech) CSS

• !important - określa ważniejszą deklarację styli
• active - określa styl naciskanych odnośników
• after - określa zawartość dodawaną za elementem
• azimuth - umożliwia umiejscowienie dźwięku
• background-attachment - określa sposób zachowania się obrazu tła w przypadku przewijania strony
• background-color - dodaje kolor do tła stylu
• background-image - umieszcza obraz w tle stylu
• background-position - steruje umiejscowieniem obrazu w tle elementu strony
• background-repeat - określa czy i jak obraz tła będzie powtarzany
• background - właściwość skrótowa pozwala określić właściwości odpowiedzialne za tło elementu
• before - określa zawartość dodawaną przed elementem
• border-bottom-color - definiuje kolor obramowania dolnej krawędzi
• border-bottom-style -definiuje styl obramowania dolnej krawędzi
• border-bottom-width - definiuje szerokość obramowania dolnej krawędzi
• border-bottom - nadaje obramowanie dolnej krawędzi elementu
• border-color - definiuje kolor wszystkich czterech obramowań
• border-collapse - określa, czy ramki wokół tabeli są rozdzielone, czy łączone
• border-left-color - definiuje kolor obramowania lewej krawędzi
• border-left-style - definiuje styl obramowania lewej krawędzi
• border-left-width - definiuje szerokość obramowania lewej krawędzi
• border-left - nadaje obramowanie lewej krawędzi elementu
• border-right-color - definiuje kolor obramowania prawej krawędzi
• border-right-style - definiuje styl obramowania prawej krawędzi
• border-right-width - definiuje szerokość obramowania prawej krawędzi
• border-right - nadaje obramowanie prawej krawędzi elementu
• border-spacing - ustawia odstęp między komórkami tabeli
• border-style - definiuje styl używany przez wszystkie cztery obramowania
• border-top-color - definiuje kolor obramowania górnej krawędzi
• border-top-style - definiuje styl obramowania górnej krawędzi
• border-top-width - definiuje szerokość górnej krawędzi obramowania
• border-top - nadaje obramowanie górnej krawędzi elementu
• border-width - definiuje szerokość linii użytej dla wszystkich czterech obramowań
• border - rysuje linię wokół czterech krawędzi elementu
• bottom - właściwość określa odległość od dolnej krawędzi
• caption-side - określa położenie tytułu tabeli
• clear - właściwość sprawia, że element nie będzie opływał elementu pływającego
• clip - określa widoczną część elementu
• color - ustawia kolor tekstu
• content - określa tekst pojawiający się przed elementem lub po nim
• counter-increment - określa zmianę wartości licznika
• counter-reset - określa nową wartość licznika
• cue-after - określa odtwarzanie dźwięku po elemencie
• cue-before - określa odtwarzanie dźwięku przed elemencie
• cue - określa odtwarzanie dźwięku przed i po elemencie
• cursor - umożliwia zmianę wyglądu kursora, gdy zostanie on umieszczony nad określonym elementem
• direction - określa kierunek wyświetlania tekstu
• display - określa sposób wyświetlania elementu - czy będzie to element blokowy czy liniowy
• elevation - umożliwia określenie kąta dźwięku
• empty-cells - określa, jak przeglądarka ma wyświetlać zupełnie pusta komórkę tabeli
• first-child - określa styl pierwszego elementu w hierarchii
• first-letter - określa styl pierwszej litery elementu
• first-line - określa styl pierwszej linii elementu
• float - przenosi element do lewej lub prawej krawędzi okna przeglądarki, lub jeśli element pływający znajduje sie wewnątrz innego elementu, do lewej lub prawej krawędzi tego zawierającego elementu
• focus - określa styl elementu aktualnie używanego
• font-family - określa czcionkę, której przeglądarka powinna użyć do wyświetlenia tekstu
• font-size-adjust - określa wartość współczynnika wielkości wielkości czcionki do wysokości znaku
• font-size - ustawia rozmiar tekstu
• font-stretch - umożliwia wybór normalnego, zwartego, rozszerzonego kroju z danej rodziny czcionek
• font-style - tekst pisany jest kursywą, gdy tekst już pisany jest kursywą, zmienia go na zwykłą czcionkę
• font-variant - tekst pisany jest kapitalikami
• font-weight - pogrubia lub usuwa pogrubienie czcionki
• font - skrócona metoda zamieszczania właściwości tekstu w jednej deklaracji
• height - ustawia wysokość obszaru zawartości - obszaru elementu, w którym umieszczana jest zawartość
• hover - określa styl "najechanych" odnośników
• lang - określa język narodowy
• left - właściwość określa odległość od lewej krawędzi
• letter-spacing - określa odstępy między literami
• line-height - określa odstępy między wierszami tekstu w akapicie
• link - określa styl nieodwiedzonych odnośników
• list-style-image - określa obraz użyty jako punktor listy nienumerowanej
• list-style-position - pozycjonuje punktory lub liczby w liście
• list-style-type - ustawia typ punktora dla listy
• list-style - skrócona forma określania właściwości listy
• margin-bottom - ustawia margines dla dolnej krawędzi
• margin-left - ustawia margines dla lewej krawędzi
• margin-right - ustawia margines dla prawej krawędzi
• margin-top - ustawia margines dla górnej krawędzi
• margin - ustawia odstęp między obramowaniem elementu a marginesem innych elementów
• marker-offset - określa odległość między markerem i elementem
• marks - określa, czy tuz poza blokiem strony mają być drukowane znaczniki oznaczające jej obszar
• max-height - ustawia maksymalną wysokość elementu
• max-width - ustawia maksymalna szerokość elementu
• min-height - ustawia minimalną wysokość elementu
• min-width - ustawia minimalną szerokość elementu
• orphans - określa minimalną liczbę wierszy tekstu, jaka może być pozostawiona na dole drukowanej strony
• outline-color - określa kolor konturu
• outline-style - określa typ linii konturu
• outline-width - określa grubość konturu
• outline - skrócona właściwość pozwalająca w jednej deklaracji ustawić odpowiednie wartości konturu
• overflow - ustawia, co powinno się dziać, gdy tekst przepełnia swój obszar zawartości
• padding-bottom - ustawia dopełnienie dla dolnej krawędzi
• padding-left - ustawia dopełnienie dla lewej krawędzi
• padding-right - ustawia dopełnienie dla prawej krawędzi
• padding-top - ustawia dopełnienie dla górnej krawędzi
• padding - ustawia ilość miejsca między zawartością z obramowaniem a krawędziom tła
• page-break-after - określa, czy podział strony (w druku) wystąpi za wskazanym elementem
• page-break-before - określa, czy podział strony (w druku) wystąpi przed wskazanym elementem
• page-break-inside - zapobiega rozdzieleniu elementu na dwie drukowane strony
• page - określa konkretny typ strony, na której element powinien zostać wyświetlony
• pause-after - określa pauzę, jaka należy umieścić po odtwarzaniu zawartości elementu
• pause-before - określa pauzę, jaka należy umieścić przed odtwarzaniu zawartości elementu
• pause - właściwość skrótowa ułatwiająca określenie właściwości pauzy w jednym miejscu
• pitch-range - określa wariację standardowej wysokości głosu, używana do wprowadzenia modulacji i animacji głosu
• pitch - określa średnią wysokość (częstotliwość) głosu
• play-during - określa dźwięk, jaki ma być generowany w tle podczas odtwarzania zawartości elementu strony
• position - określa metodę pozycjonowania elementów na stronie
• quotes - definiuje znaki cudzysłowu
• richness - określa bogactwo, żywość, głosu odtwarzającego element
• right - właściwość określa odległość od prawej krawędzi
• size - określa wielkość i orientację bloku strony
• speak-header - określa, czy nagłówki tabeli będą odtwarzane przed każdą z jej komórek, czy tylko przed komórkami skojarzonymi z innymi nagłówkami niż komórka poprzednia
• speak-numeral - odtwarza liczby jako pojedyncze cyfry
• speak-punctuation - znaki przestankowe są odtwarzane dosłownie
• speak - określa, czy tekst ma być zaprezentowany dźwiękowo oraz w jaki sposób
• speech-rate - określa szybkość odtwarzania
• stress - określa wysokość "lokalnych akcentów" w intonacji głosu, kontroluje wielkość modulacji w znacznikach nacisku
• table-layout - określa sposób, w jaki przeglądarka rysuje tabelę
• text-align - wyrównuje tekst do lewej lub do prawej albo wyśrodkowuje tekst na stronie lub wewnątrz pojemnika
• text-decoration - dodaje linie nad lub pod tekstem albo przez tekst
• text-indent - ustawia wcięcie pierwszego wiersz bloku tekstu
• text-shadow - pozwala na podanie listy efektów cieni, które mają być zastosowane przy prezentowaniu tekstu umieszczonego wewnątrz elementu
• text-transform - zmienia wielkość liter w tekście tak, że wszystkie są wyświetlane jako wielkie albo małe lub jako wielkie wyświetlane są pierwsze litery wyrazów
• top - właściwość określa odległość od górnej krawędzi
• unicode-bidi - generowanie tekstu dwukierunkowego
• vertical-align - ustawia podstawę elementu liniowego względem podstawy otaczającej zawartości
• visibility - określa, czy element będzie wyświetlany
• visited - określa styl odwiedzonych odnośników
• voice-family - zawiera listę nazw rodzin głosów, której poszczególne elementy są od siebie oddzielone przecinkami
• volume - określa średnie natężenie zapisu dźwięku
• white-space - steruje sposobem wyświetlania przez przeglądarkę znaków spacji znajdujących się w kodzie HTML
• widows - określa minimalną liczbę wierszy, które muszą się znaleźć na początku drukowanej strony
• width - ustawia szerokość obszaru zawartości
• word-spacing - określa odstępy między słowami
• z-index - steruje warstwami pozycjonowanych elementów

Technologie webowe

Ćwiczenia

1. Znajdź darmowy szablon strony, zapisz go na dysku, wyszukaj plik CSS odpowiedzialny za formatowanie strony, podglądnij jego zawartość przy pomocy notatnika.
2. Utwórz dokument html przy użyciu notatnika i zapisz na dysku pod nazwą moja.html

Utwórz arkusz stylu przy użyciu notatnika i zapisz pod nazwą style.css

Efekt formatowania po otwarciu w przeglądarce strony moja.html

3. Zmodyfikuj zawartość pliku style.css. Sprawdź jaki wpływ na wygląd strony mają te zmiany.