22.07.2009, 12:49
Cześć, w poradniku poznacie podstawową znajomość CSS dzięki której będziecie mogli edytować i tworzyć własne arkusze stylów. No więć ruszajmy
.
Każdy arkusz stylów składa się z selektorów (ich nazewnictwo w MyBB znajdzieciecie tutaj. Natomiast w każdym selektorze znajdują się (jakby to nazwać?) komendy. I właśnie tutaj poznacie podstawowe komendy do tworzenia stylów.
Czcionka:
1. Wielkość - selektor { font-size: rozmiar }
Za rozmiar podstawiamy jedną z wartości:
xx-small - najmniejsza
x-small - mniejsza
small - mała
medium - średnia
large - duża
x-large - większa
xx-large - największa
2. Rodzaj - selektor { font-family: rodzaj, rodzaj1, rodzaj2,... }
Za rodzaj podstawiamy nazwę czcionki np Comic Sans MS.
3. Styl - selektor { font-style: styl }
Za styl podstawiamy:
normal - czcionka normalna (podstawowa)
italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique)
oblique - również czcionka pochylona (podobna jak poprzednio)
Tekst:
1. Kolor: - selektor { color: kolor }
Za kolor podstawiamy jakiś kolor w zapisie szesnastokwym lub po angielsku.
2. Dekoracja - selektor { text-decoration: dekoracja }
Za dekoracja podstawiamy:
none - bez zmian
underline - podkreślenie
line-through - przekreślenie
overline - nadkreślenie
blink - migotanie tekstu
3. Wyrównanie - selektor { text-align: wyrównanie }
Za wyrównanie podstawiamy:
left - wyrównanie tekstu do lewego marginesu (domyślnie)
right - wyrównanie do prawego marginesu
center - do środka (wyśrodkowanie)
justify - do obu marginesów jednocześnie (justowanie)
Tło:
1. Kolor - selektor { background-color: kolor }
Za kolor podstawiamy jakiś kolor w zapisie szesnastokwym lub po angielsku.
2. Tło obrazkowe - selektor { background-image: url(ścieżka dostępu do obrazka) }
Za ścieżka dostępu do obrazka podajemy ścieżkę do obrazka.
3. Powtarzanie - selektor { background-repeat: powtarzanie }
Za powtarzanie podstawiamy:
repeat - powtarzanie tła w obu kierunkach (domyślnie)
repeat-x - powtarzanie tła tylko w kierunku poziomym
repeat-y - powtarzanie tła tylko w kierunku pionowym
no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
Marginesy:
1. Górny - selektor { margin-top: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
2. Dolny - selektor { margin-bottom: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
3. Lewy - selektor { margin-left: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
4. Prawy - selektor { margin-right: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
5. Wewnętrzny - selektor { paddnig: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
UWAGA! W marginesach wewnętrznych tak samo jak w zewnętrznych może być margines górny, dolny itd. Wystarczy pomyśleć
.
Obramowanie:
1. Styl - selektor { border-style: styl }
Za styl podstawiamy:
hidden - ukryte obramowanie
dashed - linia kreskowa
dotted - linia kropkowa
solid - linia ciągła
double - linia ciągła podwójna
groove - "rowek"
ridge - "grzbiet"
inset - "ramka"
outset - "przycisk
2. Grubość obramowania - selektor { border: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
3. Szerokość obramowania - selektor { border-width: szerokość }
Za szerokość podstawiamy:
thin - cienkie obramowanie
medium - średnie obramowanie
thick - grube obramowanie
lub konkretną wartość w jednostkach długości
4. Kolor obramowania - selektor { border-color: kolor }
Za kolor podstawiamy jakiś kolor w zapisie szesnastokwym lub po angielsku.
UWAGA! W obramowaniu można także top, bottom, left, right. Wystarczy pomyśleć.
Na dziś to już wszystko. Wszelkie błędy i propozycje zmian proszę zgłaszać do mnie na PW.
.Każdy arkusz stylów składa się z selektorów (ich nazewnictwo w MyBB znajdzieciecie tutaj. Natomiast w każdym selektorze znajdują się (jakby to nazwać?) komendy. I właśnie tutaj poznacie podstawowe komendy do tworzenia stylów.
Czcionka:
1. Wielkość - selektor { font-size: rozmiar }
Za rozmiar podstawiamy jedną z wartości:
xx-small - najmniejsza
x-small - mniejsza
small - mała
medium - średnia
large - duża
x-large - większa
xx-large - największa
2. Rodzaj - selektor { font-family: rodzaj, rodzaj1, rodzaj2,... }
Za rodzaj podstawiamy nazwę czcionki np Comic Sans MS.
3. Styl - selektor { font-style: styl }
Za styl podstawiamy:
normal - czcionka normalna (podstawowa)
italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique)
oblique - również czcionka pochylona (podobna jak poprzednio)
Tekst:
1. Kolor: - selektor { color: kolor }
Za kolor podstawiamy jakiś kolor w zapisie szesnastokwym lub po angielsku.
2. Dekoracja - selektor { text-decoration: dekoracja }
Za dekoracja podstawiamy:
none - bez zmian
underline - podkreślenie
line-through - przekreślenie
overline - nadkreślenie
blink - migotanie tekstu
3. Wyrównanie - selektor { text-align: wyrównanie }
Za wyrównanie podstawiamy:
left - wyrównanie tekstu do lewego marginesu (domyślnie)
right - wyrównanie do prawego marginesu
center - do środka (wyśrodkowanie)
justify - do obu marginesów jednocześnie (justowanie)
Tło:
1. Kolor - selektor { background-color: kolor }
Za kolor podstawiamy jakiś kolor w zapisie szesnastokwym lub po angielsku.
2. Tło obrazkowe - selektor { background-image: url(ścieżka dostępu do obrazka) }
Za ścieżka dostępu do obrazka podajemy ścieżkę do obrazka.
3. Powtarzanie - selektor { background-repeat: powtarzanie }
Za powtarzanie podstawiamy:
repeat - powtarzanie tła w obu kierunkach (domyślnie)
repeat-x - powtarzanie tła tylko w kierunku poziomym
repeat-y - powtarzanie tła tylko w kierunku pionowym
no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek)
Marginesy:
1. Górny - selektor { margin-top: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
2. Dolny - selektor { margin-bottom: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
3. Lewy - selektor { margin-left: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
4. Prawy - selektor { margin-right: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
5. Wewnętrzny - selektor { paddnig: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
UWAGA! W marginesach wewnętrznych tak samo jak w zewnętrznych może być margines górny, dolny itd. Wystarczy pomyśleć
.Obramowanie:
1. Styl - selektor { border-style: styl }
Za styl podstawiamy:
hidden - ukryte obramowanie
dashed - linia kreskowa
dotted - linia kropkowa
solid - linia ciągła
double - linia ciągła podwójna
groove - "rowek"
ridge - "grzbiet"
inset - "ramka"
outset - "przycisk
2. Grubość obramowania - selektor { border: rozmiar }
Za rozmiar należy podać konkretną wartość w jednostkach długości np. pixelach.
3. Szerokość obramowania - selektor { border-width: szerokość }
Za szerokość podstawiamy:
thin - cienkie obramowanie
medium - średnie obramowanie
thick - grube obramowanie
lub konkretną wartość w jednostkach długości
4. Kolor obramowania - selektor { border-color: kolor }
Za kolor podstawiamy jakiś kolor w zapisie szesnastokwym lub po angielsku.
UWAGA! W obramowaniu można także top, bottom, left, right. Wystarczy pomyśleć.
Na dziś to już wszystko. Wszelkie błędy i propozycje zmian proszę zgłaszać do mnie na PW.
