Informacje wstępne: Dodatki, które warto doinstalować do przeglądarki:

Transkrypt

1 Podstawy stylów CSS, komentarze do stylów, zalety... 2 Dołączanie stylów do dokumentów... 3 Budowa stylu i rodzaje selektorów... 4 Dziedziczenie stylów... 5 Selektory specjalne: identyfikatory, klasy... 6 Własności czcionek- CSS Formatowanie tekstu CSS Kolumny tekstu Pseudoklasy Style list Kolory i podkłady Marginesy, obrysy i obramowania Style dotyczące tabel Wielkości i pozycje elementów witryny Model pudełkowy, wymiary Pozycjonowanie elementów Pozycjonowanie: statyczne, zaczepione, absolutne, relatywne Warstwy i kursory Układ strony generowany przez CSS Praca nad układem strony opartej na CSS Transformacje i animacje w CSS Budowa strony opartej na modelu pudełkowym Tworzenie podstroi Praca nad stroną 83 Przykładowe zadanie z kwalifikacji E.14.: Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami Informacje wstępne: Dodatki, które warto doinstalować do przeglądarki: 1

2 Przydatne linki: Podstawy stylów CSS, komentarze do stylów, zalety CSS ( ang. Cascading Style Sheets, kaskadowe arkusze stylów) jest językiem służącym do opisu sposobu prezentowania informacji na stronach WWW. Kaskadowość arkuszy to nic innego jak możliwość zagnieżdżania jednego arkusza w drugim. Na przykład jeden arkusz opisuje elementy blokowe, a drugi elementy liniowe strony. Trzeci arkusz je importuje i dodaje własne poprawki tworząc tym samym ostateczny arkusz. Ogólnie chodzi o to, że właściwości się mogą nakładać, a ostateczną właściwość będzie ta, która została zdefiniowana na końcu i nadpisze wcześniejsze. CSS co to takiego? Najkrócej mówiąc jest to język służący do formatowania wyglądu elementów HTML, które po wyświetleniu w oknie przeglądarki internetowej tworzą wygląd strony internetowej. Ponadto sam skrót CSS oznacza "Kaskadowy Arkusz Stylów" jest to plik z rozszerzeniem.css, w którym znajdują się pewne reguły CSS, czy jak kto woli pewne style CSS, które określają wygląd różnych elementów HTML znajdujących się na danej stronie internetowej. Dlaczego warto używać CSS: 1. Style stały się już praktycznie podstawowym narzędziem formatującym. 2. Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio w składni HTML, które dotyczą formatowania, będą stopniowo wycofywane przez producentów przeglądarek internetowych, na rzecz rekomendowanych analogicznych deklaracji CSS. 3. Dokumenty pisane z wykorzystaniem arkuszy stylów są zwykle bardziej przejrzyste i krótsze. 4. Style pozwalają w łatwy sposób zarządzać całą serią dokumentów, poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki temu w łatwy i wygodny sposób, można dokonać modyfikacji rodzaju formatowania jednocześnie we wszystkich dokumentach, zmieniając dane tylko w jednym pliku! 5. Dzięki możliwości stosowania klas selektorów, znacznie oszczędzamy sobie pisania. W jednym miejscu określamy wszystkie atrybuty formatowania (których może być bardzo dużo), odnoszące się do wielu elementów, które mają wyglądać tak samo. Bezpośrednio przy elemencie wystarczy podać tylko nazwę klasy i nie musimy już wypisywać "litanii" poleceń. Znacznie przyspiesza to późniejszą modyfikację 2

3 strony, ponieważ zmian dokonujemy tylko w jednym miejscu, a wpływają one na wiele elementów jednocześnie. 6. Możliwość stosowania różnorodnych jednostek oraz sposobów definiowania kolorów. 7. Style dają autorowi możliwości, które do tej pory były praktycznie niemożliwe do osiągnięcia: Dodatkowe możliwości formatowania tekstu Nowe własności tła Obramowanie Dodatkowe właściwości wykazów (list) Nowy model obramowania tabeli Pozycjonowanie Zmiana kształtu kursora i wiele innych. Komentarze w kodzie HTML i CSS Oznaczenie komentarzy w HTML zdecydowanie różni się od oznaczenia komentarzy w CSS, chociaż funkcję ma podobną pozwala twórcy wpisywać w kodzie notatki niewidoczne dla gości strony. Komentarz w pliku HTML: <!--treść komentarza, nie wyświetlana w oknie przeglądarki, widziana jedynie w źródle strony--> Komentarz w arkuszu stylów CSS: /* treść komentarza, ignorowana przez przeglądarkę internetową */ Warto dodać, że komentarzy nie można zagnieżdżać zarówno w HTML i CSS. Zagnieżdżenia komentarzy powodują błędy w wyświetlaniu strony i formatowania. Własne implementacje w przeglądarkach: WebKit Web-kit-property Mozilla moz- property Internet Explorer ms- property Opera o- property W3C property Dołączanie stylów do dokumentów Używanie CSS z językami hipertekstowymi Samo stworzenie arkusza stylów nic nie da jeśli w dokumencie hipertekstowym nie będzie wzmianki o jego użyciu. Sposobów "sprzęgnięcia" arkusza z dokumentem hipertekstowym jest kilka: 1) W treści strony: Jest to najdłuższy i najgorszy sposób, ponieważ nie można wtedy tworzyć klas - a więc za każdym razem trzeba od nowa opisywać właściwości kolejnego obiektu, nawet, kiedy jest identyczny do poprzedniego. To są style tak zwane "inline", czyli w tagu, do którego się odnoszą. Jest to jednak rozwiązanie mało eleganckie i tym samym niezalecane. <p style="color: red;">tekst</p> 2) W nagłówku strony: Jest to już sposób lepszy od poprzedniego. Pozwala na wielokrotne wykorzystanie fragmentu kodu, ale tylko w obrębie danej strony. Cały opis dla poszczególnych obiektów umieszczamy w sekcji head między znacznikami <style type="text/css"> </style> Przykład: 3

4 <html> <head> <title>tytuł strony</title> <style type="text/css"> p.klasa1 { właściwość1:wartość; właściwość2:wartość; table {właściwość1:wartość; właściwość2: wartość; span.gorne {właściwość1:wartość; właściwość2: wartość; </style> </head> <body> <p class="klasa1">to jest przykładowy text</p> <table> // 5 <tr> <td>... </td> </tr> </table> <span >To jest fragment textu </body> </html> 3) W osobnym pliku: Jest to najlepszy i najpopularniejszy sposób łączenia htm z css. Aby móc skorzystać z tej metody należy w jakiś sposób poinformować przeglądarkę z jakiego pliku ma czytać. Wszystko dzieje się w sekcji head: Przykład: <html> <head> <title>tytuł strony</title> <link rel="stylesheet" // 1 href="plikstyli.css" // 2 type="text/css" /> // 3 </head> <body> W tym miejscu umieszczasz treść strony. Możesz skorzystać ze wszystkich klas opisanych w pliku 'plikstyli.css'. </body> </html> Opis: 1 - każę przeglądarce nastawić się na to, że za chwilę będzie wczytywać plik css [stylesheet]. 2 - Podaję ściężkę do pliku, w którym są opisane style. Powinien to być plik o rozszerzeniu *.css. 3 - Określamy typ. 4) Mieszanka Istnieje jeszcze jedna możliwość - pomieszanie wszystkich metod. Przykładowo, chcesz aby wszystkie tabele na twojej witrynie wyglądały identycznie. Jest jednak jedna tabele, którą chcesz jakoś szczególnie oznaczyć. Możesz wtedy wczytać plik '*.css' w sekcji head, przypisać tabeli odpowiednią klasę, a dodatkowo w tej wyjątkowej tabeli opisać style. Zasada jest bardzo prosta -im "bliżej" znacznika tym bardziej znaczący opis. Czyli najważniejszy jest opis w style=" ", trochę mniej ważny jest opis w sekcji head, a najmniej znaczący w osobnym pliku. Oczywiście chodzi jedynie o sytuacje, kiedy właściwości jakiegoś selektora opisane są w więcej niż w jednym miejscu. Budowa stylu i rodzaje selektorów Budowa arkusza stylów Kaskadowy arkusz stylów to zwykły tekst - lista reguł ustalających sposób formatowania elementów treści. 4

5 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. Selektor [od ang. select] może wskazywać na jeden element lub grupę elementów albo na atrybut. Deklaracja określa właściwość i jej wartość. Ponieważ selektory mogą wskazywać na elementy bądź atrybuty wyróżniamy trzy typy selektorów: selektor elementu, inaczej selektor prosty wskazuje na elementy ustalone w specyfikacji HTML, takie jak akapit - p, lista - ul, czy tabela - table, itp. selektor klasy, oznaczony dowolną nazwą poprzedzoną kropką, wskazuje na pewną odmianę - wariant prezentacji elementu, np. klasa.ważne może być przypisana różnym elementom dokumentu HTML; selektor identyfikatora, oznaczany znakiem # (haszem, zwanym też krzyżykiem) - wskazuje na konkretny element występujący w dokumencie tylko jeden raz. Terminologia W CSS istnieje kilka ważnych pojęć. Podstawowym pojęciem jest selektor, czyli nazwa elementu strony, którego styl określamy. Podczas stosowania CSS z dokumentami HTML i XHTML selektory to po prostu nazwy konkretnych tagów, czyli np. dla tagu <body> selektorem jest body. Istnieją również bardziej skomplikowane selektory, które konkretyzują elementy na stronie, czyli nie odnoszą się do wszystkich paragrafów, ale na przykład tylko do paragrafów następujących zaraz po nagłówkach. Klasy to pewnego rodzaju selektor umożliwiający przypisanie konkretnych własności do niezwiązanych ze sobą niczym szczególnym elementów strony. Możemy określić ogólny styl dla kilku tagów, ale niektóre ich wystąpienia, które będą przypisane do klasy, będą miały nieco zmodyfikowany styl. Przykład: <html> <head> <title>tytuł strony</title> <style type="text/css"> p.klasa1 {color:red; text-decoration:overline; // 1 p.klasa2 {color:blue; text-decoration:underline; // 2 </style> </head> <body> Oto wyniki: <p class="klasa1">to jest tekst określony klasą pierwszą</p> <p class="klasa2">to jest tekst określony klasą drugą</p> </body> </html> Dziedziczenie stylów Dzięki dziedziczeniu webmaster może skrócić swoja pracą o nawet kilkadziesiąt procent bez żadnego uszczerbku na wyglądzie strony. Dziedziczenie polega na przejmowaniu części cech od "starszego" - zupełnie jak u ludzi. Przykład: p {color: blue; // 1 p.klasa1 {font-size:8 pt; // 2 5

6 p.klasa2 {font-size:14 pt; // 3 p.klasa3 {color:red; font-size:8 pt; // 4 Opis: 1 - wszystkie cechy przejdą na pozostałe 'p', nawet takie, które posiadają klasę. 2 - tworzę klasę 'klasa1', która będzie mieć kolor niebieski [blue] odziedziczony po starszym od siebie 'p' i własne cechy, przypisane tylko jej. 3 - tworzę kolejną klasę, która ma cechy starszej od siebie 'p', ale także własne cechy 4 - ta klasa nie odziedziczy nic ze starszej, a to dlatego, Że opisałem także tę właściwość, którą miałaby odziedziczyć i zmieniłem jej wartość. Otrzymamy w dokumencie html: <p>ten txt jest niebieski</p> <p class="klasa1">ten txt jest niebieski (odziedziczony kolor) i ma rozmiar 8pt (z klasy)</p> <p class="klasa2">ten txt jest niebieski (odziedziczony kolor) i ma rozmiar 14pt (z klasy)</p> <p class="klasa3">ten txt jest czerowny (zerwane więzi:-)) i ma rozmiar 8pt (z klasy obydwa)</p> Selektory specjalne: identyfikatory, klasy Jeśli chce się zmienić wygląd jakiegoś elementu XHTML, trzeba wskazać, którego. Do tego służą selektory (ang. select wybrać). Jest wiele różnych selektorów i można stosować ich kombinacje po to, aby dało się hurtem wybrać odpowiednie elementy i nie trzeba było powtarzać reguł dla każdego z osobna. Przy wyświetlaniu strony przeglądarka sprawdza, które reguły pasują do danego elementu XHTML. Jeśli pasuje kilka reguł, to łączy je dając pierwszeństwo tym wskazanym przez bardziej szczegółowe selektory. Selektor identyfikatora Selektor identyfikatora - tworzymy za pomocą znaku # (hasha), po którym podajemy swoją wymyśloną nazwę. Selektor odwołuje się do elementu, którego wartość atrybutu id będzie naszą wymyśloną nazwą. Uwaga. W jednym dokumencie HTML nie mogą wystąpić dwa elementy HTML o takiej samej wartości id, ponieważ będzie to traktowane jako błąd. Przy tworzeniu własnych nazw w CSS: nie rozpoczynamy ich od cyfr nie używamy znaków specjalnych, dozwolone są myślniki - i podkreślenia _ nie używamy polskich liter duże litery stwarzają różnicę (Nazwa i nazwa, to są dwie różne wartości) Wzór selektora identyfikatora #nazwa { właściwość:wartość; Przykładowa reguła CSS - selektor identyfikatora #twoja_nazwa { color:red; Przykładowy dokument HTML, w którym został użyty selektor identyfikatora <!DOCTYPE html> 6

7 <html> <head> <meta charset="utf-8"> <title>darmowy Kurs CSS</title> <style> #twoja_nazwa { color:red; </style> </head> <body> <div id="twoja_nazwa"> tekst w tym elemencie jest koloru czerwonego, ponieważ ten element posiada atrybut "id" o wartości "twoja_nazwa" </div> <p> ten element nie posiada żadnego atrybutu "id" </p> <div id="inna_nazwa"> tekst w tym elemencie nie jest koloru czerwonego, ponieważ wartością jego atrybutu "id" nie jest wartość "twoja_nazwa" </div> </body> </html> Selektor klasy Selektor klasy - tworzymy za pomocą kropki, po której podajemy swoją wymyśloną nazwę. Selektor odwołuje się do każdego elementu, którego wartość atrybutu class będzie naszą wymyśloną nazwą. Przy tworzeniu własnych nazw w CSS: nie rozpoczynamy ich od cyfr nie używamy znaków specjalnych, dozwolone są myślniki - i podkreślenia _ nie używamy polskich liter duże litery stwarzają różnicę (Nazwa i nazwa, to są dwie różne wartości) Wzór selektora klasy.nazwa { właściwość:wartość; Przykładowa reguła CSS - selektor klasy.twoja_nazwa { color:red; Przykładowy dokument HTML, w którym został użyty selektor klasy <!DOCTYPE html> <html> 7

8 <head> <meta charset="utf-8"> <title>darmowy Kurs CSS</title> <style>.twoja_nazwa { color:red; </style> </head> <body> <div class="twoja_nazwa"> tekst w tym elemencie jest koloru czerwonego, ponieważ ten element posiada atrybut "class" o wartości "twoja_nazwa" </div> <p class="twoja_nazwa"> tekst w tym elemencie jest również koloru czerwonego, ponieważ ten element posiada atrybut "class" o wartości "twoja_nazwa" </p> <p> ten element nie posiada żadnego atrybutu "class" </p> <p class="inna_nazwa twoja_nazwa"> tekst w tym elemencie jest koloru czerwonego, ponieważ jedną z wartości jego atrybutu "class" jest wartość "twoja_nazwa" </p> <div class="inna_nazwa"> tekst w tym elemencie nie jest koloru czerwonego, ponieważ jego atrybut "class" nie zawiera wartości "twoja_nazwa" </div> </body> </html> Rezultat po wyświetleniu dokumentu HTML tekst w tym elemencie jest koloru czerwonego, ponieważ ten element posiada atrybut "class" o wartości "twoja_nazwa" tekst w tym elemencie jest również koloru czerwonego, ponieważ ten element posiada atrybut "class" o wartości "twoja_nazwa" ten element nie posiada żadnego atrybutu "class" tekst w tym elemencie jest koloru czerwonego, ponieważ jedną z wartości jego atrybutu "class" jest wartość "twoja_nazwa" tekst w tym elemencie nie jest koloru czerwonego, ponieważ jego atrybut "class" nie zawiera wartości "twoja_nazwa" Selektor elementu z identyfikatorem Selektor elementu z identyfikatorem - tworzymy za pomocą połączenia selektora elementu z selektorem identyfikatora. Selektor odwołuje się do elementu podanego typu, który będzie zawierał atrybut id o podanej wartości. 8

9 Wzór selektora elementu z identyfikatorem element#nazwa_id { właściwość:wartość; Przykładowa reguła CSS - selektor elementu z identyfikatorem p#twoja_nazwa { color:red; Przykładowy dokument HTML, w którym został użyty selektor elementu z identyfikatorem <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>darmowy Kurs CSS</title> <style> p#twoja_nazwa { color:red; </style> </head> <body> <p id="twoja_nazwa"> ten element posiada atrybut "id" o wartości "twoja_nazwa" i jest on elementem - p - dlatego tekst w tym elemencie jest koloru czerwonego </p> <p id="inna_nazwa"> ten elementem jest elementem - p - lecz jego tekst nie jest koloru czerwonego, ponieważ ten element nie posiada atrybutu "id" o wartości "twoja_nazwa" </p> <span> tekst w tym elemencie - span - nie jest koloru czerwonego, ponieważ ten element nie jest elementem - p - i nie posiada on atrybutu "id" o wartości "twoja_nazwa" </span> </body> </html> Rezultat po wyświetleniu dokumentu HTML ten element posiada atrybut "id" o wartości "twoja_nazwa" i jest on elementem - p - dlatego tekst w tym elemencie jest koloru czerwonego ten elementem jest elementem - p - lecz jego tekst nie jest koloru czerwonego, ponieważ ten element nie posiada atrybutu "id" o wartości "twoja_nazwa" tekst w tym elemencie - span - nie jest koloru czerwonego, ponieważ ten element nie jest elementem - p - i nie posiada on atrybutu "id" o wartości "twoja_nazwa" 9

10 Selektor elementu z klasą Selektor elementu z klasą - tworzymy za pomocą połączenia selektora elementu i selektora klasy. Selektor odwołuje się do każdego elementu podanego typu, który będzie zawierał atrybut class o podanej wartości. Wzór selektora elementu z klasą element.nazwa_class { właściwość:wartość; Przykładowa reguła CSS - selektor elementu z klasą p.twoja_nazwa { color:red; Przykładowy dokument HTML, w którym został użyty selektor elementu z klasą <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>darmowy Kurs CSS</title> <style> p.twoja_nazwa { color:red; </style> </head> <body> <div class="twoja_nazwa"> ten element posiada atrybut "class" o wartości "twoja_nazwa", lecz jego tekst nie jest koloru czerwonego, ponieważ ten element nie jest elementem - p </div> <p class="twoja_nazwa"> ten element posiada atrybut "class" o wartości "twoja_nazwa" i jest on elementem - p - dlatego tekst w tym elemencie jest koloru czerwonego </p> <p class="inna_nazwa"> tekst w tym elemencie nie jest koloru czerwonego, mimo tego że ten element jest elementem - p - ponieważ atrybut "class" tego elementu nie posiada wartości "twoja_nazwa" </p> <span> tekst w tym elemencie - span - nie jest koloru czerwonego, ponieważ ten element nie jest elementem - p - i nie posiada on atrybutu "class" o wartości "twoja_nazwa" </span> </body> </html> 10

11 Rezultat po wyświetleniu dokumentu HTML ten element posiada atrybut "class" o wartości "twoja_nazwa", lecz jego tekst nie jest koloru czerwonego, ponieważ ten element nie jest elementem - p ten element posiada atrybut "class" o wartości "twoja_nazwa" i jest on elementem - p - dlatego tekst w tym elemencie jest koloru czerwonego tekst w tym elemencie nie jest koloru czerwonego, mimo tego że ten element jest elementem - p - ponieważ atrybut "class" tego elementu nie posiada wartości "twoja_nazwa" tekst w tym elemencie - span - nie jest koloru czerwonego, ponieważ ten element nie jest elementem - p - i nie posiada on atrybutu "class" o wartości "twoja_nazwa" Selektor uniwersalny Selektor uniwersalny - tworzymy za pomocą znaku gwiazdki. Selektor odwołuje się do każdego typu elementu w dokumencie HTML. Wzór selektora uniwersalnego * { właściwość:wartość; Przykładowa reguła CSS - selektor uniwersalny * { color:red; Przykładowy dokument HTML, w którym został użyty selektor uniwersalny <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>darmowy Kurs CSS</title> <style> * { color:red; </style> </head> <body> <div>ten element - div - posiada czerwony kolor tekstu, tak jak każdy inny element w tym dokumencie HTML</div> <p>ten element - p - również posiada czerwony kolor tekstu</p> <span>ten element - span - też posiada czerwony kolor tekstu</span> </body> </html> 11

12 Selektor elementu Selektor elementu - tworzymy za pomocą nazwy elementu HTML. Selektor odwołuje się do każdego elementu o podanej nazwie. Wzór selektora elementu element { właściwość:wartość; Przykładowa reguła CSS - selektor elementu p { color:red; Własności czcionek- CSS 1. Wielkość selektor { font-size: rozmiar Natomiast jako "rozmiar" należy podać konkretną wielkość czcionki. Możliwe są tutaj cztery sposoby: 1. Imienne wartości absolutne: xx-small - najmniejsza x-small - mniejsza small - mała medium - średnia large - duża x-large - większa xx-large największa 2. Rodzaj selektor { font-family: rodzaj, rodzaj1, rodzaj2,... Natomiast jako "rodzaj, rodzaj1, rodzaj2,..." należy podać rodzaje czcionek. Podanie kilku rodzajów spowoduje, że jeśli użytkownik nie będzie posiadał pierwszego, to zostanie wybrany następny w kolejności (można oczywiście podać tylko jeden rodzaj). Jeżeli nazwa czcionki składa się z kilku wyrazów, należy ją objąć w znaki apostrofu (np. 'Times New Roman', 'Courier New'). 3. Styl selektor { font-style: styl Natomiast jako "styl" należy wpisać: normal - czcionka normalna (podstawowa) italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique) oblique - również czcionka pochylona (podobna jak poprzednio) Polecenie pozwala nadać czcionce określony styl. Może to być: czcionka zwyczajna, pochylona lub pochylona drugiego rodzaju. Dwie ostatnie są wyświetlane bardzo podobnie. Różnica między nimi polega 12

13 na tym, że czcionka italic faktycznie jest osobnym krojem, natomiast oblique może zostać wygenerowana przez pochylenie zwykłej czcionki. 4. Waga selektor { font-weight: waga Natomiast jako "waga" należy wpisać: 1. Wartości absolutne: normal - czcionka normalna (podstawowa) bold - czcionka pogrubiona 100, 200, 300, 400 (odpowiednik "normal"), 500, 600, 700 (odpowiednik "bold"), 800, każdy następny numer wskazuje wagę czcionki przynajmniej tak samo wytłuszczonej jak dla poprzedniej wartości w sekwencji 2. Wartości względne: lighter - czcionka mniej wytłuszczona od odziedziczonej lub przypisanej do znacznika (np. typowo znaczniki <b>...</b> oraz <strong>...</strong> mają przypisaną domyślną wagę "bold") bolder - czcionka bardziej wytłuszczona 5. Wariant selektor { font-variant: wariant Natomiast jako "wariant" należy wpisać: normal - czcionka normalna (podstawowa) small-caps - kapitaliki Polecenie pozwala wybrać wariant czcionki jako "kapitaliki", czyli tekst napisany wielkimi literami, lecz czcionką o wielkości małych liter. 6. Atrybuty mieszane selektor { font: wartości atrybutów Natomiast jako "wartości atrybutów" należy wpisać konkretne wartości atrybutów, dotyczących czcionek, które będą oddzielone od siebie spacjami. Należy je wpisywać w następującej kolejności (przy czym można niektóre pominąć): font-style font-variant font-weight font-size line-height font-family np. p { font: bold 12pt Arial 7. Rozciągnięcie selektor { font-stretch: rozciąg 13

14 Natomiast jako "rozciąg" należy wpisać: ultra-condensed - najbardziej ścieśniona extra-condensed condensed - ścieśniona semi-condensed normal - czcionka normalna (podstawowa) semi-expanded expanded - rozciągnięta extra-expanded ultra-expanded - najbardziej rozciągnięta Polecenie pozwala ustalić poziome rozciągnięcie czcionki na ekranie. Tekst rozciągnięty będzie zajmował więcej miejsca w linii, natomiast ściśnięty - mniej. Formatowanie tekstu CSS Właściwości tekstu: 1. Kolor selektor { color: kolor Przykład: kolor red kolor #66AAFF kolor #69C kolor rgb(255,33,170) kolor rgb(25%,75%,75%) 2. Dekoracja selektor { text-decoration: dekoracja Natomiast jako "dekoracja" należy podać: none - bez zmian underline - podkreślenie line-through - przekreślenie overline - nadkreślenie blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera 7) Ciekawą możliwością może być łączenie powyższych wartości w jednej deklaracji, np.: selektor { text-decoration: underline line-through overline 3. Transformacja selektor { text-transform: transformacja Natomiast jako "transformacja" należy podać: 14

15 none - bez zmian capitalize - zamiana pierwszych liter wszystkich wyrazów na wielkie uppercase - zamiana wszystkich liter na wielkie lowercase - zamiana wszystkich liter na małe 4. Wyrównanie selektor { text-align: wyrównanie Natomiast jako "wyrównanie" należy podać: left - wyrównanie tekstu do lewego marginesu (domyślnie) right - wyrównanie do prawego marginesu center - do środka (wyśrodkowanie) justify - do obu marginesów jednocześnie (justowanie) Polecenie pozwala wybrać jeden z możliwych sposobów wyrównania tekstu, czyli jego ułożenia na ekranie. 5. Wcięcie selektor { text-indent: wcięcie Natomiast jako "wcięcie" należy podać konkretną wielkość wcięcia, używając jednostek długości. Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat). 6. Cień selektor { text-shadow: poziom pion rozmycie kolor,... Wartości "poziom pion rozmycie kolor" określają własności cienia (wartości "rozmycie" oraz "kolor" nie są wymagane): poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo) pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę) rozmycie - promień efektu rozmycia (opcjonalnie) kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element) Wartości "poziom", "pion" oraz "rozmycie" należy podać, używając jednostek długości. Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania. Aby zupełnie usunąć ustalony wcześniej cień, należy podać text-shadow: none Np. text-shadow: 3px 3px 5px red; 7. Odstęp między wierszami selektor { line-height: odstęp Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między liniami bazowymi wierszy używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. 8. Odstęp między wyrazami selektor { word-spacing: odstęp 15

16 Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi wyrazami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. 9. Odstęp między literami selektor { letter-spacing: odstęp Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi literami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi literami w wyrazach bloku. Dzięki temu cały tekst w linijce może być bardziej ścieśniony lub rozciągnięty. 10. Białe znaki # selektor { white-space: sposób Natomiast jako "sposób" należy podać: normal - zamiana kilku sąsiadujących ze sobą spacji na jedną; wiersze są przełamywane automatycznie na końcu szerokości strony (domyślnie) pre - umożliwia wyświetlenie wielu spacji obok siebie; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter (tekst preformatowany) nowrap - tryb identyczny jak "normal" z tym, że nie pozwala na przełamanie wiersza (przejście do następnej linii), aż do napotkania znacznika <br /> pre-wrap - (CSS 2.1) pozwala wyświetlić kilka sąsiadujących spacji; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter - oraz automatycznie na końcu szerokości strony (Opera 7.5, Firefox 3, Chrome, Konqueror) pre-line - (CSS 2.1) jak wyżej z tym, że sąsiadujące spacje są zamieniane na jedną Polecenie pozwala sterować wyświetlaniem spacji na ekranie. Domyślnie nie jest możliwe postawienie obok siebie kilku spacji, ponieważ zostaną one automatycznie zamienione na jedną. Nie można również postawić spacji na początku wiersza. Dzięki użyciu komendy white-space: pre, możemy pozbyć się tych niedogodności. Polecenie działa podobnie jak znacznik <pre>...</pre>, lecz tekst jest napisany zwykłą czcionką. Ponadto deklaracja white-space: nowrap uniemożliwia przeglądarce przełamanie wiersza i przejście do następnej linii. Stosuje się je, gdy koniecznie zależy nam, aby podany tekst, był wpisany w jednej linijce. Jeśli nie zmieści się on na ekranie, pojawi się suwak do przewijania zawartości strony. Wiersz taki możemy przełamać tylko poprzez zastosowanie znacznika <br />. Komenda działa podobnie jak <nobr>...</nobr>. 11. direction Za pomocą właściwości direction możemy ustalić kierunek wyświetlania tekstu, który znajduje się w danym elemencie HTML. Dostępne wartości dla właściwości direction Wartość Opis rtl ltr wyświetlenie tekstu od prawej do lewej wyświetlenie tekstu od lewej do prawej Np.. p { 16

17 direction:rtl; padding:15px; background-color:#dff; Wyrównywanie poziome Wyrównywanie tekstu w poziomie określa cecha text-align, która pozwala wybrać jeden z możliwych sposobów wyrównania tekstu, czyli jego ułożenia na ekranie. selektor { text-align: wyrównanie Selektorem może być dowolny znacznik wyświetlany w bloku. Wartości cechy text-align: left - wyrównanie tekstu do lewego marginesu (domyślnie), right - wyrównanie do prawego marginesu, center - do środka (wyśrodkowanie), justify - do obu marginesów jednocześnie (justowanie). Wyrównanie w pionie Zdefiniowanie wyrównania tekstu w pionie jest możliwe dzięki właściwości vertical-align, selektor { vertical-align: wyrównanie Selektorem może być dowolny znacznik wyświetlany w bloku. Cecha przyjmuje poniższe wartości: 1. Wartości predefiniowane: baseline wyrównanie do linii bazowej (domyślne), sub indeks dolny, super indeks górny, top - górna linia elementu jest wyrównywana do najwyższej linii w wierszu, text-top - górna linia elementu jest wyrównywana do górnej linii czcionki elementu nadrzędnego, middle - wyrównanie do linii środkowej, bottom - dolna linia elementu jest wyrównywana do najniższej linii w wierszu, text-bottom - dolna linia elementu jest wyrównywana do dolnej linii czcionki elementu nadrzędnego. 2. Jednostka miary względne, bezwzględne oraz wartość procentowa. 12. Sposób na wyśrodkowanie tekstu w pionie 1 Jeżeli chodzi o wyrównanie tekstu w poziomie, w blokowym elemencie HTML, to nie mamy z tym większego problemu, ponieważ wspomniany efekt możemy uzyskać za pomocą właściwości textalign:center; Natomiast jeżeli chodzi o wyrównanie tekstu w pionie, w blokowym elemencie HTML (dla którego została ustalona jakaś stała wartość wysokości), to sprawa wygląda nieco inaczej

18 Przeglądając różne właściwości, jakie oferuje nam język CSS, możemy natknąć się na właściwość vertical-align, dzięki której możemy wyrównać w pionie, na różne sposoby, tekst w komórce tabeli HTML. Jednak my chcemy wyśrodkować nasz tekst w pionie elementu p, a nie w komórce tabeli HTML, czyli w elemencie td. Co w takim wypadku? W takim wypadku musimy sprawić, aby nasz element p został zinterpretowany przez przeglądarkę internetową jako komórka tabeli, co uzyskamy za pomocą właściwości display:table-cell; Od tej pory nasz element p będzie interpretowany przez przeglądarkę internetową jako komórka tabeli, dzięki czemu będziemy mogli dodać do niego właściwość vertical-align wraz z wartością middle, gdy to uczynimy, to uzyskamy w ten sposób wyśrodkowanie tekstu w pionie elementu HTML, dla którego została ustalona jakaś stała wartość wysokości, czyli właściwość height. Kod całego dokumentu HTML został umieszczony pod spodem: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>darmowy Kurs CSS</title> <style> p { border:3px solid #FDD700; background-color:#eee; width:400px; height:200px; padding:15px; display:table-cell; vertical-align:middle; </style> </head> <body> </body> </html> <p> to jest przykładowy tekst, który został umieszczony w elemencie - p to jest przykładowy tekst, który został umieszczony w elemencie - p to jest przykładowy tekst, który został umieszczony w elemencie - p </p> Skorzystaj ze strony i przećwicz nowe opcje css. Kolumny tekstu Do zrealizowania podziału na kolumny posłuży po prostu jedna z wielu nowych właściwości w css3, o intuicyjnej nazwie column. Do tej pory, przedstawienie tekstu w taki sposób nastręczało problemów. Sytuacja nie jest dramatyczna jeśli mamy do czynienia z treścią statyczną, gorzej jeżeli wszystko pobierane jest z bazy danych i trzeba taki tekst, w jakiś sposób, odpowiednio podzielić. Problem został rozwiązany za pomocą następujących cech: 18

19 column-width szerokość kolumny column-count ilość kolumn, jeśli ten parametr nie jest określony to jego wartość zostanie obliczona, na podstawie szerokości column-gap odstępy między kolumnami column-rule opisuje separator między kolumnami. W skład tej właściwości wchodzą: o column-rule-width szerokość separatora kolumn o column-rule-style style separatora o column-rule-color kolor separatora column-span pozwala określić, czy element ma zawierać się w jednej, czy we wszystkich kolumnach Przykład: p { padding:15px; background-color:#dff; column-count:3; -moz-column-count:3; /* zapis dla przeglądarki Firefox */ -webkit-column-count:3; /* zapis dla przeglądarki Google Chrome, Safari, Opera 15+ */ column-count: liczba kolumn; -moz-column-count: liczba kolumn; -webkit-column-count: liczba kolumn; column-width: szerokość kolumn; -moz-column-width: szerokość kolumn; -webkit-column-width: szerokość kolumn; Przykład: 4 kolumny z 10px odstępu: -moz-column-count: 4; -moz-column-gap: 10px; -webkit-column-count: 4; -webkit-column-gap: 10px; column-count: 4; column-gap: 10px; Możemy także użyć column-gap, co określa odstęp między kolumnami a tekstem. Może to wpływać na szerokość lub liczbę kolumn. column-gap: szerokość; -moz-column-gap: szerokość; -webkit-column-gap: szerokość; Przykład: 19

20 Opis fragmentu css: Obraz w tekście <img src="ścieżka" style="float:left;"/> Dzięki temu obraz będzie przylegał tak, aby opływał cały tekst. Do tego dołóżmy odstęp obrazka (padding lub margin) i gotowe. Przykład: kolumny Generatory info: 20

21 Pseudoklasy Pesudoklasy to kilka już zdefiniowanych klas odnoszących się do pewnego stanu obiektu. Np. pseudoklasa hover określa wygląd elementu jeśli jest nad nim umieszczony kursor myszy. Za idealny przykład mogą tu posłużyć linki po najechaniu, kliknięciu, odwiedzeniu, zmieniają swój wygląd. Do tego służą pedudoklasy. Przykład: Opis: a:activate{color:blue; //1 a:link{color:black; // 2 a:visited {color:green; //3 a:hover {color:red; text-decoration:underline; //4 1 -:activate oznacza link odwiedzany (aktywny, czyli strona aktualnie jest wczytana) 2- :link oznacza link nieaktywny, czyli czekający na kliknięcie 3- :visited oznacza link odwiedzony 4- :hover oznacza link po najechaniu myszy Przykładowa reguła CSS - selektor :link a:link { color:red; Przykładowy dokument HTML, w którym został użyty selektor :link <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>darmowy Kurs CSS</title> <style> a:link { color:red; a:visited { color:green; </style> </head> <body> <a href="#jeden">ten link będzie nieodwiedzonym linkiem do momentu, gdy w niego nie klikniesz</a><br> <a href="#dwa">ten link będzie nieodwiedzonym linkiem do momentu, gdy w niego nie klikniesz</a><br> <a href="#trzy">ten link będzie nieodwiedzonym linkiem do momentu, gdy w niego nie klikniesz</a> </body> </html> 21

22 Style list Typ stylu selektor { list-style-type: typ Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu Natomiast "typ" odpowiada za wygląd wyróżnika wykazu (markera) i należy zamiast niego wpisać: 1. disc - koło Przykład: list-style-type: disc Punkt pierwszy Punkt drugi Punkt trzeci 2. circle - okrąg Przykład: list-style-type: circle o Punkt pierwszy o Punkt drugi o Punkt trzeci square - kwadrat Przykład: list-style-type: square Punkt pierwszy Punkt drugi Punkt trzeci decimal - liczby arabskie Przykład: list-style-type: decimal 0. Punkt pierwszy 1. Punkt drugi 2. Punkt trzeci lower-alpha - małe litery Przykład: list-style-type: lower-alpha. Punkt pierwszy a. Punkt drugi 22

23 b. Punkt trzeci upper-alpha - duże litery Przykład: list-style-type: upper-alpha. Punkt pierwszy A. Punkt drugi B. Punkt trzeci upper-roman - duże liczby rzymskie Przykład: list-style-type: upper-roman. Punkt pierwszy I. Punkt drugi II. Punkt trzeci lower-roman - małe liczby rzymskie Przykład: list-style-type: lower-roman. Punkt pierwszy i. Punkt drugi ii. Punkt trzeci none - brak wyróżnika (markera) Przykład: list-style-type: none o o o Punkt pierwszy Punkt drugi Punkt trzeci Zawijanie tekstu selektor { list-style-position: pozycja Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu. Natomiast "pozycja" określa, jak będą zawijane wiersze wykazu, które nie zmieszczą się w jednej linii. Możliwe są tutaj dwa przypadki: 1. outside - wyróżniki na zewnątrz wykazu (domyślnie). Przykład: list-style-position: outsider 23

24 2. inside - wyróżniki wewnątrz wykazu. Przykład: list-style-position: insi de Wyróżnik obrazkowy selektor { list-style-image: url(ścieżka dostępu) Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu Natomiast jako "ścieżka dostępu" należy wpisać względną ścieżkę do obrazka, który ma się pojawić jako wyróżnik wykazu (marker). Wpisanie none usunie obrazek. Przykład: list-style-image: url(minus.gif) Zastosowanie graficznego wyróżnika listy <body> <ol style="list-style-image:url('attention.gif');"> <li> Przeglądarki internetowe <ol><li style="list-style-image:url('info.gif');">internet Explorer</li> <li style="list-style-image:url('info.gif');">mozilla Firefox</li> </ol> </li> <li> Poczta elektroniczna <ol><li style="list-style-image:url('info.gif');">microsoft Outlook</li> <li style="list-style-image:url('info.gif');">mozilla Thunderbird</li> </ol> </li> </ul> Atrybuty mieszane selektor { list-style: wartości atrybutów Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu. Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości (oddzielone spacjami), jakie mają przyjąć poszczególne atrybuty wykazu. Są to: typ stylu 24

25 zawijanie tekstu wyróżnik obrazkowy np. li { list-style-position: inside; list-style: disc li { list-style: disc inside Odstęp wyróżnika (nieinterpretowane) selektor { marker-offset: odstęp Selektorem może być element z ustalonym wyświetlaniem typu marker. Natomiast "odstęp" oznacza odległość wyróżnika wykazu (markera) od tekstu, znajdującego się w poszczególny punktach. Wartość odstępu należy podać używając jednostek długości. Polecenie to pozwala nam w sposób jawny zdefiniować odstępy markerów od treści wykazu. UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1. Nie jest interpretowane! Przykład: li:before { display: marker; marker-offset: 3em; Istnieje jednak dość prosty, lecz być może nie tak oczywisty, sposób zastąpienia nieobsługiwanej własności marker-offset przez zespół reguł CSS interpretowanych praktycznie wszędzie: ul, li { list-style-type: none; display: block; margin: 0; padding: 0; ul li { background: url(marker.gif) no-repeat left top; padding-left: 20px; Kolory i podkłady Kolor selektor { background-color: kolor Natomiast jako "kolor" należy podać definicję koloru. Wpisanie "transparent" ustali tło przezroczyste. Polecenie umożliwia wstawienie tła o określonym kolorze pod danym elementem (tekstem). Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tła strony), można użyć selektora BODY lub HTML. 25

26 Sposoby definiowania kolorów Specyfikacja stylów wprowadza następujące sposoby podawania wartości kolorów: (17) kolorów podstawowych: black (#000000) silver (#C0C0C0) gray (#808080) white (#FFFFFF) maroon (#800000) red (#FF0000) purple (#800080) fuchsia (#FF00FF) green (#008000) lime (#00FF00) olive (#808000) yellow (#FFFF00) navy (#000080) blue (#0000FF) teal (#008080) aqua (#00FFFF) Ponadto CSS 2.1 definiuje jeszcze jeden dodatkowy kolor podstawowy: orange (#FFA500). CSS 3 określa dodatkowo 130 kolorów rozszerzonych. 2. #RRGGBB - podanie kolejno wartości każdej składowej kolorów podstawowych: czerwonego RR (red), zielonego GG (green) i niebieskiego BB (blue). Wszystkie te liczby muszą być dwucyfrowe i są zapisane w systemie szesnastkowym, w którym mamy 16 cyfr podstawowych: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Przykładowo: liczba szesnastkowa B5 oznacza w systemie dziesiętnym 181 (11* = 181). 3. #RGB - to samo co powyżej, lecz w tym wypadku jako składowe kolorów należy podawać liczby jednocyfrowe w zapisie szesnastkowym. Przykładowo kolor #FB0 odpowiada #FFBB00 z poprzedniego zapisu. 4. rgb(r, G, B) - pozwala podać oddzielnie każdą składową koloru w systemie dziesiętnym. Wszystkie liczby muszą się zawierać w zakresie (255 = FF). 5. rgb(r%, G%, B%) - to samo co powyżej, lecz teraz należy podawać wartości procentowe (0%...100%). Znak procentu musi się pojawić na końcu każdej liczby i nie może być oddzielony od niej spacją ani żadnym białym znakiem! kolorów systemowych - (patrz: tabela w dalszej części tego rozdziału) czyli takich, które pochodzą z systemu operacyjnego (np. kolor pulpitu, okien, menu, przycisków i inne). Jeśli zmienimy kolory w swoim systemie, zmianie ulegną również przedstawione tutaj kolory systemowe. Dlatego każdy użytkownik może odebrać je inaczej. Z tego powodu należy uważać z ich stosowaniem, ponieważ nie da się przewidzieć efektu na komputerze innego użytkownika. 7. hsl(h, S%, L%) - (CSS 3) alternatywny do RGB model opisu kolorów, w którym kolejne składowe oznaczają: H (ang. Hue) - barwa Liczba całkowita określana w stopniach (z przedziału od 0 do 360) z tzw. koła barw: 0 - czerwony (Red), zielony (Green), niebieski (Blue) S (ang. Saturation) - nasycenie Wartość procentowa: 0% - szary, 100% - normalny L (ang. Lightness) - jasność Wartość procentowa: 0% - czarny, 50% - normalny, 100% - biały 26

27 HSL jest bardzo intuicyjnym modelem opisu kolorów. Wystarczy wybrać określony odcień z koła barw (H), a następnie odpowiednio sterować nasyceniem (S) i jasnością (L), aby uzyskać pożądany kolor. Tło obrazkowe selektor { background-image: url(ścieżka dostępu do obrazka) np. background-image:url(' url(' Definiowanie gradientów: Dodatkowe opcje css3: transition Generatory: url() url() - w nawiasie pomiędzy cudzysłowem należy podać ścieżkę, która wskaże gdzie znajduje się plik z obrazkiem, który chcemy, aby znalazł się w tle danego elementu HTML. Zapis url('../img/obrazek.png') oznacza: img - folder, w którym znajduje się nasz obrazek obrazek - nazwa naszego obrazka, czyli nazwa pliku.png - rozszerzenie pliku z naszym obrazkiem / - oznacza "wejście" do folderu (przesunięcie się o jeden poziom "do przodu" w drzewie katalogów)../ - oznacza "wyjście" z folderu (przesunięcie się o jeden poziom "do tyłu" w drzewie katalogów) Powtarzanie selektor { background-repeat: repeat: powtarzanie 27

28 Natomiast jako "powtarzanie" należy wpisać: repeat - powtarzanie tła w obu kierunkach (domyślnie) repeat-x - powtarzanie tła tylko w kierunku poziomym repeat-y - powtarzanie tła tylko w kierunku pionowym no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek) space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta (CSS 3 - MSIE 9, Opera) round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta (CSS 3 - MSIE 9, Opera) Pozycja selektor { background-position: pozycja Natomiast jako "pozycja" należy wpisać: 1. Jedną wartość: center - obrazek na środku (w centrum) left - obrazek po lewej right - po prawej top - na górze bottom - na dole jednostka długości - odległość od lewej krawędzi 2. Dwie wartości (oddzielone spacją): left top - lewy-górny róg left bottom - lewy-dolny róg right top - prawy-górny róg right bottom - prawy-dolny róg dwie jednostki długości, z których pierwsza oznacza odległość od lewej krawędzi, a druga - od górnej Pozwala ustalić pozycję obrazka w tle. Zaczepienie selektor { background-attachment: zaczepienie Jako "zaczepienie" należy wpisać: scroll - przewijanie tła (domyślnie) fixed - tło nieruchome względem okna przeglądarki local - tło nieruchome względem elementu (jeśli posiada on suwaki), ale przewijane względem okna przeglądarki (CSS 3 - MSIE 8, ale nie 9.0; Firefox) Normalnie jeśli tłem strony jest grafika, przesuwa się ona razem z tekstem, w miarę przewijania treści okna za pomocą suwaka. Możemy jednak sprawić, że tło będzie przez cały czas nieruchome, nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia: body { background-image: url(obrazek.jpg); background-attachment: fixed 28

29 Różnica pomiędzy wartościami "fixed" a "local"" jest taka, że w przypadku drugiej z ich tło pozostaje nieruchome tylko jeśli do przewijania używamy suwaków elementu. Natomiast w przypadku kiedy przewijamy całą stronę albo kiedy sam element nie ma suwaków, wartość ta działa identycznie jak "scroll". Gradient liniowy (CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera, Chrome) selektor { background: linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) ]. Kierunek określa sposób rozłożenia barw. Można go podać na dwa sposoby: słowa kluczowe to top - przejście kolorów nastąpi pionowo z dołu do góry (odpowiednik 0deg) to right top - ukośnie z lewego-dolnego do prawego-górnego górnego narożnika to right - poziomo z lewej do prawej strony (odpowiednik 90deg) to right bottom - ukośnie z lewego-górnego do prawego-dolnego narożnika to bottom - pionowo z górny do dołu (odpowiednik 180deg - domyślnie) to left bottom - ukośnie z prawego-górnego do lewego-dolnego o narożnika to left - poziomo z prawej do lewej strony (odpowiednik 270deg) to left top - ukośnie z prawego-dolnego do lewego-górnego górnego narożnika kąt - liczony zgodnie z ruchem wskazówek zegara z wartością 0deg skierowaną pionową w górę, a 180deg - pionowo w dół Przykład: background: linear-gradient(to to bottom, black 0%, white 100%) uzyskamy gradient z kolorem czarnym (black) na górze i białym (white)) na dole. Pomiędzy nimi wystąpi łagodne przejście barw poprzez coraz jaśniejsze odcienie szarości. Wynika z tego, że linia gradientu będzie w tym przypadku skierowana pionowo w dół (to bottom): Usunięcie tła selektor { background: none Atrybuty mieszane selektor { background: wartości atrybutów Natomiast jako "wartości atrybutów" " należy wpisać konkretne wartości atrybutów, dotyczących tła, które będą oddzielone od siebie spacjami (przy czym można niektóre pominąć). Są to: kolor tła 29

30 tło obrazkowe powtarzanie tła zaczepienie tła pozycja tła lub pozycja tła / rozmiary tła (CSS 3 - Opera) zaczepienie tła przycinanie tła (CSS 3 - Opera) pozycja początkowa tła (CSS 3 - Opera) np. <p style="color: red; background: url(obrazek.jpg) no-repeat left"> p { background: red url(tlo.gif) Marginesy, obrysy i obramowania Model pudełkowy Każdy element generuje w dokumencie prostokątny obszar zwany pudełkiem (ang. Box model). Pudełko składa się z: 1. Zawartości - "Content" (np. test, obrazek itd.) 2. Otaczających marginesów wewnętrznych - "Padding" 3. Obramowania - "Border" 4. Marginesów - "Margin" Ostatnie trzy składniki są opcjonalne, tzn. mogą mieć wartość zero. Obwód (zewnętrzny) każdego z czterech obszarów nazywamy krawędzią ("Edge"). Według CSS rozmiary elementu (własności width oraz height) odnoszą się do samej zawartości ("Content") i nie wpływają na pozostałe obszary modelu pudełkowego ("Box model"), które są tworzone na zewnątrz zawartości, ale wewnątrz pudełka.. Natomiast tło elementu jest określone dla wszystkich z podanych powyżej obszarów z wyjątkiem marginesów zewnętrznych, które zawsze są przezroczyste ("Transparent"). 30

31 Definiowanie marginesów: Górny selektor { margin-top: rozmiar Dolny selektor { margin-bottom: rozmiar Lewy selektor { margin-left: rozmiar Prawy selektor { margin-right: rozmiar Atrybuty mieszane selektor { margin: wartości atrybutów Natomiast jako "wartości atrybutów" należy podać: 1. Jedną wartość - wtedy wszystkie marginesy będą jednakowe. To jest akapit, który ma wszystkie marginesy równe 2cm (margin: 2cm) 2. Dwie wartości - z których pierwsza oznacza górny i dolny margines, natomiast druga - lewy i prawy. To jest akapit, który ma górny i dolny margines równy 2cm, a lewy i prawy 1cm (margin: 2cm 1cm) 3. Trzy wartości - z których pierwsza oznacza górny margines, druga - jednocześnie lewy i prawy, a ostatnia - dolny. To jest akapit, który ma górny margines równy 2cm, lewy i prawy 1cm, a dolny 3cm (margin: 2cm 1cm 3cm) 4. Cztery wartości - które oznaczają kolejno marginesy: górny, prawy, dolny, lewy. To jest akapit, który ma następujące marginesy: górny 2cm, prawy 5mm, dolny 3cm, lewy 1cm (margin: 2cm 5mm 3cm 1cm) Marginesy wewnętrzne Górny wewnętrzny selektor { padding-top: rozmiar Dolny wewnętrzny selektor { padding-bottom: rozmiar Lewy wewnętrzny selektor { padding-left: rozmiar Prawy wewnętrzny selektor { padding-right: rozmiar 31

32 Atrybuty mieszane marginesu wewnętrznego selektor { padding: wartości atrybutów Natomiast zasady wpisywania "wartości atrybutów" są takie same jak przy atrybutach mieszanych zwykłego marginesu. Pozwala wprowadzić jednocześnie kilka wartości marginesów wewnętrznych. Możliwe jest przy tym podanie: jednej wartości - dla wszystkich marginesów wewnętrznych naraz dwóch wartości - osobno kolejno dla marginesów: pionowych i poziomych trzech wartości - pierwsza określa górny margines wewnętrzny, druga - jednocześnie oba poziome (lewy i prawy), a ostatnia - dolny czterech wartości - osobno dla kolejnych marginesów (górny prawy dolny lewy) Obramowanie Styl obramowania 1. Styl górnego obramowania: selektor { border-top-style: styl 2. Styl dolnego obramowania: selektor { border-bottom-style: styl 3. Styl lewego obramowania: selektor { border-left-style: styl 4. Styl prawego obramowania: selektor { border-right-style: styl Atrybuty mieszane stylu obramowania selektor { border-style: wartości atrybutów Natomiast jako "styl" należy wpisać: none - brak obramowania border-top-style: none hidden - ukryte obramowanie (nie obsługuje MSIE 4) border-top-style: hidden dashed - linia kreskowa (nie obsługuje MSIE 5) border-top-style: dashed 32

33 dotted - linia kropkowa (nie obsługuje MSIE 5) border-top-style: dotted solid - linia ciągła border-top-style: solid double - linia ciągła podwójna border-top-style: double groove - "rowek" border-top-style: groove ridge - "grzbiet" border-top-style: ridge inset - "ramka" border-top-style: inset outset - "przycisk" border-top-style: outset Szerokość obramowania 1. Szerokość górnego obramowania: selektor { border-top-width: szerokość 2. Szerokość dolnego obramowania: selektor { border-bottom-width: szerokość 3. Szerokość lewego obramowania: selektor { border-left-width: szerokość 4. Szerokość prawego obramowania: selektor { border-right-width: szerokość Natomiast jako "szerokość" należy podać: thin - cienkie obramowanie medium - średnie obramowanie thick - grube obramowanie lub konkretną wartość w jednostkach długości 33

34 Atrybuty mieszane szerokości obramowania selektor { border-width: wartości atrybutów Przykład: border-width: 2mm; border-style: solid Atrybuty mieszane koloru obramowania selektor { border-color: wartości atrybutów Przykład obramowania mieszanego: *.podkreslenie { border-bottom: 2px #f80 solid Styl obrysu selektor { outline-style: styl Natomiast jako "styl" należy wpisać: 1. none - brak obrysu. outline-style: none 2. dashed - linia kreskowa. outline-style: dashed 3. dotted - linia kropkowa. outline-style: dotted 4. solid - linia ciągła. outline-style: solid 5. double - linia ciągła podwójna. outline-style: double 6. groove - "rowek". outline-style: groove 7. ridge - "grzbiet". outline-style: ridge 8. inset - "ramka" outline-style: inset 9. outset - "przycisk" outline-style: outset 34

35 Obrys jest zbliżony swoim wyglądem do obramowania. Istnieją jednak pewne różnice: Obrys nie zajmuje miejsca w modelu pudełkowym i dlatego nie wpływa na rozmiary ani pozycję żadnych elementów. Obrys nie musi być prostokątem. Jest tworzony zawsze na wierzchu elementu. Można ustawiać atrybuty obrysu tylko w stosunku do wszystkich boków jednocześnie (nie da się tego robić oddzielnie dla każdego). Szerokość obrysu selektor { outline-width: szerokość Natomiast jako "szerokość" należy podać: thin - cienki obrys medium - średni obrys thick - gruby obrys lub konkretną wartość w jednostkach długości Kolor obrysu selektor { outline-color: kolor Atrybuty mieszane obrysu selektor { outline: wartości atrybutów Odstęp obrysu (CSS 3 - interpretuje Firefox, Opera, Chrome) selektor { outline-offset: rozmiar Przykład:Sprawdź wygląd outline: 4px double #FF5C21; outline-offset: 5px; Zaokrąglenie (CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) 1. Zaokrąglenie górnego-lewego narożnika: selektor { border-top-left-radius: zaokrąglenie 2. Zaokrąglenie górnego-prawego narożnika: selektor { border-top-right-radius: zaokrąglenie 3. Zaokrąglenie dolnego-prawego narożnika: selektor { border-bottom-right-radius: zaokrąglenie 4. Zaokrąglenie dolnego-lewego narożnika: selektor { border-bottom-left-radius: zaokrąglenie 35

36 Natomiast "zaokrąglenie"" określa promień wyrażony w jednostkach długości albo w procentach Możliwe jest tutaj podanie: jednej wartości - zaokrąglenie symetryczne dwóch wartości - pierwsza określa poziomy promień ćwiartki elipsy zaokrąglenia, a druga - pionowy Zaokrąglone narożniki niki to bardzo ciekawy efekt wizualny, który może zwiększyć estetykę strony. Co ciekawe, element ent wcale nie musi mieć obramowania, aby miał zaokrąglone narożniki. Wystarczy jeśli będzie miał ustalone jakieś tło, aby efekt był widoczny na ekranie. Ale uwaga: tekst wewnątrz elementu nie zostanie zawinięty do zaokrąglonych rogów. Jeśli promień zaokrąglenia będzie zbyt duży, tekst wyjdzie na zewnątrz. Cień (CSS 3 - interpretuje Internet Explorer 9, Firefox 4, Opera, Chrome) 36

37 1. Cień na zewnątrz elementu: selektor { box-shadow: poziom pion rozmycie rozprzestrzenienie kolor, Cień wewnątrz elementu: selektor { box-shadow: inset poziom pion rozmycie rozprzestrzenienie kolor,... Wartości "poziom pion rozmycie rozprzestrzenienie kolor" określają własności cienia (wartości "rozmycie", "rozprzestrzenienie" oraz "kolor" nie są wymagane): poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo) pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę) rozmycie - promień efektu rozmycia (opcjonalnie) rozprzestrzenienie - określa odległość na jaką cień wychodzi spod krawędzi elementu, a dla wartości ujemnych chowają cień pod elementem (opcjonalnie) kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element) Wartości "poziom", "pion", "rozmycie" oraz "rozprzestrzenienie" należy podać, używając jednostek długości. Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania. Aby zupełnie usunąć ustalony wcześniej cień, należy podać box-shadow: none Powyższe polecenie pozwala wprowadzić efekt cienia pod dowolnym elementem. Możliwe jest również podanie serii efektów, rozdzielonych przecinkami, które będą się nawzajem nakładały. Przykład: Przykład: -webkit-box-shadow: 5px 7px 8px 3px #26FF05; box-shadow: 5px 7px 8px 3px #26FF05; 37

38 Style dotyczące tabel Podpis selektor { caption-side: ustawienie Selektorem może być element CAPTION Natomiast jako "ustawienie" należy podać: top - podpis na powyżej tabeli bottom - poniżej tabeli left - (wycofano w CSS 2.1) po lewej (interpretuje Opera 6) right - (wycofano w CSS 2.1) po prawej Określa ustawienie podpisu tabeli (znacznik <caption>...</caption>). Obramowanie Model obramowania selektor { border-collapse: model Selektorem może być element TABLE Natomiast jako "model" należy podać: collapse - pojedyncze obramowanie separate - komórki są od siebie odseparowane Polecenie określa model wyświetlania obramowania tabeli pomiędzy komórkami. Możliwe jest użycie obramowania w postaci pojedynczej linii (collapse) albo obramowania dla każdej komórki osobno, które będą od siebie odseparowane (separate). Przykład: Styl, szerokość i kolor obramowania Do tabel (<table>...</table>) oraz ich komórek (<td>...</td>) można stosować wszystkie parametry dotyczące obramowania. Przykład: 38

39 <table style="border: 3mm ridge yellow"> komórka1 komórka3 komórka2 komórka4 komórka1 komórka2 komórka3 <td style="border: 3mm ridge yellow"> Odstępy między komórkami selektor { border-spacing: odstęp Selektorem może być element TABLE Natomiast jako "odstęp" należy podać wartość, korzystając z jednostek długości. Przy czy możliwe jest podanie: jednej wartości określającej wszystkie odstępy dwóch wartości (rozdzielonych spacją) określających kolejno poziomy oraz pionowy odstęp Ustala poziomy i pionowy odstęp między komórkami. Przykład: Puste komórki selektor { empty-cells: sposób Selektorem może być element TABLE, TD lub TH Natomiast jako "sposób" należy podać: show - pokaż obramowanie wokół pustych komórek hide - schowaj obramowanie wokół pustych komórek Polecenie określa czy obramowanie wokół pustych komórek tabeli ma zostać pokazane czy ukryte. 39

40 Rozmiary Do tabel (<table>...</table>), ich komórek (<td>...</td>), wierszy (<tr>...</tr>) oraz kolumn (<colgroup>...</colgroup>) można stosować parametry dotyczące szerokości i wysokości. Odnośnie komórek oraz całej tabeli można ustawić zarówno ich szerokość jak i wysokość. Natomiast dla wiersza możliwe jest określenie tylko wysokości, ponieważ szerokość jest jednocześnie szerokością tabeli. Podobnie dla kolumny można ustalić jedynie jej szerokość, bo wysokość jest wysokością tabeli. Np. <table style="width: 80%; height: 150px"> #tabela { border: 1px solid black; border-collapse: collapse; background-color: #ffc; #tabela td { border: 1px solid black; padding: 5px; td.inny_wyglad { background-color: orange; vertical-align: top; font-weight: bold; color: darkred; Przypomnienie o tabelach w html-u Struktura tabeli <table> <tr> </tr> <tr> <td>...</td> <td>...</td> </tr> </table> <table>...</table> <td>...</td> <td>...</td> jest znacznikiem tabeli <tr>...</tr> jest znacznikiem wiersza <td>...</td> jest znacznikiem pojedynczej komórki Wymiary całej tabeli <table width="x" height="y">...</table> lub <table width="x%" height="y%">...</table> 40

41 W miejsce kropek należy wpisać treść poszczególnych komórek tabeli. Obramowanie <table border="x">...</table> gdzie "x" oznacza grubość zewnętrznej ramki tabeli (w pikselach). Dodaje obramowanie pomiędzy komórkami tabeli, czyli pionowe i poziome linie dzielące poszczególne wiersze oraz kolumny. Pozwala określić szerokość zewnętrznej części tego obramowania. Odstępy między komórkami <table cellspacing="x">...</table> gdzie "x" oznacza szerokość odstępu między sąsiednimi komórkami (w pikselach). Przykład <table border="5" cellspacing="10"> Marginesy w komórkach <table border cellpadding="x">...</table> gdzie "x" oznacza szerokość marginesu (w pikselach). Wyrównanie tabeli <table align="rodzaj">...</table> gdzie jako "rodzaj" należy wpisać: "left" - wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu "right" - wyrównanie tabeli do prawej strony, względem otaczającego tekstu "center" - wyśrodkowanie tabeli Wyrównanie zawartości tabeli 1. Wyrównanie zawartości całego wiersza <table> <tr align="rodzaj" valign="ustawienie">...</tr> </table> 2. Wyrównanie zawartości pojedynczej komórki <table> <tr> <td align="rodzaj" valign="ustawienie">...</td> </tr> </table> W obu przypadkach należy podać: rodzaj ustawienie "left" - wyrównanie zawartości (wiersza lub komórki) do lewej (domyślnie) "right" - wyrównanie zawartości do prawej "center" - wyśrodkowanie zawartości "top" - ustawienie zawartości (wiersza lub komórki) na górze "bottom" - ustawienie zawartości na dole "middle" - ustawienie zawartości po środku (domyślnie) Dzięki tym poleceniom możliwe jest podanie umiejscowienia zawartości całego wiersza tabeli, jak również pojedynczej komórki. 41

42 Kolor tła W całej tabeli <table bgcolor="kolor">...</table> W jednym wierszu <table> <tr bgcolor="kolor">...</tr> </table> W pojedynczej komórce <table> <tr> </tr> </table> <td bgcolor="kolor">...</td> Tło obrazkowe <table> <tr> <td background="ścieżka dostępu">...</td> </tr> </table> We wszystkich przypadkach jako "ścieżka dostępu" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek. Łączenie komórek Poziome łączenie komórek <table> <tr> <td colspan="x">...</td> </tr> </table> gdzie "x" oznacza liczbę komórek do połączenia w poziomie. Pionowe łączenie komórek <table> <tr> <td rowspan="y">...</td> </tr> </table> gdzie "y" oznacza liczbę komórek do połączenia w pionie. Przykład Poziome łączenie komórek: Dla pierwszej komórki <td colspan="2"> (druga komórka nie istnieje, ponieważ została połączona z pierwszą) <table border="1"> <tr> <td colspan="2">komórki1,2</td> </tr> <tr> <td>komórka3</td> <td>komórka4</td> </tr> </table> 42

43 Pionowe łączenie komórek: Dla pierwszej komórki <td rowspan="2"> (trzecia komórka nie istnieje, ponieważ została połączona z pierwszą) <table border="1"> <tr> <td rowspan="2">komórki1,3</td> <td>komórka2</td> </tr> <tr> <td>komórka4</td> </tr> </table> Wielkości i pozycje elementów witryny Kontrolowanie rozmiarów elementów strony Style CSS pozwalają na swobodne kontrolowanie rozmiarów oraz pozycji elementów witryny. Szerokość Właściwość width pozwala ustalić dokładną szerokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). selektor { width: szerokość Selektorem może być dowolny znacznik wyświetlany w bloku lub element zastępowany. Wysokość Właściwość height pozwala ustalić dokładną wysokość różnych elementów (np. akapitu, wykazu, poziomej linii, tabeli, obrazka itd.). selektor { height: wysokość Selektorem może być dowolny znacznik wyświetlany w bloku lub element zastępowany. Przykład: Jako wartość cechy width lub height można podać auto, co powoduje, że szerokość lub wysokość będzie automatycznie dostosowywana do zawartości elementu. 43

44 Zawartość poza elementem Na rysunku widać, że tekst, który nie zmieścił się w elemencie jest wyświetlony poza jego obszarem. Jest to domyślne zachowanie przeglądarki internetowej, które można kontrolować za pomocą cechy overflow. Właściwość przyjmuje następujące wartości: visible nadmiarowa zawartość widoczna poza granicami elementu (wartość domyślna), hidden nadmiarowa zawartość nie będzie widoczna (zostanie obcięta ), scroll w elemencie będą dostępne paski przewijania (bez względu czy występuje nadmiarowa zawartość), auto paski przewijania będą widoczne jedynie w przypadku wystąpienia nadmiarowej zawartości. Rozmiary maksymalne i minimalne Style CSS pozwalają na zdefiniowanie maksymalnych i minimalnych rozmiarów elementów strony WWW. Odpowiadają za to cechy: max-width (szerokość maksymalna) - pozwala zabezpieczyć rozmiar elementu tak, aby nigdy nie był większy od podanej wartości. min-width (szerokość minimalna) - polecenie pozwala zabezpieczyć rozmiar elementu tak, aby nigdy nie był mniejszy od podanej wartości. max-height (wysokość maksymalna) analogicznie jak cecha max-width tyle tylko, że dotyczy wysokości elementu. min-height (wysokość minimalna) - analogicznie jak cecha min-width tyle tylko, że dotyczy wysokości elementu. Wartość cech określa się za pomocą dowolnej jednostki miary. Zastosowanie powyższych cech jest charakterystyczne dla obrazów. Znacznik <img> w przeciwieństwie do takich elementów jak akapit lub warstwa nie zawiera niezależnych danych, które mógłby się w nim mieścić lub nie. Dlatego właściwości określające minimalne i maksymalne rozmiary bezpośrednio wpływają na dany obraz. Poniższy przykład przedstawia różne warianty dla obrazu o faktycznej rozdzielczości 538x516. Przykład. Skalowanie obrazów. <body> <div> <img style="max-width:250px; " src="kolo.gif" alt="kolo" /> <img style="max-height:200px;" src="kolo.gif" alt="kolo" /> <img style="width:100px; height:150px;" src="kolo.gif" alt="kolo" /> </div> </body> Rysunek 2. Skalowanie obrazów. 44

45 W każdym z trzech przypadków nastąpiło przeskalowanie. Należy zauważyć, iż w przypadku pierwszym i drugim to przeskalowania było proporcjonalne. Tylko w ostatnim przypadku proporcje nie zostały zachowane, ponieważ zostały podane konkretne wymiary obrazu. Wyświetlanie elementów 2 Zazwyczaj elementy HTML traktowane są przez przeglądarki jako elementy blokowe. CSS wyróżnia dwa typy bloków elementy blokowe i elementy śródliniowe. Mimo że większość arkuszy stylów traktuje je tak samo, to istnieją znaczące różnice w sposobie wyświetlania tych elementów. Na szczęście istnieje pewna właściwość, która likwiduje te różnice. Możemy zatem sprawić, aby dla naszych potrzeb element blokowy zachowywał się jak śródliniowy i odwrotnie. Z kolei za pomocą właściwości pozycjonujących mamy pewnego rodzaju kontrolę nad położeniem elementów na naszej stronie. Należy jednak pamiętać, że dobieranie stałych wartości niesie ze sobą pewne ryzyko zmiana choćby rozmiaru czcionki przeglądarki przez odwiedzających może całkowicie zburzyć układ witryny. Implementacja Właściwość, która decyduje, w jaki sposób wyświetlany będzie dany element, to display. Może ona przyjąć trzy wartości: inline sprawia, że dany element zachowuje się jak element śródliniowy, block mówiąca elementowi, że jest elementem blokowym, none jej zadaniem jest po prostu ukrycie danego elementu na stronie. Elementy blokowe wiążą się z dodatkowym odstępem za i przed elementem. Do tej grupy należą takie znaczniki, jak: <p>, <div>, <table>. Z kolei elementy liniowe nie dodają żadnego odstępu i nie można też dodać do nich górnych oraz dolnych marginesów ani dopełnień nie daje to więc oczekiwanego przez nas rezultatu. Wyjątkiem jest tu znacznik <img/>. Do grupy elementów liniowych należą też np. <strong>, <a>

46 Przykład strony z elementami blokowymi i liniowymi. W kolejnym przykładzie zastosowano następujący styl do tych samych elementów liniowych: a, strong { margin: 10px; padding: 10px; Przykład strony z zastosowaniem górnych i dolnych marginesów oraz dopełnień dla elementów liniowych. Jak widać, górny i dolny margines w tym przypadku nie działa. Model pudełkowy, wymiary Model pudełkowy CSS opisuje bloki, jakie tworzą się wokół elementów HTML zawierających treść. W myśl zasad określanych przez model pudełkowy, każdy element blokowy opcjonalnie może otrzymać dodatkowe parametry, opisujące jakie powinny być odległości elementu względem innych elementów na stronie, jakie element powinien mieć obramowanie oraz jaka powinna być odległość pomiędzy zawartością elementu a jego obramowaniem. 46

47 Schemat modelu pudełkowego Każdy element blokowy posiada obszar zawartości, mogący być na przykład tekstem, obrazkiem czy choćby innymi elementami. Element taki opcjonalnie może być otoczony dopełnieniem (padding), obramowaniem (border)) oraz marginesem (margin). W modelu blokowym wartości szerokości i wysokości elementu, odnoszą ą się ę wyłącznie do zawartości. Oznacza to, że aby obliczyć ć całkowitą szerokość lub wysokość bloku, należy zsumować w poziomie lub pionie wszystkie wartości: dopełnienia, obramowania, marginesu oraz zawartości. Margines - margin Margines jest zewnętrzną krawędzią bloku. Służy do określania odległości pomiedzy elementami, a jego obszar jest przezroczysty. W CSS do ustalenia rozmiaru marginesu służy ż właściwość margin. Kaskadowe arkusze stylów pozwalają na określenie zarówno wartości ogólnej dla całego marginesu, jak i na ustalenie różnych wartości dla każdej z krawędzi pudełka. Kaskadowe arkusze stylów pozwalają na zdefiniowanie rozmiaru marginesu dla poszczególnych krawędzi elementu. Do ustawiania rozmiaru służą właściwości: margin, margin-top, margin-right, margin-bottom, margin-left. Dopełnienie - padding Dopełnienie jest wewnętrzną ą krawędzią bloku znajdującą się pomiędzy zawartościa a obramowaniem. Służy do otaczania zawartości pustą przestrzenią, dystansującą zawartość od obramowania. Dopełnienie przyjmuje takie samo tło jakie zostaje przypisane do elementu. W CSS do ustalenia rozmiaru dopełnienia służy właściwość padding.. Kaskadowe arkusze stylów pozwalają na określenie zarówno wartości ogólnej dla całego dopełnienia, jak i na ustalenie różnych wartości dla każdej z krawędzi dopełnienia. Kaskadowe arkusze stylów pozwalają na zdefiniowanie rozmiaru marginesu dla poszczególnych krawędzi elementu. Do ustawiania rozmiaru służą właściwości: padding, padding right, padding-bottom, padding-left. padding, padding-top, padding- 47

48 Obramowanie - border Obramowanie jest drugą licząc od zewnątrz krawędzią bloku. Stanowi pierwszą widoczną krawędź elementu, dzięki czemu pozwala na jego dodatkowe wyróżnienie. W CSS do ustalenia rozmiaru, wyglądu oraz koloru obramowania służy właściwość border. Kaskadowe arkusze stylów pozwalają na określenie jednakowego stylu obramowania dla całego elementu, jak również na ustalenie różnych wartości dla każdej z krawędzi obramowania pudełka. Kaskadowe arkusze stylów pozwalają na zdefiniowanie w zbiorczym zapisie jednakowego obramowania (składającego się z trzech parametrów: rozmiaru, stylu oraz koloru) dla całego elementu. Pozwalają również na zapisanie tych parametrów rozdzielnie. Do ustawienia obramowania służą właściwości: border, border-width, border-style, border-color. Właściwość border Opis Ustawia wszystkie parametry obramowanie w jednej deklaracji. border-width Ustawia rozmiar obramowania. border-style Ustawia styl obramowania. border-color Ustawia color obramowania. Pozycjonowanie elementów Elementy pływające 3 Elementy mogą ustawić się na lewo lub prawo względem innych przy wykorzystaniu właściwości float. Mówi się że blok wraz z zawartością pływa na lewej stronie lub na prawej w dokumencie (lub odpowiednim bloku).następujący rysunek ilustruje zasadę: Jeżeli, dla przykładu, chcemy mieć obrazek osłonięty tekstem, rezultat wyglądał by tak:

49 Jak to jest zrobione? Kod HTML dla powyższego przykładu: <div id="picture"> <img src="bill.jpg" alt="bill Gates"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> Aby obrazek ustawiony został na lewej stronie a tekst otaczał go z prawej, musisz jedynie zdefiniować szerokość elementu zawierającego w sobie obrazek oraz ustawić właściwość float na wartość left: #picture { float:left; width: 100px; Kolejny przykład: kolumny Pływanie może być także używane do tworzenia kolumn w dokumencie. Aby stworzyć kolumnę, po prostu strukturyzujesz odpowiednie kolumny w kodzie HTML za pomocą znacznika <div> jak niżej: <div id="column1"> <p>haec disserens qua de re agatur et in quo causa consistat non videt...</p> </div> <div id="column2"> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> </div> <div id="column3"> <p>nam nihil esset in nostra potestate si res ita se haberet...</p> </div> 49

50 Teraz porządną szerokość kolumny ustawiamy na np. 33%, a potem ustawiamy pływanie każdej kolumny na lewo poprzez właściwość float: #column1 { float:left; width: 33%; #column2 { float:left; width: 33%; #column3 { float:left; width: 33%; float może otrzymać wartości: left, right lub none. Właściwość clear Właściwości clear używamy do kontroli zachowania kolejnego elementu w dokumencie za elementem pływającym. Jako "sposób" można podać: selektor { clear: sposób left unieważnienie przepływu z lewej strony right - unieważnienie przepływu z prawej strony both - unieważnienie przepływu z obu stron Standardowo, kolejne elementy przesuwają się w taki sposób, aby zapełnić puste miejsce stworzone przez element pływający po stronach. Popatrz na przykład powyżej gdzie tekst automatycznie przesuwa się na bok zdjęcia Billa Gatesa. Właściwość clear może przyjmować wartości left, right, both or none. Zasada jest następująca, Jeżeli clear, dla przykładu, ma wartość both dla elementu, górny margines obramowania elementu będzie zawsze poniżej dolnego marginesu obramowania elementu nad nim pływającego. <div id="picture"> <img src="bill.jpg" alt="bill Gates"> </div> <h1>bill Gates</h1> 50

51 <p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> Aby wyłączyć pływanie tekstu w stronę obrazka, możemy wykorzystać następujący kod CSS: #picture { float:left; width: 100px;.floatstop { clear:both; Przykład 1: <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>moja strona WWW</title> <style type="text/css"> div{ border:2px solid black; background-color:#efefef; margin:5px; width:100px; height:50px; text-align:center #w1{ float:left; #w2{ float:right; #w3{ float:left; </style> </head> <body> <div id="w1">warstwa nr 1</div> <div id="w2">warstwa nr 2</div> <div id="w3">warstwa nr 3</div> </body> 51

52 </html> Przykład: wyłączenia opływania <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>moja strona WWW</title> <style type="text/css"> div{ border:2px solid black; background-color:#efefef; margin:5px; width:100px; height:50px; text-align:center #w1{ float:left; #w2{ float:right; clear:left; #w3{ clear: right; </style> </head> <body> <div id="w1">warstwa nr 1</div> <div id="w2">warstwa nr 2</div> <div id="w3">warstwa nr 3</div> </body> 52

53 Pozycjonowanie: statyczne, zaczepione, absolutne, relatywne. Pozycjonowanie elementów na stronie W CSS mamy dostęp do czterech typów pozycjonowania: bezwzględne (absolute), względne (relative), stałe (fixed), statyczne (static). Inne właściwości określające pozycjonowanie left, right, top, bottom lokalizacja pudełka z-index kolejność rysowania warstw Właściwości określające sposób wyświetlania float określa sposób opływania pudełka o left pudełko do lewej i opływane z prawej o right pudełko do prawej i opływane z lewej o none pudełko w ogóle nie jest opływane display sposób wyświetlania pudełka o typowe wartości: block, inline, none visibility czy pokazywać pudełko o wartości: visible, hidden clear określa, która krawędź pudełka ma nie przylegać do krawędzi poprzednich pudełek o wartości: left, right, both overflow co zrobić z tym co wystaje o wartości: visible, hidden, scroll clip określa obszar, który ma być wyświetlony o wartość: rect(lewa, góra, prawa, dół) Pozycjonowanie bezwzględne selektor { position: absolute; pozostałe parametry Umożliwia ono określenie elementu na stronie poprzez podanie wartości odległości od poszczególnych krawędzi zawierającego kontenera. Jednostką do wykorzystania są piksele, em oraz procenty. Możemy określić pozycję left, right, top i bottom. 53

54 Należy pamiętać, że elementy pozycjonowane bezwzględnie są zupełnie niewidoczne dla pozostałych elementów w kodzie HTML, co oznacza, że nie mają wpływu na ich układ. Dlatego też należy uważać, aby nie przykryły innych elementów posiadających ważną treść. Informacja Nie należy stosować właściwości position: absolute do elementów pływających. Właściwości float oraz absolute nie mogą oddziaływać jednocześnie na ten sam element. W przykładzie poniżej zastosowano następujące wartości dla akapitu: position: absolute, left:100px, top:-10px, width: 150px oraz padding: 10px. Przykład strony z akapitem wypozycjonowanym bezwzględnie. Pozycjonowanie względne selektor { position: relative; pozostałe parametry Element pozycjonowany względnie jest przesuwany o wartości określone jako left, right, top oraz bottom względem swojego początkowego położenia na stronie. W przeciwieństwie do pozycjonowania bezwzględnego pozostałe elementy wiedzą o jego istnieniu i dostosowują się do jego pierwotnej pozycji. Przesunięty element pozostawia zatem po sobie puste miejsce, w którym znajdowałby się normalnie. Informacja Pozycjonowanie względne stosuje się zazwyczaj nie do przenoszenia elementów na stronie, ale raczej wyznaczania nowego punktu odniesienia dla elementów, które się w nim znajdują. W przykładzie poniżej zastosowano następujące wartości dla akapitu: position: relative, left:100px, top:-10px, width: 200px oraz padding: 10px. 54

55 Przykład strony z akapitem wypozycjonowanym względnie. Pozycjonowanie stałe selektor { position: fixed; pozostałe parametry Element tak pozycjonowany jest zablokowany w określonym miejscu na ekranie. Dlatego też wartości pozostałych parametrów zawsze określane są względem krawędzi okna. Elementy takie są stale widoczne i nie przewijają się z pozostałą zawartością strony. Nie mają też wpływu na pozostałe elementy i są wyświetlane nad nimi. Niestety, Internet Explorer 6 i wersje wcześniejsze nie potrafią zinterpretować tego ustawienia. W przykładzie poniżej zastosowano następujące wartości dla akapitu: position: fixed, left:100px, top:-10px, width: 200px oraz padding: 10px. Przykład strony z akapitem wypozycjonowanym na stałe. Pozycjonowanie statyczne selektor { position: static; Element tak pozycjonowany to nic innego, jak element z normalnego biegu kodu HTML. Jest to domyślna metoda pozycjonowania. Przy określaniu parametrów left, right, top oraz bottom możemy (ale nie musimy) ustawić wszystkie cztery właściwości. Ustawienie zarówno lewej, jak i prawej pozycji oznaczać będzie, że przeglądarka sama określi szerokość elementu, która zależna będzie wtedy od szerokości okna przeglądarki. Wyjątkiem jest przeglądarka Internet Explorer 6 i wcześniejsze, które to wyświetlają poprawnie lewą pozycję, zaś prawą pomijają. To samo dotyczy wysokości pozycjonowanych elementów. Informacja 55

56 Element pozycjonowany jest w rzeczywistości pozycjonowany względem okna tylko wtedy, gdy nie znajduje się w innym elemencie pozycjonowanym bezwzględnie, względnie lub na stałe. W przeciwnym wypadku jest on pozycjonowany właśnie względem znacznika, w którym jest zagnieżdżony. Często przy pozycjonowaniu nieuniknione jest nakładanie na siebie różnych elementów. Aby mieć pewność, który element pozostanie na wierzchu, możemy użyć właściwości z-index. Im wyższa jej wartość, tym wyższy priorytet danego elementu. Dopuszczalne są zarówno wartości dodatnie, jak i ujemne. W ten sposób, niezależnie od kolejności wystąpienia w kodzie HTML, możemy kontrolować nakładanie na siebie wyświetlanych elementów. Do kolejnego przykładu zastosowane zostały style: div{ position:absolute; width:100px; height:100px; #div1{ background:red; z-index:2; #div2{ top:30px; left:10px; background:blue; z-index:1; Zaś HTML to jedynie dwa znaczniki div: <div id="div1"></div> <div id="div2"></div> Ponieważ div1 posiada najwyższy z-index, dlatego znaduje się nad elementem div2. Przykład strony, na której użyto właściwości z-index. Przykład ustalenia pozycji elementów witryny. <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>moja strona WWW</title> <style type="text/css"> div{ position:relative; width:387px; color:red; font-size:14pt; background-color:#e0e0e0; border:2px solid black; #warstwa1{ left:20px; #warstwa2{ left:30px; top:10px; #akapit1{ position:relative; border:2px dotted black; left:20px; </style> </head> 56

57 <body> <div ID="warstwa1"> Ten fragment tekstu znajduje się na warstwie1. </div> <div id="warstwa2"><p id="akapit1"> To jest tekst akapitu znajdującego się na wartswie2. </p> </div> </body> Rysunek 3. Przykład ustalenia pozycji elementów witryny. Zadanie Zbuduj strukturę strony zgodnie z rysunkiem poniżej. Szerokość strony 1000px, szerokość kolumn po 250px, środek pozostałe. Top ustaw na pozycję relatywną, a następnie umieść w nim logo, napis i menu po prawej stronie z pozycją absolutną. Pliki do strony znajdziesz w załącznikach. Zastosuj poniższą strukturę: <div id="kontener"> <div id="top"> </div> <div id="srodek_lewy"></div> <div id="srodek_srodek"></div> <div id="srodek_prawy"></div> <div id="stopka"></div> </div> W opcji top umieść listę: <ul> <li><a href="start">start </a></li> <li><a href="informacje">informacje </a></li> <li><a href="kontakt">kontakt </a></li> <li><a href="">sklep </a></li> 57

58 <li><a href="">galeria</a></li> </ul> A w opcji css, możesz wukorzystać następujący kod: #top ul { float: left; list-style-type: none; position: absolute; height: 30px; width: 400px; left: sam ustaw px; top: sam ustaw px; #top ul li { float: left; #top ul li a { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FF0; text-decoration: none; background-color: #006; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin-left: 5px; #top ul li a:hover { color: #FFF; background-color: #900; 58

59 Bardzo prosty układ kolumnowy: 4 Wykorzystajmy position: absolute do stworzenia układu kolumnowego, spełniającego następujące wymagania. Po pierwsze ma być rozciągnięty na 100% szerokości okna przeglądarki. Po drugie ma zawierać 3 kolumny, z czego dwie to boczne kolumny o stałej szerokości, a trzecia to płynna część środkowa. Pierwszym krokiem jest utworzenie struktury HTML: Nagłówek strony Środkowa część strony Kod CSS przyjmuje następującą postać: * { #top { margin: 0; padding: 0; height: 100px; background: #7B8F8A; font-size: 12px; color: white; #left { position: absolute;

60 top: 100px; left: 0; width: 200px; background: #BCC499; #center { margin-left: 200px; margin-right: 200px; background: #F5DD9D; #right { position: absolute; top: 100px; right: 0; width: 200px; background: #BCC499; Pierwsza reguła nadaje wartość 0 wszystkim marginesom i paddingom. Jest to ważne ze względu na różnice w ich interpretacji przez różne przeglądarki. Druga reguła definiuje nagłówek strony o wysokości 100 pikseli. Będzie on zawsze rozciągać się na całą szerokość strony. Reguły odpowiadające za lewą ą i prawą kolumnę są pozycjonowane absolutnie do lewego i prawego brzegu okna przeglądarki, a także oddalone o 100 pikseli od brzegu górnego, co jest konieczne ze względu na pudełko #top. Część ęśćśrodkowa środkowa posiada z obu stron marginesy szerokości bocznych kolumn. Z przykładem wiąże się jednak istotny problem. Boczne kolumny są krótsze od części środkowej (tak będzie w większości sytuacji), a dla dobrego efektu i spójności wizualnej wszystkie trzy kolumny powinny być rozciągnięte na taką ą samą wysokość. Aby osiągnąć tego rodzaju efekt, możemy nadać odpowiedni kolor tła elementowi body: body { background: #BCC499; Rozwiązuje zuje to nasze problemy, jeżeli celem jest jedynie stworzenie prostego układu, w którym obie boczne kolumny posiadają ą identyczny kolor tła. Co jednak należy zrobić ć w sytuacji, gdy kolumny mają posiadać różne kolory tła? 60

61 Bardziej skomplikowany układ kolumnowy W tym przypadku celem jest stworzenie układu, w którym każda z kolumn posiada odmienny kolor tła. Przede wszystkim musimy zmodyfikować strukturę HTML: Nagłówek strony Środkowa część strony W kodzie pojawił się element oznaczony, jako #srodek, który zawiera środkową oraz prawą kolumnę. Pod nim pojawił się element z klasą clear odpowiadający za przedłużenie środkowej kolumny do końca ekranu. Style CSS wyjaśniają ą więcej: * { body { #top { margin: 0; padding: 0; background: #BCC499; height: 100px; background: #7B8F8A; font-size: 12px; color: white; #left { position: absolute; top: 100px; left: 0; width: 200px; background: #BCC499; #srodek { margin-left: 200px; background: url(tlo.gif) right repeat-y; #center { margin-right: 200px; background: white; 61

62 #right { position: absolute; top: 100px; right: 0; width: 200px; background: #506266; color: white;.clear { clear: both; Przeanalizujmy powyższy kod. Element body posiada takie samo tło, jak lewa kolumna, czyli #BCC499. Sam kod lewej kolumny niczym się nie różni od przedstawionego przy wcześniejszym przykładzie. Następnie dostrzec możesz regułę dla diva #srodek. Posiada margines tworzący miejsce dla lewej kolumny. Jako tła użyty został plik tlo.gif powtarzany w pionie. Jego rozmiar to pikseli Symuluje on przedłużenie prawej kolumny: #srodek { margin-left: 200px; background: url(tlo.gif) right repeat-y; Użycie pliku graficznego jest najistotniejszą zmianą. Następnie div #center posiada tylko jeden margines z prawej strony, a #right nadaliśmy kolor tła identyczny z powtarzanym anym plikiem graficznym. Całości dopełnia reguła:.clear { clear: both; Jeżeli zastosowanie właściwości clear odpowiadającej za sposób łamania linii pod zawierającym ją elementem nie jest ci znany, to musisz wiedzieć, że powyższy kod sprawia, że div #srodek zostaje automatycznie wydłużony do końca wysokości okna przeglądarki. Zauważ, że e pozycjonowanie absolutne kolumn działa idealnie wtedy, gdy środkowa kolumna jest dłuższa od bocznych. Taka sytuacja ma miejsce w przypadku dużej liczby serwisów, jednak nie zawsze. Musisz za każdym razem przeanalizować, czy wybrana metoda tworzenia układu kolumnowego jest adekwatna do charakteru strony. 62

63 Warstwy i kursory z-index Za pomocą właściwości z-index możemy zmienić indeks elementu HTML, dzięki czemu mamy wpływ na to w jakiej kolejności mają przesłaniać się nawzajem dane elementy HTML. Właściwość przeznaczona jest dla elementów HTML, które nie są elementami wyświetlonymi w domyślnej, statycznej pozycji. przeznaczenie Właściwość z-index możemy dodać do dowolnego elementu, który posiada jedną z właściwości: position:absolute; position:relative; position:fixed; liczba - do określenia kolejności w jakiej mają być widoczne elementy HTML używamy liczb. Na przykład element z indeksem 3 będzie mógł przesłaniać element z indeksem 1 oraz 2, ale sam będzie przesłonięty przez element z indeksem 4. Przykład: <style type="text/css"> #kontener { background-color: #FF6; height: 400px; width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border: 2px groove #F90; position: relative;.pierwsze { position: absolute; z-index: 1; left: 245px; top: 23px;.drugie{ position: absolute; z-index: 2; left: 210px; top: 84px;.trzecie { position: absolute; z-index: 3; left: 171px; top: 127px; </style> </head> <body> 63

64 <div id="kontener"><img class="drugie" src="2.jpg" width="80" height="125" alt="2" /><img class="pierwsze" src="1.jpg" width="80" height="128" alt="1" /><img class="trzecie" src="3.jpg" width="80" height="125" alt="3" /></div> </body> visibility Za pomocą właściwości visibility możemy ustalić czy dany element HTML ma być widoczny w oknie przeglądarki internetowej. Dostępne wartości dla właściwości visibility Wartość Opis hidden ukrycie elementu collapse ukrycie komórki lub wiersza tabeli visible element pozostanie widoczny hidden hidden - element zostanie ukryty, lecz w jego miejsce pojawi się pusta przestrzeń, która będzie zajmowała taki sam rozmiar jak ukryty element. opacity Za pomocą właściwości opacity możemy ustalić stopień przezroczystości elementu HTML. Wartość liczba dziesiętna Opis określenie stopnia przezroczystości elementu za pomocą liczby dziesiętnej liczba dziesiętna - do określenia stopnia przezroczystości elementu HTML używamy liczb z zakresu: 0-1. Liczby dziesiętne są dopuszczalne (np. 0.55). 1 oznacza brak przezroczystości, a 0 pełną przezroczystość. Np. Css:.drugie{ position: absolute; z-index: 2; left: 210px; top: 84px; opacity:0.8;.trzecie { position: absolute; 64

65 z-index: 3; left: 171px; top: 127px; opacity:0.5; overflow Za pomocą właściwości overflow możemy ustalić jak ma zachować się element HTML w momencie gdy jego zawartość nie będzie mieściła się w jego rozmiarach. Dostępne wartości dla właściwości overflow Wartość Opis hidden scroll auto visible ukrycie niemieszczącej się zawartości elementu dodanie suwaków do elementu dodanie suwaków do elementu, gdy pojawi się niemieszcząca się zawartość niemieszcząca się zawartość elementu pozostanie widoczna przeznaczenie Właściwość overflow możemy dodać do każdego elementu, który zawiera w sobie cechy elementu blokowego. Kształty kursora Cecha cursor pozwala określić jaki będzie kształt kursora myszy, gdy znajduje się on nad danym elementem witryny. selektor { cursor: rodzaj Selektorem może być praktycznie dowolny znacznik. Możliwe do zastosowania wartości zostały przedstawione poniżej: auto - automatyczny wybór kształtu kursora (zależy od typu elementu, na który wskazujemy - tryb domyślny), default - kursor domyślny (strzałka), none - brak kursora, help - kursor pomocy, pointer - wskaźnik (wskazuje odsyłacz), hand dłoń, progress - "postęp", wait - "poczekaj", 65

66 crosshair krzyżyk, text - kursor tekstowy, vertical-text - pionowy kursor tekstowy, alias skrót, copy kopia, move - "przesuń", no-drop - wskazuje, że przeciągany element nie może zostać upuszczony w tej pozycji, not-allowed - żądana akcja nie zostanie przeprowadzona, ne-resize - "północny wschód", e-resize - "wschód", se-resize - "południowy wschód", s-resize - "południe", col-resize - pozioma zmiana szerokości kolumny, row-resize - pionowa zmiana wysokości wiersza, all-scroll - przewijanie w dowolnym kierunku. Istnieje możliwość wczytania dowolnego kursora z pliku z obrazem kursora za pomocą polecenia: selektor { cursor: url(ścieżka dostępu), rodzaj W miejsce ścieżka dostępu należy wpisać adres do pliku z obrazem kursora, a rodzaj zastąpić wartością określająca kształt kursora. 66

67 Układ strony generowany przez CSS Praca nad układem strony opartej na CSS Przykład 1: 67

68 Wygląd: Zadanie: Do przykładu pierwszego dodaj kilka opcji, tak aby uzyskać podobny efekt jak niżej na obrazku. Wstaw 3 linki w menu lewe Dodaj jakiś tekst w id srodek, wstaw dwa zdjęcia jedno z opływaniem po prawej drugie po lewej stronie, zdjęcia niech staną się odnośnikami do dużych zdjęć, które pojawią się w nowej karcie. Zastosuj pseudoklase o na linki: po najechaniu np. zmienia się kolor tekstu o na zdjęcia: po najechaniu zmienia się kolor i wielkość obramowania 68

69 Rysunek 1.po najechaniu Przykład 2: Przykład podobny do powyższego, zastosowany na class (powinien być oparty na id). Dlaczego nie powinno się używać w klas tylko id? Wygląd: 69

70 Przykład 3. Pobierz i zapoznaj się ze strukturą strony przykład 3.zip 70

71 Transformacje i animacje w CSS Grafika i transformacje w CSS3 Cieniowanie tekstu text-shadow Text-shadow pozwala na dodanie cienia do tekstu. Pierwsza wartość określa rozmiar przesunięcia cienia w prawą stronę, druga przesunięcia cienia w dół, trzecia stopień rozmycia cienia, a ostatnia jego kolor. Kod CSS: h1 { text-shadow:2px 2px 5px green; Cieniowanie elementu box-shadow Styl box-shadow, pozwala na dodanie cienia dla danego elementu na stronie www. Przy zastosowaniu tego stylu wpisujemy kolejne wartości: 1. przesuniecie-poziome 2. przesuniecie-pionowe 3. promień rozmycia 4. zasięg 5. kolor Kod CSS: div {box-shadow:10px 10px 10px -5px #b7a1a1; Inset cień wewnętrzny: Możemy dodać również cień wewnętrzny, dzięki któremu możemy uzyskać efekt wklęsłości. Cień wewnętrzny ustalamy dodając parametr inset: Kod CSS: div {box-shadow: inset 2px 2px 5px 2px #b7a1a1; 71

72 Obsługuje Przezroczystość Wykorzystanie przezroczystości przy zastosowaniu modelów barw HSLA i RGBA Model HSLA To rozszerzenie o parametr przezroczystości (A) modelu HSL: parametr H to wybrany kolor, który określamy jako wartość liczbową z przedziału 0 360; S to nasycenie (od 0% do 100%), L to jasność, (od 0% do 100%). Kod CSS: div { background-color:hsla(0,100%,50%,0.2); Przykład: Model RGBA to model przestrzeni barw. Jest rozszerzeniem RGB o kanał alfa (przezroczystość). Kod CSS: 72

73 div { background-color:rgba(0,255,0,0.2); Ustawianie przezroczystości za pomocą stylu opacity Za przezroczystość danego elementu na stronie odpowiada styl opacity, który przyjmuje wartości od 0 (całkowita przezroczystość) do 1 (brak przezroczystości) UWAGA!! styl opacity odnosi się do całego elementu div w tym przykładzie, a więc tekst także otrzymał wartość przezroczystości. Inaczej jest przy zastosowaniu modeli barw hsla lub rgba w których tylko konkretny kolor danego elementu będzie przezroczysty. Kod CSS: div { opacity:0.5; Zaokrąglenie narożników border-radius border-radius, to styl dzięki któremu możliwe jest zaokrąglenie narożników obramowania danego elementu. W podanym przykładzie zostaną zaokrąglone wszystkie narożniki elementu div. Kod CSS: div {border-radius:15px; przykład: 73

74 Jeżeli chcemy zaokrąglić tylko wybrane narożniki, musimy w kodzie CSS podać o jakie nam chodzi (np górny-lewy): Kod CSS: div {border-top-left-radius:15px; Transformacje w css Dzięki właściwości transform i wartościom, które opisują interesujące nas funkcję możemy przesuwać, obracać, skalować i odbijać elementy stron internetowych. Właściwość transform prawidłowo obsługiwana jest przez Mozillę-Firefox oraz Operę. Jeżeli chcemy, aby nasze style prawidłowo działały pod przeglądarką Safari oraz Chrome, należy powtórzyć właściwość w kodzie CSS z przedrostkiem - web-kit, czyli w tym przypadku: -web-kit-tranform. W poniższych przykładach znajdzie się to rozwiązanie. Przesunięcie Dzięki temu stylowi przesuniemy element strony- w tym przypadku obrazek umieszczony w div-ie o id= zima. Pierwsza wartość określa przesunięcie w poziomie, druga w pionie. Możemy również przesunąć element jedynie w poziomie, do czego służy własność translatex, bądź w pionie translatey. KOD HTML: <div id="zima"><img src="kwiatek1.jpg"></div> KOD CSS: #zima img:hover {transform: translate(-50px, 40px); -web-kit-transform:translate(-50px, 40px); Skalowanie Styl pozwala na skalowanie elementów strony, ale uwaga nie należy przesadzić- gdyż zdjęcia przy skalowaniu tracą na jakości. KOD HTML: <div id="bajka"><img src="bajka1.jpg"></div> KOD CSS: 74

75 #bajka img:hover {transform: scale(1.1); -web-kit-transform: scale(1.1); Np. Powiększanie -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); Odbijanie Przy ujemnej wartości skali otrzymamy efekt odbicia obrazu. Do odbicia obrazu pionowo posłuży nam wartość scaley, poziomo: scalex: KOD HTML: <div id="balwan"><img src="balwanek.jpg"></div> KOD CSS: #balwan img:hover {transform: scalex(-1); -web-kit-transform: scalex(-1); Np. W osi x i osi y -moz-transform: translatex(10px) translatey(15px); -webkit-transform: translatex(10px) translatey(15px); -o-transform: translatex(10px) translatey(15px); -ms-transform: translatex(10px) translatey(15px); transform: translatex(10px) translatey(15px); Obracanie Element na stronie możemy również obrócić tym razem zamiast obrazka obrócony zostanie akapit. KOD HTML: <p class="obracanie"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do 75

76 realizacji druków na komputerach osobistych, jak Aldus PageMaker </p> KOD CSS: p.obracanie {transform: rotate(5deg); -web-kit-transform: rotate (5deg); np. O 15 stopni: -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); Pochylenie -moz-transform: skewx(-25deg); -webkit-transform: skewx(-25deg); -o-transform: skewx(-25deg); -ms-transform: skewx(-25deg); transform: skewx(-25deg); Wszystkie opisane wartości można łączyć ze sobą oddzielając je spacjami, np: div {transform: translate(-50px, 40px) scale(1.1) rotate(-10deg); Gradienty, które widzimy na stronach internetowych to zazwyczaj osobne grafiki. Dzięki CSS3 możemy je zdefiniować w kodzie strony nie obciążając przy tym witryny zbędnymi plikami graficznymi. 76

77 Oczywiście Internet Explorer poniżej wersji 10 nie obsługuje tej funkcji, natomiast inne przeglądarki odczytają je po wpisaniu przedrostków,: dla Firefoxa: -moz-, dla Opery -o- (niektóre gradienty działają bez przedrostka), dla Chrome i Safari -webkit-. W CSS możemy stworzyć gradient liniowy i radialny (czy inaczej promienisty). W tym przykładzie będzie to gradient dla elementu div o klasach gradient, gradient1, gradient2, itd.. Linear-gradient() Dzięki tej funkcji dodamy gradient liniowy. Jeśli chcemy, aby przechodził z góry do dołu- wpisujemy top, jeśli z lewej do prawej: left. Jeśli gradient ma przechodzić po przekątnej wpisujemy top left (bez przecinka). Możemy użyć wielu kolorów oddzielając ich nazwy (lub kody) przecinkami. KOD HTML: <div class="gradient"></div> KOD CSS:.gradient {width: 200px; height: 200px; background: linear-gradient(top, black, white); background: -moz-linear-gradient(top, black, white); background: -o-linear-gradient(top, black, white); background: -webkit-linear-gradient(top, black, white); Ciekawe może być określenie jaki obszar ma zajmować dany kolor. 0% to punkt w którym gradient się zaczyna, zaś 100% to jego zakończenie: KOD HTML: <div class="gradient1"></div> KOD CSS:.gradient1 {width: 200px; height: 200px; background: linear-gradient(left, black 10%, blue 50%, white 100%); 77