Programação para Web I

Todos os elementos estilizados pelo CSS são, de alguma forma, representados através de caixas. Essas caixas são a chave para o alinhamento de todos os componentes.

Uma elemento estilizado pelo CSS pode conter a seguinte lista de atributos que podem ser definidos na folha de estilos:

• Content box: é a area interna onde o conteúdo do elemento é apresentado. Seu tamanho pode ser modificado usando as propriedades width (largura) e height (altura)
• Padding box: a area interna do elemento e ao redor do conteúdo. Essa área pode ser controlada usando a propriedade padding
• Border box: a area entre a área de margin e de padding. Define o limite do elemento em si. Pode ser contrado usando a propriedade border.
• Margin box: define o espaço ao redor do elemento. Pode ser definido pela propriedade margin.

É importante destacar, no entanto, que diferentes elementos podem possuir modelos de visualização diferentes, que alteração não só a forma como essas propriedades são reconhecidas, como também algumas regras para a sua disposição na página e relação com outros elementos.

De modo geral, os dois principais tipos de visualização externa que temos no CSS são: box e inline.

Todos os elementos possuem uma das duas características, porém, podemos refinir o modelo de visualização externa do elemento usando a propriedade display. Como por exemplo:

div{
    display: inline;
}

Elementos do tipo block possuem como características:

• O elemento será quebrado em uma nova linha;
• O elemento se estende por padrão na direção da linha e ocupa todos espaço disponível horizontalmente;
• O tamanho definido com width e height é respeitado;
• Padding, margin e border "empurram" outros elementos para longe do elemento block.

Elementos como h1, p e div são, por padrão, elementos do tipo block

Elementos do tipo inline possuem como características:

• O elemento NÃO será quebrado em uma nova linha;
• O tamanho definido com width e height não é aplicado;
• O elemento NÃO se estende na horizontalmente na direção da linha
• Padding, margin e border verticais não causam nenhum efeito em outros elementos
• Padding, margin e border horizontais empurram outros elementos para longe

Elementos como span, strong e a são, por padrão, elementos do tipo inline

Elementos do tipo inline-block possuem como características um misto de inline e block:

• O elemento NÃO será quebrado em uma nova linha;
• O tamanho definido com width e height é aplicado;
• O elemento NÃO se estende na horizontalmente na direção da linha
• Padding, margin e border empurram outros elementos para longe

A margem de um elemento é a área invisível ao redor de sua caixa. Uma margem é utilizada para empurrar outros elementos para longe, fazendo com que um espaço seja respeitado. Margens podem ter valores positivos ou negativos e podem ser atribuídos para cada lado da caixa:

• margin-top: margem acima
• margin-bottom: margem abaixo
• margin-left: margem esquerda
• margin-right: margem direita

Para atributir todos os valores de uma só vez, podemos usar apenas margin

Os valores aceitos para as margens podem ser valores como: 50px (pixels), 20% (porcentagem), 1.2rem...(

Quando duas margens de elementos são sobrepostas, o tamanho total da margem passa a ser o maior tamanho entre os dois elementos

O padding é uma área entre a borda da caixa de um elemento e o seu conteúdo. Essa ainda é considerada parte do conteúdo, por isso qualquer background aplicado ao elemento ainda será aplicado dentro da área de padding. O padding pode receber apenas valores positivos, que podem ser setados para cada um dos lados:

• padding-top: preenchimento acima
• padding-bottom: preenchimento abaixo
• padding-left: preenchimento esquerda
• padding-right: preenchimento direita

Para atributir todos os valores de uma só vez, podemos usar apenas padding

A borda é o espaço entre a margem e o padding de uma caixa. A borda possui diferentes opções de estilização, além do seu tamanho também é possível definir estilo e cores:

• border-width: tamanho da borda (ex.: 2px, 1.5rem, 1cm...)
• border-style: estilo da borda (ex.: solid, dashed, double...)
• border-color: cor da borda (ex.: orange, #555, #1235FC...)

Cada lado da borda pode ser definido usando:

• border-top: borda acima
• border-bottom: borda abaixo
• border-left: borda esquerda
• border-right: borda direita

Neste caso, o valor dado a cada propriedade é um conjunto de três valores para representar, respectivamente: width, style e color (ex.: border-left: 1px solid gray;

Para atributir todos os valores de uma só vez, podemos usar apenas border

Também podemos definir o arredondamento da borda de um elemento usando a propriedade border-radius

A propriedade float pode ser usada para posicionar e formatar conteúdo. Os valores para a propriedade podem ser:

• left, elemento é posicionado à partir da esquerda do elemento pai
• right, elemento é posicionado à partir da direita do elemento pai
• none, o elemento será exibido na ordem que aparece no documento (valor padrão)
• inherit, herda o valor do componente pai

A propriedade position pode ser usada para definir a referência do posicionamento de um elemento. Os valores para a propriedade podem ser:

• static, elemento é posicionado de acordo com o fluxo normal (valor padrão)
• relative, elemento é posicionado relativo à posição normal
• fixed, o elemento é posicionado com referência ao viewport (janela)
• absolute, elemento é posicionado de acordo com o ancenstral mais próximo
• sticky, elemento é posicionado de acordo com a posição do scroll, alternando entre os modos relativo e fixo.

Para a maioria dos valores, precisamos também definir o valor para cada direção do elemento usando as propriedades left, right, top e bottom com os valores de tamanho (ex.: 5px, 1rem, 10vh)

Pilha de elementos

Quando dois elementos precisam ser inseridos um sobre o outro, podemos também utilizar a propriedade z-index, com um número que define sua importância na renderização dos elementos. Isso também pode ser entendido como o número da camada ao qual o elemento pertence.

O overflow (transborda) no CSS acontece quando um componente possui mais conteúdo do que a sua caixa pode exibir.

Apesar de o tamanho das caixas procurar sempre a adaptação ao seu conteúdo, a utilização de propriedades como heigth e weight, que forçam um tamanho explícito para uma caixa podem causar o overflow em algumas situaçãoes.

Ao contrário de ocultar o conteúdo em overflow, o CSS sempre vai, por padrão, mostrar o conteúdo transbordado. Isso acontece basicamente pra impedir a perda de dados, que pode causar mais problemas em uma página web do que um texto transbordado. Um texto oculto na página pode simplesmente não ser percebido pelo desenvolvedor e muito menos pelo usuário.

Em casos onde o overflow é esperado e/ou inevitável, podemos usar a propriedade overflow para controlar a forma como um conteúdo transbordado será exibido. Por exemplo:

div{
    overflow: hidden
}

O exemplo acima faz com que o overflow de uma caixa seja escondido.

Outra opção é utilizar um scroll:

div{
    overflow: scroll
}

A opção scroll mantém os scrolls mesmo que não sejam necessários, afim de manter a consistência no tamanho da caixa de conteúdo. Para remover os scrolls quando não necessários, basta usar o valor auto

Por fim, ainda podemos definir a direção do overflow que queremos controlar, usando as propriedades:

• overflow-y
• overflow-x

Unidades absolutas

Unidades relativas

Cores

A propriedade background é um atalho para um grande número de propriedades que podem ser setadas para um elemento com o CSS. Entre elas:

• background-color: define uma cor para o fundo do elemento. Exemplo: background-color: red;
• background-image: define uma imagem de fundo para o elemento. Aceita o valor do tipo url(). Exemplo: background-image: url("gtaVI.png");
• background-repeat: controla a repetição do fundo no caso de imagens. Aceita os valores:
  • no-repeat: sem repetição
  • repeat-x: repete a imagem apenas na horizontal
  • repeat-y: repete a imagem apenas na vertical
  • repeat: padrão; repete a imagem em ambas as direções
• background-size: controla o posicionamento de uma imagem dentro do elemento. Aceita os valores:
  • cover: ajusta a imagem maior do que a caixa do elemento, mantendo o aspecto
  • contain: ajusta a imagem menor do que o elemento, mantendo o aspecto

Algumas propriedades podem ser úteis quando trabalhamos com imagens em geral:

Tamanho:

• width e height, definem um tamanho fixo para a imagem
• max-width e max-height, definem um tamanho máximo para a imagem, imagens menores que este valor não serão escaladas
• min-width e min-height, definem um tamanho mínimo para a imagem, imagens maiores que este valor não serão escaladas

Posicionamento

• object-fit, define a forma como a imagem será posicionada dentro da caixa. Aceita valores como contain, cover e fill

Efeitos

• filter, pode definir diferentes filtros a serem aplicados na imagem. Como por exemplo:
  • grayscale(valor), define escala de azincentamento da imagem
  • blur(valor), define escala de borrão da imagem
  • constrast(valor), define escala de contraste da imagem
  • hue-rotate(valor-deg), define valor em graus da troca de matriz de cores da imagem
  • opacity(valor), define escala de opacidade da imagem
  • sepia(valor), define escala de efeito sépia da imagem
  • saturate(valor), define escala de saturação da imagem
  • invert(valor), define escala de inversão de cores da imagem

Para outros efeitos, acesse esta lista

As seguintes propriedades podem, geralmente, serem aplicadas a qualquer elemento:

• opacity, define a opacidade do elemento em valores de 0-1
• display: none;, remove um elemento da renderização
• box-shadow: valor-x valor-y valor-blur valor-spread cor;, define um valor para a sombra do componente

Utilizando um documento HTML e uma folha de estilos CSS, reproduza o modelo abaixo:

Não esqueça de utilizar os devidos elementos semânticos para a estrutura HTML.

Utilizando um documento HTML e uma folha de estilos CSS, crie um modelo capaz de replicar, com a maior fidelidade possível o modelo de carteirinha de estudante abaixo:

Não é necessário que o modelo seja responsivo. Os tamanhos podem ser definidos de forma absoluta.

As imagens utilizadas também não precisam ser as mesmas utilizadas no modelo, no entanto, o documento deve conter, na mesma estrutura e tamanho, as imagens apresentadas:

• Logo da DNE (pode ser substituída por outro logo)
• Foto de estudante (pode ser substituída)
• QR Code (pode ser substituída por outro QR Code)
• Logo de 2020 (direita inferiro, pode ser substituída)
• Logo da UNE, UBES e ANPG (podem ser substituídos por outros logos)
• Imagem de fundo (pode ser substituída por outra imagem ou por uma cor)