formatowanie tekstu

• text-align – poziome wyrównanie bloków tekstowych (p, hx, div, blockquote, pre, hr)
  • left
  • right
  • center
  • justyify
  • start – wyrównuje tekst do lewej strony
  • end – wyrównuje tekst do prawej strony

 

• vertical-align – pionowe wyrównanie elementu w komórce tabeli lub wewnątrz innego elementu / dla img przy dostosowywaniu do tekstu – vertical-align: middle;
  • top
  • middle
  • bottom
  • sub – index dolny
  • sup – index górny

 

• text-indent – wcięcie tekstu, przyjmuje wartości dodanie i ujemne
• letter-spacing – odstęp pomiędzy literami (1cm, 10px), ustawienia domyślne – letter-spacing:normal
• word-spacing – odstępy między wyrazami, ustawienia domyślne – word-spacing:normal
• line-height – odstęp między liniami, wielkości % są ustalane względem wielkości czcionki (font-size=14px, line-height=200% to 28px), ustawienia domyślne – line-height:normal
• word-wrap – łamanie ciągu znaków
  • break-word

 

• text-decoration
  • none
  • underline – podkreślenie
  • overline – nadkreślenie
  • line-through – przekreślenie
  • blink – miganie

 

• text-transform – przekształcenie tekstu
  • uppercase – duże litery
  • lowercase – małe litery
  • capitalize – pierwsza litera każdego słowa Duża
  • none

 

• white-space – kontrola spacji
  • normal – przeglądarka pomija dodatkowe spacje
  • pre – wyświetla wszystkie dodatkowe spacje
  • nowrap – blokowanie automatycznego łamania wierszy aż do napotkania <br />
  • pre-wrap – zachowanie wszystkich dodatkowych spacji, łamanie wiersza wtedy kiedy jest potrzebne
  • pre-line – ignorowanie dodatkowych spacji, łamanie wiersza wtedy kiedy jest potrzebne

 

• text-shadow – dodanie cienia pod tekstem text-shadow:3px 3px 2px  rgba(150, 150, 150, 1);
  • odległość cienia w osi x
  • odległość cienia w osi y
  • wartość rozmycia
  • kolor i przeźroczystość
  • generator text-shadow

 

• hyphens

 

Właściwości czcionek

• font-family: helvetica, arial, sans-serif; rodzaje czcionek:
  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

 

• font: czcionki systemowe:
  • font:caption
  • font:icon
  • font:menu
  • font:message-box
  • font:small-caption
  • font:menu-bar

 

• font-size: wielkości absolutne czcionek, zależność między poszczególnymi wielkościami są określane przez współczynnik który wynosi 1.5 jeśli liczymy do góry lub 0.66 jeśli liczymy w dół
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller – wartość relatywna względem domyślnego tekstu
  • larger – wartość relatywna względem domyślnego tekstu

 

• font-weight: waga czcionki, konkretna wartość lub relacja do domyślnego stanu
  • normal
  • bold
  • 100
  • 200
  • …
  • 900
  • bolder
  • lighter

 

• font-style – tekst pochyły, odmienne wartości bardziej rozróżniane w DTP
  • normal
  • italic – tekst pochyły
  • oblique – tekst pochyły

 

• font-variant – tekst pisany kapitalikami
  • normal
  • small-caps

 

 

Formatowanie tekstu jednoliniowego, dłuższego od bloku w którym się znajduje:

 

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

span {
display: block;
}

 

Formatowanie cytatów z dodaniem obrazka :

blockquote {
  position: relative;

  &::before {
    background-image: url("pic/quote.png");
    background-repeat: no-repeat;
    background-size: 32px 32px;
    content: "";
    height: 32px;
    width: 32px;
    display: block;
    position: absolute;
    left: -42px;
    top: 0;
  }
}

–

Pierwszy akapit leada wyróżniony poprzez: p:first-of-type {//style}

 

Zbiorczy zapis bez rozdzielania wartości, oprócz pomiędzy wielkością czcionki a odstępem między liniami znakiem /

font: font-style font-variant font-weight font-size line-height font-family

h1{
 font:italic small-caps 300 16px/2 helvetica;
}