Cwiczenia 3 - CSS i Mediaqueries
Transkrypt
Cwiczenia 3 - CSS i Mediaqueries
TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 26.10.2016 r.) 1) Podstawowe szablony: W kontekście modelu pudełkowego oraz używania szablonu strony można posłużyć się “podstawowym” szablonem postępnym pod adresem: - Przykład stworzenia menu wraz z arkuszem stylu: http://koza.if.uj.edu.pl/~marcin/TWWW1617/E/index1.html - Przykład szablonu kompletnej strony: http://koza.if.uj.edu.pl/~marcin/TWWW1617/E/index2.html 2) Wstęp do mediaqueries W standardzie CSS3 dostępne są selektory pozwalające nie tylko na wybór konkretnych elementów ze struktury strony, ale również na wybór własności wizycznych na których dana strona będzie wyświetlana. Pozwala to na tworzenie serwisów graficznie dostosowanych do szerokości ekeranów na których dana strona ma zostac wyświetlona. Podstawowy przykład użycia selektora mediaqueries wygląda następująco: @media media-type { selector { cecha: wartość; } } Czyli w hierarchi struktury CSS “normalny” selektor CSS jest dodatkowo otoczony selektorem mediaqueries. W podanym selektorze “media-type” oznacza typ urządzenia/urządzeń dla których ma obowiązywać dany selektor: all Dla wszystkich urządzeń. aural Dla syntezatorów mowy i dzwięku. braille Dla urządzeń którymi posługują się niewidomi w celu przeglądania stron internetowych. embossed Dla drukarek breilla. handheld Dla urządzeń ręcznych bezprzewodowych . print Dla drukarek / meteriałów drukowanych. projection Dla projektorów ściennych. screen Dla komputerów z ekranem. tty Dla terminali z ograniczonymi możliwościami wyświetlania. tv Dla telewizorów. Przykładowo możemy spróbować stworzyć selektor który będzie zmieniał kolor tła dla konkretnego urządzenia: <style> @media screen { div { background-color:red; } } </style> Można również przygotować osobne pliki CSS dla każdego typu urządzenia i linkowac je do głownej strony posługując się atrybutem “media” w znaczniku <link>: <link media=”tv,handheld” href=”tvmedia.css”> <link media=”screen” href=”screenmedia.css”> Dla lepszego sterowania regułami media możemy posługiwać się atrybutami dodatkowy cechami sterującymi stosowaniem reguł np.: @media all and (min-width:480px) and (max-width:800px) { div { background-color:green; } } Definicja określona powyżej mówi przeglądarce że tło elementu <div> ma zostać ustawione na kolor zielony na wszystkich typach urządzeń tylko wtedy kiedy szerokość okna przeglądarki będzie zawierać się w przedziale od 480px od 800px. Przykład zmodyfikowanego szablonu strony który dostosowuje się w zalezności od dostępnej szerokości ekranu dostępn jest pod adresem: http://koza.if.uj.edu.pl/~marcin/TWWW1617/E/index3.html W przykładzie tym stworzona dwa pliki CSS które osbługują rózne szerokości ekranu. Zostały włączone za pomocą linkowania i atrybutu “media”: <link href="xstyle.css" rel="stylesheet" media="screen and (min-width: 1024px)"> <link href="mstyle.css" rel="stylesheet" media="screen and (max-width: 1023px)">