Ćwiczenie 9 - CSS i wstawianie CSS

Transkrypt

1 Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada za zawartość strony WWW, a CSS za jej wygląd. CSS umoŝliwia przypisanie dowolnemu elementowi dokumentu HTML (np. akapitowi, komórce tabeli, poziomej linii) określonego stylu. Przeniesienie opisów formatowania elementów do arkuszy stylów i pozostawienie w dokumencie wyłącznie znaczników HTML (bez ustawiania wartości atrybutów) pozwala oddzielić strukturę dokumentu i jego treść od formy przekazu. Sam kod HTML staje się przez to mniejszy i bardziej przejrzysty, a witryny ładują się znacznie szybciej. Style pozwalają kontrolować takie atrybuty, jak: 1. rodzaj, rozmiar i kolor czcionki 2. wyrównywanie i wielkość marginesów 3. głębokość wcięcia akapitu 4. kolor i grafikę tła 5. odstępy między elementami 6. wzajemne połoŝenie elementu i otaczającego go tekstu MoŜna zbudować stronę jedynie w oparciu o HTML-a i nadać jej jakiś wygląd, ale będzie to w porównaniu z moŝliwościami CSS bardzo skromne. Za uŝywaniem CSS przemawia kilka powaŝnych argumentów: 1. Za pomocą pojedynczej reguły moŝna sformatować wiele miejsc w wielu dokumentach HTML witryny WWW. 2. Arkusze stylów pomagają w utrzymaniu przejrzystego i prostego kodu języka HTML. Zajmują się formatowaniem, tym samym odciąŝając kod HTML. 3. MoŜliwości formatowania za pomocą arkuszy stylów są znacznie bardziej rozbudowane, niŝ te z uŝyciem HTML-a. 4. Style pozwalają w łatwy sposób zarządzać całą serią dokumentów, poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki modyfikacji jednego pliku, moŝna dokonać zmian w formatowaniu we wszystkich dokumentach HTML. 5. Dzięki klasom selektorów moŝna zgrupować wszystkie atrybuty formatowania odnoszące się do wielu elementów.

2 6. Style dają zupełnie nowe moŝliwości formatowania stron WWW. Arkusze stylów zawierają reguły. KaŜda z tych reguł jest instrukcją formatującą, która ma zastosowanie na stronie WWW. Arkusze stylów mogą zawierać pojedynczą regułę lub wiele reguł. selektor: Reguły CSS mają specyficzną budowę. Składają się z trzech głównych elementów, a ich format jest następujący: selektor {właściwość: wartość;}. 1. co ma być zmienione 2. konkretny element poddawany formatowaniu właściwość: 1. jak ma być zmienione 2. typ formatowania wartość: 1. o ile ma być zmienione 2. wartość typu formatowania Przykład: h1 {color: #ff0000;} oznacza, Ŝe sformatowane mają być nagłówki h1 (selektor), mają zostać pokolorowane (właściwość), na kolor #ff0000; czyli: red (wartość). Budowa reguły moŝe być bardziej poszerzona, moŝna objąć większą ilość selektorów tym samym formatowaniem np.: h1, h2, h3 {color: #ff0000;}, jak równieŝ jeden selektor jednocześnie objąć kilkoma właściwościami i wartościami np.: h1 {color: #ff0000; text-align: center;}, a takŝe kilka selektorów jednocześnie formatować róŝnymi właściwościami i wartościami np.: h1, h2, h3 {color: #ff0000; text-align: center;}. NaleŜy przestrzegać ścisłych zasad budowy reguł: a) selektory oddzielone są przecinkami i spacjami (, ) b) po selektorze ostatnim (tym najbliŝej właściwości) nie wpisuje się przecinka, jedynie spację c) właściwości i wartości wpisuje się w nawiasy klamrowe ({ })

3 d) właściwość i wartość oddzielone są dwukropkiem i spacją (: ) e) kolejne właściwości następują po średniku i spacji (; ) f) na końcu średnik nie jest wymagany, ale dobrze jest go wpisać, co ułatwia dodanie kolejnej właściwości Ogólny schemat reguły jest następujący: selektor_1, selektor_2, selektor_3 {właściwość_1: wartość_1; właściwość_2: wartość_2; właściwość_3: wartość_3;}. Istnieją trzy sposoby dołączania arkusza stylów do dokumentu HTML: Styl lokalny - wewnątrzwierszowy Styl lokalny - wewnątrzwierszowy - tutaj reguła formatująca umieszczona jest bezpośrednio w określonym znaczniku HTML i tylko jego dotyczy. Budowa reguły jest tu nieco odmienna - regułę wpisuje się bezpośrednio do znacznika: <selektor style="właściwość: wartość;">...</selektor>. WaŜne jest by dopisać po selektorze czyli znaczniku wyraŝenie style="...", a w cudzysłowiu umieścić właściwości i wartości. Styl lokalny dotyczy tylko jednego selektora, natomiast moŝe zawierać więcej właściwości i wartości np.: <h1 style="color: #800000; text-align: center;">...</h1>. Ta reguła oznacza, Ŝe tylko ten nagłówek zostanie w ten właśnie sposób sformatowany: pokolorowany kolorem #800000; (maroon) i wyrównany na środek. Dla stylów duŝe znaczenie ma znacznik <span>...</span>. Z jego pomocą moŝna sformatować pewien większy fragment dokumentu. MoŜna nim objąć inne znaczniki wyświetlane w linii, takie jak wytłuszczenie tekstu lub kursywę. Kolejnym istotnym znacznikiem jest znacznik <div>...</div>. Dzięki niemu moŝna wydzielić określone bloki dokumentu i swobodnie je formatować. MoŜe zawierać w sobie róŝne znaczniki jak i inne bloki.

4 Na zrzutach pokazane są przykłady formatowania wewnątrzwierszowymi arkuszami stylów:

5 Wewnętrzny arkusz stylów jest wbudowany w dokument HTML - znajduje się wewnątrz elementu <head>...</head>. W takim arkuszu moŝna wpisać komentarze uŝywając znaków: /*...*/ - nie będą one interpretowane przez przeglądarkę. Ogólny shcemat arkusza wygląda następująco: 1. <head> 2. <style type="text/css"> 3. /* komentarz */ 4. selektor_1 {właściwość_1: wartość_1; właściwość_2: wartość_2;} 5. selektor_2 {właściwość_1: wartość_1; właściwość_2: wartość_2;} 6. /* inny komentarz */ 7. </style> 8. </head> Taki arkusz będzie dotyczył wszystkich elementów ujętych w nim i będzie rozciągał się na cały dokument HTML. Czyli, jeŝeli selektorem będzie na przykład akapit lub nagłówek h2, to wszystkie wystąpienia tego akapitu lub nagłówka w danym dokumencie HTML zostaną w wyznaczony sposób sformatowane. Na kolejnych zrzutach pokazane są przykłady formatowania wewnętrzymi arkuszami stylów:

6

7 Zewnętrzny arkusz stylów zapisywany jest w osobnym pliku z rozszerzeniem css Reguły formatowania są całkowicie odseparowane od strony HTML. Ten sam arkusz moŝe być uŝyty wielokrotnie do róŝnych dokumentów HTML. Powiązanie arkusza stylów z plikiem HTML następuje poprzez wstawienie odwołania do tego arkusza w części nagłówkowej dokumentu HTML. Wygląda to następująco: 1. <head> 2. <link rel="stylesheet" href="ścieŝka dostępu do pliku" type="text/css"> 3. </head> ścieŝka dostępu do pliku: 1. względna ścieŝka dostępu do pliku css 2. naleŝy wpisać drogę uwzględniając wszystkie foldery 3. wchodząc do folderu wpisujemy jego nazwę/ 4. wychodząc z folderu wpisujemy../ 5. na końcu podajemy nazwę pliku z rozszerzeniem css Budowa natomiast pliku z arkuszem stylów jest podporządkowana budowie reguł stylów. W dowolnym edytorze naleŝy wpisać wszystkie reguły formatowania stosując ogólną zasadę: selektor {właściwość: wartość;}. Edytor ked podaje na przykład taki zestaw reguł we wbudowanym szablonie arkusza CSS: html, body {background: #ffffff; text-align: center; font-size: 1em; font-family: verdana, tahoma, arial, helvetica, sans-serif; } img {border: 0px; } h1 {font-size: 1.4em; font-weight: bold; } h2 {font-size: 1.2em; } h3 {font-size: 1em;

8 } table } td } font-weight: bold; {padding: 0px; border: 0px; margin: 0px auto 0px auto; width: 700px; background: #fafafa; {text-align: left; vertical-align: top; background: #ffffff; Wstawienie białych znaków (spacje, tabulacje, nowe linie) w arkuszu CSS nie ma wpływu na jego działanie, warto więc wpisywać reguły w taki sposób, aby były czytelne, jak np. powyŝej. Do danego dokumentu HTML moŝna dołączyć więcej arkuszy stylów. Dzięki temu uzyska się moŝliwość wyboru wyglądu strony. NaleŜy przygotować kilka plików CSS z alternatywnym formatowaniem stron WWW i odpowiednio je podłączyć do tych dokumentów. <head> <link rel="stylesheet" href="ścieŝka dostępu do pliku domyślnego" type="text/css" title="nazwa domyślna"> <link rel="alternate stylesheet" href="ścieŝka dostępu do pliku 1" type="text/css" title="nazwa_1"> <link rel="alternate stylesheet" href="ścieŝka dostępu do pliku 2" type="text/css" title="nazwa_2"> <link rel="alternate stylesheet" href="ścieŝka dostępu do pliku 3" type="text/css" title="nazwa_3"> </head> W przeglądarce Mozilla Firefox wyboru alternatywnego arkusza CSS moŝna dokonać w menu Widok/Styl strony, a w Operze - Widok/Styl. AŜeby niektóre arkusze nie były dostępne do podmiany przez uŝytkownika, wystarczy osadzić je w tradycyjny sposób, tzn. jako arkusze domyślne bez podania atrybutu title="...". Istnieje jeszcze jeden sposób dołączania arkusza stylów, który polega na imporcie tego arkusza z zasobów Internetu. MoŜna zaimportować go i do wewnętrznego jak i zewnętrznego arkusza stylów. JednakŜe z racji tego, Ŝe celem zajęć jest umiejętność projektowania stron WWW z uŝyciem równieŝ CSS, to tym sposobem na ćwiczeniach zajmować się nie będziemy... Dla porządku podaję sposób importu: <head> <style url(" </style> </head>

9 Kaskadowość arkuszy stylów W związku z tym, Ŝe style mogą pochodzić z róŝnych źródeł, naleŝy zapoznać się z pierwszeństwem ich oddziaływania na elementy strony. Na przykład w zewnętrznym arkuszu stylów nagłówek h1 ma ustalony kolor #ff0000; (red) lecz w jednym z plików HTML w jednym nagłówku h1 ustalony został kolor #0000ff; (blue). Jakiego koloru będzie ten nagłówek? O tym właśnie decyduje kaskadowość arkuszy stylów. Pierwszeństwo mają te style, które znajdują się bliŝej formatowanego elementu. Taka jest więc kolejność stylów: Styl lokalny - wewnątrzwierszowy Rozciąganie stylu - <span>...</span> Bloki - <div>...</div> Wewnętrzny arkusz stylów Import stylów do wewnętrznego arkusza Zewnętrzny arkusz stylów Import stylów do zewnętrznego arkusza Polecenie dołączenia zewnętrznego arkusza powinno znajdować się w dokumencie wcześniej niŝ wewnętrzny arkusz. Odwrotna kolejność złamie zasady kaskadowości. Zadania do wykonania: Jako, Ŝe w tym ćwiczeniu nie było jeszcze mowy o konkretnych właściwościach i ich wartościach, tu zostaną uŝyte jedynie przykładowe, bo celem tego ćwiczenia jest przede wszystkim umiejętność dołączania arkuszy stylów. Właściwości jakie zostaną uŝyte to: 1. color: #rrggbb; - kolor tekstu 2. background-color: #rrggbb; - kolor tła 3. text-align: left, right, center, justify; (do wyboru) - wyrównanie tekstu

10 Zadanie polega na wykonaniu formatowania za pomocą arkuszy stylów: zewnętrznego, wewnętrznych i wewnątrzwierszowych w kilku plikach HTML. NaleŜy zacząć od przygotowania struktury folderów i plików: 1. foldery: 2. cw_9 - główny 3. pliki - zawarty w głównym 4. style - zawarty w głównym 1. pliki: 2. plik_1.html - w folderze pliki 3. plik_2.html - w folderze pliki 4. plik_3.html - w folderze pliki 5. style.css - w folderze style We wszystkich plikach HTML naleŝy umieścić taką samą treść: 1. zawartość plików: 2. szablon HTML 4.01 Transitional 3. w sekcji <head>...</head>: 4. łącze do arkusza stylów 5. w znaczniku <title>...</title> nazwa pliku 6. w sekcji <body>...</body>: 7. nazwa pliku w znaczniku <p>...</p> 8. menu nawigacyjne w znaczniku <div>...</div> 9. napis: Nagłówek h2 w znaczniku <h2>...</h2> 10. jedną wstawkę: Lorem w znacznikach <div><p>...</p></div> 11. napis: Nagłówek h3 w znaczniku <h3>...</h3> 12. jedną wstawkę: Lorem w znaczniku <p>...</p> 13. napis: Nagłówek h2 w znaczniku <h2>...</h2> 14. napis: Nagłówek h3 w znaczniku <h3>...</h3> 15. jedną wstawkę: Lorem w znaczniku <p>...</p> 16. w kaŝdym akapicie środkowe zdanie objąć znacznikiem <span>...</span> Po wpisaniu całej zawartości pliki powinny wyglądać tak - bez Ŝadnego formatowania:

11 Formatowanie zewnętrznym arkuszem stylów. W pliku style.css naleŝy ustalić formatowanie dla wszystkich elementów znajdujących się w plikach: 1. selektor {właściwość: wartość;}: 2. body {background-color: #c0c0c0; color: #ff0000;} 3. div {text-align: center; background-color: #ffff00;} 4. p {text-align: justify;} 5. h2 {color: #0000ff; text-align: center;} 6. h3 {color: #800000; text-align: right;} 7. span {color: #00ff00;} Po zapisaniu pliku style.css pliki powinny wyglądać tak:

12 Pozostałe dwa pliki wyglądają identycznie:

13 Formatowanie wewnętrznym arkuszem stylów - patrz tutaj. W plikach: plik_2.html i plik_3.html w sekcji nagłówkowej naleŝy zapisać znacznik <style>...</style> z takim samym, odpowiednim formatowaniem: 1. selektor {właściwość: wartość;}: 2. h2 {background-color: #00ffff;} 3. h3 {text-align: left; color: #800080;} 4. span {background-color: #ffffff;} Po modyfikacji oba pliki HTML powinny wyglądać tak:

14 Tak samo wygląda plik_3.html: Formatowanie wewnątrzwierszowym arkuszem stylów. W pliku plik_3.html naleŝy dokonać lokalnych modyfikacji na wybranych znacznikach: 1. <selektor style="właściwość: wartość;">: 2. pierwszy nagłówek h2: color: #ff00ff; background-color: #00ff00; 3. drugi nagłówek h2: text-align: right; 4. drugi nagłówek h3: text-align: center; color: #ffff00; background-color: #800000; 5. w trzecim fragmencie tekstu - span: background-color: #00ff00; color: #ffffff;

15 Po modyfikacji plik_3.html powinien wyglądać tak: Oceniany będzie folder cw_9 z podfolderami: pliki i style i z plikami: plik_1.html, plik_2.html, plik_3.html i style.css w odpowiednich folderach. Pliki HTML powinny być sformatowane za pomocą CSS, na trzy sposoby: zewnętrznym arkuszem stylów (wszystkie pliki), wewnętrznym arkuszem stylów (plik_2.html i plik_3.html) i wewnątrzwierszowym arkuszem stylów (plik_3.html) - odpowiednie selektory - zgodnie z podanymi właściwościami i ich wartościami. Folder proszę wysłać spakowany zip-em na adres zatytułowany w następujący sposób: 3Ti_AI_Cw9_Imię_Nazwisko