Edycja wyglądu atrybutów i kontrolek przy użyciu CSS

Facebooktwitterpinterestlinkedinmail
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, xlarge, 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 100900

bold

Stylizacja czcionki font-style: italic
Wyrównanie tekstu text-align: left

center

right

justify