Ć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.
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 ({ })
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.
Na zrzutach pokazane są przykłady formatowania wewnątrzwierszowymi arkuszami stylów:
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:
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;
} 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 type="text/css"> @import url("http://www.jakisadres.pl/arkusz.css"); </style> </head>
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: 1. 1. Styl lokalny - wewnątrzwierszowy 2. 2. Rozciąganie stylu - <span>...</span> 3. 3. Bloki - <div>...</div> 4. 4. Wewnętrzny arkusz stylów 5. 5. Import stylów do wewnętrznego arkusza 6. 6. Zewnętrzny arkusz stylów 7. 7. 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
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:
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:
Pozostałe dwa pliki wyglądają identycznie:
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:
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;
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 email zatytułowany w następujący sposób: 3Ti_AI_Cw9_Imię_Nazwisko