Dotyczy wersji 2022.1.3 i powyżej, autor: Krystyna Gawryał
Wprowadzenie
Szeroki zakres atrybutów i funkcjonalności, jaki oferuj-e WEBCON BPS, umożliwia tworzenie formularzy, raportów itd. nie tylko dostosowanych do preferencji użytkownika, ale także zróżnicowanych pod względem estetycznym. Jeżeli jednak użytkownik chciałby jeszcze bardziej wyróżnić informacje zawarte na elementach obiegu czy też wyszczególnić określone pozycje na formularzu, podkreślając ich nadrzędne znaczenie, to z pomocą może przyjść mu opcja definiowania stylu atrybutów i kontrolek.
Niniejszy artykuł przedstawia sposoby definiowania niestandardowego wyglądu tekstu na formularzach z wykorzystaniem kaskadowych arkuszy stylów (CSS). Omawianymi parametrami są: koloru tekstu i tła, rozmiar czcionki, waga i stylizacja czcionki oraz wyrównania tekstu.
Artykuł opracowano w oparciu o informacje dostępne na stronie: CSS: Cascading Style Sheets | MDN (mozilla.org).
Rozwiązanie dynamiczne vs. rozwiązanie statyczne
Przed przystąpieniem do konfiguracji stylu atrybutów/kontrolek warto zastanowić się, jakie faktycznie są nasze potrzeby względem formularza. Jeśli użytkownik chce, aby wygląd formularza był dynamiczny i responsywny, tj. zmieniał się w zależności od wprowadzonej wartości, przejścia ścieżką lub odświeżenia strony, to korzystnym rozwiązaniem będzie użycie Reguł formularza.
Jeśli natomiast chce, aby wygląd jego elementu obiegu pozostawał niezmienny bez względu na podejmowane działania, czyli był statyczny, to powinien skorzystać z opcji, jakie oferuje zakładka Styl i zachowanie w sekcji poświęconej konfiguracji atrybutów.
Style CSS – definicja
Kaskadowe arkusze stylów (ang. Cascading Style Sheets – CSS) to prosty język, który odpowiada za to, w jaki sposób przeglądarka będzie wyświetlać elementy stron internetowych. Arkusz stylów CSS służy do definiowania wyglądu witryn internetowych i najczęściej stosuje się go w połączeniu z językami znaczników, takimi jak HTML lub XML. Języki znaczników są fundamentem dokumentów internetowych i wszystkich ich elementów (tekstu, obrazów, tabel, linków), natomiast CSS odpowiada za to, w jaki sposób elementy te będą ostatecznie wyglądać.
Definiowanie wybranych stylów atrybutów i kontrolek
Zmiana stylu atrybutów i kontrolek jest możliwa już na etapie wyboru i konfiguracji atrybutów – tj. w sekcji Styl po przejściu do zakładki Styl i zachowanie.
- Kolor tekstu i kolor tła
Jeśli użytkownik chce, aby atrybut na formularzu wyróżniał się niestandardowym kolorem tekstu, to w polu Styl atrybutu powinien wpisać właściwość color, a po dwukropku podać nazwę koloru lub jego kod HEX lub RGB.
Przykład 1):
alternatywnie: color: rgb(255, 0, 0) lub color: #ff0000 .
Wynik:
Podobnie jest z kolorem tła, z tym że wymagana właściwością w tym przypadku jest background-color.
Uwaga: w celu zachowania należytej czytelności, warto jednocześnie ustawić odpowiedni kolor tekstu, wówczas poszczególne właściwości należy oddzielić średnikiem i spacją (; ).
Przykład 2): background-color: #3c8398; color: white
Wynik:
- Rozmiar czcionki
W WEBCON BPS niestandardowy (większy) rozmiar czcionki mają wyłącznie nazwy grup atrybutów. Aby określić rozmiar tekstu inny niż automatyczny warto skorzystać z właściwości font-size. Jedną z zalecanych jednostek rozmiaru czcionki jest px.
Przykład 3): font-size: 22px
Wynik:
Rozmiar oryginalny:
Jeśli użytkownik woli, aby rozmiar czcionki zmieniał się względem rozmiaru domyślnego, to pomocne mogą okazać się stałe tekstowe, takie jak (w kolejności od najmniejszej do największej): xx-small, x-small, small, medium, large, x–large, xx-large, a także smaller (mniejszy rozmiar tekstu niż domyślny) i larger (większy rozmiar tekstu niż domyślny).
Przykład 4): font-size: smaller
Wynik:
Jeśli natomiast użytkownik chciałby, aby nazwa atrybutu pisana była wyłącznie wielkimi literami, to w sekcji Styl atrybutu powinien wpisać wartość zgodnie z następującym przykładem:
Przykład 5): text-transform: uppercase
Wynik:
- Waga czcionki: pogrubienie
CSS umożliwia zmianę wagi, tj. „grubości” czcionki, a to za sprawą właściwości o nazwie font-weight. Aby czcionka była pogrubiona, należy użyć stałej tekstowej bold lub wartości liczbowej 700. Oprócz „standardowego” pogrubienia, istnieje możliwość ustawienia wagi czcionki z zakresu od 100 do 900 (w przyrostach co 100, gdzie 100 to czcionka o możliwie najmniejszej grubości, 400 to wartość „normalnej” grubości czcionki, a 900 odpowiada najbardziej „wytłuszczonej” czcionce).
Przykład 6): font-weight: bold lub font-weight: 700
Wynik:
- Stylizacja czcionki: kursywa
Nazwa atrybutu i/lub jego wartość na formularzu mogą również zostać zapisane kursywą. Jeśli użytkownik chce, aby jego tekst był delikatnie pochylony w prawo, to powinien użyć stałej tekstowej italic poprzedzonej dwukropkiem i właściwością font-style.
Przykład 7): font-style: italic
Wynik:
- Wyrównanie tekstu
text-align – bo właśnie tak nazywa się właściwość, która odpowiada za wyrównanie tekstu – określa, w jaki sposób nazwa atrybutu lub zawartość kontrolki zostanie ułożona w dedykowanym jej polu. Najczęściej występującymi wartościami w tym przypadku są left, center, right i justify.
Tekst wszystkich atrybutów i kontrolek na formularzu jest domyślnie wyrównywany do lewej z wyjątkiem wartości liczbowych, które wyrównywane są do prawej, tak aby ułatwić ich ewentualny późniejszy eksport do arkusza kalkulacyjnego.
Jeśli jednak użytkownik chce, aby jego formularz wyglądał spójnie, tj. aby kwota na formularzu również była wyrównana do lewej, to powinien zmienić styl kontrolki w następujący sposób:
Przykład 8): text-align: left
Wynik:
Podsumowanie
Wprowadzenie powyższych ustawień względem stylu atrybutów i kontrolek pozwoliło utworzyć formularz, który wygląda następująco:
Oczywiście jest to jedynie przykład możliwości, jakie oferuje formatowanie stylów w WEBCON BPS za pomocą CSS – użytkownik może przygotowywać formularze, które będą dostosowane do indywidualnych potrzeb jego przedsiębiorstwa.
Poniższa tabela zawiera zestawienie właściwości kaskadowych arkuszy stylów omówionych w niniejszym artykule:
Tabela 1. Przykładowe właściwości CSS i ich wpływ na styl tekstu/czcionki
| Styl tekstu/czcionki | Właściwość CSS | Wybrane stałe tekstowe
(wartości liczbowe) |
| Kolor tekstu | color: | nazwa koloru np. red
kod RGB np. rgb(255, 0, 0) kod HEX np. #ff0000 |
| Kolor tła | background-color: | j.w. |
| Rozmiar czcionki | font-size: | wartość np. w px – 22px
xx-small x-small small medium large x-large xx-large smaller larger |
| Tekst pisany wielkimi literami | text-transform: | uppercase |
| Waga czcionki | font-weight: | wartości z przedziału 100 – 900
bold |
| Stylizacja czcionki | font-style: | italic |
| Wyrównanie tekstu | text-align: | left
center right justify |
