Programação Web - CSS

Professor: Mauro Jansen
Programação Web 1
CSS:
Cascade Style Sheets

Prof. Mauro Jansen
Linguagem de Programação
Linguagem C – parte 1 2
Estrutura e elementos
básicos do CSS

Prof. Mauro Jansen
CSS: dando estilo e aparência
à página web
 CSS (Cascade Style Sheets): folhas de
estilo compostas por camadas
 Recurso usado para defnir a
apresentação (aparência) de páginas
web
 O CSS complementa e trabalha em
conjunto como o HTML
 Possibilita criar aparência e efeitos
visuais diferenciados

Prof. Mauro Jansen
HTML e CSS
 O HTML é responsável pela estrutura do
site
 O CSS é responsável pela apresentação
visual do site:
 Cores
 Tipos de fontes
 Cores de fundo
 Bordas
 Etc.

Prof. Mauro Jansen
Vantagens do uso de CSS
 Controle e facilidade de manutenção visual
do site através de um arquivo externo
 Aumento do desempenho e velocidade de
páginas
 Possibilidade de elaborar layouts para
atender diferentes tipos de dispositivos

Prof. Mauro Jansen
Elementos do CSS
 O CSS tem como estrutura básica
defnições que envolvem os três
elementos básicos abaixo:
 Seletor
 Propriedade
 Valor da propriedade

Prof. Mauro Jansen
Formato (sintaxe) de uma
defnição CSS
seletor {propriedade:valor;}
Identifica o
elemento ou grupo
de elementos html
que desejamos
estilizar. Ex: h1,
h2, p
É a característica que
desejamos modificar ou
configurar no(s)
elementos(s) definidos
pelo seletor. Ex: color,
font, etc.
Valor a ser atribuído
para a propriedade
(característica) indicada
 Dentro das chaves { } podemos ter mais de uma propriedade e
valores separados por ponto e vírgula (;)
 Ex: Define que todo elemento <h1> terá cor verde e fonte de tamanho 40 pixels:
h1 {color:green; font-size: 40px;}

Prof. Mauro Jansen
Onde fcam as defnições CSS
 As defnições CSS podem ser colocadas:
 Na seção head do arquivo html, dentro da
tag <style>
 Em um arquivo CSS (.css) separado

Criamos um arquivo com a terminação .css
separado e referenciamos ele dentro do html com a
tag <link>, na seção <head>

O arquivo .css contém apenas defnições CSS (não
precisa têm tags html)

Vantagens: permite alterar a aparência do site,
alterando apenas o arquivo .css, além de permitir a
portabilidade dos estilos para outros sites

Prof. Mauro Jansen
Defnição CSS no mesmo
arquivo html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aplicando CSS e Sintaxe</title>
<style type="text/css">
h1 {color:green; font-size: 40px;}
</style>
</head>
<body>
<h1>Olá Mundo</h1>
</body>
</html>
Arquivo aplicandocss.html:

Prof. Mauro Jansen
Defnição CSS em arquivo
separado
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Aplicando CSS e Sintaxe</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Olá Mundo</h1>
</body>
</html>
Arquivo aplicandocss.html:
Arquivo style.css (guardar numa subpasta css):
h1 {color:green; font-size: 40px}

Prof. Mauro Jansen
/* Comentários em css */
 Dentro do arquivo .css. qualquer coisa
entre os delimitadores /* e */ será ignorada
pelo navegador web
 Portanto essa solução pode e deve ser
usada para documentar o seu arquivo .css
 Exemplo:
/* arquivo CSS padrão para estudos */
h1 {color: blue; font-size: 50px;}
p {color: green; font-size: 12px;}

Prof. Mauro Jansen
Seletores
 Seletor é a defnição do elemento ou grupo de
elementos html que desejamos estilizar
 Existem várias formas (estruturas) para defnir o
seletor do estilo e cada uma segue uma sintaxe. Ex:
 Universal (*): todos elementos html
 Contextual: somente os elementos e que estão contidos
em um outro elemento f
 Etc.
 Boa parte da inteligência do CSS está em saber utilizar
os seletores de uma maneira efcaz, escalável e
inteligente.

Prof. Mauro Jansen
Seletor elemento ou seletor
tag
 Defne propriedades apenas para o
elemento html identifcado
 Formato: e {propriedade:valor; ...}
 Exemplo:
/* todo título h1 cor azul e fonte tam.50 */
/* todo parágrafo cor verde e fonte tam.12 */

Prof. Mauro Jansen
Seletor universal
 Defne que TODOS (*=todos) os elementos terão
as propriedades defnidas, caso não existam
propriedades específcas defnidas
 Formato: * {propriedade: valor; … }
 Serve para “resetar” ou defnir a estilização
padrão do site
 Exemplo:
/* este seletor universal define margem 0,
distanciamento 0, e cor preta */
* {margin:0; padding:0; color:black;}

Prof. Mauro Jansen
Seletor id (identidade)
 Seleciona somente um elemento cujo
identifcador (parâmetro id da tag html) é
igual ao informado após o símbolo #
 Formato:
 #id {propriedade: valor; …}
 Onde id é o id do elemento
 Exemplo:
/* todo elemento com id=”nome” na cor azul e fonte tam.50 */
#nome {color: blue; font-size: 50px;}

Prof. Mauro Jansen
Seletor agrupamento
 É útil quando queremos aplicar o as mesmas
características a mais de um elemento html
 Formato:
 e,f {propriedade: valor; ...}
 Exemplo:
/* define que h1, h2 e p terão este seletor universal
define margem 0, distanciamento 0, e cor preta */
H1,h2,p {margin:0; padding:0; color:black;}

Prof. Mauro Jansen
Seletor atributo
 Seleciona apenas elementos que tenham o
atributo especifcado entre colchetes [ ]
 Padrões possíveis:
 e [atrib]: contém o atributo atrib
 e [atrib=”valor”]: contém o atributo atrib com o
valor especifcado
 e [atrib|=”valor”]: contém o atributo atrib com o
valor idêntico ou iniciando com o valor especifcado

Prof. Mauro Jansen
Seletor atributo com valor: exemplo
Arquivo seletores.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Seletores</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Texto h1</h1>
<p>Parágrafo</p> <br>
Nome: <input type="text" name="nome"> <br>
Email: <input type="email" name="email"> <br>
<input type="submit" name="enviar" value="Enviar">
</body>
</html>

Prof. Mauro Jansen
Seletor atributo com valor: exemplo
Arquivo cssstyle.css (guardar numa subpasta css):
/* seletor universal */
* {margin:0; padding 0; color:red;}
/* seletor tag ou seletor elemento */
/* seletor atributo:
- Todo input de texto ou e-mail com largura 200, cor cinza, altura 35
- Todo submit com largura 50, cor de fundo verde, altura 35, sem
borda, cor de frente branca
*/
input[type="text"] {width: 200px; background-color: #ccc; height:
35px; border: none;}
input[type="email"] {width: 200px; background-color: #ccc; height:
35px; border: none;}
input[type="submit"] {width: 50px; background-color: green; height:
35px; border: none; color: white;}

Prof. Mauro Jansen
Seletor classe (.)
 Seleciona elementos html com um atributo class
específco, permitindo criar nomes de estilos
próprios com o valor do atributo class
 Usamos um ponto (.) seguido do nome desejado
 Formatos:
 .nomeDaClasse {propriedade:valor; …}

Este formato permite que a classe seja usada por
qualquer elemento html
 e.nomeDaClasse {propriedade:valor; …}

Neste formato a classe só poderá ser usada por
elementos html especifcados (e)

Prof. Mauro Jansen
Seletor classe (.): exemplo
/* seletor classe */
/* classe para definir qualquer elemento c/ cor azul e centralizado */
.azulcentro {color:blue; text-align:center;}
/* classe para definir paragrafo com fonte grande */
p.grande {font-size=50px;}
<p class=”azulcentro”>Este parágrafo ficará azul e centralizado. Este
parágrafo ficará azul e centralizado. Este parágrafo ficará azul e
centralizado.</p>
<p class=”grande”>Este parágrafo ficará com fonte grande.</p>
Arquivo classes.html (somente conteúdo do body):
Arquivo cssclasses.css (guardar numa subpasta css):

Prof. Mauro Jansen
Seletores
Padrão Significado Exemplo CSS
* Seletor universal: todo elementos * { color: #00000; }
e Seletor de tipo de elemento ou de tag:
somente o elemento <e>
p { font-family: sans-serif; }
e,f Seletor agrupamento: aplica as características
aos elementos <e> e <f>
e f Seletor contextual: qualquer elemento <f> que
estiver contido num elemento <e>
h1 em { color: blue; }
e + f Seletor adjacente: seleciona um elemento <f>
que estiver imediatamente depois de um
elemento <e>
e [atr] Seletor atributo: somente elementos <e> que
têm o atributo indicado
e [atr=”valor”] Seletor atributo: somente elementos <e> que
têm o atributo e valor indicados

Prof. Mauro Jansen
Propriedades

Prof. Mauro Jansen
Dimensões (width, height, max, min)
 width: largura fxa, em px ou %. Se não for
defnida, segue o tamanho da janela do navegador
 height: altura fxa, em px ou %. Se não for
defnida, segue o tamanho do conteúdo
 max: defne o valor máximo para uma dimensão
(largura ou altura), em px
 min: defne o valor mínimo para uma dimensão
(largura ou altura), em px

Prof. Mauro Jansen
Dimensões (width, height, max, min)
 Crie uma arquivo .css que defna, para a tag
<div>, as propriedades cor de fundo verde,
cor de frente amarela e espaçamento 20px;
 Crie um arquivo html com um parágrafo de
tamanho médio e associe esse html ao css
criado no item anterior
 Abra o arquivo html e veja o resultado
 No arquivo .css, altere a propriedade width
para 500px, atualize, mude o tamanho da
janela do navegador e veja o impacto na div

Prof. Mauro Jansen
Referências
 Mozilla Developer Network. Aprendendo HTML.
Disponível em < https://developer.mozilla.org/pt-
BR/docs/Aprender/HTML >
 W3C. Disponível em <
http://www.w3c.br/divulgacao/guiasreferencia/css2
/ >
 http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.
pdf
 https://www.chiefofdesign.com.br/css/

Programação Web - CSS

Mais conteúdo relacionado

Mais procurados

Semelhante a Programação Web - CSS

Mais de Mauro Pereira

Programação Web - CSS