Engenharia de computacao, Slides de Teoria da Computação

Baixe Engenharia de computacao e outras Slides em PDF para Teoria da Computação, somente na Docsity!

FUNDAMENTOS DA

PROGRAMAÇÃO WEB

AULA 3

Prof.ª Margarete Klamas

CONVERSA INICIAL

Vamos conhecer outras possibilidades de utilizar CSS. O objetivo desta abordagem é apresentar um aprofundamento em CSS, que serve de base para o desenvolvimento de aplicações web para os mais variados fins. Ao concluirmos os cinco tópicos, você será capaz de aplicar estilos (formatações) em páginas HTML, bem como poderá fazer alterações em páginas criadas por outros desenvolvedores. No tópico 1, abordaremos a árvore do documento (DOM). No tópico 2, pseudoclasses e pseudoelementos. No tópico 3, veremos como criar menus (barras de navegação) e botões. No tópico 4 dimensionamento, variáveis e formatações para imagens. No tópico 5, abordaremos transformações 2D e transições.

TEMA 1 – ÁRVORE DO DOCUMENTO (DOM)

Ao manipular CSS, é necessário compreender o conceito de herança, porque algumas propriedades CSS por padrão herdam valores que foram definidos no elemento pai, outros não. Por exemplo: se declararmos uma cor da fonte para um elemento, todos os elementos dentro dele receberão essa cor por herança, salvo se for declarada uma cor diferente diretamente a eles. A propriedade width (largura) não faz parte da herança. Para compreendermos melhor a hierarquia (herança) dos elementos dentro de um documento HTML, usamos um modelo que representa os elementos de uma página HTML, o DOM. O diagrama representativo do DOM é semelhante a uma árvore. É uma analogia a árvore genealógica de uma família, na qual são representados os graus de parentesco, os ascendentes e os descendentes entre seus membros. Árvore do documento é uma estrutura que representa os nós do documento e a maneira como eles se relacionam. Pode ser assim representada:

div header, section, section, footer header h1, h footer p, em, a pre -

Podemos identificar o elemento-irmão: ELEMENTO PAI ELEMENTO-IRMÃO div header, section, section, footer section h3 e pre ul li,li,li p em, a

Podemos estilizar em CSS utilizando nomes das tags, como já vimos, e até descrever o grau de parentesco, conforme a árvore do documento. A seguir, na tabela, a letra E é abreviatura de elemento e F é abreviatura de filho. Por exemplo:

SELETOR SELECIONA EXEMPLO E F Elemento F descendente do elemento E E>F Elemento F filho do elemento E nav > ul { margin-left: 30px; } Vai estilizar o ul filho do nav. E + F Elemento F imediatamente após E (irmãos) E ~F Elemento F após elemento E (irmãos)

h1 ~ h2 { font-size: 27px;} Vai estilizar o h2, elemento- irmão do h1. E:first- child

E:last- child

Elemento E primeiro-filho do seu elemento-pai

nav > ul > li:first-child { font- size: 26px;} Seletor composto. Essa regra CSS estiliza o elemento li, último filho do elemento ul, que, por sua vez, é filho de nav.

Na tabela anterior, estão alguns exemplos de declarações que você pode vir a observar em CSS. Pode-se conhecer a tabela completa em: https://www.w3schools.com/cssref/css_selectors.asp.

TEMA 2 – PSEUDOCLASSES E PSEUDOELEMENTOS

Conforme estudamos anteriormente, podemos definir estilos utilizando class, que se iniciam com um ponto (.). Outra maneira de aplicarmos estilos é a partir das pseudoclasses, que nos permitem selecionar um elemento que não consta na árvore do documento. A sintaxe utiliza um sinal de dois-pontos (:) seguido do nome da pseudoclasse. Exemplo: selector:pseudo-class{ property:value; }

a:link { color: red; }

2.1 Pseudoclasses

PSEUDOCLASSE APLICAÇÃO

:link Link não visitado. O padrão de link não visitado é a cor azul. Podemos alterar essa cor, com essa pseudoclasse. CSS a:link {color: green; text-decoration:none;} HTML Site do Google Nesse exemplo, o texto do link, quando ainda não visitado, será na cor verde e sem o sublinhado padrão. :visited Link visitado. O padrão do link visitado é a cor roxa. Podemos alterar essa cor, com essa pseudoclasse. CSS a:visited {color: MistyRose;} HTML Site do Google Nesse exemplo, o texto do link depois que for visitado será na cor rosa (MistyRose).

Nesse exemplo, os dois controles input serão estilizados, conforme a regra CSS. :enabled :disabled

Pode ser aplicado em um elemento habilitado (:enabled) ou desabilitado (:disabled). CSS input:enabled { border: 1px solid gray; } input:disabled { border: 1px solid blue; } HTML < form > < input type =" text" /> < input type =" text" disabled =" disabled" /> </ form > Nesse exemplo, o primeiro controle input terá uma borda na cor cinza (gray), e o segundo, na cor azul (blue).

A ordem na estilização deve ser: a:link { ... } a:visited { ... } a:hover { ... } a:active { ... } Caso inverta a ordem, o efeito não será aplicado conforme o planejado.

2.1 Pseudoelementos

Quando desejar estilizar parte de um elemento , como, por exemplo, a primeira letra de uma palavra, temos o recurso chamado de pseudoelemento. É possível formatar antes ou depois do conteúdo de um elemento. A sintaxe dos pseudoelementos é dois-pontos duplos (::). Sintaxe:

selector::pseudo-element{ property: value; }

PSEUDOELEMENTO APLICAÇÃO ::after Pode-se formatar elemento depois. CSS

HTML

Aqui um parágrafo

Aqui um parágrafo

Irá aparecer um ícone após o parágrafo. ::before Permite formatar elemento antes. CSS HTML No exemplo anterior, será renderizado no browser: Nome: Anna ::first-letter

Podemos formatar para:.first- letter:

• propriedades da fonte
• propriedades de cor
• propriedades de fundo
• propriedades de margem
• propriedades de preenchimento
• propriedades da borda
• decoração de texto
• vertical-align (somente se "float" for "none")
• transformação de texto
• altura da linha
• float
• clear

Permite aplicar a formatação na primeira letra. CSS CSS

HTML

Aqui o texto do parágrafo

No exemplo anterior, a primeira letra do parágrafo ficará na cor lilás.

::first-line Permite aplicar formatação na primeira linha. CSS

TEMA 3 – BARRA DE NAVEGAÇÃO

A barra de navegação tem o objetivo de permitir que o usuário encontre os assuntos disponíveis no site ou aplicação.

Para criarmos uma barra de navegação (menus), precisamos de HTML para criar inicialmente uma lista.

3.1 Barra de navegação vertical

Exemplo:

• Notícias
• Contato

Descrição da imagem:

Na imagem ao lado, visualizamos a lista criada. Como utilização HTML, temos na lista o marcador padrão (bolinha) e os links: Home, Notícias e Contato estão sublinhados e na cor azul. Estes são os padrões de exibição do HTML

No quadro anterior, criamos uma lista com hiperlinks. Para estilizarmos o menu, iremos executar os passos a seguir:

CSS O QUE FAZ

Alterar a cor do :hover

O código do exemplo anterior está disponível em: https://github.com/N-CPUninter/FUNDAMENTOS-DE-DESENVOLVIMENTO- WEB/blob/main/html/barra_navega%C3%A7%C3%A3o _vertical.html

Observação: caso queira modificar este exemplo para menu horizontal, altere o

2. Para:

li{display:inline;} a { color: #000; padding: 8px 16px; text- decoration: none; }

3.2 Barra de navegação horizontal

Para a barra de navegação horizontal, podemos utilizar a propriedade display ou float. Vamos utilizar a mesma lista para o exemplo:

O exemplo anterior está disponível em: <https://github.com/N-CPUninter/FUNDAMENTOS-DE- DESENVOLVIMENTO- WEB/blob/main/html/barra_navega%C3%A7%C3%A3o_horizontal.html>

3.3 Menu vertical com menu suspenso

O menu suspenso permite colocar uma lista suspensa como link. Vamos aqui também utilizar uma lista HTML.

CÓDIGO EXPLICAÇÃO

• Home
  • Sobre nós
  • Nossas Lojas
• Notícias
• Contato

Aqui estamos inserindo uma lista dentro da outra para gerar o submenu.

Home aqui não fechamos a

Inserimos a lista para o submenu
• Sobre nós
• Nossas Lojas
Fechamos a li da 1ª linha

Fechamos a sublista

Vamos ao CSS com a estilização do submenu:

CSS O QUE FAZ ul { margin: 0; padding: 0; list-style-type: none; width: 150px; }

Remove bullets e identificação das listas

ul li { position: relative; }

Agora vamos posicionar os itens da lista, definir o posicionamento com o valor relativo, porque depois iremos posicionar os submenus na posição absoluta em relação a eles. li ul { position: absolute; left: 149px; top: 0; display: none; }

Agora vamos estilizar os submenus. Queremos cada submenu ao lado direito do seu elemento-pai assim que passarmos o mouse sobre ele. Com as propriedades CSS Left e Top, podemos posicionar cada item do submenu ao lado de seu item-pai. Definimos o display: none, para que o submenu não fique visível por padrão.

ul li a { display: block; text-decoration: none; color: #E2144A; background: #fff; padding: 5px; border: 1px solid #ccc; }

Agora vamos dar uma aparência melhor aos nossos links. É importante definir display:block, para que cada link ocupe toda a largura definida para ele na lista.

ul li a:hover { text-decoration: underline; font-weight: bold; background: #ccc; }

Agora vamos dar uma aparência melhor ao nosso menu quando passarmos o mouse em cima dele.

li:hover ul { display: block; }

Exibindo o submenu com: display: block;

Na imagem ao lado, temos a renderização do menu. Ao colocar o cursor sobre Home, o submenu passa a ser exibido. Ao retirar o cursor, ele não será exibido. O código do exemplo anterior está disponível em:

<https://github.com/N-CPUninter/FUNDAMENTOS-DE- DESENVOLVIMENTO-WEB/blob/main/html/menu%20_lista.html>

Exemplo: .div1 { width: 400px; height: 200px; border: 1px solid red; }

.div2 { width: 400px; height: 200px; padding: 30px; border: 1px solid blue; } No exemplo anterior, a largura da div1 é igual a div2, o mesmo ocorre com a altura. Porém, a div2 ocupará maior espaço, pois serão acrescidos os valores da borda e do padding. A propriedade box-sizing permite incluir os valores da borda e preenchimento no valor total da div. Para que isso ocorra, devemos definir box- sizing: border-box:

.div1 { width: 400px; height: 200px; border: 1px solid red; box-sizing: border-box; }

.div2 { width: 400px; height: 200px; padding: 30px; border: 1px solid blue; box-sizing: border-box; } É aconselhável utilizar a propriedade em todos os elementos da página.

• { box-sizing: border-box; }

4.2 Variáveis

Podemos utilizar variáveis com CSS, com a função var(). É possível utilizar variáveis para definir as cores, evitando a repetição de códigos. Podemos declarar variáveis com escopo global ou local. As variáveis globais podem ser acessadas em todo o documento, enquanto as variáveis locais podem ser utilizadas apenas dentro do seletor onde está declarada. Para declarar uma variável global, utiliza-se o seletor :root. Para declarar uma variável com escopo local, declare-a dentro do seletor que irá utilizá-la. Exemplo de sintaxe: :root { --dourado: #DEB44B; --branco: #ffffff; } body { background-color: var(--

:root { --top-color: #F5D95F; --bottom-color: #ffffff; --my-gradient: linear- gradient(var(--top-color), var(-- bottom-color));

4.3 Formatações para imagens

É possível aplicar estilos em imagens, como arredondamento de cantos e opacidade. Por exemplo:

Imagem com cantos arredondados: img { border- radius: 10px; }

Imagem circular se as medidas formarem um quadrado, ou oval, se as medidas formarem um retângulo. img { border- radius: 50%; }

Imagem com opacidade: img { opacity: 0.5; } A opacidade padrão é 1. Teste números menores que 1.

Para centralizar imagens, utilize:

img { display: block; margin: auto; }

A respeito do redimensionamento de imagem, não é recomendável aumentar uma imagem além do seu tamanho normal. Diminuir é possível:

CSS

HTML

Obs.: o tamanho normal da imagem é 1000.

dourado); } h2 { border-bottom: 2px solid var(--dourado); }

} body { background-image: var(--my- gradient); }

translate()

seletor { transform: translate(x, y); }

Permite deslocar um box na horizontal e na vertical ao mesmo tempo.

No exemplo a seguir, o elemento div terá um deslocamento horizontal de 80px e vertical de 100px: div {transform: translate(80px, 100px);}

scaleX()

seletor { transform: scaleX(n); }

Permite expandir ou contrair a largura de um box.

No exemplo a seguir, o elemento div aumentará três vezes o seu tamanho, na largura. div {transform: scaleX(3);} No exemplo a seguir, o elemento div diminuirá a metade de seu tamanho original, na largura. div {transform: scaleX(.5);}

scaleY()

seletor { transform: scaleY(n); }

Permite expandir ou contrair a altura de um box.

No exemplo a seguir, o elemento div aumentará três vezes a sua altura. div {transform: scaleY(3);} No exemplo a seguir, o elemento div diminuirá a metade de sua altura. div {transform: scaleY(.5);}

scale()

seletor { transform: scale(n,m); }

Permite expandir ou contrair a largura e altura de um box.

No exemplo a seguir, o elemento div aumentará três vezes a sua largura e duas vezes a sua altura. div {transform: scale(3,2);}

rotate()

seletor { transform: rotate(a); }

Permite girar um box no sentido horário (valor positivo) e anti- horário (valor negativo).

No exemplo a seguir, o elemento div irá girar 20 graus no sentido horário. div {transform: rotate(20deg);} Medidas CSS para ângulos são: deg, grad, rad e turn.

skewX() seletor { transform: skewX(a); }

Permite inclinar um box, utilizando o eixo X.

No exemplo a seguir, a div será inclinada 20 graus ao longo do eixo X: div { transform: skewX(20deg); } skewY() seletor { transform: skewY(a); }

Permite inclinar um box, utilizando o eixo Y.

No exemplo a seguir, a div será inclinada 10 graus ao longo do eixo Y: div { transform: skewY(10deg); } skew() seletor { transform: skew(a,b); }

Permite inclinar um box, utilizando os eixos X e Y.

No exemplo a seguir, a div será inclinada 20 graus ao longo do eixo X e 10 graus ao longo do eixo Y: div { transform: skewY(20deg,10deg); } matrix() Combina todos os métodos de transformação 2D.

Sintaxe: matrix (scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

5.2 Transições CSS

Permite criar transições ao definir uma mudança de valor de uma propriedade CSS, de modo que ela (a mudança de valor) ocorra de forma suave, em um espaço de tempo especificado (Silva, 2013). Propriedades de transição:

• transition;
• transition-delay;
• transition-duration;
• transition-property;
• transition-timing-function.

Para aplicar a transição, é necessário especificar qual a propriedade CSS e qual o tempo da transição. É necessário especificar dois valores para a propriedade.