Zdefiniuj za pomocą CSS wygląd sieci grafiki czujnika w IoT

W poprzednim artykule z serii nt jak tworzyć wykresy stanu czujników podłączonych do Internetu Rzeczy IoT wyjaśnia sposób wykorzystać stronę internetową napisaną w HTML jako strukturę dla grafiki. Elementy strony internetowej, które zostały zredukowane do minimum za pomocą obiektów <div>, nie określili bezpośrednio jego wyglądu, zamiast tego nawiązali do informacje o wyglądzie do arkusza stylów CSS, co zostanie wyjaśnione w tej części serii.

W rozwiązaniu, które proponuję polegającym na tworzeniu wykresów czujników podłączonych do IoT, wykorzystywany jest dokument CSS który jest ładowany z dokumentu HTML. Jeśli kod HTML zostanie wygenerowany z aplikacji na serwerze np PHP, bardzo łatwo byłoby włączyć go jako część kodu definiującego stronę internetową, zamiast ładować go z niej, co można nieco zoptymalizować, zapisując wywołanie. Niezależnie od wybranej opcji, najwygodniejsza metoda obejmuje edytuj kod CSS w osobnym dokumencie, aby móc nim wygodniej zarządzać i móc go ponownie wykorzystać. W przykładzie opracowanym w tutorialu tej serii artykułów nadano mu nazwę estilo.css.

W ten sam sposób, W przypadku złożonych projektów wskazane będzie użycie kilku oddzielnych arkuszy stylów w różnych dokumentach, zarówno po to, aby móc ponownie wykorzystać określone funkcjonalności bez konieczności każdorazowego ładowania ich wszystkich, jak i po to, aby łatwiej edytować kod poprzez dystrybucję go do różnych dokumentów zgodnie z odpowiednią strukturą logiczną.

Style CSS Próbują opisać wszystkie skrajności w zachowaniu i wyglądzie strony internetowej z kilku rodzajów podejść, wszystkie jednocześnie ważne, starając się jednocześnie w jak największym stopniu szanować zgodność ze specyfikacjami poprzedniej wersji. Oznacza to, że istnieje wiele możliwych rozwiązań, które odpowiadają na te same potrzeby. a także duża liczba dostępnych zasobów (właściwości CSS). Ze względu na dydaktyczny charakter artykułu oraz aby nie wprowadzać w błąd nowych użytkowników CSS, tylko właściwości i struktury niezbędne do osiągnięcia ostatecznego celu, który ma graficznie przedstawić dane z czujników podłączonych do Internetu Rzeczy. Jednocześnie istnieje również małe wprowadzenie do CSS, Kaskadowe arkusze stylów.

Formatowanie właściwości CSS

El podstawowy format Składa się z nazwy właściwości, znaku dwukropka, wartości właściwości i znaku średnika. nombre:valor;

CSS pozwala na użycie różnych jednostek miary w tym samym dokumencie łącznie z tymi związanymi ze strukturą (miarą tego, co zawiera element) jako wartości procentowe w stosunku do urządzenia, na którym są reprezentowane, np. piksel, lub wartości bezwzględne, np. centymetry. Jednostki wyrażane są po wartości zgodnie z następującym kodowaniem skrótów.

W przypadku aplikacji, którą zamierzamy wykonać, ważne jest, aby wziąć pod uwagę co najmniej trzy jednostki stylu. Procent do pomiarów w odniesieniu do rozmiaru pojemnika na przedmiot, piksel do pomiarów zgodnie z rozdzielczością ekranu i milimetry (właściwie dowolny pomiar bezwzględny) do tworzenia drukowanych raportów.

Jest kilka złożone właściwości, lub złożone, które zależą od kilku wartości (takich jak kolor, rozmiar, styl...), aby wskazać wartość, w CSS istnieją dwie możliwości: napisz w odpowiedniej kolejności wszystkie wartości oddzielone spacjami lub użyj sumy prostych właściwości równoważnych zespołowi. Na przykład wszystkie cztery marginesy obiektu można określić w jednej właściwości margin lub można je ustawić za pomocą właściwości margin-top, margin-right, margin-bottom y margin-left. Nawiasem mówiąc, ta kolejność (zgodnie z ruchem wskazówek zegara) to ta, po której następują opisy wartości, które „otaczają” element, taki jak margines wewnętrzny (wypełnienie) lub zewnętrzny, granica…

Dzięki temu, co zostało wyjaśnione do tej pory, możemy teraz zobaczyć kilka przykładów właściwości

W powyższym przykładzie Kolor jest definiowany za pomocą kodu składającego się z 6 cyfr szesnastkowych, które reprezentują w parach wartość składowej czerwonej, zielonej i niebieskiej. Kiedy zdarzy się, jak w przykładzie, że dwie cyfry są równe, można to skrócić jako #F09 (co, nawiasem mówiąc, odpowiada tak zwanym „bezpiecznym kolorom internetowym”). W ostatecznej propozycji będę unikać stosowania tych skrótów, aby ujednolicić kryteria i uczynić je bardziej czytelnymi. Można także skracać wartości złożonych właściwości, np margin w przykładzie, gdy powtarzają się wszystkie wartości lub przeciwne pary. Podobnie jak w przypadku zapisywania tekstu, możliwe jest również pominięcie jednostki przy określaniu właściwości, gdy wartość wynosi zero, ponieważ w tym przypadku nie ma to znaczenia.

Niektóre wartości, oprócz tego, że można je wyrazić liczbowo, mają także nazwę co czyni kod bardziej czytelnym i pozwala lepiej go zapamiętać. Na przykład zamiast szesnastkowego kodu numerycznego celu, #FFFFFF (o #FFF), można napisać white z tym samym skutkiem. W ten sposób kolor czarny, #000000 (o #000), można zastąpić black.

również tam wartości wyrażane są specjalnym kodem, nazwą. Na przykład, aby wskazać, że margines boczny jest ustawiany automatycznie przez przeglądarkę (zwykle będzie to odpowiadać funkcji środkowej), używana jest wartość specjalna auto, który nie ma odpowiednika liczbowego z jakąkolwiek wartością.

do wyrażają specjalny sposób wykorzystania szeregu złożonych (złożonych) wartości właściwości CSS Można wybierać formaty o składni podobnej do funkcji. Na przykład, aby wyrazić kolor jako trzy wartości jego składowej czerwonej, zielonej i niebieskiej (tzw Model RGB) zostanie napisane color: rgb(128, 255, 64);. W ramach tego stylu wypowiedzi możliwe jest również użycie jednostek; W powyższym przykładzie składniki koloru są wartościami dziesiętnymi od 0 do 255, ale może być łatwiej wyrazić to jako procent sumy każdego składnika koloru, w takim przypadku można to również zapisać jako color: rgb(50%, 100%, 25%);.

Obliczanie wartości w CSS

W najnowszych wersjach CSS jest to możliwe proste operacje matematyczne służące do obliczania wartości. Aby to zrobić, użyj calc a operacja do wykonania jest wyrażona w nawiasach. Możesz wskazać jednostki, nawiasy i proste operatory, takie jak suma (+), odejmowanie (-), mnożenie (*) i dzielenie (/). Wyrażenie byłoby tego typu width:calc((90%-20px)/2));.

Zmiennych można używać w operacjach matematycznych w CSS odnosząc się przy obliczaniu jednej właściwości do wartości drugiej var. Aby móc użyć zmiennej bez konieczności odwoływania się do rzeczywistej właściwości stylu, dopuszczalne jest także przytoczenie właściwości, która nie istnieje. CSS zaleca format --nombre-variable (dwa łączniki przed nazwą wynalezionej właściwości). W ten sposób, aby zdefiniować wysokość elementu jako połowę jego szerokości, należy zastosować wyrażenie w CSS jako height:calc(var(width)/2); i aby zdefiniować nową zmienną „grubość” (której można użyć w innych właściwościach), należy napisać na przykład --grosor:4px; aby móc później nazywać to tzw margin-top:calc(var(--grosor)*4);

Właściwości CSS zależne od przeglądarki

CSS Jest to specyfikacja ujednolicona przez konsorcjum W3C (World Wide Web Consortium) ale wiele właściwości lub style zachowań docierają do przeglądarek, zanim staną się częścią specyfikacji wersji.

tak aby kod CSS działa z bieżącymi funkcjami przeglądarki, ale nie trać kompatybilności z nowymi funkcjami, używany jest przedrostek. Ten przedrostek zależy od silnik renderujący korzystająca z przeglądarki internetowej, do której chcesz się odwołać (dla której zdefiniowany jest styl).

Przedrostek -webkit Działa dla przeglądarek opartych na WebKit jako Safari o Chrom. Przedrostek -moz Jest używany w przeglądarkach opartych na silnik renderujący de Mozillaobecnie GekonJak Firefox i jego pochodne. Odnosić się do EdgeHTML, silnik renderujący przeglądarka krawędź od Microsoftu (dawniej Trójząb), używany jest przedrostek -ms. Sprawa przeglądarki Opera jest trochę wyjątkowy, odkąd zaczął używać własnego silnik renderujący, o którym mowa -o, ale obecnie współpracuje z WebKit, co wyraża się jako -webkit.

Aby skorzystać z właściwości odnoszącej się do przeglądarki należy wpisać jej nazwę poprzedzając ją i oddzielając myślnikiem jak w -o-border-radius:10px;, który służyłby do ustawienia zaokrąglonej krawędzi (zaokrąglonego rogu) w starszych wersjach przeglądarki Opera.

komentarze

Aby wyjaśnić kod CSS Możesz zastosować komentarze, które uczynią go bardziej czytelnym, aczkolwiek wadą jest zwiększenie jego rozmiaru. Składnia komentarzy w CSS To jak komentarze wielowierszowe C + + co z pewnością już wiesz: zaczynając od /* i kończące się na */jak w C + +, może zajmować kilka linii.

Selektory

Definicja właściwości są przypisywane do obiektów w dokumencie HTML grupując je w selektory i ujęcie ich w nawiasy klamrowe. Selektor może odwoływać się do elementu języka HTML (etykieta), jak div, klasa (przypisana za pomocą class en HTML) identyfikator (przypisany za pomocą id en HTML) lub wszystkie („selektor uniwersalny”) reprezentowane przez gwiazdkę (*). Poniższy przykład pokazuje selektor każdego typu:

Etykiety HTML wyrażone są w definicji stylu swoją nazwą, klasy oznacza się poprzez wstawienie kropki przed nazwą (.) i znak funta (#) dla identyfikatorów.

Część wielkiej mocy CSS mieszka w możliwość grupowania selektorów przy definiowaniu ich właściwości. Istnieje kilka sposobów grupowania selektorów. Grupując je, oddzielając je przecinkami, wyraża się, że każdy z przytoczonych selektorów ma te właściwości.

Poprzedni przykład wskazuje, że klasy zużycia, wilgotności i temperatury mają ten sam kolor, szerokość i wysokość. W tym kodzie wprowadzono także nową koncepcję: właściwości można redefiniować i w takim przypadku przeważają te ostatnio opisane. W ten sposób elementy klasy temperaturowej miałyby ostatecznie wysokość równą 50% obiektu, który je zawiera.

Jeśli zgrupowane selektory nie są oddzielone przecinkami, warunek nałożony na właściwości ma charakter kumulatywnyoznacza to, że element musi spełniać wymagania wszystkich selektorów, aby mógł uzyskać zdefiniowany przez nie wygląd lub zachowanie. Jeśli selektory odwołują się do tagów HTML Kolejność, w jakiej się pojawiają, musi być malejąca według poziomu włączenia: najpierw najwyższy poziom hierarchiczny, a na końcu najniższy.

W poprzednim przykładzie zdefiniowano elementy div które również należą do klasy temperaturowej oraz elementy posiadające zarówno klasę temperaturową, jak i klasę zużycia (oba jednocześnie) jak w class="temperatura consumo". Elementy <div> kodu HTML z class="temperatura" mieliby wysokość 100%

Właściwości CSS do definiowania tekstu

Można wyróżnić trzy rodzaje właściwości wpływających na wygląd tekstu: (1) określające czcionkę, z jaką jest on prezentowany, (2) określające wygląd dosłowności (treść tekstu) oraz (3) ogólne, to znaczy takie, które wpływają zarówno na wygląd tekstu, jak i innych elementów. Ogólnie rzecz biorąc, to, co zostało powiedziane w celu wyjaśnienia właściwości ostatniej grupy, będzie miało również zastosowanie do tych samych właściwości, które mają zastosowanie do innych pierwiastków.

Typografia (czcionka)

• font-family wskazuje nazwę czcionki użytej w elemencie. Można wpisać pojedynczą nazwę lub listę, w kolejności preferencji i oddzielając nazwy przecinkami, czcionek, które będą używane alternatywnie, jeśli żądana czcionka nie istnieje. Podobnie w nazwach można używać czcionek ogólnych monospace, serif, sans-serif, cursive, fantasy. Z tych czcionek rodzajowych najważniejsza (dla prezentacji danych) jest ta pierwsza, która jak sama nazwa wskazuje, będzie korzystała z czcionki o stałych odstępach dostępnej w systemie i wstępnie ustawionej przez przeglądarkę. Drugi, serif, użyje dostępnego domyślnego szeryf (wykończenie lub łaska). Bez aukcji w przypadku wskazania trzeciego, sans-serif. Imitujące ręcznie rysowane pisanie cursive (jak to się nazywa, można to wyraźnie poprawić) i ozdobną typografię systemu fantasy, ostatni z pięciu.

  Jeśli chodzi o kod CSS Spacje mają szczególne znaczenie jako separatory; gdy nazwa rodziny czcionek składa się z kilku słów oddzielonych spacjami, należy ją zapisać w cudzysłowie, aby uniknąć nieporozumień.

  CSS font-tamily ejemplo de uso

  CSS

  <br /> font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  1	font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  Przeglądarki internetowe mogą korzystać z czcionek lokalnych (tych zainstalowanych w systemie, na którym działają), a także innych, specjalnie załadowanych, nawet nakładających się na te zainstalowane lokalnie. Aby załadować czcionkę, użyj @font-face wskazując jego nazwę, miejsce pobrania jego definicji oraz, w stosownych przypadkach, opis jego formatu.

  CSS Ejemplo de descarga de la definición de una tipografía con @font-face

  CSS

  <br /> @font-face<br /> {<br /> font-family:”SircuitoExpandedLight”;<br /> src: url(‘/EOT/Sircuito-Expanded-Light.eot’);<br /> }</p> <p>@font-face<br /> {<br /> font-family:”SircuitoRegularMedium”;<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot’);<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),<br /> url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’),<br /> url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’),<br /> url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);<br /> -webkit-font-smoothing:antialiased;<br /> }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  @font-face { font-family:“SircuitoExpandedLight”; src: url(‘/EOT/Sircuito-Expanded-Light.eot’); }   @font-face { font-family:“SircuitoRegularMedium”; src: url(‘tipos/Sircuito-Regular-Medium.eot’); src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’), url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’), url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’), url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’); -webkit-font-smoothing:antialiased; }

  W pierwszej z dwóch definicji z poprzedniego przykładu ładowana jest litera dokumentu Sircuito-Expanded-Light.eot który znajduje się w folderze EOT w głównym folderze (root) i jest przypisany jako nazwisko ObwódRozszerzonyŚwiatło. Swoją drogą, podoba Ci się ta czcionka? To nic nie kosztuje, możesz pobierz za darmo czcionkę Sircuito, którą zaprojektowałem dla obrazu GranaBot.

  Jak widać na przykładzie, właściwość url odpowiadająca jednolity lokalizator zasobów, umożliwia określenie lokalizacji dokumentu z pobieraną czcionką. Ukośnik służy do oddzielania nazw różnych folderów od ścieżki do czcionki, zaczynając od folderu zawierającego dokument, z którego nawiązywane jest wywołanie, lub od katalogu głównego, jeśli URL Zacznij od paska.

  Drugi przykład wykorzystuje kilka alternatywnych dokumentów, więc ta sama definicja działa dla kilku przeglądarek (z których każda załaduje typ, który jest w stanie zinterpretować)

  Ostatni wiersz definicji zawiera właściwość font-smoothing aby zmiękczyć literę (zastosuj a antyaliasing). Ponieważ nie jest to standardowa właściwość, używany jest przedrostek -webkit.

• font-size służy do wskazania rozmiaru litery jak w font-size:12px;

• font-weight Ustawia grubość czcionki. Można go wyrazić jako wartość liczbową, zwykle wielokrotność 100 z zakresu od 100 do 900, zgodnie ze zwykłymi wagami typograficznymi, lub częściej za pomocą nazwy: normal dla grubości podstawy, bold dla odważnych, bolder dla wersji zwanej potocznie czarną, light za karę (powszechnie zwaną lekką) i lighter dla najcieńszych (czasami nazywanych cienkimi).

  Wartość liczbowa normalnej wersji czcionki wynosi 400 (bez jednostek) i 700 w przypadku wersji pogrubionej.

  Domyślnie, jeśli nie wskazano innej wartości, wygląd czcionki odpowiada takiemu normal lub 400, więc jeśli nie został zmieniony w elemencie rodzajowym lub w kontenerze, z którego dziedziczy, nie jest konieczne wskazanie font-weight z odwagą normal.

• font-stretch Służy do wskazania szerokości litery, o ile jest dostępna w odpowiedniej rodzinie. Możliwe wartości, jakie może przyjmować nieruchomość, w kolejności od najwęższego do najszerszego, to: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Przy tych samych kryteriach, które zastosowano w poprzedniej właściwości, domyślna szerokość to normal i nie ma potrzeby jej wyraźnego wskazywania, chyba że została ona zmieniona w hierarchii wyższej niż określona.

• z font-style Możesz wskazać, czy tekst jest rysowany literą ukośną lub ukośną, co wpływa na jego wygląd, czy literą kursywą, która wyraża specjalne znaczenie (na przykład słowa obce), czy też literą okrągłą, czyli żadną z poprzednich lub normalne. wartość oblique spełnia pierwszą funkcję, wygląd i wartość italic drugi. Fakt, że wygląd obu wyrazów jest często podobny lub nawet taki sam, powoduje, że czasami dochodzi do pomieszania użycia (znaczenia), dlatego warto zwrócić na to uwagę. Podobnie jak w przypadku innych nieruchomości, normal służy do dezaktywacji poprzednich wartości.

• text-decoration służy do podkreślenia (z wartością underline), overline (z wartością overline), przekreślić (z wartością line-through) lub flash (z wartością blink) tekst, na który wpływa ta właściwość.

• Aby uzupełnić serię o aspekt typograficzny, choć dla naszej aplikacji nie jest to zbyt istotne, font-variant, pozwala na aplikowanie małe czapki (małe, duże litery) do tekstów.

Tekst

• text-align informuje przeglądarkę, jak powinien być wyrównany blok tekstu. Możliwe wyrównania znajdują się po lewej stronie (co jest domyślnie brane pod uwagę) w stosunku do kodu left, wyśrodkuj wartość center, prawo za pomocą right i uzasadnione na obu końcach za pomocą justify.

• line-height ustawia odstęp między wierszami tekstu. W tym przypadku, jeśli stosowane są wartości procentowe, wartość 100% odpowiada wysokości tekstu, a nie wymiarowi pojemnika. Najczęściej stosowana miara w odniesieniu do tekstu odpowiada 120%. Linia 100% oznacza, że ​​dół jednej linii dotyka góry następnej. Chociaż projekt typografii zwykle uwzględnia pewną przestrzeń, często pozostawia się nieco większy margines między wierszami.

  Aby wyrazić odstęp między liniami, można również wskazać współczynnik (wartość bez jednostki), za pomocą którego zostanie obliczona wysokość linii na podstawie wysokości pola tekstowego.

• letter-spacing to wartość odstępu pomiędzy literami wyrazów, zwana w typografii tzw kerning o śledzenie.

• word-spacing reprezentuje miarę odstępów między wyrazami.

• white-space ustawia zachowanie białych znaków w tekście. Kiedy wartość jest używana normal, który jest przyjmowany domyślnie, łączy kilka pustych spacji w kodzie HTML w jednej z prezentacji na stronie internetowej (wyświetlanej przez przeglądarkę) i przyjmuje białe znaki jako odniesienie do przerwania linii, jeśli w bloku nie ma miejsca.

  Wartość nowrap Łączy również powtarzające się spacje w jedno, ale nie dzieli wierszy tekstu w pustych spacjach, nawet jeśli wiersz nie mieści się w pojemniku, w razie potrzeby przekraczając spację i zapisując na zewnątrz, jeśli to konieczne. Aby wyraźnie podzielić linie, możesz użyć etykiety <br> de HTML.

  Korzystanie pre Ani puste przestrzenie nie są ujednolicone poprzez połączenie ich w jedną, ani linie nie są podzielone przy użyciu spacji jako odniesienia.

  pre-line połącz powtarzające się spacje i w razie potrzeby przełam linie, używając spacji jako odniesienia.

  pre-wrap zachowuje powtarzające się białe znaki i w razie potrzeby przerywa linie, używając białych znaków jako odniesienia.

Kolor

En CSS kolor można wyrazić według Model kolorów RGB lub wg Model kolorów HSL w obu przypadkach można uwzględnić informację o przezroczystości, czyli wartość czwartego kanału, który jest zwykle wywoływany kanał alfa o skład alfa, co daje podstawę do modeli RGBA i HSLA.

Aby wyrazić kolor w formacie RGB przy użyciu notacji szesnastkowej używana jest składnia #RRGGBB, gdzie RR jest wartością składnika czerwonego (w zasadzie przy użyciu dwóch cyfr szesnastkowych), GG jest wartością składnika zielonego, a BB jest wartością składnika niebieskiego. Jak już powiedziano, jeśli dwie cyfry każdego składnika mają tę samą wartość, można to wyrazić jako #RGB ograniczenie liczby dostępnych kolorów do tzw. bezpiecznych internetowych

Oprócz tego najbardziej klasycznego i używanego sposobu przedstawiania koloru, można go wyrazić jako rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) aby wskazać to w formacie RGB, Hsl oraz ich odpowiednie formularze ze wskazaniem przezroczystości (kanał alfa)

O ile nie zażądano inaczej poprzez dodanie przyrostka jednostki, Model RGB używa wartości dziesiętnych od 0 do 255, dla trzech składników wartość składnik alfa jest współczynnikiem (dziesiętnym od zera do jednego) i pierwszą wartością Model kolorów HSL, odcień, to wartość dziesiętna z zakresu od 0 do 360 (bez jednostek) reprezentująca kąt. Wartości nasycenia i jasności modelu HSL Zazwyczaj wyraża się je w procentach.

Jak już powiedziano, chociaż jego użycie nie jest zbyt częste, kolory można oznaczyć ich nazwą w formacie color:black; zamiast color:#000000;. Pierwszy format jest bardziej czytelny, ale ogranicza się do krótkiej tabeli wartości, która jest również trudniejsza do modyfikacji numerycznej z aplikacji napisanej w języku JAVASCRIPT.

Do naszej propozycji graficznej reprezentacji danych z czujników podłączonych do IoT potrzebne będą nam jedynie trzy właściwości związane z kolorem. Posłużą zarówno do wskazania nazwy tekstu, który jest teraz wyjaśniony, jak i do wskazania nazwy dowolnego komponentu, który go obsługuje.

• color wskazuje kolor elementu HTML oraz tego, co zawiera (która je dziedziczy), chyba że zostanie to wyraźnie zmienione poprzez indywidualne przypisanie innych kolorów.

• background-color Służy do definiowania koloru tła elementu HTML. Oprócz wskazania koloru jako wartości RGB o Hsl możesz użyć wartości specjalnej transparent tak, aby obiekt nie miał koloru tła i było widać, co się za nim znajduje, czyli nie zasłania elementów, na których został narysowany.

• opacity pozwala ustawić przezroczystość (pośrednio, przezroczystość) elementu i całej jego zawartości (nie mylić z przezroczystością tła). Jeśli przezroczystość zostanie przypisana do elementów zawartych w innych, które same są przezroczyste, zostanie to zwiększone, nie będzie działać osobno. Nie można uczynić obiektu zawartego w obiekcie przezroczystym bardziej nieprzezroczystym. Wartość opacity Wyraża się go jako współczynnik np opacity:0.5; aby wskazać 50% nieprzezroczystości.

  Starsze wersje przeglądarki Microsoftu nie korzystały z tej właściwości, ale ją posiadały filter (filtr), który, między innymi, może obsługiwać alfa (dla kanał alfa), do którego można przypisać procent krycia opacity zgodnie z formatem:

  CSS para dar opacidad en los antiguos navegadores web de Microsoft

  CSS

  <br /> filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

  1	filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

Środki

En CSS, pomiar elementów <div>, z którego wybraliśmy do skomponowania kontenera graficznego, jest ustawione width (szerokość) i height (alt).

pomiędzy treścią <div> a na jego obwodzie znajduje się pole wypełnienia określone wartością padding. Obwód obiektu otacza krawędź, której wymiar jest określony we właściwości border. Oddzielenie zewnętrznej części obiektu <div> spośród innych otaczających obiektów istnieje przestrzeń, której wymiar wyznacza margin.

W normalnych warunkach pomiar przestrzeni zajmowanej przez obiekt <div> można obliczyć jako sumę jego szerokości lub wysokości plus dopełnienie (padding) plus granica (border) plus marża (margin). Kiedy ustala się odpowiedni pomiar, to użyteczna przestrzeń wewnętrzna obiektu <div>, ten skład jest bardzo praktyczny, ale jeśli znany jest całkowity dostępny pomiar czy można zmienić to zachowanie?, ustawione domyślnie tak, aby całkowita szerokość i wysokość była zgodna z wartością wskazywaną przez width (szerokość) i height (wysokość), odejmując od niej wymiary dopełnienia, obramowania i marginesu, zamiast je dodawać. Aby skorzystać z tego trybu, przypisz nieruchomość box-sizing wartość border-box (domyślnie jest content-box)

Poniższy diagram przedstawia graficznie wartości wynikające z width (szerokość) i height (wysoki), jeśli jest używany box-sizing:border-box; (ogółem) lubbox-sizing:content-box; (wewnątrz)

Wartości pomiarów wyrażone są w jednostkach, które zostały już wyjaśnione. Jeśli chodzi o właściwości określone kilkoma wartościami, można mieszać liczby wyrażone różnymi rodzajami średnich. Ponadto istnieją pewne specjalne wartości, które są istotne dla zastosowania, jakie zamierzamy zastosować w tej implementacji wykresów czujników w IoT. W szczególności możemy użyć wartości auto na nieruchomości margin jako zasób do centrowania obiektów w pewnych okolicznościach.

W powyższym przykładzie dla klasy „small_box” zdefiniowano ramkę o grubości 2 pikseli, rysowaną czarną kreską (#000000) ciągły (solid). W klasie „big_box” linia obramowania jest przerywana (dashed) i kolor czerwony (#FF0000). Aby wyrazić te wartości osobno, możemy użyć border-width dla grubości, border-style za udar i border-color dla koloru. Te właściwości krawędzi są z kolei złożone i tworzone przez elementy górne, prawe, dolne i lewe, zgodnie z kierunkiem ruchu wskazówek zegara, jak wyjaśniono powyżej.

Dwie zdefiniowane klasy mają te same wymiary, ale pierwsza z nich jest mniejsza, ponieważ przy użyciu wartości border-box za własność box-sizingdopełnienie, obramowanie i margines są rysowane wewnątrz obiektu, a nie wokół zawartości, jak jest to ustawienie domyślne. W klasie „big_box” nie jest to wskazane, więc wartość jest przyjmowana domyślnie content-box co powoduje zwiększenie dopełnienia, obramowania i marginesu do rozmiaru wskazanego przez width y height.

Wartość marginesu klasy w powyższym przykładzie wynosi 10 pikseli u góry, po prawej, u dołu i po lewej stronie, więc można ją wyrazić jako pojedynczą wartość margin:10px;. Znajomość tej alternatywy w celu zrozumienia kodu opracowanego przez osoby trzecie jest bardzo interesująca, chociaż w tej propozycji wdrożenia, aby uczynić ją bardziej czytelną, sugeruje się wskazanie, powtórzenie wartości.

Trzy klasy z poprzedniego przykładu dają ten sam wynik, definicja tak zwanego „lakonicznego” jest bardziej zwięzła, a mniej niż w przypadku tak zwanego „gadatliwego”, którego forma jest zwykle stosowana nie tylko dla przejrzystości czytania służą do modyfikowania jakiegoś częściowego, konkretnego aspektu właściwości, ponownie wykorzystując pozostałe wartości w drodze dziedziczenia (dostarczane są przez kontener lub dostarczane przez jedną z klas przypisanych do elementu). Gdyby obciążenie serwera dodatkowym tekstem związanym z tym sposobem definiowania właściwości oraz inne okoliczności zwiększające czytelność kodu, takie jak komentarze, zwiększające rozmiar, a tym samym ruch, były istotne, możliwe byłoby przetworzyć go (na przykład) z PHP jako część strategii generowania kodu z tego języka.

Wymiary modelu pudełkowego wpływają głównie na elementy <div> ale możliwe jest wymuszenie tego zachowania na innych elementach za pomocą tej właściwości display i wartość block. Aby element płynął jak tekst po linii, użyj display:inline; i oba zachowania, pomiary i przepływ, można łączyć display:inline-block;

Wartość none na nieruchomości display, użyty jako display:none;, pozwala także na ukrywanie obiektów, co posłuży do ich „włączania” i „wyłączania”. JAVASCRIPT.

Jeśli wymiary elementu nie są określone, potrzebne są wszystkie wymiary, które są niezbędne, aby dopasować jego zawartość (w rzeczywistości sprawia to, że zawartość pasuje bez konieczności ustalania wymiaru). Ale jeśli podano wymiary, może się zdarzyć, że zawarte w nich przedmioty nie będą pasować; w takim przypadku wymiary nie są przestrzegane, są zwiększane, aby cała zawartość była widoczna.

Aby elementy zawarte w innym z ustalonych wymiarów zostały przycięte w przypadku przekroczenia rozmiaru, wykorzystywana jest właściwość overflow z odwagą hidden. z wartością scroll, obiekty przepełniające pojemnik są również wycinane, jak to ma miejsce w przypadku hidden ale wyświetlany jest pasek przewijania, który można zobaczyć podczas przesuwania. Wartość auto powoduje, że pasek przewijania pojawia się tylko wtedy, gdy jest to konieczne ze względu na rozmiar zawartości.

Możesz także ustalić minimalny rozmiar, aby kontenery zajmowały tę przestrzeń, nawet jeśli zawartość tego nie potrzebuje i bez ograniczania ich rozmiaru, aby zwiększały się, gdy zawartość tego wymaga. Właściwości odpowiedzialne za to zadanie to min-width za ból i min-height dla wysokiego. W odwrotnym sensie, max-width ustaw maksymalną szerokość i max-height maksymalna wysokość, która się znosi width już height.

Przepływ elementów na stronie internetowej

Prostokąty (bloki), które zdefiniowaliśmy za pomocą elementów <div>, domyślnie są one umieszczone jeden pod drugim. Aby zmienić to zachowanie, możesz użyć właściwości float, wskazując left o right jako wartość, tak aby przepływały odpowiednio od lewej do prawej lub od prawej do lewej. Wręcz przeciwnie, aby zapobiec „unoszeniu się” jednego obiektu na prawo lub na lewo od drugiego, możesz skorzystać z tej właściwości clear wartościami left, right o both, które zastępują przepływ od lewej do prawej, od prawej do lewej lub obu.

W przeciwieństwie do tego, co dzieje się w innych okolicznościach, powstał przepływ float nie modyfikuje automatycznie wymiarów kontenera, dlatego warto uwzględnić w jego właściwościach overflow:auto; aby wymusić zmianę rozmiaru (wysokości) pojemnika, gdy obiekt go przepełni ze względu na jego położenie float.

Innym sposobem skonfigurowania przepływu zawartości elementu jest podzielenie go na kolumny z właściwością column-count (któremu na razie powinien towarzyszyć -webkit-column-count i -moz-column-count) Rozmiar kolumn można wskazać (właściwie sugerować) za pomocą column-width (-webkit-column-width -moz-column-width) i separacja między kolumnami za pomocą column-gap (-webkit-column-gap -moz-column-gap)

Aby bloki nie były podzielone, a ich zawartość była rozłożona na kilka kolumn, możesz użyć display:inline-block; chociaż to z pewnością oznacza. pozostawić część kolumny nieużywaną.

Pozycjonowanie

Aby ustalić lokalizację elementów na stronie internetowej, CSS wykorzystuje kilka trybów pozycjonowania, które mogą być różne dla każdego elementu, czyli możliwe jest mieszanie różnych kryteriów pozycjonowania na tej samej stronie internetowej.

• position:static; Jest to pozycjonowanie domyślne (nie trzeba go wskazywać, jeśli nie zostało wcześniej zmodyfikowane). Tego typu pozycjonowanie podąża za „naturalnym” przebiegiem strony: jeden element po drugim zaczynając od lewej strony, rosnąc, dopóki jest miejsce, po prawej stronie i od góry do dołu. Nie wykorzystuje współrzędnych poziomych ani pionowych do ustalenia swojego położenia, podąża za pozycją odpowiadającą porządkowi obiektu.

• position:fixed; Służy do umieszczenia obiektu w ustalonej pozycji w oknie przeglądarki (np. w menu).Położenie elementu określa się poziomo za pomocą left o right aby określić separację odpowiednio po lewej lub prawej stronie i za pomocą top o bottom do separacji powyżej lub poniżej krawędzi okna przeglądarki (rzutni).

  Korzystając z tego i innych typów pozycjonowania, obiekty mogą się nakładać. Obiekty rysowane jako pierwsze (zdefiniowane wcześniej w kodzie HTML) mogą być uwzględnione przez te narysowane później (te zawarte później w kodzie HTML). Aby zmienić normalny porządek, możesz skorzystać z właściwości z-index, obiekty o największej wartości w z-index Obejmują te o mniejszej wartości.

• position:relative; Przesuwa element z jego „normalnej” pozycji zgodnie z właściwościami left o right poziomo i top o bottom pionowo.

• position:absolute; Umieszcza element w ustalonej pozycji względem obiektu, który go zawiera. Jego lokalizacja jest wyrażona, podobnie jak w poprzednich przypadkach, za pomocą left,right, top y bottom

  Nazwa tego typu pozycjonowania jest początkowo myląca, gdyż pozycja ustalana jest w stosunku do obiektu hierarchicznie nadrzędnego w stosunku do tego, który korzysta z tej właściwości, co jest dyskusyjne, czy jest ona absolutna.

  Należy również pamiętać, że element zawierający obiekty <div> którego używamy na pierwszym poziomie hierarchicznym <body>zatem, jeśli <div> czego używasz position:absolute; nie znajduje się w innym, jego pozycjonowanie będzie „bezwzględne” w stosunku do strony internetowej.

Właściwości dla określonych mediów i charakterystyki (zapytania o media)

CSS umożliwia zdefiniowanie w tym samym arkuszu stylów różnych wyglądów dla różnych mediów lub nośników w zależności od typu używanego urządzenia (takiego jak ekran lub drukarka), jego wymiarów, orientacji (pionowej lub poziomej) lub rozdzielczości. Służy to możliwości wyświetlenia tej samej strony internetowej w najbardziej odpowiedni dla kontekstu sposób.

Aby odnieść się do mediów, użyj @media w podobny sposób, jak to zostało już wyjaśnione dla czcionek @font-face, ujęte w nawiasy klamrowe ({ y }) definicje różnych elementów: etykiety HTML, klasy, identyfikatory...

Rodzaje multimediów dostępnych w CSS3 dźwięk: all, w odniesieniu do wszelkich mediów (wszystkich), screen dla dowolnego typu ekranu (starsze wersje CSS Rozróżnili monitory telewizyjne i komputerowe) print dla wydruków i speech dla internetowych czytników audio, które interpretują informacje za pomocą syntezatorów głosu.

W powyższym przykładzie elementy klasy tekstowej mają czarne tło i biały tekst na ekranie, ale są drukowane z białym tłem i czarnym tekstem.

Na media można nałożyć warunki w celu zdefiniowania różnych zestawów właściwości w oparciu na przykład o dostępną rozdzielczość lub współczynnik rzutni. Warunki te i same środki można składać za pomocą operacji logicznych and, not y only żądać, abyś przestrzegał kilku, których nie przestrzegasz lub tylko wtedy, gdy przestrzegasz, odpowiednio.

Wśród dostępnych warunków uważamy je za szczególnie interesujące max-width (maksymalna szerokość okna), max-height (maksymalna wysokość okna), min-width (minimalna szerokość okna), min-height (minimalna wysokość okna), orientation (orientacja, która może być landscape, krajobraz lub portrait, pionowy), max-resolution (maksymalna rozdzielczość w dpi, punktów na cal lub cale dpcm, punkty na centymetr) i min-resolution (minimalna rozdzielczość, także w dpi o dpcm).

W poprzednim przykładzie zaczynamy od zdefiniowania koloru tła, tak aby we wszystkich mediach elementy klasy main_block miały kolor tła #CCCCCC. Przy wyświetlaniu na ekranie i oknie o szerokości co najmniej 320 pikseli, lewy i prawy margines będą automatyczne (wyśrodkowanie bloku), a szerokość elementu będzie wynosić 300 pikseli. Jeśli rozdzielczość ekranu wynosi 640 pikseli, szerokość bloku będzie wynosić 620 pikseli. Ponieważ druga definicja nośnika nie zawiera informacji o marginesie, a urządzenia spełniające drugi warunek będą również spełniać pierwszy, margines poziomy nadal będzie automatyczny.

Na koniec w przykładzie kolor tła zostaje zmieniony tak, aby na wydruku był biały.

Typowy sposób definiowania stylów dla różnych mediów zwykle zaczyna się od tych popularnych, zwykle kolorów i czcionek, a następnie najbardziej restrykcyjnych geometrii (wymiary urządzeń o najmniejszej liczbie pikseli), zwykle dla smartfonów i tabletów, gdzie dodatkowo Ważne będzie, aby wiedzieć, czy są używane pionowo, czy poziomo orientation i na pewno także jego rozdzielczość min-resolution. Następnie wskazane są różne rozmiary dla większych ekranów, a kończy się to zazwyczaj na nośnikach druku i głosu, które w przykładzie grafiki IoT zostały pominięte.

Używać @media Narzucenie warunków takich jak wymiary, rozdzielczość i orientacja pozwala projektantowi stworzyć jedną stronę internetową, która przy różnych stylach będzie wyglądać najodpowiedniej dla każdego urządzenia. To zachowanie nazywa się zwykle projektowaniem responsywnym; dostosowywalny projekt, w bardzo wolnym tłumaczeniu.

CSS dla kontenera graficznego SVG

Dzięki temu, co zostało wyjaśnione do tej pory, możliwe jest teraz zdefiniowanie stylów, które będą stosowane Kontener HTML z grafiką SVG za pomocą którego można reprezentować stan czujników podłączonych do Internetu Rzeczy. W poniższym kodzie znajduje się propozycja uwzględniająca, skomentowana, rozkład w kolumnach odpowiadający większej liczbie wykresów niż ta, z której korzysta propozycja serii artykułów, aby można było ją ponownie wykorzystać w innych przypadkach.

Poniżej możesz zobaczyć, jak te style będą wyglądać. Kod HTML z proponowanego kontenera na grafikę SVG z poprzedniego artykułu.

Wyjaśnia to następny artykuł z tej serii jak rysować za pomocą SVG Wykresy danych stanu czujników podłączonych do Internetu rzeczy (IoT).