Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II

Transkrypt

1 SIECI KOPMPUTEROWE I TECHNOLOGIE INTERNETOWE (SKiTI) Wykład 12 Szybkie wprowadzenie do CSS Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II Opracowanie: dr inż. Tomasz Rutkowski Katedra Inżynierii Systemów Sterowania SKiTI

2 Technologie WWW Podstawowe grupy technologii WWW: Generacji (ang. Server-Side Side) SKiTI 2015 dynamiczne tworzenie, generowanie przez serwer zawartości strony WWW w zależności od różnych czynników, m.in. wymagań użytkownika (proces generacji odbywa się po stronie serwera) Prezentacji (ang. Client-Side Side) przedstawienie wygenerowanej przez serwer treści strony WWW w zrozumiałej, logicznej i atrakcyjnej dla użytkownika postaci (proces prezentacji odbywa się po stronie klienta przeglądarka internetowa)

3 Technologie Server-Side Side Przykłady technologii generacji: CGI (ang. Common Gateway Interface) SSI (ang. Server Side Include) ASP (ang. Active Server Pages) ISAPI (ang. Internet Server API) / NSAPI (ang. Netscape Server API) PHP (ang. Personal Home Page) JSP (ang. Java Server Pages) Servlety Serwery aplikacji SKiTI 2015

4 Technologie Client-Side Przykłady technologii prezentacji: (X)HTML CSS (ang. Cascade Style Sheet) JavaScript, JScript, VBScript Aplety Javy Shockwave, Flash AJAX (ang. Asynchronous JavaScript and XML) X3D WML (ang. Wireless Markup Language) RSS (ang. Really Simple Syndication ) / Atom SKiTI 2015

5 Czym jest CSS? CSS (ang. Cascade Style Sheet) oznacza Kaskadowe Arkusze Stylów CSS umożliwia odseparowanie struktury dokumentu od formy jego prezentacji CSS to lista dyrektyw (reguł) określających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (elementów) (X)HTML, czy XML SKiTI

6 Trochę Historii Historia CSS Popularność HTML jako języka do opisu wyłącznie struktury dokumentu szybko okazała się niewystarczająca Producenci przeglądarek, indywidualnie, bez wielostronnych uzgodnień wprowadzali swoje znaczniki (interpretowane wyłącznie przez ich przeglądarki) związane ze sposobem formatowania treści W 1994 powstała propozycja ujednolicenia tych poczynań w postaci języka CHSS (ang. Cascading HTML Style Sheets) W 1996 pod patronatem W3C wydano oficjalną dokumentację CSS (ang. Cascading Style Sheets) poziomu 1 SKiTI

7 Trochę Historii Historia CSS W 1998 powstaje draft CSS 2 (obejmujący w całości CSS 1) W 2000 roku zostaje opracowany Obiektowy Model Dokumentów (ang. Document Object Model) W 2008 roku pojawia się draft CSS 2.1 zatwierdzony ostatecznie jako standard w 2011 roku Niemalże równolegle (od 1999) trwają prace nad CSS 3, rozwijanym w formie modułowej (różne funkcjonalne moduły ponad 50, np.: znaczniki, kolory, tła i obramowania) trwają również prace nad CSS 4 (modułami z CSS 3, które znajdują się w różnej fazie rozwoju tylko niektóre są obecnie na poziomie 4) SKiTI 2015 Więcej szczegółowych informacji na stronach W3C: 7

8 Podstawowe zalety stosowania CSS oddzielenie struktury (treści) strony WWW od jej prezentacji (warstwy wizualnej strony WWW) bardziej czytelna część kodu zawierająca treść strony WWW zmniejszenie ilości kodu wykorzystywanego do wizualizacji strony WWW większe możliwości formatowania za pomocą stylów niż za pomocą standardowych znaczników HTML i ich atrybutów łatwość manipulowania wyglądem wielu stron WWW naraz SKiTI

9 CSS w praktyce - podstawowe definicje - SKiTI

10 Podstawowe definicje - reguły stylów - Reguły stylów określają w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (znacznika) (X)HTML, czy XML Reguły stylów składają się z dwóch części: selektorów deklaracji SKiTI

11 Podstawowe definicje - selektor, deklaracja - Selektor określa do jakich elementów (znaczników) języka (X)HTML ma zostać przypisane formatowanie np. elementy języka (X)HTML p, tr, b Deklaracja we właściwy sposób podaje wspomniane wyżej formatowanie Deklaracje składają się ze zbioru właściwości (cech), którym nadaje się odpowiednie wartości Każda grupa elementów (znaczników) (X)HTML ma określony zespół cech CSS, które można jej przypisać. Natomiast każda cecha ma ściśle wyszczególnioną listę wartości, które może przyjąć. SKiTI

12 Podstawowe definicje - drzewo dokumentu a dziedziczenie stylów - Drzewo dokumentu to drzewo elementów umieszczonych w źródłowym dokumencie (X)HTML Każdy element w takim drzewie ma dokładnie jednego rodzica Wyjątkiem jest element podstawowy korzenia drzewa (ang. root) SKiTI

13 Podstawowe definicje - drzewo dokumentu a dziedziczenie stylów - <html> <head> <title>...</title> </head> <body> <h1>...</h1> <p>...</p> <table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table> </body> </html> SKiTI

14 Podstawowe definicje - drzewo dokumentu a dziedziczenie stylów - <TABLE> jest dzieckiem elementu <BODY> <TABLE> jest potomkiem elementu <HTML> oraz <BODY> <TABLE> jest rodzicem dwóch elementów <TR> <TABLE> jest przodkiem czterech elementów <TD> oraz dwóch <TR> <TABLE> jest bratem elementów <H1> oraz <P> <H1> oraz <P> są braćmi poprzedzającymi elementu <TABLE> <TABLE> jest bratem następującym elementów <H1> oraz <P> <TABLE> jest elementem poprzedzającym elementu <TR> oraz <TD> <TABLE> jest elementem następującym elementu <BODY> oraz <HTML> SKiTI

15 Podstawowe definicje - drzewo dokumentu a dziedziczenie stylów - Dziedziczenie stylów polega na tym, że elementy niższe w hierarchii drzewa dokumentu (potomkowie) dziedziczą formatowanie elementów leżących wyżej w hierarchii (przodkowie) W arkuszu stylów nie ma potrzeby przypisywania wszystkich właściwości wszystkim elementom (np. ustawia się preferowany krój tekstu tylko dla <body>) Pozostałe elementy otrzymują swoje właściwości przez dziedziczenie, czyli przekazanie właściwości z rodzica do dziecka SKiTI

16 selektor { } właściwość: wartość; /* pierwsza reguła */ Podstawowe definicje - selektor typu - kolejna-właściwość: wartości; p { margin-left:20px;} /* selektorem jest p, właściwością lewy margines, wartością 20 pikseli */ /* druga reguła */ b { color: red; background-color: color: blue;} SKiTI

17 Podstawowe definicje - selektor uniwersalny (ogólny) - * { właściwość: wartość; } * {color: black;} /* Każdy element języka (X)HTML ma przypisany kolor czarny */ SKiTI

18 p.uwaga { color: red } Podstawowe definicje - selektor klasy - selektor.class { właściwość: wartość; } /* Reguła obowiązywać będzie dla tych elementów (X)HTML, w których atrybutom class class przypisano wartość uwaga : <p class= uwaga > > treść uwagi pierwszej</p> <p class= uwaga > > treść uwagi drugiej</p> */ SKiTI

19 Podstawowe definicje - selektor identyfikatora - selektor#identyfikator { właściwość: wartość; } p#uwaga { color: red } /* Reguła obowiązywać będzie dla (unikalnego) elementu: <p id= uwaga > > treść uwagi unikalnej</p> */ Identyfikator może wystąpić tylko raz w hierarchii drzewa dokumentu!!! SKiTI

20 Podstawowe definicje - grupowanie selektorów - selektor1, selektor2 { właściwość: wartość; } i, b { color: red; } /* Reguła obowiązywać będzie dla elementów i oraz b języka (X)HTML: <i> tekst pochylony i na czerwono </i> <b> kolejny tekst, pogrubiony i na czerwono </b> */ SKiTI

21 Podstawowe definicje - selektor potomka - przodek1 przodek2 potomek { właściwość: wartość; } Selektor potomka łączy ze sobą np. dwa selektory zawężając działanie drugiego do elementów zawieranych przez pierwszy. table tr { background-color: color: yellow } /* Reguła obowiązywać będzie dla elementów tr zdefiniowanych wewnątrz znaczników table: */ <table> <tr><td> > treść na żółtym tle </td></ ></tr> </table> SKiTI

22 Podstawowe definicje - selektor dziecka - rodzic > dziecko{ właściwość: wartość; } Selektor dziecka działa podobnie do selektora potomka, ale tylko gdy elementy są zawarte bezpośrednio w pierwszym. p > b { color: red } /* Reguła obowiązywać będzie dla elementów b zdefiniowanych wewnątrz akapitu p: <p> tekst <b> pogrubiony i na czerwono </b></p> */ SKiTI

23 CSS w praktyce - osadzanie styli w dokumentach (X)HTML - SKiTI

24 Osadzanie CSS w dokumentach (X)HTML - style wewnętrzne - CSS dzieli elementy na: blokowe (ang. block) liniowe (ang. inline). Elementy blokowe są zawsze prostokątne i mogą mieć nadane wymiary (np. akapit, nagłówek). Elementy liniowe są częścią tekstu i mogą być przełamane przy przenoszeniu do nowej linii (np. pogrubienie, odnośnik). SKiTI

25 Osadzanie CSS w dokumentach (X)HTML - style wewnętrzne - Style lokalne: w linii (ang. inline), czyli związane z pojedynczym elementem (X)HTML <p style="color:red; font-size:15pt;"> przykład stylu zdefiniwanego lokalnie w linii, w kodzie dokumentu (X)HTML </p> SKiTI

26 Osadzanie CSS w dokumentach (X)HTML - style wewnętrzne - rozciąganie stylu z wykorzystaniem znaczników <span> </span> (obejmujących kilka elementów strony) <span style="color:red; font-size:15pt;"> </span> <h1>przykład stylu</h1> <i>zdefiniwanegolokalnie,</i> <b>rozciągając styl na kilka elementów dokumentu</b> SKiTI

27 Osadzanie CSS w dokumentach (X)HTML - style wewnętrzne - za pomocą bloków zdefiniowanych z wykorzystaniem znaczników <div> </div> <div style="color:red; font-size:15pt;"> </div> <h1>przykład stylu</h1> <i>zdefiniwanegolokalnie,</i> <b>za pomocą bloku obejmującego kilka elementów dokumentu</b> SKiTI

28 Osadzanie CSS w dokumentach (X)HTML - style wewnętrzne - Style zagnieżdżone <head>... <style type="text/css"> /* tutaj kolejne reguły */ selektor { właściwość: wartość; } </style>... </head> SKiTI

29 Osadzanie CSS w dokumentach (X)HTML - style zewnętrzne - Style dołączane <head>... <link href="arkusz.css" rel="stylesheet type="text/css">... </head> SKiTI

30 Osadzanie CSS w dokumentach (X)HTML - style zewnętrzne - Style importowane - lokalizacja bezwzględna <head>... url(" </style>... </head> SKiTI

31 Osadzanie CSS w dokumentach (X)HTML - style zewnętrzne - Style importowane lokalizacja względna <head>... <style url("../style/arkusz.css"); p { color:green; } </style>... </head> SKiTI

32 Osadzanie CSS w dokumentach (X)HTML - style zewnętrzne przykład - Przykład stylu zewnętrznego zdefiniowanego w pliku arkusz.css body, html { margin:10; padding:0; background:white; color:#000; font: 12px Tahoma, Verdana, Arial, sans-serif; } p { color: red; } #glowny_pojemnik { background:antiquewhite; margin:0 auto; width:780px; border: 1px solid grey } SKiTI

33 CSS w praktyce - kaskadowość - SKiTI

34 Osadzanie CSS w dokumentach (X)HTML - kaskadowość - Kaskadowość polega na ustaleniu hierarchii źródeł stylów Jeśli kilka reguł pasuje do danego elementu w dokumencie, o tym które właściwości zostaną ostatecznie użyte, decyduje hierarchii ważności Pierwszeństwo mają te style, które zostały zdefiniowane bliżej danego elementu Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu (tzw. style zagnieżdżone), to zaś może być modyfikowane przez style zdefiniowane bezpośrednio w ciele dokumentu (tzw. style lokalne). Na końcu hierarchii są atrybuty związane z poszczególnymi znacznikami (tagami) (X)HTML SKiTI

35 Osadzanie CSS w dokumentach (X)HTML - kaskadowość - Zasady kaskadowości można łamać wykorzystując polecenie!important Jeżeli w deklaracji stylu po wartości cechy pojawi się polecenie!important,, spowoduje to, że taka cecha będzie miała pierwszeństwo przed innymi, nawet jeśli ma niższy priorytet CSS p { color: green; background-color: yellow!important;} (X)HTML <p style="color:red; background-color: white;"> przykład stylu zdefiniwanego lokalnie w linii, w kodzie dokumentu (X)HTML czerwony tekst na żółtym tle!!! </p> SKiTI

36 CSS w praktyce - jednostki miar - SKiTI

37 Jednostki miar w CSS Jednostki absolutne (bezwzględne) in - cale, 1in = 2.54cm cm - centymetry, 1cm mm - milimetry, 1mm pt - punkty, 1pt = 1/72in pc - pika, 1pc = 12pt h2 { margin-left:20pt; } SKiTI

38 Jednostki miar w CSS Jednostki relatywne (względne) px piksele em - wysokość czcionki elementu ex - wysokość litery x h2 { margin-left:20px; } SKiTI

39 CSS w praktyce - model pudełkowy - SKiTI

40 Model pudełkowy Każdy element blokowy generuje w dokumencie prostokątny obszar nazywany pudełkiem (ang. box model) Model pudełka składa się z czterech następujących elementów: Zawartości - "Content" (np. test, obrazek itd.) Otaczających marginesów wewnętrznych - "Padding" Obramowania - "Border" Marginesów - "Margin Trzy ostatnie elementy są opcjonalne i mogą mieć wartość zero SKiTI

41 Model pudełkowy SKiTI

42 Model pudełkowy Rozmiary elementu odnoszą się jedynie do samej zawartości ("Content Content") i nie wpływają na pozostałe obszary modelu pudełkowego, które są tworzone na zewnątrz zawartości, ale wewnątrz pudełka Tło elementu jest określone dla wszystkich obszarów pudełka, z wyjątkiem marginesów zewnętrznych, które zawsze są przezroczyste ("Transparent") SKiTI

43 Model pudełkowy - marginesy - Marginesy zewnętrzne definiuje się przy użyciu właściwości margin. Pozwala ona na kontrolę odstępów między elementami. W przypadku elementów blokowych można zmieniać zarówno pionowe i poziome marginesy. W przypadku elementów inline efekt widoczny będzie tylko jedynie dla marginesów poziomych. Marginesy wewnętrzne, ustalające odstęp między treścią, a obramowaniem elementu, definiuje się przy użyciu właściwości padding.. Właściwość ta nie powoduje odsunięcia tła elementu. /* przykłady */ margin-top: 10px; /* górny margines */ margin-right: 20px; /* prawy margines */ margin-bottom: 30px; /* dolny margines */ margin-left: 40px; /* lewy margines */ SKiTI

44 Model pudełkowy - marginesy - /* skrócony zapis: - podajemy jedną (wszystkie boki), - dwie(góra/dół i boki), - trzy (góra, boki, dół) - lub cztery (od góry wg wskazówek zegara) */ margin: 10px 20px 30px 40px; margin: px; /*15 pixeli na dole, góra i boki 0*/ margin: 5px 3em; /*5 pixeli na górze i dole, oraz 3 linie tekstu po bokach*/ margin: 20px auto; /*marginesy poziome z wartością auto, powodują wycentrowanie całego obiektu, jeśli ma on nadaną szerokość*/ SKiTI

45 Model pudełkowy - obramowanie - Obramowanie definiuje się używając właściwości: border-color (kolor), border-style (styl) i border-width (grubość). Można definiować z osobna border-top top, border-right right, border-bottombottom i border-left lub border (dla całości obramowania). w którym przyjmuje na raz grubość, styl i kolor, w dowolnej kolejności. Styl obramowania ustala właściwość border-style. Właściwość tej można przypisać jedną z wartości: none (bez obramowania), dashed (linia przerywana), dotted (l. wykropkowana), solid (l. ciągla), double (l. podwójna) inset (wgłębione), outset (wypukłe), ridge(podwójne wgłębione), groove (podwójne wypukłe). SKiTI

46 Model pudełkowy - obramowanie - border-top-style: double; border-left: gray 2px dotted; border: 1px solid red; SKiTI

47 ZADANIE DOMOWE Wykorzystując ogólnodostępne materiały w Internecie zapoznać się z własnościami (cechami) CSS podstawowych znaczników (tagów) (X)HTML Formatowanie: tekstu, czcionek, tła, itp.. SKiTI

48 Bibliografia Przykładowa Literatura: Konsorcjum W3C: Specyfikacja CSS: SKiTI Walidator CSS: suite.w3.org/ Linki do różnych kursów CSS na internetowej stronie przedmiotu 48

49 Dziękuję za uwagę!!! SKiTI