Matura: internet - style na stronie WWW

Co to jest styl?

Styl to w skrócie sposób formatowaania elementów strony. W edytorze Expression Web możemy używać styli w trybie Design, co znacznie ułatwia tworzenie stron WWW. Zobaczmy jak to działa.

Uruchom Expression Web. Jeśli po uruchomieniu w edytorze jest jakaś strona, to zamknij witrynę: opcja menu Site → Close.

Tworzymy nową witrynę:

Site → New site...

General One Page Site

Location: C:\wwwprj\w3

Zmień nazwę pliku strony WWW na index.html (w widoku witryny [Site View] kliknij plik default.html i naciśnij klawisz F2, po czym wpisz nową nazwę i zatwierdź zmianę nazwy). Nadaj stronie tytuł Tworzenie stylów (kliknij dwukrotnie tytuł strony w odstępie 2 sekund i wpisz nowy tytuł) i załaduj stronę do edytora.

W edytorze (tryb Design) kliknij prawym przyciskiem w tło strony, z menu kontekstowego wybierz opcję Page Properties i na zakładce Language ustaw język Polski (Polish):

Zatwierdź okienko przyciskiem OK. W ten sposób wrócimy do edytora.

Skopiuj poniższy tekst do swojej strony WWW (treść nie jest istotna, pochodzi z artykułu w naszym serwisie):

Pierwszymi narzędziami używanymi w charakterze pomocy rachunkowych były prawie na pewno palce, a nie jest po prostu przypadkiem, iż słowo "digit" (ang. cyfra) jest używane w języku angielskim również w odniesieniu do palca (lub kciuka) oraz do wielkości liczbowej.

Gdy potrzeba zapisywania większych liczb rosła, pierwotny człowiek wykorzystywał chętnie do tego celu dostępne mu materiały. Małe, okrągłe kamyki mogły być używane do wyrażania większych liczb niż starcza na to palców, a posiadały one jeszcze dodatkową zaletę - możliwość przechowywania wyników pośrednich do późniejszego wykorzystania. Więc nie jest również przypadkiem, iż słowo "kalkulować" pochodzi od łacińskiego słowa "calculus" oznaczającego mały, okrągły kamyczek spotykany w korytach rzek.

Najstarszymi znanymi przedmiotami używanymi do przedstawiania liczb są kości z wyrytymi karbami. Kości te, odkryte w Zachodniej Europie, pochodzą z okresu od 20.000 do 30.000 lat p.n.e. i odpowiadają czasookresowi pierwszego pojawienia się człowieka z Cro-Magnon. (Określenie "Cro-Magnon" pochodzi od jaskiń o tej samej nazwie znajdujących się w Południowej Francji, gdzie znaleziono w roku 1868 pierwsze szkielety tej rasy.)

Tekst zawiera trzy akapity. Kliknij w pierwszy z nich, aby został objęty prostokątem p:

Sformatujemy ten akapit. Wybierz w menu opcję Panels i sprawdź, czy jest włączony panel CSS Properties. Jeśli nie, to go włącz. Panel pojawia się zwykle po lewej stronie okna Expression Web:

CSS jest skrótem angielskiej nazwy Cascade Style Sheet (kaskadowy arkusz stylów). Gdy masz wybrany element strony (w naszym przypadku jest to pierwszy akapit), kliknij prawym przyciskiem myszki w pole Applied Rules (zastosowane reguły) panelu CSS Properties i z menu kontekstowego wybierz opcję New Inline Style (nowy styl miejscowy).

Styl miejscowy odnosi się tylko do wybranego elementu. Po wyborze tej opcji w górnym polu pojawi się informacja, iż styl miejscowy zostanie utworzony wewnątrz wybranego znacznika (tutaj w ):

W dolnym polu CSS Properties pojawią się własności stylu, które dla tego znacznika możesz zmienić. Nie musisz od razu zmieniać wszystkiego, tylko to, co chcesz. Zmienimy kolor tła i tekstu w tym znaczniku.

W grupie Background (tło) we własności background-color wybierz kolor tła obszaru objętego przez znacznik :

Kolor tła akapitu zostanie odpowiednio zmieniony:

Po prawej stronie pola CSS Properties znajduje się suwak przewijania treści tego pola. Przeciągnij go lewym przyciskiem myszki w dół, aż zobaczysz grupę Font (czcionka). Zmień kolor we własności color. We własności font-weight (waga czcionki) ustaw bold (gruba):

Efekt powinien być następujący:

Przełącz edytor w tryb Code i przyglądnij się kodowi strony. Styl miejscowy został zdefiniowany w pierwszym znaczniku akapitu i obowiązuje on tylko w obrębie tego akapitu:

<p style="background-color: #99FFCC; color: #800000; font-weight: bold">Pierwszymi narzędziami...

Kolory podawane są w postaci liczby szesnastkowej zbudowanej z 6 cyfr oraz znaku #.

Teraz zmienimy kolor i tło pierwszych dwóch wyrazów w pierwszym akapicie. Wróć do trybu Design. Zaznacz wciśniętym lewym przyciskiem myszki dwa pierwsze wyrazy:

W opcji menu Panels sprawdź, czy jest wybrane Toolbox (przybornik). Jeśli nie, to wybierz. Panel Toolbox pojawia się zwykle po prawej stronie okna Expression Web:

W panelu wyszukaj . Kliknij w to narzędzie prawym przyciskiem myszki i z menu kontekstowego wybierz Wrap (owiń). W kodzie strony wokół wybranych wyrazów zostanie wstawiony znacznik :

<p style="background-color: #99FFCC; color: #800000; font-weight: bold">
<span>Pierwszymi narzędziami</span> używanymi w charakterze pomocy...

Znacznik  sam nie ma określonego znaczenia. Obejmuje on fragment tekstu i tyle. Ale objęty fragment możesz sobie sformatować wg potrzeb. I to jest właśnie funkcja tego znacznika: zrobić coś z objętym nim fragmentem.

Wróć do trybu Design i kliknij w którykolwiek z dwóch początkowych wyrazów pierwszego akapitu. Ponad oknem edytora powinien pojawić się ciąg znaczników, w których jesteśmy:

Znaczniki te tworzą ciąg zależności:

<body> → <p> → <span>

Czytamy to od strony prawej do lewej: Jesteśmy w polu znacznika  obejmującego dwa pierwsze wyrazy. Znacznik  jest objęty znacznikiem , w którym jest tekst tego akapitu. Znacznik  objęty jest znacznikiem <body>, w którym jest treść całej twojej strony WWW. Hierarchicznie wygląda to tak:

<body>
    ...
    <p>
        ...
        <span>
            ...
        </span>
        ...
    </p>
    ...
</body>

Kliknij prawym przyciskiem w regułę w polu Applied Rules panelu CSS Properties i z menu kontekstowego wybierz opcję New Inline Style:

W polu pojawi się nowa reguła dotycząca znacznika :

Dodaliśmy pusty styl miejscowy. Wybierz go lewym przyciskiem myszki:

Przejdź do własności tego stylu i zmień kolor tła (bacground-color w grupie Background) oraz kolor tekstu (color w grupie Font). Jak widzisz, robimy to dokładnie tak samo, jak robiliśmy dla akapitu.

Przełącz w tryb Code i przyglądnij się dokładnie kodowi strony. Wróć do trybu Design. Kliknij u góry okna w znacznik <body>. Następnie w panelu własności CSS w polu Applied Rules kliknij prawym przyciskiem myszki i z menu kontekstowego wybierz opcję New Inline Style. W polu CSS Properties wybierz kolory tła i tekstu inne niż w pierwszym akapicie.

Styl zdefiniowany w znaczniku <body> obowiązuje na całej stronie WWW. Jednak każdy znacznik zawarty w <body> może definiować dla siebie własny styl. Zmianie ulegają tylko te własności, które nowy styl zmienił.

Przyglądnij się kodowi strony.

Zapisz stronę w witrynie, a następnie przeglądnij ją w przeglądarce. Wykorzystaj narzędzie podglądu strony:

Podsumowanie:

Styl miejscowy definiowany jest wewnątrz znacznika HTML:

<znacznik style="własności"> ...obszar obowiązywania stylu... </znacznik>

Do zapamiętania:

Czym jest styl.
Wstawianie stylu miejscowego w akapicie . Definiowanie stylu dla akapitu.
Znacznik . Wstawianie znacznika . Definiowanie stylu miejscowego dla znacznika .
Definiowanie stylu miejscowego dla całej strony.

do podrozdziału do strony

Klasy stylów

Style miejscowe pozwalają zmieniać formatowanie w określonym miejscu strony. Jednakże często zdarza się tak, iż chcielibyśmy w taki sam sposób sformatować wiele elementów. W takim przypadku definiujemy tzw. klasę stylu.

Wyczyść style (opcja Clear Styles w panelu Apply Styles).

W menu wybierz opcję:

Format → New Style...

Spowoduje to wyświetlenie okienka dialogowego New Style (nowy styl):

Załóżmy, iż chcielibyśmy mieć kilka akapitów wyjustowanych (wyrównanych do lewego i prawego marginesu). Najpierw w polu Selector określamy nazwę, którą chcemy mieć dla tego stylu. Nazwa klasy musi rozpoczynać się od kropki. Ja wybrałem:

Teraz w polu Category (kategoria stylu) wybierz Block i w polu Text-align (ułożenie tekstu) ustaw Justify (wyjustowany):

Zatwierdź okienko przyciskiem OK i przełącz się na widok kodu strony. W obszarze nagłówka (<head> ... </head>) pojawił się nowy wpis:

<style type="text/css">
.moje001 {
	text-align: justify;
}
</style>

W ten sposób została zdefiniowana klasa stylu o nazwie moje001. Sprawdź, czy masz widoczny panel Apply Styles (stosowanie styli). Jeśli nie, to go włącz w menu:

Panels → Apply Styles

W panelu tym pojawił się nasz styl o nazwie .moje001:

Zaznacz lewym przyciskiem myszki dwa ostatnie akapity:

Następnie w panelu Apply Styles kliknij lewym przyciskiem myszki w .moje001. Tekst w akapitach zostanie wyjustowany:

Przełącz się na widok kodu strony. W znacznikach akapitu pojawił się wpis:

<p class="moje001">...

W ten sposób określiliśmy, iż tekst tych znaczników ma być formatowany wg naszego stylu. Sam styl moje001 może być dowolnie skomplikowany, wystarczy go raz zdefiniować na stronie WWW, a następnie stosować wszędzie tam, gdzie chcemy.

Zapisz stronę w witrynie; prześlij witrynę na serwer Apache i przeglądnij ją w przeglądarce.

Podsumowanie:

Klasę stylu definiujemy w nagłówku strony WWW przy pomocy opcji Format → New Style. W nagłówku powstanie wpis:

<style type="text/css">.nazwa_klasy {
    ... opcje formatu ...
}

Tak zdefiniowaną klasę stylu stosujemy w wybranym elemencie strony WWW przy pomocy panelu Apply Styles.

Do zapamiętania:

Tworzenie klasy stylu.
Stosowanie klasy stylu.

do podrozdziału do strony

Arkusz stylów

Wyobraźmy sobie taką sytuację: Jesteś twórcą stron WWW i pracujesz w dużej firmie. Zrobiłeś 1000 stron ładnie sformatowanych. Zajęło ci to wiele tygodni. W końcu praca skończona i oddajesz ją do oceny prezesowi. Ogólnie mu się twoje strony spodobały, ale zażądał, aby tło stron było lekko różowe, a tekst pisany czcionką Arial w kolorze granatowym. Co zrobić? Poprawiać style na 1000 stronach WWW?

Na szczęście istnieje rozwiązanie tego problemu: arkusz stylów. Jest to zwykły plik tekstowy, w którym umieszczasz definicje klas stylów. Następnie plik arkusza stylów łączysz ze stronami WWW, na których te klasy będą używane:

Liczba stron WWW nie jest ograniczona, może być ich 1000 i więcej. Jeśli teraz należy zmodyfikować jakiś styl, to robisz to tylko w arkuszu stylów, a wprowadzona zmiana od razu rozpropaguje się na wszystkich stronach WWW, które są połączone z tym arkuszem. Widzisz, jaka oszczędność pracy?

Zrobimy teraz przykładowy arkusz stylów i połączymy go z naszą stroną WWW. Edytor Expression Web pozwala tworzyć i wygodnie edytować arkusze stylów.

Najpierw usuniemy z pliku index.html wszystkie style. W edytorze przełącz się w tryb Design, kliknij lewym przyciskiem myszki gdziekolwiek na stronie WWW, następnie naciśnij klawisze Ctrl+A. Spowoduje to wybranie całej treści strony.

Teraz w panelu Apply Styles kliknij w Clear Styles (usuń style):

Przełącz się w tryb Code. Z akapitów zniknęły wszystkie style i klasy. Jednak w nagłówku strony (<head> ... </head>) wciąż pozostała definicja klasy moje001:

<style type="text/css">
.moje001 {
	text-align: justify;
}
</style>

Usuń te wiersze i zapisz stronę w witrynie (Ctrl + S).

Utworzymy teraz pusty plik arkusza stylów. W menu wybierz opcję:

File → New → CSS

W edytorze zostanie otwarty nowy plik o nazwie Untitled_1.css. Zapiszmy go w witrynie. Naciśnij klawisze Ctrl + S. Otworzy się okienko zapisu. W polu File name (nazwa pliku) wpisz style.css. Reszty pól nie zmieniaj i kliknij w przycisk Save. Przełącz się na zakładkę Site View. W witrynie będą dwa pliki:

Stronę WWW należy połączyć z arkuszem stylów. Przejdź na zakładkę index.html i ustaw tryb Design. W menu wybierz opcje:

Format → CSS Styles → Attach Style Sheet

Pojawi się okienko dialogowe dołączania arkusza stylów.

Obok pola URL (Uniform Resource Lokator) znajduje się przycisk Browse (przeglądaj). Kliknij go lewym przyciskiem myszki. Pojawi się okienko Select Style Sheet (wybór arkusza stylów). W okienku masz już ustawiony katalog witryny i powinieneś zobaczyć plik arkusza stylów style.css. Kliknij w ten plik, a następnie w przycisk Open (otwórz). Nazwa wybranego pliku arkusza stylów pojawi się w polu URL. Kliknij w przycisk OK. Arkusz stylów został dołączony do strony index.html. Zapisz stronę w witrynie (Ctrl+S).

Przełącz się w tryb Code i zlokalizuj w nagłówku strony wpis:

<link href="style.css" rel="stylesheet" type="text/css" />

W ten sposób wstawiana jest do kodu HTML strony informacja o dołączonym arkuszu stylów.

Teraz musimy zdefiniować w arkuszu klasy stylów, które chcemy stosować na stronach WWW. W edytorze przełącz się na zakładkę style.css.

Z menu wybierz opcje:

Format → New Style...

Zobaczysz znajome okienko New Style (nowy styl).

Załóżmy, że chcemy mieć klasę wyjustowanego tekstu. W polu Selector wpisz nazwę .j1 (nie zapomnij o kropce przed nazwą). W polu Category wybierz Block i w polu text-align ustaw justify:

Zatwierdź okienko przyciskiem OK. W arkuszu stylów pojawi się wpis:

.j1 {
	text-align: justify;
}

Zapisz arkusz w witrynie (arkusz stylów "pracuje" dopiero po zapisaniu go w witrynie, pamiętaj o tym).

Przejdź na zakładkę index.html i przełącz się w tryb Design. W panelu Apply Styles powinna pojawić się klasa .j1:

Zaznacz lewym przyciskiem myszki dwa pierwsze akapity i kliknij nazwę .j1 w panelu Apply Styles. Akapity powinny zostać wyjustowane.

W arkuszu stylów można zdefiniować dowolną liczbę klas, a każda klasa może zawierać wiele opcji formatowania. Teraz zdefiniujemy klasę, która będzie kolorowała tekst na czerwono, a jego tło na żółto.

Przełącz się na zakładkę style.css. W panelu Apply Styles kliknij w New Style... (jest to równoważne opcji menu Format → New Style...).

W polu Selector wpisz .cz.

W polu Category wybierz Font (czcionka). Na samym spodzie jest pole koloru color. Wybierz kolor czerwony:

W polu Category wybierz Background (tło), a następnie u samej góry w background-color wybierz kolor żółty:

Zatwierdź okno dialogowe kliknięciem w przycisk OK. W arkuszu stylów pojawi się nowy wpis:

.cz {
	color: #FF0000;
	background-color: #FFFF00;
}

Zapisz arkusz stylów w witrynie (Ctrl + S) i wróć na zakładkę index.html.

W panelu Apply Styles zobaczysz nową klasę .cz.

Zaznacz lewym przyciskiem myszki w pierwszym akapicie dwa początkowe wyrazy i kliknij w panelu Apply Styles klasę .cz. Efekt będzie następujący:

W drugim akapicie zaznacz tylko pierwszy wyraz i kliknij ponownie w klasę .cz. W trzecim akapicie zaznacz tylko pierwszą literę pierwszego wyrazu i kliknij w klasę .cz.

Przełącz tryb na Code i zlokalizuj wprowadzone zmiany.

Prześlij treść witryny na serwer i sprawdź efekt w przeglądarce.

Pobaw się tworzeniem klas styli w arkuszu. Biegłość wymaga czasu i dużo ćwiczeń. Tutaj podaliśmy jedynie podstawowe informacje.

Podsumowanie:

Użycie arkusza stylów wygląda następująco:

Tworzymy plik arkusza stylów i zapisujemy go w witrynie.
Arkusz stylów dołączamy do stron WWW wykorzystując opcję z menu Format → CSS Styles → Attach Style Sheet (opcję tę znajdziesz również w panelu Apply Styles).
W arkuszu definiujemy klasy stylów opcją Format → New Style... (opcję tę znajdziesz również w panelu Apply Styles).
Po każdorazowej zmianie treści arkusza stylów należy go zapisać w witrynie.
Na stronie WWW dostęp do zdefiniowanych klas w arkuszu mamy w panelu Apply Styles.

Do zapamiętania:

Co to jest arkusz stylów i do czego jest on potrzebny?
Dołączanie arkusza do strony WWW.
Definiowanie klas stylów w arkuszu.
Korzystanie ze zdefiniowanych w arkuszu klas stylów na stronie WWW.

do podrozdziału do strony

Zespół Przedmiotowy
Chemii-Fizyki-Informatyki
w I Liceum Ogólnokształcącym
im. Kazimierza Brodzińskiego
w Tarnowie
ul. Piłsudskiego 4
©2026 mgr Jerzy Wałaszek

Materiały tylko do użytku dydaktycznego. Ich kopiowanie i powielanie jest dozwolone pod warunkiem podania źródła oraz niepobierania za to pieniędzy.
Pytania proszę przesyłać na adres email: i-lo@eduinf.waw.pl
Serwis wykorzystuje pliki cookies. Jeśli nie chcesz ich otrzymywać, zablokuj je w swojej przeglądarce.

Informacje dodatkowe.

Matura - Internet

Style na stronie WWW

Styl miejscowy

Co to jest styl?

Do zapamiętania:

Klasy stylów

Do zapamiętania:

Arkusz stylów

Do zapamiętania: