CSS

CSS-TEKST
FONT-FAMILY :
(określa rozdzaj czcionki)
Tahoma, Arial,Verdana, ‘Times New Roman’ , itd.
(wielowyrazowe nazwy czcionek w cudzysłowie!)
Uwaga : Czcionkami, które najlepiej prezentują się na stronie, są Tahoma, Arial lub Verdana, która została stworzona specjalnie na potrzeby WWW (czytelna nawet dla 7pt).
FONT-SIZE :
(określa rozmiar czcionki)
wartości bezwzględne :
xx pt
xx px
xx %
wartości względne :
xx-small
x-small
small
medium
large
x-large
xx-large
larger
smaller
FONT-WEIGHT :
(określa grubość czcionki)
wartości względne:
normal
medium
bold
bolder
lighter
wartości bezwzględne liczbowe:
100-900
FONT-VARIANT :
(sposób wyświetlania)
Normal
small-caps
FONT-STYLE :
(styl czcionki)
Normal
Italic
Oblique
TEXT – ALIGN :
(wyrównanie tekstu)
Right
Left
Center
Justify
TEXT – TRANSFORM :
(rodzaj liter)
None
Capitalize
Uppercase
Lowercase
TEXT – DECORATION :
(dekorowanie tekstu)
Underline
Overline
Line-through
Blink
None
TEXT – INDENT :
(wcięcie pierwszego wiersza tekstu)
Wielkość określona w jednostkach lub procentach
LINE-HEIGHT :
(odstęp między wierszami)
Normal
Wielkość określona w jednostkach lub procentach
VERTICAL-ALIGN :
(wyrównanie tekstu w pionie)
Baseline
Sub
Super
Top
Text-top
Middle
Bottom
Text-bottom
LETTER-SPACING :
(odstęp między literami)
Normal
Wielkość określona w jednostkach lub procentach.
COLOR :
(określa kolor tekstu)
Kod szesnastkowy (RGB) np.#FFFFFF
Ogólnie przyjęte nazwy np. „red”
DIRECTION :
(ustala kierunek tekstu)
ltr
rtl
WHITE-SPACE :
(odstepy i załamania wiersza)
Normal
Pre Nowrap
CSS-MARGINESY
MARGIN :
(wszystkie marginesy)
Wielkość określona w jednostkach lub procentach
MARGIN-TOP :
(górny margines)
Wielkość określona w jednostkach lub procentach
MARGIN-RIGHT :
(prawy margines)
Wielkość określona w jednostkach lub procentach
MARGIN-BOTTOM :
(dolny margines)
Wielkość określona w jednostkach lub procentach
MARGIN-LEFT :
lewy margines)
Wielkość określona w jednostkach lub procentach
CSS-OBRAMOWANIA
BORDER-STYLE :
(styl obramowania)
None
Solid
Dotted
Dashed
Double
Groove
Ridge
Inset
Outset
BORDER-COLOR :
(kolor obramowania)
Kod szesnastkowy (RGB) np.#FFFFFF Ogólnie przyjęte nazwy np. „red”
BORDER-WIDTH :
(grubość obramowania) Wielkość w px lub pt.
Thin
Medium
Thick
BORDER-LEFT (LUB RIGHT, TOP, BOTTOM) :
(okreslenie grubości konkretnego obramowania)
To co w BORDER-WIDTH
BORDER-LEFT (LUB RIGHT, TOP, BOTTOM)-COLOR :
To co w BORDER-COLOR
BORDER-LEFT (LUB RIGHT, TOP, BOTTOM)-STYLE :
(okreslenie stylu konkretnego obramowania)
To co w BORDER-STYLE
PADDING :
(wypełnienie, czyli odstęp pomiędzy obramowaniem elementu, a jego zawartością)
Auto
Wielkość określona w px, pt lub procntach
PADDING-TOP :
(odstęp górny)
Auto
Wielkość określona w px, pt lub procntach
PADDING-RIGHT :
(odstęp prawy)
Auto
Wielkość określona w px, pt lub procntach
PADDING-BOTTOM :
(odstęp dolny)
Auto
Wielkość określona w px, pt lub procntach
PADDING-LEFT :
(odstęp lewy)
Auto
Wielkość określona w px, pt lub procntach
CSS-TŁO
BACKGROUND-COLOR :
(określa kolor tła)
Kod szesnastkowy (RGB) np.#FFFFFF
Ogólnie przyjęte nazwy np. „red”
BACKGROUND-IMAGE :
(wstawia obrazk w tle)
Url(jakiś_plik.jpg) w nawias wpisujemy adres obrazka
BACKGROUND-ATTACHMENT :
(przytwierdzenie tła z obrazka)
Scroll tło przewija się wraz z tekstem
Fixed tekst będzie przewijał się nad tłem, ktore pełni tu role „znaku wodnego”
BACKGROUND-REPEAT :
(ustala czy i w jaki sposób obrazek ma się powtarzać)
Repeat pozwala na powtarzanie się obrazka jako tła (wartość domyślna)
No-repeat obrazek nie będzie powtarzany
Repeat-x obrazek powtarzany jest poziomo
Repeat-y obrazek powtarzany jest pionowo
BACKGROUND-POSITION :
(określa pozycję tła będącego obrazkiem)
top left top center
top right
center left
center center
center right
bottom left
bottom left
bottom center
bottom right x(px, pt lub %) y(px, pt lub %) odstęp od lewego górnego rogu dokumentu: x ustawia w poziomie, y w pionie
CSS-LISTY
LIST-STYLE-TYPE :
(określa rodzaj wypunktowania)
None
Disc
Circle
Square
Decimal
Decimal-leading-zero
Lower-roman
Upper-roman
Lower-alpha
Upper-alpha
Lower-greek
Lower-latin
Upper-latin
Hebrew
Armenian
Georgian
Cjk-ideographic
Hiragana
Katakana
Hiragana-iroha
Katakana-iroha
LIST-STYLE-IMAGE :
(za wypunktowanie możemy wstawić własne obrazki)
Url(jakiś_plik.jpg) w nawias wpisujemy adres obrazka
LIST-STYLE-POSITION :
(wcinanie tekstu)
Inside
Outside
MARKER-OFFSET :
(określa odległość między wypunktowaniem listy i tekstem w ramach listy)
Auto
Wielkość określona w px, pt.
CSS-POZYCJONOWANIE
POSITION :
właściwość tą wpisujemy na początku, aby określić sposób umiejscawiania elementu na stronie
Absolute
Relative
Static
LEFT :
(odleglość od lewej krawędzi)
Auto
Dowolna odległość (px, pt, %)
RIGHT :
(odległość od prawej krawędzi)
Auto
Dowolna odległość (px, pt, %)
TOP :
(odległość od górnej krawędzi)
Auto
Dowolna odległość (px, pt, %)
BOTTOM :
(odległość od dolnej krawędzi)
Auto
Dowolna odległość (px, pt, %)
VISIBILITY :
(określa czy element ma być widoczny na stronie)
Visible
Hidden
Inherit
Z-INDEX :
deklaruje kolejność warstw
liczba całkowita
CLIP :
(przycinanie)
Auto
Rect(a,b,c,d) wymiary
CSS-KURSOR
CURSOR :
Crosshair
Hand
E-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
w-resize
text
wait
help
default
CSS-LINKI
a:link
(wygląd odsyłacza na stronie)
{cecha : wartość; cecha:wartość}
a:visited
(wygląd linku odwiedzonego)
{cecha : wartość; cecha:wartość}
a:hover
(link po najechaniu myszką)
{cecha : wartość; cecha:wartość}
a:active
(link aktywny)
{cecha : wartość; cecha:wartość}
Uwaga : Należy przestrzegać tej kolejności ! Najpierw link, potem visited, hover i na końcu active. Poza tym selektor „a” nie może być oddzielony od pseudoklasy (a :link lub a: link ) – żle, (a:link ) – dobrze
JEDNOSTKI MIARY
MIARY ABSOLUTNE
in - cal(2.54mm)
cm
mm
pt -punkty drukarskie (1/72 cala)
pc - pika (12pt)
MIARY RELATYWNE
em - szerokość czcionki (małej literki m)
ex - szerokość czcionki (małej literki x)
%
procent