Defina com CSS a aparência da web gráfica do sensor na IoT

No artigo anterior da série sobre como fazer gráficos de estado de sensores conectados à Internet das Coisas IoT explica o caminho usar uma página web desenvolvida em HTML como estrutura gráfica. Os elementos da página web, que foram reduzidos ao mínimo usando objetos <div>, não definiram diretamente sua aparência, em vez disso, referiram-se ao informações de aparência para uma folha de estilo APF, que é o que será explicado nesta parte da série.

Na solução que proponho para fazer gráficos de sensores conectados à IoT, é utilizado um documento APF que é carregado do documento HTML. Se o código HTML será gerado a partir de uma aplicação no servidor, por exemplo em PHP, seria muito simples incluí-lo como parte do código que define a página web em vez de carregá-la a partir dela, o que poderia ser um pouco otimizado salvando uma chamada. Qualquer que seja a opção escolhida, o método mais conveniente inclui edite o código APF em um documento separado para gerenciá-lo com mais conforto e poder reutilizá-lo. No exemplo desenvolvido no tutorial desta série de artigos, recebeu o nome estilo.css.

No mesmo sentido, Ao lidar com projetos complexos será aconselhável usar várias folhas de estilo separadas em diferentes documentos, tanto para poder reutilizar funcionalidades específicas sem ter que carregá-las todas a cada vez, como para editar mais facilmente o código distribuindo-o em diferentes documentos de acordo com a estrutura lógica correspondente.

Os estilos APF Eles tentam descrever todos os extremos do comportamento e aparência de uma página web a partir de vários tipos de abordagens, todas simultaneamente válidas, ao mesmo tempo que tentam respeitar ao máximo a compatibilidade com as especificações da versão anterior. Isso significa que existem muitas soluções possíveis que atendem às mesmas necessidades. bem como um elevado número de recursos disponíveis (propriedades APF). Devido à abordagem didática do artigo e para não confundir novos usuários no APF, apenas as propriedades e as estruturas necessárias para o objetivo final, que consiste em representar graficamente dados de sensores conectados à Internet das Coisas. Ao mesmo tempo, há também uma pequena introdução ao APF, folhas de estilo em cascata.

Formatando propriedades CSS

El formato básico Consiste em um nome de propriedade, o sinal de dois pontos, o valor da propriedade e o sinal de ponto e vírgula. nombre:valor;

APF permite que você use diferentes unidades de medida no mesmo documento incluindo aqueles relacionados à estrutura (a medida do que um elemento contém) como porcentagens, relativas ao dispositivo em que estão representados, como o pixel, ou absolutos, como centímetros. As unidades são expressas após o valor de acordo com a seguinte codificação de abreviatura.

Para a aplicação que vamos fazer é importante considerar pelo menos três unidades de estilo. A % para fazer medições relativas ao tamanho da embalagem de um item, o pixel para medições de acordo com a resolução da tela e os milímetros (na verdade, qualquer medida absoluta) para fazer relatórios impressos.

Existem alguns propriedades complexas, ou composto, que depende de vários valores (como cor, tamanho, estilo...), para indicar o valor existem duas possibilidades em CSS: escrever, na ordem apropriada, todos os valores separados por espaços ou usar a soma de propriedades simples equivalentes às complexas. Por exemplo, todas as quatro margens de um objeto podem ser especificadas em uma única propriedade margin ou pode ser definido com propriedades margin-top, margin-right, margin-bottom y margin-left. Aliás, essa ordem (sentido horário) é aquela seguida pelas descrições dos valores que “envolvem” um elemento como a margem interna (preenchimento) ou externa, a borda…

Com o que foi explicado até agora podemos agora ver alguns exemplos de propriedades

No exemplo acima A cor é definida por meio de um código de 6 dígitos hexadecimais que representam, aos pares, o valor do componente vermelho, verde e azul. Quando acontece, como no exemplo, que os dois dígitos são iguais, pode ser abreviado como #F09 (que, aliás, corresponde às chamadas “cores seguras para web”). Na proposta final evitarei utilizar estas abreviaturas para unificar os critérios e torná-los mais legíveis. Você também pode abreviar os valores de propriedades complexas, como margin no exemplo, quando todos os valores ou pares opostos são repetidos. Na mesma linha do salvamento de texto, também é possível omitir a unidade ao especificar uma propriedade quando o valor é zero, pois nesse caso é irrelevante.

Alguns valores, além de poderem ser expressos numericamente, possuem um nome o que torna o código mais legível e permite que você se lembre melhor deles. Por exemplo, em vez do código numérico hexadecimal do destino, #FFFFFF (o #FFF), pode ser escrito white com o mesmo resultado. Desta forma, a cor preta, #000000 (o #000), pode ser substituído por black.

também lá os valores são expressos por um código especial, um nome. Por exemplo, para indicar que a margem lateral é definida automaticamente pelo navegador (normalmente corresponderá à função central) é utilizado o valor especial auto, que não possui correspondência numérica com nenhum valor.

Pára expressar uma maneira especial de usar uma série de valores compostos (complexos) de uma propriedade APF Você pode escolher formatos com sintaxe semelhante à das funções. Por exemplo, para expressar uma cor como os três valores de seus componentes vermelho, verde e azul (o Modelo RGB) seria escrito color: rgb(128, 255, 64);. Dentro deste estilo de expressão também é possível utilizar unidades; No exemplo acima, os componentes de cor são um valor decimal de 0 a 255, mas pode ser mais fácil expressar isso como uma porcentagem do total de cada componente de cor; nesse caso, também poderia ser escrito como color: rgb(50%, 100%, 25%);.

Calculando valores em CSS

Nas versões mais recentes APF é possível fazer operações matemáticas simples para calcular valores. Para fazer isso, use calc e a operação a ser executada é expressa entre parênteses. Você pode indicar unidades, parênteses e operadores simples como soma (+), subtração (-), multiplicação (*) e divisão (/). A expressão seria do tipo width:calc((90%-20px)/2));.

Variáveis ​​podem ser usadas em operações matemáticas em APF referindo-se no cálculo de um imóvel ao valor de outro com var. Para poder utilizar uma variável sem precisar fazer referência a uma propriedade real do estilo, também é permitido citar uma propriedade que não existe. APF recomenda o formato --nombre-variable (dois hífens antes do nome do bem inventado). Desta forma, para definir a altura de um elemento como metade de sua largura, uma expressão em APF como height:calc(var(width)/2); e para definir uma nova variável "espessura" (que outras propriedades poderiam usar) você escreveria, por exemplo, --grosor:4px; para poder mais tarde referir-me a ele como margin-top:calc(var(--grosor)*4);

Propriedades CSS Dependentes do Navegador

APF É uma especificação padronizada pelo consórcio o W3C (Consórcio Mundial da Internet) (Consórcio World Wide Web) mas muitos propriedades ou estilos de comportamento chegam aos navegadores antes de fazerem parte da especificação de uma versão.

para que o código APF funciona com os recursos atuais de um navegador, mas não perca a compatibilidade com novos recursos, um prefixo é usado. Este prefixo depende do motor de renderização que usa o navegador da web que você deseja referenciar (para o qual o estilo está definido).

O prefixo -webkit Funciona para navegadores baseados em WebKit como Safári o Chrome. O prefixo -moz É usado para navegadores baseados no motor de renderização de Mozilla, atualmente LagartixaComo Firefox e seus derivados. Referir-se a EdgeHTML, o motor de renderização navegador borda da Microsoft (anteriormente Tridente), o prefixo é usado -ms. O caso do navegador Opera é um pouco especial desde que ele começou a usar o seu próprio motor de renderização, referido com -o, mas atualmente trabalha com WebKit, que é expresso como -webkit.

Para utilizar uma propriedade referente a um navegador, escreva seu nome, prefixando-o e separando-o com um hífen como em -o-border-radius:10px;, que serviria para definir uma borda arredondada (um canto arredondado) em versões mais antigas do navegador Opera.

comentários

Para esclarecer o código APF Você pode usar comentários, o que o tornará mais legível, embora com a desvantagem de aumentar seu tamanho. A sintaxe dos comentários em APF É como comentários de várias linhas C + + que tenho certeza que você já sabe: começando em /* e terminando em */, Como na C + +, pode ocupar várias linhas.

Seletores

A definição de propriedades são atribuídas a objetos em um documento HTML agrupando-os em seletores e colocando-os entre colchetes. Um seletor pode fazer referência a um elemento de linguagem HTML (um rótulo), como div, uma classe (atribuída com class en HTML) um identificador (atribuído com id en HTML) ou todos (o “seletor universal”) representado pelo asterisco (*). O exemplo a seguir mostra um seletor de cada tipo:

Os rótulos de HTML são expressas na definição do estilo com seu nome, as classes são marcadas colocando um ponto final antes do nome (.) e um sinal de libra (#) para identificadores.

Parte do grande poder de APF reside no possibilidade de agrupar seletores ao definir suas propriedades. Existem várias maneiras de agrupar seletores. Ao agrupá-los, separando-os por vírgulas, fica expresso que cada um dos seletores citados possui essas propriedades.

O exemplo anterior indica que as classes de consumo, umidade e temperatura compartilham cor, largura e altura. Um novo conceito também é introduzido neste código: propriedades podem ser redefinidas e, nesse caso, prevalecem as descritas mais recentemente. Desta forma, os elementos da classe de temperatura teriam finalmente uma altura de 50% do objeto que os contém.

Caso os seletores agrupados não estejam separados por vírgulas, a condição imposta às propriedades é cumulativa, ou seja, um elemento deve satisfazer todos os seletores para adquirir a aparência ou comportamento que eles definem. Se os seletores se referirem a tags HTML A ordem em que aparecem deve ser decrescente no nível de inclusão: primeiro o nível hierárquico mais alto e por último o mais baixo.

No exemplo anterior os elementos são definidos div que também são da classe de temperatura e os elementos que possuem a classe de temperatura e a classe de consumo (ambas ao mesmo tempo) como em class="temperatura consumo". Os elementos <div> De código HTML com class="temperatura" eles teriam uma alta de 100%

Propriedades CSS para definir o texto

Pode-se fazer uma distinção entre três tipos de propriedades que afetam a aparência do texto: (1) aquelas que estabelecem a fonte com a qual ele é apresentado, (2) aquelas que determinam a aparência do literal (o conteúdo do texto) e (3) os genéricos, ou seja, aqueles que afetam tanto a aparência do texto quanto a dos demais componentes. Em geral, o que foi dito para explicar os do último grupo também se aplicará às mesmas propriedades aplicadas a outros elementos.

Tipografia (fonte)

• font-family indica o nome da fonte usada para um elemento. Você pode escrever um único nome ou uma lista, em ordem de preferência e separando os nomes por vírgulas, das fontes que serão utilizadas alternativamente caso a desejada não exista. Na mesma linha, é possível usar fontes genéricas com os nomes monospace, serif, sans-serif, cursive, fantasy. Destas fontes genéricas, a mais importante (para a apresentação dos dados em questão) é a primeira que, como o próprio nome sugere, utilizará a fonte com espaçamento fixo disponível no sistema e predefinida pelo navegador. A segunda, serif, ele usará o padrão disponível serifa (acabamento ou graça). Sem leilão se o terceiro for indicado, sans-serif. Imitando escrita desenhada à mão com cursive (uma forma de chamá-lo que claramente poderia ser melhorada) e a tipografia decorativa do sistema com fantasy, o último dos cinco.

  Quanto ao código APF Os espaços têm um significado especial como separador; quando o nome da família fonte é composto por várias palavras separadas por espaços, é escrito entre aspas para evitar confusão.

  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;

  Os navegadores da Web são capazes de usar fontes locais (aquelas instaladas no sistema em que operam), bem como outras que são especificamente carregadas, até mesmo sobrepondo-se às instaladas localmente. Para carregar uma fonte, use @font-face indicando seu nome, o local de download de sua definição e, se for o caso, uma descrição de seu formato.

  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; }

  Na primeira das duas definições do exemplo anterior, a carta do documento é carregada Sircuito-Expanded-Light.eot que está localizado na pasta EOT dentro da pasta principal (raiz) e é atribuído como um nome de família CircuitExpandedLight. A propósito, você gosta dessa fonte? É grátis, você pode baixe gratuitamente a fonte Sircuito que desenhei para a imagem do GranaBot.

  Como pode ser visto no exemplo, a propriedade url, que corresponde ao localizador padrão de recursos, permite especificar o local do documento com a fonte baixada. A barra serve para separar o nome das diferentes pastas do caminho da fonte, começando pela que contém o documento a partir do qual a chamada é feita ou pela raiz se o URL Comece com uma barra.

  O segundo exemplo utiliza vários documentos alternativos para que a mesma definição funcione para vários navegadores (cada um deles carregará o tipo que é capaz de interpretar)

  A última linha da definição inclui a propriedade font-smoothing para suavizar a letra (aplique um anti-aliasing). Por não ser uma propriedade padrão, utiliza-se o prefixo -webkit.

• font-size serve para indicar o tamanho da letra como em font-size:12px;

• font-weight Define a espessura da fonte. Pode ser expresso como um valor numérico, geralmente um múltiplo de 100 entre 100 e 900, de acordo com os pesos tipográficos habituais, ou mais frequentemente com um nome: normal para a espessura da base, bold para o corajoso, bolder para a versão geralmente chamada de preta, light pela multa (comumente chamada de leve) e lighter para os mais finos (às vezes chamados de finos).

  O valor numérico da versão normal da fonte é 400 (sem unidade) e 700 para a versão em negrito.

  Por padrão, se nenhum outro valor for indicado, a aparência da fonte é a que corresponde a normal ou 400, se não tiver sido alterado no elemento genérico ou no container do qual herda, não é necessário indicar font-weight com a coragem normal.

• font-stretch É utilizado para indicar a largura da letra, desde que esteja disponível na família correspondente. Os valores possíveis que o imóvel pode assumir, ordenados do mais estreito para o mais largo, são: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Com os mesmos critérios utilizados na propriedade anterior, a largura padrão é normal e não é necessário indicá-lo expressamente, a menos que tenha sido alterado em uma ordem hierárquica superior à que está sendo definida.

• Com font-style Você pode indicar se um texto é desenhado com uma letra inclinada ou oblíqua, que afeta sua aparência, ou com uma letra cursiva, que expressa um significado especial (palavras estrangeiras, por exemplo), ou redonda, ou seja, nenhuma das anteriores ou normais. o valor oblique cumpre a primeira função, a de aparência e valor italic o segundo. O fato de a aparência de ambos ser frequentemente semelhante ou mesmo igual faz com que o uso (o significado) às vezes seja confuso, por isso vale a pena prestar atenção. Tal como acontece com outras propriedades, normal serve para desativar os valores anteriores.

• text-decoration serve para sublinhar (com o valor underline), overline (com o valor overline), riscar (com o valor line-through) ou flash (com o valor blink) o texto que esta propriedade afeta.

• Para completar a série do aspecto tipográfico, embora para a nossa aplicação não seja muito relevante, font-variant, permite que você aplique versaletes (letras minúsculas) aos textos.

Texto

• text-align informa ao navegador como o bloco de texto deve ser alinhado. Os alinhamentos possíveis ficam à esquerda (o que é considerado por padrão) com o código left, centralize com o valor center, certo usando right e justificado em ambas as extremidades com justify.

• line-height define a separação entre linhas de texto. Neste caso, se forem utilizadas percentagens, o valor de 100% corresponde à altura do texto e não à medida do contentor. A medida mais utilizada relativa ao texto corresponde a 120%. Uma linha de 100% significaria que a parte inferior de uma linha toca a parte superior da próxima. Embora o design tipográfico geralmente inclua algum espaço, é comum deixar um pouco mais de margem entre as linhas.

  Para expressar a separação entre linhas, também é possível indicar um coeficiente (um valor sem unidade) com o qual calcular a altura da linha com base na altura da caixa de texto.

• letter-spacing é o valor do espaço entre as letras das palavras, que na tipografia é conhecido como kerning o Rastreamento.

• word-spacing representa a medida dos espaços entre as palavras.

• white-space define o comportamento dos espaços em branco em um texto. Quando o valor é usado normal, que é usado por padrão, une vários espaços em branco no código HTML em uma das apresentações da página web (exibida pelo navegador) e toma os espaços em branco como referência para quebrar uma linha caso não haja espaço no bloco.

  O valor que nowrap Ele também une espaços em branco repetidos em um, mas não divide as linhas de texto nos espaços em branco, mesmo que a linha não caiba no contêiner, transbordando o espaço se necessário e escrevendo fora se necessário. Para dividir expressamente as linhas você pode usar o rótulo <br> de HTML.

  Usando pre Nem os espaços em branco são unificados juntando-os em um só, nem as linhas são divididas usando os espaços como referência.

  pre-line junte os espaços em branco repetidos e quebre as linhas, se necessário, usando os espaços em branco como referência.

  pre-wrap preserva espaços em branco repetidos e quebra linhas, se necessário, usando espaços em branco como referência.

Cor

En APF a cor pode ser expressa de acordo com Modelo de cores RGB ou de acordo com Modelo de cores HSL e em ambos os casos podem ser incluídas informações de transparência, o valor de um quarto canal que normalmente é chamado canal alfa o composição alfa, que dá origem aos modelos RGBA e HSLA.

Para expressar cores em formato RGB usando notação hexadecimal a sintaxe é usada #RRGGBB, sendo RR o valor da componente vermelha (em princípio, utilizando dois dígitos hexadecimais), GG o valor da componente verde e BB o valor da componente azul. Como já foi dito, se os dois dígitos de cada componente tiverem o mesmo valor pode ser expresso como #RGB limitar o número de cores disponíveis para as chamadas cores seguras para a web

Além desta forma de representar a cor, a mais clássica e utilizada, pode ser expressa como rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) para indicá-lo no formato RGB, HSL e seus respectivos formulários com indicação de transparência (canal alfa)

A menos que solicitado de outra forma adicionando o sufixo da unidade, o Modelo RGB usa valores decimais de 0 a 255, para os três componentes, o valor do componente alfa é um coeficiente (decimal de zero a um) e o primeiro valor do Modelo de cores HSL, o matiz, é um valor decimal que varia de 0 a 360 (sem unidades) que representa um ângulo. Os valores de saturação e luminosidade do Modelo HSL Geralmente são expressos em porcentagens.

Como já foi dito, embora seu uso não seja muito frequente, as cores podem ser indicadas pelo seu nome no formato color:black; em vez de color:#000000;. O primeiro formato é mais legível, mas está limitado a uma breve tabela de valores que também é mais difícil de modificar numericamente a partir de uma aplicação escrita em JavaScript.

Para nossa proposta de representação gráfica de dados de sensores conectados à IoT, precisaremos apenas de três propriedades relacionadas à cor. Servirão tanto para indicar o nome do texto, que agora se explica, como para indicar o nome de qualquer componente que o suporte.

• color indica a cor do elemento HTML e aquilo que contém (que o herda), a menos que seja expressamente alterado pela atribuição de outras cores individualmente.

• background-color Usado para definir a cor de fundo de um elemento HTML. Além de indicar a cor como valor RGB o HSL você pode usar valor especial transparent fazer com que o objeto não tenha cor de fundo e seja possível ver o que está localizado atrás dele, ou seja, não cobre os elementos sobre os quais foi desenhado.

• opacity permite definir a opacidade (indiretamente, transparência) de um elemento e de todo o seu conteúdo (não confundir com a transparência do fundo). Se a transparência for atribuída a elementos contidos em outros que são transparentes, esta será aumentada, não funcionará separadamente. Você não pode tornar um objeto contido em um objeto transparente mais opaco. O valor de opacity É expresso como um coeficiente como opacity:0.5; para indicar 50% de opacidade.

  Versões mais antigas do navegador da Microsoft não usavam esta propriedade, mas tinham a propriedade filter (filtro) que, entre outros valores, poderia suportar alfa (para o canal alfa) ao qual uma porcentagem de opacidade poderia ser atribuída com opacity de acordo com o formato:

  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 */

medidas

En APF, a medição dos elementos <div>, que escolhemos para compor o contêiner gráfico, é definido com width (largura) e height (alto).

entre o conteúdo de <div> e no seu perímetro existe uma área de preenchimento que é determinada com o valor de padding. Ao redor do perímetro do objeto está a aresta cuja medida é especificada com a propriedade border. Separando o exterior do objeto <div> dos outros objetos circundantes existe um espaço cuja medida é determinada por margin.

Em condições normais, a medição do espaço utilizado pelo objeto <div> pode ser calculado como a soma de sua largura ou altura mais o preenchimento (padding) mais borda (border) mais margem (margin). Quando a medida relevante estabelecida for o espaço interior útil do objeto <div>, esta composição é muito prática, mas se o que se sabe é a medida total disponível esse comportamento pode ser mudado, definido por padrão, para que a medida total de largura e altura seja a indicada por width (largura) e height (altura) subtraindo-lhe a medida do preenchimento, borda e margem, em vez de adicioná-la. Para usar este modo, atribua o propriedade box-sizing o valor border-box (o padrão é content-box)

O diagrama a seguir mostra graficamente os valores resultantes de width (largura) e height (alto) se estiver usando box-sizing:border-box; (o total) oubox-sizing:content-box; (o interior)

Os valores das medidas são expressos com as unidades já explicadas. Quando se trata de propriedades definidas por vários valores, os valores expressos com diferentes tipos de médias podem ser misturados. Além disso, existem alguns valores especiais que são relevantes para o uso que vamos fazer nesta implementação de gráficos de sensores na IoT. Especificamente, podemos usar o valor auto na propriedade margin como um recurso para centralizar objetos em algumas circunstâncias.

No exemplo acima, para a classe “small_box” é definida uma borda com 2 pixels de espessura, desenhada com um traço preto (#000000) contínuo (solid). Na classe “big_box” a linha usada para a borda é tracejada (dashed) e a cor vermelha (#FF0000). Para expressar esses valores separadamente podemos usar border-width para espessura, border-style para o acidente vascular cerebral e border-color para cor. Essas propriedades de aresta são, por sua vez, compostas e formadas pelos recursos superior, direito, inferior e esquerdo, seguindo o sentido horário conforme explicado acima.

As duas classes definidas possuem as mesmas medidas, mas a primeira é menor, pois, ao utilizar o valor border-box para propriedade box-sizing, o preenchimento, a borda e a margem são desenhados dentro do objeto em vez de ao redor do conteúdo, como é o padrão. Na classe "big_box" não é indicado, então o valor é assumido por padrão content-box o que faz com que o preenchimento, a borda e a margem aumentem para o tamanho indicado por width y height.

O valor da margem da classe no exemplo acima é de 10 pixels na parte superior, direita, inferior e esquerda, portanto pode ser expresso como um valor único margin:10px;. É muito interessante conhecer esta alternativa para entender o código desenvolvido por terceiros embora, nesta proposta de implementação, para torná-lo mais legível, sugira-se indicar, repetidos, os valores.

As três classes do exemplo anterior produzem o mesmo resultado, sendo a definição do denominado "lacônico" mais compacta e menos a do denominado "loquaz" que, mais do que para maior clareza de leitura, é a forma normalmente utilizado para modificar algum aspecto parcial e concreto de uma propriedade, reutilizando os demais valores por herança (são fornecidos pelo container ou fornecidos por uma das classes atribuídas ao elemento). Se a carga imposta ao servidor pelo texto extra desta forma de definir as propriedades e outras circunstâncias que, para tornar o código mais legível, como comentários, aumentam o tamanho e consequentemente o tráfego, fossem relevantes, seria possível processá-lo (por exemplo, exemplo) de PHP como parte da estratégia de geração de código a partir desta linguagem.

As dimensões do modelo de caixa afetam principalmente os elementos <div> mas é possível forçar esse comportamento em outros elementos com a propriedade display e o valor block. Para fazer um elemento fluir como texto em uma linha, use display:inline; e ambos os comportamentos, medições e fluxo, podem ser combinados com display:inline-block;

O valor que none na propriedade display, usado como display:none;, também permite ocultar objetos, o que servirá para "ligá-los" e "desligá-los" de JavaScript.

Se as dimensões de um elemento não forem especificadas, ele assume todas as dimensões necessárias para ajustar seu conteúdo (na verdade, ele ajusta o conteúdo sem a necessidade de estabelecer uma dimensão). Mas se as dimensões forem indicadas, pode acontecer que os objetos contidos não caibam; neste caso, as dimensões não são respeitadas, são aumentadas para permitir que todo o conteúdo fique visível.

Para que os elementos contidos em outra de medidas fixas sejam recortados quando ultrapassarem o tamanho, utiliza-se a propriedade overflow com a coragem hidden. com o valor scroll, objetos que transbordam do container também são recortados, como ocorre com hidden mas é exibida uma barra de rolagem que pode ser vista ao movê-la. O valor auto faz com que a barra de rolagem apareça apenas quando necessário com base no tamanho do conteúdo.

Você também pode estabelecer um tamanho mínimo para que os containers ocupem esse espaço mesmo que o conteúdo não necessite e sem limitar suas dimensões para aumentar quando o conteúdo exigir. As propriedades encarregadas desta tarefa são min-width para o acho e min-height para o alto. No sentido oposto, max-width defina uma largura máxima e max-height uma altura máxima que anula width já height.

Fluxo de elementos na página web

Os retângulos (blocos) que definimos com elementos <div>, eles são colocados um abaixo do outro por padrão. Para alterar esse comportamento você pode usar a propriedade floatindicador left o right como um valor, de modo que fluam da esquerda para a direita ou da direita para a esquerda, respectivamente. Pelo contrário, para evitar que um objeto “flutue” para a direita ou esquerda de outro, você pode usar a propriedade clear com os valores left, right o both, que substituem o fluxo da esquerda para a direita, da direita para a esquerda ou ambos.

Ao contrário do que acontece noutras circunstâncias, o fluxo produzido float não modifica automaticamente as dimensões do container, por isso é útil incluir em suas propriedades overflow:auto; para forçar o tamanho (altura) do contêiner a mudar quando um objeto o transborda devido à sua localização com float.

Outra forma de configurar o fluxo do conteúdo de um elemento é dividi-lo em colunas com a propriedade column-count (que neste momento deverá ser acompanhado por -webkit-column-count e de -moz-column-count) O tamanho das colunas pode ser indicado (na verdade sugerido) com column-width (-webkit-column-width -moz-column-width) e a separação entre colunas com column-gap (-webkit-column-gap -moz-column-gap)

Para que os blocos não sejam divididos e seu conteúdo seja distribuído em várias colunas, você pode usar display:inline-block; embora isso certamente implique. deixe uma parte da coluna sem uso.

Posicionamento

Para estabelecer a localização dos elementos na página web, o CSS utiliza diversos modos de posicionamento que podem ser diferentes para cada elemento, ou seja, é possível misturar diferentes critérios de posicionamento no mesmo site.

• position:static; É o posicionamento padrão (não é necessário indicá-lo se não tiver sido modificado anteriormente).Este tipo de posicionamento segue o fluxo "natural" da página: um elemento após o outro começando da esquerda, crescendo, enquanto há espaço, à direita e de cima para baixo. Não utiliza coordenadas horizontais ou verticais para estabelecer sua localização, segue a posição que corresponde à ordem do objeto.

• position:fixed; É usado para colocar um objeto em uma posição fixa na janela do navegador (como um menu, por exemplo). A localização do elemento é especificada horizontalmente com left o right para determinar a separação à esquerda ou à direita respectivamente e com top o bottom para separação acima ou abaixo da borda da janela do navegador (viewport).

  Usando este e outros tipos de posicionamento, os objetos podem se sobrepor. Objetos desenhados primeiro (definidos anteriormente no código HTML) podem ser cobertos por aqueles sorteados posteriormente (aqueles incluídos posteriormente no código HTML). Para alterar a ordem normal você pode usar a propriedade z-index, os objetos com maior valor em z-index Eles cobrem aqueles com menos valor.

• position:relative; Move o elemento da sua posição "normal" conforme indicado pelas propriedades left o right horizontalmente e top o bottom verticalmente.

• position:absolute; Coloca o elemento em uma posição fixa em relação ao objeto que o contém. A sua localização é expressa, como nos casos anteriores, com left,right, top y bottom

  O nome desse tipo de posicionamento é confuso a princípio, pois a posição é estabelecida em relação ao objeto hierarquicamente superior àquele que utiliza a propriedade, o que é discutível se é absoluto.

  Também é importante lembrar que o elemento que contém os objetos <div> que usamos no primeiro nível hierárquico é <body>, portanto, se o <div> O que você usa position:absolute; não estiver contido em outro, seu posicionamento será “absoluto” em relação à página web.

Propriedades para mídias e características específicas (consultas de mídia)

APF permite definir na mesma folha de estilos diferentes aparências para vários suportes ou suportes dependendo do tipo de dispositivo utilizado (como uma tela ou uma impressora), suas dimensões, sua orientação (vertical ou paisagem) ou sua resolução. Isto serve para poder visualizar, da forma mais adequada a um contexto, a mesma página web.

Para se referir à mídia, use @media de maneira semelhante ao que já foi explicado para fontes com @font-face, colocando entre colchetes ({ y }) as definições dos diferentes elementos: rótulos HTML, classes, identificadores...

Os tipos de mídia disponíveis em CSS3 são: all, para se referir a qualquer mídia (todas), screen para qualquer tipo de tela (versões mais antigas do APF Eles distinguiram entre monitores de TV e de computador) print para saída de impressora e speech para leitores de áudio web que interpretam informações com sintetizadores de voz.

No exemplo acima, os elementos da classe text possuem fundo preto e texto branco na tela, mas são impressos com fundo branco e texto preto.

Podem ser impostas condições à mídia para definir diferentes conjuntos de propriedades com base, por exemplo, na resolução disponível ou na proporção da janela de visualização. Estas condições e os próprios meios podem ser compostos com operações lógicas and, not y only exigir que você cumpra vários, que não cumpra ou apenas quando cumpra, respectivamente.

Entre as condições disponíveis, consideramo-las especialmente interessantes max-width (largura máxima da janela), max-height (altura máxima da janela), min-width (largura mínima da janela), min-height (altura mínima da janela), orientation (a orientação, que pode ser landscape, paisagem ou portrait, verticais), max-resolution (resolução máxima em dpi, pontos por polegada ou em dpcm, pontos por centímetro) e min-resolution (resolução mínima, também em dpi o dpcm).

No exemplo anterior começamos definindo uma cor de fundo para que, em todas as mídias, os elementos da classe main_block tenham a cor de fundo #CCCCCC. Quando exibido em uma tela e a janela tiver pelo menos 320 pixels de largura, as margens esquerda e direita serão automáticas (centralizar o bloco) e a largura do elemento será de 300 pixels. Se a resolução da tela for de 640 pixels, a largura do bloco será de 620 pixels. Como a segunda definição de mídia não inclui informações de margem e os dispositivos que atendem à segunda condição também atenderão à primeira, a margem horizontal ainda será automática.

Finalmente, no exemplo a cor de fundo é alterada para que fique branco na impressão.

A forma usual de definir estilos para diferentes mídias costuma começar pelos mais comuns, geralmente cores e fontes, seguidos pelas geometrias mais restritivas (as medidas dos dispositivos com menor número de pixels) geralmente para smartphones e tablets onde, além Será importante saber se eles são usados ​​verticalmente ou horizontalmente com orientation e certamente também a sua resolução com min-resolution. Em seguida, são indicados os diferentes tamanhos para telas maiores, e geralmente termina com mídia de impressão e voz, que no exemplo dos gráficos IoT foram omitidas.

Use @media A imposição de condições como dimensões, resolução e orientação permite ao designer criar uma única página web que, com estilos diferentes, terá o aspecto mais adequado para cada dispositivo. Esse comportamento geralmente é chamado de design responsivo; design adaptável, numa tradução muito livre.

CSS para contêiner gráfico SVG

Com o que foi explicado até agora, agora é possível definir os estilos que o Contêiner HTML de gráficos SVG com o qual representar o estado dos sensores conectados à IoT. No código a seguir está a proposta incluindo, comentada, a distribuição em colunas que corresponde a um número de gráficos maior do que aqueles que a proposta da série de artigos utiliza, para que possa ser reaproveitada em outros casos.

Abaixo você pode ver como seriam esses estilos. Código HTML do contêiner proposto para gráficos SVG do artigo anterior.

O próximo artigo desta série explica como desenhar com SVG Gráficos de dados do status dos sensores conectados à Internet das Coisas (IoT).