Webboard

Pełna wersja: Podstawy CSS
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
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:P.

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ć:D.

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ć.:D



Na dziś to już wszystko. Wszelkie błędy i propozycje zmian proszę zgłaszać do mnie na PW.
Mimo, że temat stary to warto go odświeżyć i dorzucić parę CSSowych tricków :)

Cienie tekstowe:
http://www.tlumaczenia-angielski.info/w3...hadow.html

Generator gradientów:
http://www.colorzilla.com/gradient-editor/

Paczka (text-shadow, box-shadow...)
http://css3gen.com/box-shadow/

Transitions:
http://kodcss.pl/kurs-css/dzial-1/efekt-...ition-css3

Cała masa różnych różnistych efektów!
http://css-tricks.com/snippets/