Treść: akapity, bloki tekstu

Pomoc
Treść: akapity, bloki tekstu
Teksty obejmowane są w Joomla! standardowymi elementami HTML: div i p. Arkusz stylów powinien precyzować
sposób ich formatowania.
Style dla innych elementów HTML oraz stosowane w Joomla! style dodatkowych informacji (data utworzenia, autor, itp.)
omówiamy w kolejnych sekcjach.
Ogólne własności tekstu
Od kiedy przeglądarki IE i Netscape pozwalają na określanie wyglądu tekstu w arkuszach CSS (od wersji 4.x), nie ma
potrzeby stosowania nadużywanego wcześniej, a obecnie wycofywanego znacznika font.
Korzyść jest co najmniej podwójna. Po pierwsze znacznie zmniejsza ilość kodu, a po drugie zapewnia spójność i
jednolitość formatowania tekstu w całej witrynie, o ile - oczywiście - administratorzy nie udostępnią uzytkownikom
dodatkowych możliwości formatowania czcionki, oferowanej w edytorach typu WYSIWYG. Okiełznanie tendencji
zwłaszcza przygodnych autorów do ozdaniania&#8217 tekstu może być trudne.
CSS pozwala panować nad wszystkimi aspektami wyglądu tekstu - doborem rodziny czcionek, ich wagą, wielkością,
postacią (normalna i pochyła) i wariantami (normalna lub kapitaliki), szerokością (zwarte, rozszerzone - właściwość
nieobsługiwana przez popularne przeglądarki) wysokości linii. Szczegóły można znaleźć w rozlicznych podręczni
CSS.Własności podstawowe globalnie
Podstawowe własności tekstu najlepiej ustalić globalnie, dla wszystkich elementów treści w deklaracji reguł dla elementu
body, a następnie modyfikować je w regułach dla konkretnych elementów.
Dobór rodziny czcionek zależy od koncepcji graficznej. Pamiętać wszakże należy, że przeglądarki korzystają
czcionek zainstalowanych w komputerach użytkowników, odmiennych w systemach Windows, MacOS, Unix i Linux.
Uwzględniając tę okoliczność, należy określić w arkuszu alternatywne rodziny czcionek i rodzinę ogólną, z k
przeglądarka skorzysta w przypadku, gdy żadna z zaplanowanych czcionek będzie niedostępna.
Rozmiar czcionki najlepiej określać w procentach i jednostkach em lub ex. Unikać należy stosowania punktów i pic jednostki te doskonale sprawdzają się w drukarstwie, ale ponieważ komputery nie potrafią precyzyjnie ustalać
rzeczywistej wielkości elementów na ekranie, jednostki te w arkuszach stylów są mało przydatne.
Rozwiązaniem szczególnie wartym polecenia jest zastosowanie w deklaracji dla elementu body rozmiaru czcionki w
procentach (76.1%), a dla konkretnych elementów w emach. Takie ustawienie zapewnia, że w dużej grupie
przeglądarek uzyskamy zbliżony efekt, o czym można się łatwo przekonać, na podstawie eksperymentów, które
przeprowadził swego czasu
Owen Briggs, opisanym w artykule Sane CSS Sizes (Sensowne wielkości w CSS). Metoda zalecana przez Briggsa
posiada jedną wadę - zakłada ona 16-pikselową domyślną wielkość tekstu w przeglądarkach. Jeśli użytkow
domyślną wielkość, czego przecież wykluczyć nie można, faktyczny rozmiar czcionek będzie inny niż określon
arkuszu stylów. Ale ma też i niebagatelną zaletę. Czcionki z tak określonym rozmiarem będą się skalować we
przeglÄ…darkach.
Przykład reguł formatujących własności czcionki i teksty w stylu elementu body:
body {
margin
: 0; /* zeruje marginesy wszystkim elementom */
padding
: 0; /* zeruje odstępy wszystkim elementom */
font
: normal 76.1% Arial, Verdana, Helvetica, sans-serif;
line-height : 1.2; /* ustala wysokość linii */
}
W przykładzie powyżej wszystkim elementom został nadany zerowy margines i zerowe dopełnienie. Pozbywamy się
dzięki temu domyślnych ustawień przeglądarek. Ten dość powszechnie stosowany zabieg pozwala uniknąć niespo
kłopotów związanych z domyślnymi wartościami tych własności w różnych przeglądarkach. Wymaga jednak usta
w dalszej części arkusza stylów każdemu elementowi marginesów i dopełnień.
Zwróć również uwagę, że dla własności line-height nie została określona jednostka. W takim przypadku podana
wartość liczbowa jest współczynnikiem uzależniającym wysokość linii od rozmiaru czcionki. Gdybyśmy zastosowali
konretną jednostkę, co można uczynić, wysokość linii byłaby ustalana bez względu na rozmiar czcionki. Tekst w
elementach div
Globalne określenie podstawowych własności czcionki i tekstu w regułach dla body spowoduje, że teksty objęte
znacznikami div, a także teksty nieobjęte żadnymi znacznikami przyjmą cechy ookreślone w regułach dla body.
http://www.pomoc.joomla.pl
Kreator PDF
Utworzono 7 March, 2017, 20:48
Pomoc
W efekcie nie musimy tworzyć odrębnego stylu dla tekstów objętych elementami div, zapewniając sobie, że dopóki
zmodyfikujemy tego ustawienia w regule ustanowionej selektorem klasy lub identyfikatora, tekst będzie wyświetlany
zgodnie z ustawieniami dla body.
Styl akapitu
Warto natomiast ustalić styl dla akapitów, szczególnie jedną z własości - odstępy między akapitami. Oczywiście w
gdy zdecydujemy się na ten powszechnie stosowany sposób wyróżniania akapitów:
Przykład reguły dla elementu p:
p{
margin: .84em 0; /* ustala między akapitami margines dolny i górny */
}
Arkusz stylów może również zawierać style akapitów o specjalnym przeznaczeniu, np. wyróżniajacych uwagi,
ciekawostki, ważne informacje. Oto kilka przykładów:
Przykłady reguł dla akapitów o różnych funkcjach:
p.note {
margin-left:1em;
color: blue; /* wyróżni uwagi kolorem czcionki */
}
p.warning {
padding: 3em 1em 1.25em 3em;
background: url(../images/warning.gif) no-repeat top left #fafadd;
border-bottom: 1px solid #ff0000;
}
p.tip {
margin-left:1em;
padding: 3em 1em 1.25em 3em;
background: url(../images/tip.png) no-repeat top right #fff;
text-align: justify;
}
http://www.pomoc.joomla.pl
Kreator PDF
Utworzono 7 March, 2017, 20:48