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 |