1
Kurs WIT
Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT
inż. Paweł Zawadzki (p.zawadzki@wit.edu.pl)
Kaskadowe arkusze stylów CSS
Geneza
-
oddzielenie struktury dokumentu HTML od reguł prezentacji
-
poszerzenie samego HTML
Korzyści
-
przejrzystość dokumentów
-
łatwe zarządzanie stylem (wyglądem) serwisu
-
oszczędność łącz
-
uproszczona aktualizacja
-
większe możliwości (szeroki zasób środków)
Wprowadzenie arkusza CSS
Arkusze zewnętrzne
<head>
...
<link href="
style/arkusz.css
" rel="stylesheet" type="text/css">
...
</head>
Zewnętrzny arkusz jest najwygodniejszym i najczęściej stosowanym
sposobem wprowadzania CSS dla serwisu.
Jeden arkusz dla kilku plików pozwala na prostą modyfikację wyglądu witryny.
UWAGA !
Zewnętrzny arkusz to plik tekstowy z rozszerzeniem "css".
Arkusz taki możemy podłączyć do wielu plików HTML.
Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem
serwisu.
Wykorzystanie arkusza na stronie
Krok 1 - Utworzenie arkusza
Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Krok 2 – Podłączenie arkusza do strony
<head>
...
<link href="
sciezka_do_pliku.css
" rel="stylesheet" type="text/css">
...
</head>
2
Kurs WIT
Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT
inż. Paweł Zawadzki (p.zawadzki@wit.edu.pl)
Arkusze osadzone
Arkusz osadzony umieszczany jest w sekcji head dokumentu HTML.
Zasięg takiego arkusza to pojedynczy dokument HTML.
Wykorzystanie arkusza na stronie
<head>
...
<style type="text/css">
</style>
...
</head>
arkusz stylów
Style wpisane do znacznika (inline)
Zasięg stylu ograniczony do jednego elementu HTML.
Styl wprowadzany przy użyciu atrybutu style.
Wykorzystanie stylu na stronie
<znacznik_html
style="definicja stylu"
>....</znacznik_html>
<p
style="font-family: verdana; color: red;"
> Czerwona Verdana </p>
<body
style="margin-left: 100px;"
> … </body>
Kaskada stylów (Cascading Style Sheets)
W dokumencie HTML możemy wykorzystać jednocześnie różne metody
wprowadzenia stylu.
Hierarchia arkuszy:
-
styl lokalny (inline)
-
styl osadzony
-
styl zewnętrzny
Warto korzystać z kaskady !!!
3
Kurs WIT
Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT
inż. Paweł Zawadzki (p.zawadzki@wit.edu.pl)
Budowa arkusz stylów
Selektor prosty
W selektorach prostych definiujemy style w miarę uniwersalne !!!
Definicja stylu
nazwa_definicji
{
cecha_1: wartość;
cecha_2: wartość;
...
}
td
{
font-family: verdana, arial;
font-size: 8pt;
background-color: yellow;
}
body
{
background-color: green;
}
h1, h2, h3
{
color: red;
}
Własności:
-
nazwą definicji jest tu nazwa elementu HTML
-
styl jest stosowany automatycznie do wszystkich elementów danego
typu na stronie
nazwa_znacznika_html
{
cecha_1: wartość;
cecha_2: wartość;
...
}
Definicje zawarte w selektorach prostych powinny być uniwersalne !!!
4
Kurs WIT
Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT
inż. Paweł Zawadzki (p.zawadzki@wit.edu.pl)
Selektor klasy
Własności:
-
definicji możemy nadać dowolną nazwę
-
nazwę klasy poprzedzamy kropką
-
styl jest stosowany wyłącznie do elementów które wskażemy
Krok 1 – definicja klasy (kod CSS)
.dowolna_nazwa_klasy
{
cecha_1: wartość;
cecha_2: wartość;
...
}
Krok 2 – podłączenie stylu (kod HTML)
<znacznik_html
class="dowolna_nazwa_klasy"
>... </znacznik_html>
Klasa uniwersalna (może być zastosowana do różnych elementów)
.niebieska
{
color: blue;
}
<td
class="niebieska"
>Tekst niebieski</td>
<p
class="niebieska"
>Tekst niebieski</p>
Klasa dla konkretnego typu elementu
td.odwrocona
{
background-color: black;
color: white;
}
p.odwrocona
{
background-color: blue;
color: yellow;
}
<td
class="odwrocona"
> czarne tło, biały tekst </td>
<p
class="odwrocona"
> niebieskie tło, żółty tekst</p>
5
Kurs WIT
Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT
inż. Paweł Zawadzki (p.zawadzki@wit.edu.pl)
Selektor identyfikatora
Własności:
-
selektor może być użyty dla wszystkich elementów HTML mających
określony atrybut id
-
atrybut id ma unikalną wartość w obrębie dokumentu
Krok 1 – definicja klasy (kod CSS)
znacznik_html#id_elementu
{
cecha_1: wartość;
cecha_2: wartość;
...
}
Krok 2 – podłączenie stylu (kod HTML)
<znacznik_html
id="id_elementu"
>...</znacznik_html>
td#naglowek
{
font-weight: bold;
}
<td
id="naglowek"
> Tekst pogrubiony </td>
Pseudoklasy (dla odsyłaczy)
Własności:
-
pseudoklasy najczęściej używane są dla odsyłaczy
-
pozwalają one zdefiniować styl odnośników w zależności od warunków
zewnętrznych
Typy pseudoklas:
a:
link
(standardowy wygląd łącza)
a:
hover
(wygląd łącza po najechaniu myszą)
a:
visited
(odwiedzone hiperłącze)
a:
active
(aktywne)
Standardowo łącza bez podkreślenia, po najechaniu myszą podkreślone
a
{
text-decoration:
none
;
}
a:
hover
{
text-decoration:
underline
;
}
6
Kurs WIT
Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT
inż. Paweł Zawadzki (p.zawadzki@wit.edu.pl)
Parametry czcionki
krój
font-family: verdana, arial;
wielkość
font-size: 12pt;
styl
font-style: italic;
grubość
font-weight: bold;
Parametry tekstu
dekoracja
text-decoration: none/underline/overline/line-through;
odstępy
line-height: px/pt; (między wierszami)
word-spacing: px/pt; (między wyrazami)
letter-spacing: px/pt; (między literami)
Kolory i tła dla elementów posiadających daną cechę
kolor
color: kolor/#rrggbb;
kolor tła
background-color: kolor/#rrggbb;
obraz jako tło
background-image: url(nazwa_pliku.jpg);
Obramowanie (top/bottom/left/right)
kolor
border-color: kolor/#rrggbb;
rodzaj
border-style: solid/dotted/dashed/double/groove;
szerokość
border-width: px/pt;
Rozmiar (dla elementów prostokątnych)
szerokość
width: px/%;
wysokość
height: px/%;
Wyrównanie
poziom
text-align: left/right/center/justify;
pion
vertical-align: top/middle/bottom;
Marginesy (top/bottom/left/right)
zewnętrzny
margin: px/%;
wewnętrzny
padding: px/%;
Przykładowe właściwości CSS
Wyszukiwarka
Podobne podstrony:
03 CSS wydruk
03 13 Wprowadzenie podjęcia produktów INSTR12
03 Wyklad 1 (wprowadzenie do BM)
03 CSS wydruk
03 CSS wydruk
03 2 Wprowadzanie zamówienia sprzedaży INSTR1
kurs wprow.cz.prakt.2008, Znieczulenie, Wykłady-Wprowadz. do spcjalizacji w anestezjologii i int.ter
Wykład 1 - Wprowadzenie - 01.03.2011 r, studia
03 Interakcje stosunki spoleczne organizacja struktura spoleczna, studia, wprowadzenie do socjologii
03 18 warunki wprowadzania nieczystości ciekłych do stac
Wprowadzenie do metodologii badań 1.03, Pedagogika, Studia, PWiPP
Wprowadzenie do pedagogiki 03. 01 .2011, Studia
2014 03 wprowadzenie, Różne, Przygotowanie do ŚDM w Krakowie 2016 rok, Grudzień 2013 rok, Styczeń 20
Cwiczenie nr 03 Wprowadzenie do chemii analitycznej
27.03.11.Fonetyka i fonologia - wprowadzenie, Studia - wczesna edukacja i logopedia
więcej podobnych podstron