czcionki - Kurs HTML i CSS
HTML dla zielonych / Wielkość czcionki HTML <span "font-size">...xx-large">Czcionka o rozmiarze xx-large</span> Czcionka o rozmiarze xx-large Pytania i odpowiedzi <span "font-size"> Jak zmienić rozmiar czcionki HTML? W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="font-size: xx-small">...</span> (najmniejsza czcionka), <span style="font-size: x-small">...</span> (bardzo mała czcionka), <span style="font-size: small">...</span> (mała czcionka), <span style="font-size: medium">...</span>...
Czcionki CSS / Wariant liczb czcionki {font-variant-numeric}...dlatego łatwiej jest wpisać po prostu: 1/2, a następnie przekształcić tekst w taki sposób, aby wyglądał jak ułamek. Pozwala na to wariant czcionki: diagonal-fractions. Innym typowym zastosowaniem liczb w tekście są różnorodne zestawienia tabelaryczne. W celach estetycznych, ale również dla wygody czytania zwykle zależy nam, aby liczby występujące w tej samej kolumnie tabeli były ze sobą wyrównane. Można to uzyskać za pomocą czcionki monotypicznej, ale jej wygląd nie zawsze musi...
- Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
...Dzięki użyciu zapytań właściwości poniższy arkusz stylów zostanie zastosowany tylko w przeglądarkach obsługujących wariant pozycji czcionki. W pozostałych przypadkach po wstawieniu w tekście indeksu dolnego lub górnego wysokość linii co prawda się powiększy, ale przynajmniej wygląd indeksów nie będzie popsuty: @supports (font-variant-position: sub) { sub { vertical-align: baseline; font-size: 100%; line-height: inherit; font-variant-position: sub; } } @supports...
- HTML dla zielonych / Kolor czcionki HTML <span "color">
...na ekranie przeglądarki otrzymamy: Ten tekst został napisany czcionką koloru czerwonego Pytania i odpowiedzi <span "color"> Jak zmienić kolor czcionki w HTML? W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="color: black">...</span> (czarny), <span style="color: white">...</span> (biały), <span style="color: silver">...</span> (srebrny), <span style="color: gray">...</span> (szary), <span style="color: maroon">...</span>...
- Czcionki CSS / Rozciągnięcie czcionki {font-stretch}
...semi-expanded expanded - rozciągnięta extra-expanded ultra-expanded - najbardziej rozciągnięta Polecenie pozwala ustalić poziome rozciągnięcie czcionki na ekranie. Tekst rozciągnięty będzie zajmował więcej miejsca w linii, natomiast ściśnięty - mniej. UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1 Przykład {font-stretch} rozciągnięcie ultra-condensed rozciągnięcie extra-condensed rozciągnięcie condensed rozciągnięcie semi-condensed rozciągnięcie normal rozciągnięcie...
- Czcionki CSS / Wariant połączenia znaków czcionki {font-variant-ligatures}
...lub wyłącza standardowe ligatury discretionary-ligatures albo no-discretionary-ligatures - włącza lub wyłącza ligatury specyficzne dla określonej czcionki historical-ligatures albo no-historical-ligatures - włącza lub wyłącza historyczne ligatury, które występowały np. w zabytkowych, ręcznie kaligrafowanych książkach contextual albo no-contextual - włącza lub wyłącza kontekstowe ligatury, dzięki którym kształt znaków może się nieco zmienić w zależności z jakimi literami sąsiadują...
- Czcionki CSS / Odległość między znakami czcionki {font-kerning}
(CSS 3 - interpretuje: Firefox 34, Opera 20, Chrome 33) selektor { font-kerning: tryb } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "tryb" należy wpisać: auto - przeglądarka sama zdecyduje, jaki tryb zastosować (domyślnie) - np. aby poprawić czytelność, może wyłączyć kerning dla małego tekstu normal - wymuszenie kerningu none - zablokowanie kerningu Aby tekst wyglądał...
- Czcionki CSS / Wariant wielkości liter czcionki {font-variant-caps}
(CSS 3 - interpretuje Firefox 34, Opera 39, Chrome 52) selektor { font-variant-caps: wariant } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "wariant" należy wpisać: normal - czcionka normalna (podstawowa) small-caps - kapitaliki, czyli tekst napisany wielkimi literami, lecz czcionką o wysokości zbliżonej np. do małej litery "x" all-small-caps - kapitaliki zastosowane do...
- Jednostki CSS / Długość
Spis treści Wstęp Jednostki względne Jednostki względne czcionki Jednostki procentowe obszaru wyświetlania Jednostki bezwzględne Porównanie jednostek długości Wstęp Jednostki długości stosuje się w bardzo wielu poleceniach dotyczących stylów, np. wielkość czcionki, marginesów czy rozmiary elementów itd. Format wartości długości składa się z opcjonalnego znaku liczby ("+" - domyślny lub "-"), liczby całkowitej lub rzeczywistej oraz jednostki. Po wartości długości 0 jednostka jest...
- Menu w CSS / Poziome menu
...się poniżej Wady: Brak możliwości ustalenia jednakowej szerokości pozycji listy Odstępy między odnośnikami zależą od rodzaju i rozmiaru czcionki, a przy tym nie mogą być mniejsze niż szerokość jednej spacji Ustawiając wyświetlanie w bloku (block) oraz oblewanie (float) dla pozycji listy: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { float: left; } Efekt: Czcionki Tekst Tło Marginesy Obramowanie W tym przypadku blokada zawijania...