Formatowanie czcionek:

Selektory języka CSS 2
parametr
font-family:
wartość/jednostka
arial, tahoma, verdana,
serif, sans-serif, …
font-size:
px, pc, pt, mm, cm, in, em, %
font-style:
normal, oblique, italic
font-weight:
normal, bold,
font-stretch:
normal | wider | narrower |
ultra-condensed | extracondensed | condensed | semicondensed | semi-expanded |
expanded | extra-expanded |
ultra-expanded |
color:
np.: blue, red, #00FF00,...
font: 'font-style' 'font-variant' 'font-weight' ?
'font-size' / 'line-height' ? 'font-family'
letter-spacing:
word-spacing:
line-height:
text-decoration:
text-indent:
text-transform:
text-shadow:
text-align:
vertical-align:
px,pc,pt,mm,cm,in,%
px,pc,pt,mm,cm,in,%
px, np.: 0.5 , 1.2 ...
none, underline, overline,
line-through
px,pc,pt,mm,cm,in
capitalize, uppercase,
lowercase, none
poziom pion /rozmycie/ kolor,
(inna opcja) | np.: 6px 3px
2px red;
left, right, center, justify
top, middle, bottom
zastosowanie
definiuje rodzinę krojów czcionek
rozmiar czcionki
styl kroju czcionki
grubość czcionki
Rozciągnięcie tekstu w poziomie
kolor czcionki
Formatowanie kompleksowe tekstu – dla
zaawansowanych ! (przykład -> font: italic bold
12pt /1cm Tahoma, Verdana, Sans-serif')
odstępy między literami
odstępy między słowami
odległość kolejnej linii względem poprzedniej
dodatkowe efekty czcionki – podkreślenie,
przekreślenie
wcięcie pierwszej lini akapitu
zamiana wielkości liter tekstu*
cień rzucany przez tekst - wszystkie wartości
podajemy z jednostką długości po przecinku można
zdefiniować kolejny cień.
ułożenie bloku tekstu w poziomie
ułożenie pionowe tekstu w linii*
Formatowanie obszaru strony: (np. znaczniki: <DIV> <P> <SPAN>)
parametr
width:
height:
background:
border-width:
border-style:
wartość/jednostka
px,pc,pt,mm,cm,in,%
px,pc,pt,mm,cm,in,%
red, #FF0000,...
px,pc,pt,mm,cm,in
none, dotted, dashed, solid,
zastosowanie
szerokość obiektu
wysokość obiektu
kolor tła obiektu
szerokość obramowania
styl rysowania obramowania
Strona |
1
border-color:
border:
np.: border-top:
parametr
double, groove, ridge, inset,
outset
kolor obramowania
red, #FF0000,...
formatowanie linii obramowania kompleksowo
Double 4px blue;
Formatowanie wybranej linii
-||-
margin-top:
margin-left:
margin-right:
margin-bottom:
wartość/jednostka
%, px, pc, pt, mm ,cm, in,...
-||-||-||-||-
padding:
%, px, pc, pt, mm ,cm, in,... wewnętrzny margines w obiekcie (np.: DIV, SPAN)
padding-top, left, itd.
patrz margin
kolor
scrolling, fixed
nazwa lub RGB
url(nazwa.gif)
0% 0%, 20px 40px, top left,..
margin:
background:
background-attachment:
background-color:
background-image:
background-position:
background-repeat:
display:
visibility:
float:
clear:
min-height:
min-width:
max-height:
max-width:
overflow:
overflow-x:
overflow-y:
cursor:
zastosowanie
równomierna szerokość wszystkich marginesów
szer. górnego marginesu
szer. lewego marginesu
szer. prawego marginesu
szer. dolnego marginesu
zawartość tła obiektu (np.: strony)
blokowanie wyświetlanego tła – tylko obrazki
kolor tła
obrazek jako tło strony
pozycja obrazka (tła) na stronie – parametry
lewego górnego rogu obiektu (2 parametry !)
sposób powtarzania tła na stronie: normalnie, w
repeat, repeat-x, repeat-y,
poziomie, w pionie, brak powtarzania
no-repeat
none, block
Ukrywa lub wyświetla dany element
hidden, visible
j.w. ale rezerwuje miejsce na stronie dla elementu
left / right / none
Włącza oblewanie obiektu tekstem lub innymi elem.
both / left / right
Przerywa oblewanie obiektu–przechodzi do nast. linii
Ustala minimalną,przekraczalną wysokość elementu
%, px, pc, pt, mm ,cm,…
Ustala minimalną,przekraczalną szerokość elementu
%, px, pc, pt, mm ,cm,…
Ustala maksymalną,przekraczalną wysokość elementu
%, px, pc, pt, mm ,cm,…
Ustala maksymalną,przekraczalną szerokość elementu
%, px, pc, pt, mm ,cm,…
ukrywa paski suwaków bez względu na konsekwencje
hidden /scroll/visible/auto
ukrywa poziomy pasek sywaka
hidden / auto
ukrywa pionowy pasek sywaka
hidden / auto
crosshair, pionter, move, eresize, n-resize, s-resize,
w-resize, ne-resize, nwresize, se-resize, sw-resize,
text, wait, help, default =
auto
,
,
Strona |
2
parametr
Hiperłącza:pseudoklasy
A
A:link
A:active
A:visited
A:hover
position:
top:
left:
z-index:
filter:
filter:alpha()
opacity:
wartość/jednostka
definicja elementów
-||-||-||-||absolute, relative, fixed,
static
px, pt, mm ,cm, center, itp.
px, pt, mm ,cm, center, itp.
...,-2,-1,0,1,2,...
wybór typu filtra w przegl:
IE
(opacity=x)lub (opacity=x,
styl=0/1/2/3,
finishopacity=x,
startx , starty,
finishx , finishy )
0 – 100 (np.: 60)
zastosowanie
wszystkie hiperłącza na stronie
linki niekliknięte (opcjonalnie)
linki aktywne (opcjonalnie)
linki odwiedzone (opcjonalnie)
linki po wskazaniu kursorem myszki (opcjonalnie)
pozycjonowanie elementów na stronie (niezależne
/ zależne / stałe / reset pozycjonowania )
odległość elem. od górnej krawędzi (np. strony)
odległość elem. od lewej krawędzi (np. strony)
kolejność elementów na warstwach
filtr graficzny do obrazów i/lub tekstu
przezroczystość / x = od 0 do 100,
styl przezroczystości od 0 do 3,
przezroczystość końcowa,
współrzędne początku przezroczystości,
współrzędne końca przezroczystości.
border-radius:
-webkit-border-radius:
-khtml-border-radius:
-moz-border-radius:
Wartość w px lub mm
filtr graficzny do obrazów i/lub tekstu – inny
niż w przeglądarce IE
Powoduje zaokrąglenie rogów elementu (stosować
wszystkie elementy podane po lewej dla zgodności
różnych przeglądarek)
np.: border-top-leftradius: 40px;
white-space:
Pseudo klasy:
:first-line
:first-letter
:before | :after
:focus
:first-child
-||-
Formatowanie zaokrąglenia wybranego narożnika
normal, pre, nowrap
Ustawienie niewidzialnych znaków tekstu
Dowolne wartości
-||Np. P:before{content:"opis";}
Tylko w elementach formularza
Dowolne elementy
Formatowanie pierwszej linii akapitu
Formatowanie pierwszej litery akapitu
Dodaje wartość content przed lub po elemencie
Zmienia zawartość elementu formularza
Zmiania pierwszy element listy LI:first-child
Strona |
3