2 of 32

CSS – Cascading Style Sheets

Kaskadowe arkusze styli „CSS”- zwiększają możliwości czystego HTMLa. Umożliwiają:

oddzielają strukturę informacyjną strony od struktury prezentacyjnej
formatowanie wyglądu dokumentu oraz jego elementów
umożliwiają zapisanie wyglądu strony w oddzielnym pliku
zmniejszają rozmiar kodu źródłowego strony
eliminują konieczność wielokrotnego deklarowania stylu

3 of 32

Wstawianie stylu do dokumentu – w linii

Postać deklaracji stylu: selektor {właściwość: wartość}

W przypadku umieszczania stylu w znaczniku należy użyć słowa: „style”

style=”selektor: wartość”

Przykład:

4 of 32

Wstawianie stylu do dokumentu – w linii – znacznik <span>

Znacznik jest wstawiany w dowolnym miejscu. Służy do wydzielenia obszaru/obszarów w innych znacznikach oraz umożliwia wprowadzenie innego/dodatkowego formatowania elementów dokumentów.

Używa się go identycznie jak innych znaczników. Przykład:

5 of 32

Wstawianie stylu do dokumentu – w linii – znacznik <div>

Znacznik jest wstawiany w dowolnym miejscu. Służy do wydzielenia bloków dokumentu, które mogą być formatowanie inaczej niż pozostała część dokumentu. Wewnątrz tego znacznika umieszcza się inne znaczniki (odwrotnie niż znacznik <span></span>

Przykład:

6 of 32

Wewnętrzny arkusz stylu – dotyczący całego dokumentu

Styl wewnętrzny wstawia się w nagłówku dokumentu używając znacznika <style> treść stylu </style>. Przykład:

7 of 32

Zewnętrzny arkusz stylu

W nagłówku dokumentu umieszcza się odwołanie do pliku zewnętrznego, a całe formatowanie wyglądu dokumentu umieszcza się w tym pliku.

Odwołanie do pliku „arkusz.css”:

Oraz zawartość powyższego pliku „arkusz.css”:

8 of 32

Łączenie plików *.css

Jeżeli do arkusza trzeba dołączyć inny arkusz wykonu8je się to za pomocą kodu: @import url(arkusz2.css);

arkusz1.css arkusz2.css

@import url(arkusz2.css); p {font-family: arial;}

p {color: blue;}

9 of 32

Wartości i jednostki w CSS

5 – liczba całkowita
5.4 – liczba ułamkowa (część dziesiętna po „kropce”)
% - liczba wyrażona w procentach
in (cal), cm (centymetr), mm (milimetr), pt (punkt), pc (1 pica = 12pt), px (1 pixel = 0.75 pt) – jednostki bezwzględne
em (wielkość względna rozmiaru czcionki – najmniejsza wartość to 0,1 em) – wartości względne rozpatrywane do aktualnej wielkości czcionki

Przykład: p {font-size: 5pt;}

10 of 32

Selektory główne

Podczas deklaracji można użyć wielu selektorów jednocześnie. Wówczas należy je oddzielić przecinkami. Formatowanie odnosi się do wszystkich użytych selektorów:

11 of 32

Selektory potomka

W przypadku przejmowania właściwości od „rodzica” można wyszczególnić właściwość konkretnego selektora. Przykładem może być zagnieżdżona kursywa w selektorze paragrafu: <p><i> …. </i></p>

p i {color: red;}

12 of 32

Selektory klas

Stosuje się je gdy selektorom HTML nadane są identyfikatory klas.

HTML:

CSS:

p.nazwa_klasy { color: red;}

Rezultat: 🡪

13 of 32

Selektory identyfikatorów

Stosuje się je gdy selektorom HTML nadane są identyfikatory „id”.

HTML:

CSS:

p#identyfikator { color: red;}

(można nie użyć selektora „p”)

Rezultat: 🡪

14 of 32

Pseudoklasy

Powodują zmianę wyglądu w zależności od interakcji użytkownika. Stosuje się je przy znacznikach odsyłaczy.

np..:

a:active {właściwość: wartość;} – link po wczytaniu strony
a:link {właściwość: wartość;} – link nieaktywny i nieodwiedzany
a:visited {właściwość: wartość;} – link odwiedzony
a:hover {właściwość: wartość;} – link gotowy do kliknięcia po najechaniu nad niego myszką

15 of 32

Pseudoklasa :hover

Może być użyta do zmiany właściwości (nie tylko do odnośników) różnych obiektów po najechaniu na nie myszką. Przykład: zamiana koloru tekstu po najechaniu myszką:

css:

html:

16 of 32

Czcionki w CSS

font-family – rodzaj czcionki
font-size – rozmiar czcionki
font-style – styl czcionki
font-weight – grubość czcionki
line-height – odstęp między liniami

Powyższe atrybuty czcionek można ze sobą łączyć używając skrótu „font”:

17 of 32

Formatowanie tekstu

text-indent: 20px; – wcięcie pierwszej linii akapitu
text-align: justify; – wyrównanie akapitu do marginesów (left, right, center)
text-decoration: none; – tekst bez podkreślenia
text-decoration: underline; – tekst podkreślony
text-decoration: overline; – tekst z linią nad tekstem
text-decoration: line-throught; – tekst przekreślony
text-decoration: blink; – tekst migoczący (nie wszystkie przeglądarki)

18 of 32

Kolory i tło strony

Kolory są deklarowane szesnastkowo (#123456 lub #123) lub za pomocą nazwy anglojęzycznej (red, blue, darkblue, itp.)

Tło strony można wypełnić

kolorem: background-color: kolor;
lub obrazkiem: background-image: url(tlo.jpg);

Powyższe style pozwalają kolorować za pomocą koloru lub tła dowony element na stronie.

19 of 32

Kolory i tła c.d. - przykład

20 of 32

Obraz w tle - powtarzanie

W celu powtarzania obrazu w tle można użyć atrybuty:

background-repeat: no-repeat; – brak powtarzania
background-repeat: repeat-x; – powtarzanie w poziomie
background-repeat: repeat-y; – powtarzanie w pionie
background-repeat: repeat; – powtarzanie w pionie i poziomie

21 of 32

Blokada grafiki tła

Obowiązuje atrybut: background-attachment: blokada;

Rodzaje blokad:

scroll – przewijanie tła
fixed – tło nieruchome względem przeglądarki przy przewijaniu
local – tło nieruchome względem elementu przy przewijaniu strony

22 of 32

Model blokowy obiektów w CSS

„Każdy” obiekt można przesuwać i modyfikować jego obramowanie.

Bloki w CSS mają (od zewnątrz do środka) następującą strukturę:

margin – margines wokół ramki
border – ramkę
padding – odstęp między ramką, a zawartością
content – właściwa zawartość

23 of 32

Blok w CSS - przykład

24 of 32

Style linii ramek

none – brak obramowania - thin – linia cieńka
hidden – obramowanie ukryte - medium – linia średnia
dotted – linia kropkowana - thick – linia gruba
dashed – linia kreskowa
solid – linia ciągła Pozycje
double – linia podwójna - top – góra
groove – rowek - bottom – dół
ridge – grzbiet - right – margines prawy
inset – ramka - left – margines lewy
outset - przycisk

25 of 32

Punktory

Mogą stanowić normalny punkt, obraz, lub jego brak. Punktory mogą ponadto być umieszczone wewnątrz lub na zewnątrz tekstu. Do tego celu służą atrybuty:

list-style-position: pozycja; (pozycja może być: inside lub outside)
list-style-image: url(obraz.jpg);

Przykładowy styl z atrybutami:

style="list-style-position: inside; list-style-image: url(obraz.jpg);"

26 of 32

Wygląd powyższej przykładowej listy

27 of 32

POZYCJONOWANIE ELEMENTÓW

Pozycjonowanie polega na umiejscowieniu selektora w miejscu, które uważamy za odpowiednie dla wyglądu strony. Ogólna postać pozycjonowania: selektor { position: rodzaj; parametry; }

Przykłady:

h2 { position: absolute; top: 100px; left: 50px; }

img {position: relative; top: 100px; right: 50px; }

div {position: fixed; bottom: 100px; right: 50px; }

28 of 32

Przezroczystość elementów

selector {opacity: liczba_od_0.0_do_1.0; }

Przykład przeźroczystość 50% czyli 0.5:

29 of 32

Warstwy „index-z”

Umożliwiają nakładanie się elementów na siebie. Przykład:

Index.html

arkusz.css Efekt:

30 of 32

MENU POZIOME i PIONOWE

Przygotowanie listy menu:

31 of 32

Pozbycie się marginesów i odległości do ramki oraz usunięcie punktowania

arkusz.css

1 of 32