O documento apresenta uma aula sobre CSS ministrada pelo professor Mauro Jansen. A aula aborda os conceitos básicos de CSS, incluindo estrutura, elementos, propriedades e seletores CSS.
3. 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
Linguagem de Programação
Linguagem C – parte 1 3
5. 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.
6. 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
7. 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
8. 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;}
9. 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
10. 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:
12. 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;}
14. 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.
15. 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 */
h1 {color: blue; font-size: 50px;}
/* todo parágrafo cor verde e fonte tam.12 */
p {color: green; font-size: 12px;}
16. 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;}
17. 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;}
18. 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;}
19. 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
21. 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 */
h1 {color: blue; font-size: 50px;}
p {color: green; font-size: 12px;}
/* 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;}
22. 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)
23. 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):
24. 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
26. 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
27. 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
28. 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/
Linguagem de Programação
Linguagem C – parte 1 28