Lekcja 24
Lekcja 24
Embedded Files
Temat: Style CSS i ich zastosowanie. [183]
Temat: Style CSS i ich zastosowanie. [183]
Cele lekcji:
Zrozumienie sensu stosowania stylów CSS (kaskadowych arkuszy stylów) w procesie tworzenia strony WWW.
Stworzenie prostego pliku CSS
Użycie pliku CSS do zmodyfikowania wyglądu swoich stron WWW (L20, L21, L22, L23)
Domyślne wartości znaczników i sposób ich działania możemy zmieniać za pomocą stylów. Język HTML określa różne możliwości określenia stylów elementów strony. Jednym z najpopularniejszych sposobów określenia stylów jest użycie Kaskadowych arkuszy stylów CSS
Za pomocą html określamy zawartość strony, jej wygląd modyfikujemy często stylem CSS. W jednym pliku CSS możemy określić wygląd wielu stron (np. wszystkich podstron całej witryny).
Uwaga! kod CSS ma inną składnie niż HTML ale możemy go umieścić wewnątrz pliku HTML ale wtedy działa on tylko na tej jednej stronie.
Umieszczenie kodu CSS w oddzielnym pliku z rozszerzeniem css (np. style.css) pozwala na jego użycie w wielu stronach jednocześnie wystarczy w sekcji <head> umieścić odpowiednią informacje (patrz Pomoc⇩)
Wykorzystujemy do tego znacznik <link>z odpowiednimi atrybutami oraz odpowiednimi wartościami tych atrybutów
rel="stylesheet"
type="tekt/css"
href="style.css" tu określamy ścieżkę do pliku z kodem CSS (w tym przypadku plik nazywa się style.css i umieszczony jest w tym samym folderze co plik html w którym go używamy)
Pomoc przykład (to przekopiowujemy do kopi naszych plików z poprzednich lekcji):
<link rel="stylesheet" type="text/css" href="L24.css">
film 1 [35:15]
Efekt działania pliku L24.css (na plik L23.html)
Zawartość pliku L24.css
* w pierwszej wersji pliku możesz zmienić tylko kolor tła i sprawdzić działanie a następnie przetestować inne modyfikacje.
Przykład formatowania CSS-em pliku L21.html
w pliku L24.css ustawiłem następujące formatowanie:
w pliku L24.css ustawiłem następujące formatowanie:
linia 3 kolor tła na lightblue (jasnoniebieski? ;-)
linia 5-11 formatowanie znacznika <p> czyli akapitu
{
linia 7 kolor czcionki akapitu red (czerwona)
linia 8 wyrównanie akapitu center (wyśrodkowane),
linia 9 rozmiar fontu (czcionki) 12px (12 punktów)
linia 10 krój czcionki verdana
}
linia 12 formatowanie znacznika h3 (nagłówka 3)
{
linia 14 kolor czcionki dla h3 blue (niebieska)
linia 15 wielkość czcionki dla h3 25px (25 punktów)
}
Pamiętaj pisząc kod CSS w Notapedzie++ warto ustawić sobie składnie na CSS
Pomoc:
Pomoc:
Style CSS w pliku zewnętrznym. Przykładowe podlinkowanie pliku L24.css (wpis w sekcji heat)
<link rel="stylesheet" type="text/css" href="L24.css">Style CSS można umieścić wewnątrz pliku html . Wpis w sekcji <heat> znacznik <style> .....</style>
Ćwiczenia:
Utwórz na pulpicie Folder L24 przekopiuj do niego 3 pliki z poprzednich lekcj. W plikach html umieść w sekcji head znacznik wskazujący plik L24.css .... <link rel="stylesheet" type="text/css" href="L24.css"> (cel - wszystkie twoje strony będą podlegały formatowaniu określonemu w pliku L24.css)
Utwórz plik L24.css, (zapisz go w folderze L24)
W pliku L24.css umieść znaczniki formatujące mogą być podobne jak w przykładzie z lekcji,
Pobaw się modyfikując plik L24.css (zaobserwuj jak zmiany w jednym pliku css wpływają na wszystkie strony posiadające "podlinkowanie" do niego)
Na swojej Witrynie Google umieść zrzuty ekranowe przedstawiające wyniki zabawy (zrzuty różnych twoich stron po modyfikacji CSS-em) Folder L24 przekopiuj na dysk Google.
Przykładowe wykonanie ćwiczenia:
Page updated
Report abuse