Aula 04 - CSS

•

UNIFACS

Bowie Netto

06/12/2021

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Web

628 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Cascading Style Sheets
CSS
Aula 4: Formatação de HTML utilizando CSS 
	Tipos de Seletores 
	Manipulação de divs 
Profa. Dra. Ana Patrícia F. Magalhães Mascarenhas
ANA.FONTES@UNIFACS.BR
ANAPATRICIAMAGALHAES@GMAIL.COM
Objetivo
Descrever a função e a importância do CSS para as páginas web. 
Apresentar a sintaxe e as possibilidades de criação com CSS aplicado ao layout. 
Criar páginas HTML estilizadas com CSS. 
Construir disposições gráficas com divs e CSS. 
Destacar os principais eventos e formas de animação. 	
Recursos
Sintaxe e construções usando CSS: MILETTO, Manara, E., BERTAGNOLLI, Castro, S. D. Desenvolvimento de Software II: Introdução ao Desenvolvimento Web com HTML, CSS, JavaScript e PHP, 1st edição, 2014. Cap. 4. Pg. 80-104. 
Apresentar o site: http://www.csszengarden.com para ilustrar o potencial do uso de CSS. 
Utilizar o site de dicas de construção em CSS para ilustrar pequenas construções com animações: https://css-tricks.com. 	
https://www.w3schools.com/css/default.asp
Motivação
Quando escrevemos o HTML, marcamos o conteúdo da página com tags que melhor representam o significado daquele conteúdo. 
Ex.:
<h1><font color="red">Ola pessoal</font></h1>
Motivação
Escrever estilos junto com o HTML pode ser muito improdutivo
Código misturado e difícil de ler
Se você precisar mudar a formatação
Se tiver muitas páginas no seu site? Vai mudar uma por uma?
CSS
Linguagem com o objetivo de cuidar da estilização de páginas
Sintaxe do CSS
A linguagem CSS trabalha com propriedades de formatação dos estilos para HTML.
A sintaxe básica da CSS considera que Propriedade e valor são separados por “:” e cada propriedade separada por “;”
Ex.:
background-color: yellow; 
color: blue;
Como usar o CSS
O estilo pode ser aplicado a um elemento do seu site de 3 formas diferentes:
Definindo o atributo Style diretamente no elemento da página HTML que será formatado
Usando a tag <Style></Style> na seção <head> da página HTML
Usando um arquivo CSS externo
Como usar o CSS (2)
Definindo o atributo Style diretamente no elemento da página HTML que será formatado (não recomendado)
<p style="color: blue; background-color: yellow;"> O conteúdo desta tag será exibido em azul com fundo amarelo no navegador! 
</p>
Como usar o CSS (2)
2. Usando a tag <Style></Style> na seção <head> da página HTML
	Neste exemplo todo o conteúda das tags <P> serão exibidos de acordo com o estilo definido. No nosso exemplo temos o mesmo efeito de forma mais “limpa”
<!DOCTYPE html>
 <html> 
 <head> 
 <title>Sobre a Mirror Fashion</title>
 <style> p { background-color: yellow; color: blue; }</style>
 </head> 
<body> 
 <p> O conteúdo desta tag será exibido em azul com fundo amarelo! </p> 
</body> 
</html>
Como usar o CSS(3)
3. Usando um arquivo CSS externo
É indicado no documento html qual o arquivo de css que está sendo utilizado
No exemplo abaixo, dentro do arquivo “estilos.css” colocamos o conteúdo que antes estava na tag <Style>
DOCUMENTO HTML
<!DOCTYPE html>
 <html> 
 <head> 
 <title>Sobre a Mirror Fashion</title>
 <link rel="stylesheet" href="estilos.css">
 </head> 
<body> 
 <p> O conteúdo desta tag será exibido em azul com fundo amarelo! </p> 
</body> 
</html>
DOCUMENTO estilos.css
p { background-color: yellow; 
 color: blue; }
9
Como usar CSS(4)
Se o mesmo elemento for formatado com diferentes estilos em locais distintos, a página HTML aplica o último estilo lido.
Ex.: criamos um arquivo .css e formatamos a tag <h1>. Depois no próprio documento, além de importar o arquivo .css, definimos novamente o estilo para <h1>
Será utilizado o último lido. 
No exemplo ao lado a cor usada 
será Orange
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
 color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
</html>
CSS com seletores
Às vezes não queremos aplicar o CSS a todos os elementos (de um tipo) da página, mas apenas algum determinado
USO DE SELETORES
CSS com seletores
	Seletor	Exemplo	Descrição
	.class	.introdução	Aplicado a todos os elementos cuja class seja introdução
	#id	#titulo	Aplicado a todos os elementos cujo id=titulo
	*	*	Aplicado a todos os elementos
	Elment	p	Aplicado somente a tag <p>
	Element, elemento, elemento	p,h1	Aplicado a todos os elementos listado, p e h1
Seletor de classe
A definição do estilo para aplicação do CSS a elementos de uma classe específica deve-se colocar um ponto . seguido do nome da classe
Neste caso os elementos da UML que tiverem o atributo class=“center” terão a formatação definida acima.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
 text-align: center;
 color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 
</body>
</html>
Seletores de ID
Para aplicar propriedades visuais a um elemento selecionado pelo valor de seu atributo id usa-se o caractere "#" seguido do valor correspondente.
#cabecalho { color: white; text-align: center; }
O seletor acima fará com que o elemento do nosso HTML que tem o atributo id com valor "cabecalho" tenha seu texto renderizado na cor branca e centralizado. 
Não há nenhuma indicação para qual tag a propriedade será aplicada. Pode ser tanto uma <div> quanto um <p>, até mesmo tags sem conteúdo como uma <img>, desde que essa tenha o atributo id com o valor "cabecalho“
o seletor deve aplicar suas propriedades declaradas somente àquele único elemento e, por cascata, a todos os seus elementos filhos.
O id deve ser único na página
Seletor de elemento
A aplicação do CSS será baseada no nome do elemento
 p {
  text-align: center;
  color: red;
}
Neste caso o estilo será aplicado a todos os elementos da página que sejam do tipo parágrafo <p>
Seletor de classe (2)
Podemos também restringir o seletor de classe a somente um elemento HTML
Neste caso mesmo o elemento h1 tendo feito referencia a classe, ele não foi afetado porque não é um parágrafo.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
 text-align: center;
 color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 
</body>
</html>
Seletor de classe (3)
Pode-se fazer referencia a mais de uma classe em um mesmo elemento.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
 text-align: center;
 color: red;
}
p.large {
 font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> 
</body>
</html>
Agrupamento de seletores
Quando temos seletores com os mesmos atributos
h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}
h1, h2, p {
  text-align: center;
  color: red;
}
Comentários em CSS
p {
  color: red;
  /* This is a single-line comment */
  text-align: center;
}
/* This is
a multi-line
comment */
Vamos fazer um teste 
Utilizando um dos sites que fizemos em aulas anteriores...
Crie um estilo para a tag <P> e um estilo para a tag <Body> (dentro da própria página)
Teste
Agora crie um arquivo separado no bloco de notas e coloque o estilo. Salve como .css. Importe para o seu site e teste novamente.
Cores
No CSS cores podem ser especificadas pelo nome ou pelos valores em RGB, HEX, HLS, RGBA ou HLSA R
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1><h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Para saber mais sobre cores: https://www.w3schools.com/css/css_colors.asp
21
Cores (2)
Cor de fundo dos elementos: background-color 
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Cor do texto: color 
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Cor da borda: border 
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Para saber mais sobre cores: https://www.w3schools.com/css/css_colors.asp
Background
Usados para aplicar efeitos de fundo (ao elemento)
background-color - background-image
background-repeat - background-attachment (scroll / fixed)
background-position
Imagem para colocar como pano de fundo: background-image
A imagem é repetida em toda a área aplicada
body {
  background-image: url("paper.gif");
}
Se não quiser repetir, pode colocar em uma posição fixa
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
Bordas
Formatação de estilo, tamanho e cor da borda
Bordas: border-style
Dotted
Dashed
Solid
Double ....
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
Outros formatos em: https://www.w3schools.com/css/css_border.asp
Bordas (2)
Largura da Borda: border-width
Cor da borda: border-color
Outros formatos em: https://www.w3schools.com/css/css_border.asp
p.one {
  border-style: solid;
  border-width: 5px;
 border-color: red;
}
Para formatar o estilo de cada lado da borda
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
Bordas arredondadas: border-radius
p.round2 {
 border: 2px solid red;
 border-radius: 8px;
}
Padding
Criação de espaços entre os elementos e a borda: Padding
Pode-se criar espaços em lados diferentes ou em todos os lados
padding
padding-top
padding-left
padding-right
padding-botton
Pode-se especificar o espaçamento em
 tamanho (length – px, pt, cm) ou em %
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
Mais exemplos em: https://www.w3schools.com/css/css_padding.asp
Algumas formatações...
Outline: linha desenhada por fora da borda
outline-color
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
}
Formatação de textos
font-family: indica o tipo da fonte
e.x. p { font-family: arial; }
Podemos elencar alguns tipos de fonte para serem consideradas (na sequencia) pelo navegador que vai ler o documento html. 
No exemplo abaixo se o navegador não encontrar a fonte “Arial” vai procurar a fonte “Helvetica” e assim por diante. Se não encontrar nenhuma, vai pegar alguma da família “sans-serif”, a que ele encontrar.
body { 
 font-family: "Arial", "Helvetica", sans-serif; 
 }
Formatação de textos (2)
font-style: indica o estilo da fonte (normal, italic, oblique).
e.x. p { font-style: normal; }
Text-align: determina o alinhamento do texto (center, justify, left, right)
p { text-align: center; }
Text-transformation: especificar maiúsculo / minúsculo
p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
Mais detalhes sobre formato de textos: https://www.w3schools.com/css/css_text.asp
29
Icones
Utilizamos bibliotecas de ícones para adicionar ícones nas páginas
Ex.:fontawesome.com
	<script src="https://kit.fontawesome.com/yourcode.js"></script>
Mais detalhes sobre formato de textos: https://www.w3schools.com/css/css_icons.asp
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
30
Links
Links podem ser estilizados com as propriedades CSS como color, font-Family, background, etc.
Mais detalhes sobre formato de textos:https://www.w3schools.com/css/css_link.asp
<head>
<style>
a:link, a:visited {
 background-color: #f44336;
 color: white;
 padding: 14px 25px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
}
a:hover, a:active {
 background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body>
31
Formulários 
Foco no campo selecionado
Mais detalhes sobre formato de textos:https://www.w3schools.com/css/css_form.asp
<style> 
input[type=text] {
 width: 100%;
 padding: 12px 20px;
 margin: 8px 0;
 box-sizing: border-box;
 border: none;
 background-color: #3CBC8D;
 color: white;
}
input[type=text]:focus {
 background-color: lightblue;
}
</style>
...
<form>
 <p>Primeiro Nome</p>
 <input type="text" id="fname" name="fname" value="João">
 <p>Ultimo Nome</p>
 <input type="text" id="lname" name="lname" value="Santos">
</form>
32
Formulários (2)
Input com Icones
Mais detalhes sobre formato de textos:https://www.w3schools.com/css/css_link.asp
<style> 
input[type=text] {
 width: 100%;
 box-sizing: border-box;
 border: 2px solid #ccc;
 border-radius: 4px;
 font-size: 16px;
 background-color: white;
 background-image: url('searchicon.png');
 background-position: 10px 10px; 
 background-repeat: no-repeat;
 padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>
<p>Input with icon:</p>
<form>
 <input type="text" name="search" placeholder="Search..">
</form>
33
Layout do site
Mais detalhes sobre formato de textos https://www.w3schools.com/css/css_website_layout.asp
34
Layout do site
Mais detalhes sobre formato de textos https://www.w3schools.com/css/css_website_layout.asp
35
CSS Avançado
Possibilita colocar recursos especiais como 
cantos arredondados border-radius: 25px;
Imagens na borda border-image: url(border.png) 30 round;
Efeitos no texto
Animações animation-name: example; animation-duration: 4s;
Tool Tip 
Imagens estilizadas
Botões estilizados
Paginação
Mais detalhes sobre formato de textos https://www.w3schools.com/css/css3_animations.asp
36
Web Responsiva
Possibilita que o site seja ajustado de acordo com o dispositivo utilizado.
Criado apenas com HTML e CSS, não é necessário programação.
https://www.w3schools.com/css/css_rwd_intro.asp
Viewport
Área da página que é visível ao usuário
A HTML5 incluiu uma forma do desenvolvedor ter controle sobre o viewport usando a tag <meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width : ajusta a página de acordo com o dispositivo
initial-scale=1.0 : ajusta a página inicial de acordo com o browser aberto
Página SEM a tag <meta>
Página COM a tag <meta>
Exercícios
1) Executar os exercícios 1 a 4 da página
https://www.w3schools.com/css/css_howto.asp
 2) Vamos criar o site da livraria usando CSS em um arquivo externo.