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

 

 

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;
}

#css#font