• Selektory - wstęp
• Css - tło
• Css - czcionka
• Css - tekst
• Css - bloki
• Css - listy
• Css - Cienie

Selektory css - Własności bloków

Jeśli poniższe selektory mają dodatek typu: left, right, top, bottom, dotyczy to:

• ... -top — góry
• ... -right — prawej strony
• ... -bottom — dołu
• ... -left — lewej strony

_  top, left, bottom, right

• Wartość: length | percentage | auto | inherit
• Wartość początkowa: auto
• Używany z: wszystkie niestatyczne elementy
• Dziedziczenie: nie

Jeśli w selektorze (bez dodatków) podamy:

• jedną wartość — dotyczy to wszystkich stron (góra, prawa, lewa, dół),
• dwie wartości — pierwsza dotyczy pionu (góra, dół), a druga poziomu (lewej i prawej)
• cztery wartości — dotyczą one kolejno: góry, prawej, dołu, lewej.

Margines  margin ❁❁❁ margin-top

• margin - Określa rozmiar marginesu.
• Wartości procentowe - zależne od szerokości elementu nadrzędnego
• Wartość: length | percentage | auto | inherit
• Wartość początkowa: 0
• Używany z: wszystkie elementy
• Dziedziczenie: tak
• Przykład:

Odstęp wewnętrzny  padding ❁❁❁ padding-right

• Polecenie to pozwala zdefiniować dodatkowy wewnętrzny odstęp pomiędzy elementami, np. tekstem i obramowaniem tabeli.
• Wartość: length | percentage | inherit
• Wartość początkowa: 0
• Używany z: wszystkie elementy
• Dziedziczenie: nie
• Przykład:

Szerokość obramowania  border-width ❁❁❁ border-left-width

• Pozwala zdefiniować szerokość dowolnego brzegu obramowania. Jako "szerokość" należy podać:
  • thin - cienkie obramowanie
  • medium - średnie obramowanie
  • thick - grube obramowanie
  • konkretną wartość w jednostkach długości
• Wartość: thin | medium | thick | length | inherit
• Wartość początkowa: medium
• Używany z: wszystkie elementy
• Dziedziczenie: nie
• Przykład:

Kolor obramowania  border-color

• Własność określa kolor czterech części obramowania.
• Wartość: color, color, color, color | inherit
• Wartość początkowa:
• Używany z: wszystkie elementy
• Dziedziczenie: nie
• Przykład:

Styl obramowania  border-style ❁❁❁ border-bottom-style

• wprowadza styl obramowania elementu
• Wartość: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
• Wartość początkowa: none
• Używany z: wszystkie elementy
• Dziedziczenie: nie
• Przykład:

Obramowanie  border ❁❁❁ border-left

• Określa wygląd obramowania z konkretnej strony.
  
• Własność border jest skrótem dla ustaleń dotyczących szerokości, koloru i stylu wszystkich czterech obramowań elementu.
• Wartość: border-xxx-width || border-style || color
• Używany z: wszystkie elementy
• Dziedziczenie: nie
• Przykład:

Szerokość  width, min-width, max-width

• width Ustala szerokość elementu, skalując go w razie potrzeby.
• min-width Określa dozwolone minimum szerokości dla elementu.
• max-width Określa dozwolone maksimum szerokości dla elementu.
• Wartości procentowe zależne od szerokości elementu nadrzędnego.
• Wartość: length | percentage | auto | inherit
• Używany z: elementy blokowe, elementy nietabelaryczne
• Dziedziczenie: nie

Wysokość  height, min-height, max-height

• height Określa wysokość elementu.
• min-height Określa minimalną dozwoloną wysokość elementu.
• max-height Określa maksymalną dozwoloną wysokość elementu.
• Wartości procentowe zależne od wysokości elementu nadrzędnego.
• Wartość: length | auto | inherit
length | inherit | length | percentage | none | inherit
• Wartość początkowa: auto | none
• Używany z: elementy blokowe, elementy nietabelaryczne
• Dziedziczenie: nie

Przesunięcie  float

• Przesuwa element w jednym kierunku, oblewając go tekstem.
• Wartość: none | left | right | inherit
• Wartość początkowa: none
• Używany z: wszystkie elementy
• Dziedziczenie: nie
• Przykład:

Zapis	Wygląd
img { float: left;}	Ten tekst jest tylko po to, aby pokazać, że obrazek wyrównany do strony lewej jest oblany tekstem. I chyba to się udało.

  clear

• Własność wylicza boki, gdzie elementy opływające nie są dozwolone.
• Wartość: none | left | right | both | inherit
• Wartość początkowa: none
• Używany z: wszystkie elementy
• Dziedziczenie: nie

Pozycja  position

• Wartością jest jedna z listy:
  • static : Wartość normalna. left i top są ignorowane.
  • relative : Obiekt jest przesuwany ze swojej normalnej pozycji, a inne obiekty są wyświetlane tak, jak gdyby nie był przesunięty.
  • absolute : Pozycja i wielkość obiektu jest zdeterminowana przez własności left, right, top, i bottom, które są określone w odniesieniu do obiektu, w którym element jest zawarty.
  • fixed : Tak samo jak absolute, ale element jest umocowywany w odniesieniu do elementu z którego jest przywoływany. Na ekranie element nie porusza się przy przewijaniu. W mediach stronicowych jest umocowany w odniesieniu do strony.
• Wartość: static | relative | absolute | fixed | inherit
• Wartość początkowa: static
• Używany z: wszystkie zwykłe elementy
• Dziedziczenie: nie

Odstęp pomiędzy liniami  line-height

• Styl definiuje odstęp pomiędzy liniami. Stosowany może być nie tylko do tekstu, ale w odniesieniu do dowolnego elementu.
• Wartość: normal | number | length | percentage | inherit
• Wartość początkowa: normal
• Używany z: wszystkie elementy
• Dziedziczenie: tak

Wyrównanie w pionie  vertical-align

• Niektóre ze specjalnych wartości obejmują:
  • baseline : wyrównuje linię bazową elementu z linią bazową rodzica
  • sub, super : tworzy subskrypty i superskrypty
  • text-top, text-bottom: wyrównuje górę/dół elementu z górą/dołem jego rodzica
  • percentage, length: wartość dodatnia podnosi element o podaną odległość
• Wartość: baseline | sub | super | top | text-top | middle | botom | text-bottom | length | percentage | inherit
• Wartość początkowa: baseline
• Używany z: elementy inline i komórki tabeli
• Dziedziczenie: nie
• Przykład: