Przedstawiam kilkanaście wybranych cech i ich wartości do wykorzystania podczas tworzenia arkusza CSS.

Rozpoczynamy od omówienia problemu tzw. jednostek długości stosowanych w bardzo wielu poleceniach dotyczących stylów, np. wielkość czcionki, marginesów czy rozmiary elementów itd.
Są dwa typy jednostek długości: względne (relatywne) i bezwzględne (absolutne). Jednostki względne podają długość w odniesieniu do innego rozmiaru.

Jednostki względne:
* em - wysokość aktualnej czcionki
* ex - wysokość litery "x", czyli małej litery (w aktualnej czcionce)
* px - piksele ekranowe (są uzależnione od urządzenia wyświetlającego)

Jednostki bezwzględne:
* in - cale (1in = 2.54cm)
* cm - centymetry
* mm - milimetry
* pt - punkty (1pt = 1/72in)
* pc - pika (1pc = 12pt)

Właściwości tła i koloru

Kolor

Właściwość color pozwala na sprecyzowanie koloru elementu. Typowa deklaracja wygląda następująco:

h1 { color: blue; } lub h1 { color: #000080; } lub h1 { color: #0c0; }

Kolor tła

Właściwość background-color pozwala na sprecyzowanie koloru tła danego elementu.
Typowa deklaracja wygląda następująco:
body { background-color: white; }
h1 { background-color: #000080; }

Obraz tła

Właściwość background-image pozwala na sprecyzowanie obrazu tła danego elementu.

Typowa deklaracja wygląda następująco:
body {background-image: url(/images/foo.gif);}
p {background-image: url(/images/bg.png);}

Kiedy określa się obraz tła, dobrze jest również sprecyzować kolor tła dla użytkowników, których przeglądarki są ustawione na blokowanie obrazów.

Powtórzenie obrazu tła

Właściwość background-repeat pozwala na sprecyzowanie jak obraz tła danego elementu powinien się powtarzać. Wartość repeat-x będzie powtarzać obraz w poziomie. Wartość repeat-y powtarza obraz w pionie.

Typowa deklaracja wygląda następująco:
body {background: white url(candybar.gif);
background-repeat: repeat-x;}

Właściwości czcionki

Rodzina czcionek

Typowa deklaracja font-family wygląda następująco:
p {font-family: “New Century Schoolbook”, Times, serif }

Po dwukropku można wpisać nazwę czcionki lub rodziny czcionek. Proszę zwrócić uwagę na sposób wpisania nazwy składającej się z wielu wyrazów.Wymienianie kilku czcionek ma sens, bo w przypadku, gdy brakuje pierwszej na liście wybierana jest druga i kolejne. Rodziny czcionek to: serif (np.:Times), sans-serif (np: Arial or Helvetica), cursive (np.: Zapf-Chancery),fantasy (np.:Western), monospace (np.: Courier). W naszym przykładzie najpierw zadeklarowano konkretne dwie czcionki, a na końcu dowolną z rodziny czcionek szeryfowych.

Styl czcionek

Deklaracja stosowana najczęściej do pochylenia czcionki.

Typowa deklaracja font-style wygląda następująco:
p {font-style: italic}

normal - czcionka normalna, italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique), oblique - również czcionka pochylona (podobna jak poprzednio). Różnica między nimi polega na tym, że czcionka italic faktycznie jest osobnym krojem, natomiast oblique może zostać wygenerowana przez pochylenie zwykłej czcionki.

Waga czcionek

Deklaracja stosowana najczęściej do pogrubienia czcionki.

Typowa deklaracja wygląda następująco:
h1 {font-weight: bold}

Rozmiar czcionek
Deklaracja stosowana do ustalenia wielkości czcionki.

np. p {font-size: 12pt}

Właściwości tekstu

Przestrzeń między słowami

word-spacing: wartość
np. p {word-spacing: 0.4em}

Przestrzeń między literami

letter-spacing: wartość
np. h1 letter-spacing: 0.1em}

Dekoracja tekstu

Najczęściej stosowana do podkreślenia tekstu lub odwołania podkreślenia wtedy wartość: none

text-decoration: wartość
np. h2 {text-decoration: underline}

Transformacja tekstu

text-transform: wartość

* capitalize (pierwsza litera wielka)
* uppercase (wszystkie litery wielkie)
* lowercase (wszystkie litery małe)
* none (bez zmian)
np. h1 {text-transform: uppercase;}

Wyrównanie tekstu

text-align: wartość
left, right, center,justify
np. h1 {text-align: center}

Właściwości klasyfikacji

List Style Type

list-style-type: wartość
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none

np. ul {list-style-type: circle}


List Style Image

list-style-image: wartość
ul li.obraz {list-style-image: url(x.png)}

html how 2

HTML

 

w3s

colorpicker

Walidator HTML oraz CSS

© 2021 classroom.pl All Rights Reserved.
DMC Firewall is a Joomla Security extension!