Wikipedia napisał(a):Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r.
Przejdźmy teraz do kursu
1. Umieszczanie arkuszy stylów.
a) Wewnętrzny arkusz stylów:
- Kod: Zaznacz wszystko
<head>
(...)
<style type="text/css">
/* <![CDATA[ */
selektor {
cecha: wartość;
cecha2: wartość2
...
}
selektor2 {
cecha: wartość;
cecha2: wartość2
...
}
(...)
/* ]]> */
</style>
(...)
</head>
Jak widać ten fragment wstawiamy w sekcji head.
b) Zewnętrzny arkus stylów.
W sekcji head wstawiamy taki fragment:
- Kod: Zaznacz wszystko
<head>
(...)
<link rel="Stylesheet" type="text/css" href="style.css" />
(...)
</head>
Po czym należy stworzyć plik style.css w tym samym folderze co znajduje się plik index
c) Alternatywny arkusz stylów.
- Kod: Zaznacz wszystko
<head>
<link rel="Stylesheet" type="text/css" href="style.css" title="Nazwa domyślna" />
<link rel="Alternate stylesheet" type="text/css" href="style1.css" title="Nazwa 1" />
<link rel="Alternate stylesheet" type="text/css" href="style2.css" title="Nazwa 2" />
<link rel="Alternate stylesheet" type="text/css" href="style3.css" title="Nazwa 3" />
(...)
</head>
Tutaj style.css są domyślnym arkuszem stylów, który zostanie dołączony automatycznie, a reszta to alternatywne, które zostaną dołączone po wyborze odpowiedniej opcji w przeglądarce poprzez użytkownika.
d) Importowanie arkusza stylów.
- Kod: Zaznacz wszystko
<style type="text/css">
/* <![CDATA[ */
@import url(adres zewnętrznego arkusza stylów);
/* ]]> */
</style>
Polecenie to możemy wstawić zarówno w wewnętrznym jak i zewnętrznym arkuszu stylów. Pozwala ono wczytać arkusz stylów, przy czym może się on znajdować na tym samym serwerze lub w dowolnym serwerze znajdującym się w internecie. Wtedy należy podać adres internetowy. Po wczytaniu zostanie on automatycznie dołączony.
e) Ostatnią opcją jest dopisanie arkusza do wybranego bloku.
- Kod: Zaznacz wszystko
<selektor style="nasze style">treść bloku</selektor>
Selektorem może być obojętnie jaki znacznik, np. p, div, itp.
2. Komentarze
Aby wstawić do naszego arkusza stylów komentarz, należy wpisać go pomiędzy /* */, np.
- Kod: Zaznacz wszystko
/* Nasz komentarz */
3. Struktura CSS
Ogólna struktura kaskadowych stylów wygląda następująco:
- Kod: Zaznacz wszystko
selektor {
atrybut: wartość;
(...)
}
4. Typografia
a) Zmiana koloru czcionki
- Kod: Zaznacz wszystko
color: #color;
W miejsce color podajemy kolor w formacie RGB
b) Rozmiar czcionki
- Kod: Zaznacz wszystko
font-size: rozmiar;
W miejsce rozmiar podajemy rozmiar w pikselach, np. 10px;
c) Krój czcionki
- Kod: Zaznacz wszystko
font-family: czcionka;
W miejsce czcionka wpisujemy nazwę czcionki, np. Arial;
d) Dekoracja czcionki
- Kod: Zaznacz wszystko
text-decoration: dekoracja;
Jest kilka sposobów dekoracji czcionki:
underline - podkreślenie
overline - nadkreślenie
line-through - przekreślenie
blink - miganie
Zamiast dekoracja wpisujemy jeden z powyższych przykładów.
e) Styl czcionki
- Kod: Zaznacz wszystko
font-style: styl;
Są dwa style:
italic - kursywa
oblique - czcionka pochyła
f) Pogrubienie czcionki
- Kod: Zaznacz wszystko
font-weight: pogrubienie;
Zamiast pogrubienie wpisujemy:
bold - Pogrubienie
normal - Bez pogrubienia
5. Pozycjonowanie
a) Pozycja selektora
Aby element znajdował się dokładnie tam, gdzie mu wskażemy, należy użyć postion: absolute;, np.
- Kod: Zaznacz wszystko
position: absolute;
top: /* odległość od góry */;
left: /* odległość od lewej */;
right: /* odległość od prawej */;
bottom: /* odległość od dołu */;
b) Pozycja tekstu
- Kod: Zaznacz wszystko
text-align: wyrownanie;
Zamiast wyrównanie należy wpisać jeden z poniższych przykładów:
left - do lewej strony
right - do prawej strony
center - do środka
justify - do obu stron
c) Nadanie marginesów
- Kod: Zaznacz wszystko
margin-pozycja: wartosc
Zamiast pozycja wstawiamy jeden z poniższych przykładów:
left - lewy margines
right - prawy margines
top - górny margines
bottom - dolny margines
A w miejsce wartosc podajemy wartość w pikselach (px)
6. Tło
a) Tło obrazkowe
- Kod: Zaznacz wszystko
background-image: url(adres_obrazka);
b) Kolor tła
- Kod: Zaznacz wszystko
background-image: kolor;
W miejsce kolor podajemy oczywiście wartość w formacie RGB
c) Powtarzanie tła
- Kod: Zaznacz wszystko
background-repeat: powtarzanie;
repeat - powtarzanie tła na całym obszarze
repeat-x - powtarzanie tła względem osi x
repeat-y - powtarzanie tła względem osi y
no-repeat - brak powtarzania
7. Ramki
a) Grubość obramowania
- Kod: Zaznacz wszystko
border: wartosc;
Jako wartosc podajemy wartość w pikselach
b) Kolor obramowania
- Kod: Zaznacz wszystko
border-color: kolor;
Jako kolor podajemy kolor w formacie RGB
c) Typ obramowania
- Kod: Zaznacz wszystko
border: typ;
Typy obramowania:
none - brak
hidden - ukryta ramka
solid - jedna linia
dotted - kropkowana linia
dashed - kreskowana linia
double - podwójna
groove - wklęsła przestrzenna
ridge - wypukła przestrzenna
inset - wklęsła
outset - wypukła
I takim sposobem doszliśmy do końca. Myślę, że nauczyłem was podstaw tego języka.
Pozdrawiam!
Autorem tego kursu jestem w 100%.
Pochwały przyznane za posta: 5
