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 2015 1
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)
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
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
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 2015 5
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 2015 6
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: http://www.w3.org 7
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 2015 8
CSS w praktyce - podstawowe definicje - SKiTI 2015 9
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 2015 10
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 2015 11
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 2015 12
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 2015 13
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 2015 14
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 2015 15
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 2015 16
Podstawowe definicje - selektor uniwersalny (ogólny) - * { właściwość: wartość; } * {color: black;} /* Każdy element języka (X)HTML ma przypisany kolor czarny */ SKiTI 2015 17
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 2015 18
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 2015 19
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 2015 20
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 2015 21
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 2015 22
CSS w praktyce - osadzanie styli w dokumentach (X)HTML - SKiTI 2015 23
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 2015 24
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 2015 25
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 2015 26
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 2015 27
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 2015 28
Osadzanie CSS w dokumentach (X)HTML - style zewnętrzne - Style dołączane <head>... <link href="arkusz.css" rel="stylesheet type="text/css">... </head> SKiTI 2015 29
Osadzanie CSS w dokumentach (X)HTML - style zewnętrzne - Style importowane - lokalizacja bezwzględna <head>... <style> @import url("http://www.adres.pl/style/arkusz.css"); </style>... </head> SKiTI 2015 30
Osadzanie CSS w dokumentach (X)HTML - style zewnętrzne - Style importowane lokalizacja względna <head>... <style type="text/css"> @import url("../style/arkusz.css"); p { color:green; } </style>... </head> SKiTI 2015 31
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 2015 32
CSS w praktyce - kaskadowość - SKiTI 2015 33
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 2015 34
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 2015 35
CSS w praktyce - jednostki miar - SKiTI 2015 36
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 2015 37
Jednostki miar w CSS Jednostki relatywne (względne) px piksele em - wysokość czcionki elementu ex - wysokość litery x h2 { margin-left:20px; } SKiTI 2015 38
CSS w praktyce - model pudełkowy - SKiTI 2015 39
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 2015 40
Model pudełkowy SKiTI 2015 41
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 2015 42
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 2015 43
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: 0 0 15px; /*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 2015 44
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 2015 45
Model pudełkowy - obramowanie - border-top-style: double; border-left: gray 2px dotted; border: 1px solid red; SKiTI 2015 46
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 2015 47
Bibliografia Przykładowa Literatura: Konsorcjum W3C: http://www.w3.org Specyfikacja CSS: SKiTI 2015 http://www.w3.org/tr/#tr_csstr_css http://www.w3.org/style/css/current-work Walidator CSS: http://jigsaw.w3.org/css-validator/ https://validator-suite.w3.org/ suite.w3.org/ Linki do różnych kursów CSS na internetowej stronie przedmiotu 48
Dziękuję za uwagę!!! SKiTI 2015 49