Style CSS i ich osadzenie w dokumencie HTML

Sposoby osadzenia stylów CSS w dokumentcie HTML:

Umieszczenie stylu w samym dokumencie HTML - nieefektywna, ponieważ nie pozwala kompleksowo zmieniać wyglądu wszystkich dokumentów

Umieszczenie stylów w poszczególnych znacznikach

Użycie odnośnika w sekcji HEAD dokumentu - zalecana metoda

Polecenia stylów css:

1. Display - rzadko stosowane w HTML ale odgrywa istotną rolę w XML. W połączeniu z wartościami np. block, inline, none umożliwia uporządkowane wyświetlanie informacji - ważne dla informacji o charakterze bazodanowym

Przykład:

<h1 style="display:inline”>Tytuł</h1>
<p style="display:inline”>Akapit</p>


2. Position – umożliwia pozycjonowanie wyświetlanych elementów np. polecenie position:relative pozwala przesunąć o określona odległość od domyślnego położenia np. lewego, prawego, górnego, dolnego

Przykład:

position:relative;
left:100px;


3. Width – pozwala określić szerokość poszczególnych rekordów, co jest bardzo przydatne gdy nie chcemy aby treść zajmowała całą szerokość

Przykład:

width:500px;


4. Height – pozwala określić wysokość poszczególnych rekordów

Przykład:

height: 400px;

5. Border – wyświetla obramowanie, które można dodatkowo zmienić określając typ np. dotted, solid, dashed oraz grubość

Przykład:

border:dotted 2px;


6. Pudding – wprowadzenie dodatkowego odstępu między obramowaniem a wartością rekordu. Widoczne szczególnie wtedy gdy zastosujemy obramowanie

Przykład:

padding:20px;


7. Margin – wprowadzenie dodatkowego odstępu na zewnątrz obramowania, dzięki temu można oddzielić od siebie rekordy

Przykład:

margin:20px;


8. Color – wprowadza kolor tekstu, całego rekordu lub wybranych pól

Przykład:

color:blue;


9. Background – wprowadzenie koloru tła, całego rekordu lub wybranych pól

Przykład:

background:yellow;


10. Font – Pozwala na zmianę typu czcionki np. verdana, Arial, hevetica oraz wielkości np. 18px

Przykład:

font-family: Arial;
font-size: 14px;