Aula07 - introduçãoCSS

Ling.
Web1
aula 07 - Introdução ao CSS
Prof. Danilo Camargo Bueno

Prof. Eline Faliane de Araújo Welter
1
A base da Internet
▷ HTML são como a estrutura
○ onde estão as paredes;
○ qual é a sala de estar;
○ qual é o quarto;
3
A base da Internet
▷ CSS é o estilo da casa
○ de que cor é o tapete;
○ quais decorações você tem
○ quais cores da parede;
4
CSS - Cascading Style Sheet
● É sigla para Cascading Style Sheets ou Folhas de
Estilo em Cascata, em português.
● A CSS é um conjunto de definições de estilo
(cores, fontes, tamanhos, posicionamento etc) que
regem a apresentação de uma página HTML.
● HTML é para estruturar o documento (conteúdo) e
CSS para formatar a apresentação deste conteúdo.
● É possível usar o CSS para dividirmos as
responsabilidades no desenvolvimento web:
○ enquanto alguns profissionais trabalham o conteúdo de
um site, outros (com um perfil mais artístico) podem se
dedicar apenas à apresentação deste conteúdo.
5
CSS - Cascading Style Sheet
● folha de estilo em cascata
● coleção de regras formatadas que controlam a
aparência
● Por que CSS?
○ Separa a marcação HTML do site
○ Estruturação (HTML) e Layout (CSS)
○ Melhora a manutenção
○ csszengarden.com
“Folha de estilo em cascata é um mecanismo

simples para adicionar estilos (p.ex, fontes, cores,
espaçamentos) aos documentos Web.”
6
Forma de utilização - CSS
● Criamos um novo arquivo, com a extensão .css
● Nesse arquivo ficarão as regras de estilo para o
documento HTML
● Vamos precisamos indicar em nosso documento
HTML uma ligação entre ele e a folha de estilo.
● Vantagens:
○ manter nosso HTML mais limpo (separação)
○ reaproveitamento de uma mesma folha de estilos
para diversos documentos.
○ podemos ter mais de uma folha em um mesmo
projeto
7
Como fazer?
● Para referenciar os arquivos CSS, usamos a tag
<link> da seguinte forma:
<html>
<head>
<link rel="stylesheet" href="folha.css">
</head>
...
</html>
○ a tag <link> fica dentro do elemento <head>.
○ o atributo rel define o link como sendo do tipo texto
e de estilos.
○ o atributo href define o caminho do arquivo onde
estão os estilos.
8
Como fazer?
● E dentro do arquivo estilos.css colocamos apenas o
conteúdo do CSS:
p {
color: blue; folha.css
background-color: yellow;
} Este é um
h1 { novo arquivo
color: red; (documento),
background-color: blue; diferente do
} documento HTML!
9
CSS - Formato das regras
Seletor
h1 { Propriedade Valor
text-align : center ;
color: red;
}
10
CSS - Exemplo de arquivo
h1 {
text-align: center; Este é um
color:red; novo arquivo
} com extensão
h2 { .css
text-align: justify;
color:green;
}
11
CSS - Tipos de seletores
● Seletor de TAG
○ seleciona TODAS as TAGS existentes naquele
documento no qual o CSS se encontra ligado
○ pré-definida pelas TAGS (etiquetas) da linguagem
HTML
○ exemplo de seletores: h1, p, strong, body
○ IMPORTANTE: irá selecionar todos os elementos

com a TAG e aplicar as regras CSS definidas!
p {
color: red;
}
12
CSS - Tipos de Cores
● por nomes
○ 147 cores especificadas (red, blue, green)
○ https://www.w3.org/TR/css3-color/#svg-color
○ exemplo: red
● código hexadecimal
○ 16.777.216 cores suportadas
○ exemplo:
■ #000000
■ #FFFFFF
■ #FF00FF
● Código decimal
○ 255,255,255
○ 0,0,0
13
Problema?
doc.html folha.css
... p {
<body>
Primeiro parágrafo. Primeiro color: red;
parágrafo. Primeiro parágrafo. }
Primeiro parágrafo.
Segundo parágrafo. Segundo

parágrafo. Segundo parágrafo.
Segundo parágrafo.
</body>
</html>
14
Problema?
doc.html folha.css
... #p1 {
<body> color: red;
Primeiro parágrafo. }
Primeiro parágrafo. Primeiro #p2 {
parágrafo. Primeiro parágrafo.
color: blue;
Segundo parágrafo. }
Segundo parágrafo. Segundo
parágrafo. Segundo parágrafo.
</body>
</html>
15
Problema?
doc.html folha.css
... #p1 {
<body> color: red;
Primeiro parágrafo. }
Primeiro parágrafo. Primeiro #p2 {
parágrafo. Primeiro parágrafo.
color: blue;
Segundo parágrafo. }
Segundo parágrafo. Segundo
parágrafo. Segundo parágrafo.
</body>
</html>
16
● Seletor de ID (identificador)
○ seleciona SOMENTE a TAG com ID ESPECÍFICO
○ definido pelos identificadores criados pelo
desenvolvedor
○ definição de estilos únicos!
○ exemplo de seletores: #meuDiv, #rodape
○ IMPORTANTE: irá selecionar SOEMENTE O
elemento com aquele ID e aplicar as regras CSS
definidas!
#p1 {
color: red;
}
17
● tag
○ pré-definida pela linguagem body {
○ ex: h1, p, strong, body color: red;
● #id }
○ definido pelo utilizador
○ a definição de estilos únicos! #meuElemento {
○ ex: #meuDiv, #rodape
color: red;
}
18
Propriedades de Dimensão em CSS
● As propriedades de dimensão CSS permitem
controlar a altura e largura de um elemento.
● Duas das propriedades mais importantes do CSS!
● Não importa se é imagem, título, comentário no
rodapé ou logotipo, tudo tem sua altura e largura!
● Largura em inglês é width e altura é height
h1 {
width: 300px;
height: 300px;
border: solid;
}
19
O que é um pixel?
● Uma das unidades de medida do CSS
● Vem de picture element (pix é abreviatura em
inglês para pictures), logo pix element
● “Menor elemento em um dispositivo de exibição
(por exemplo, monitor) ao qual é possível
atribuir-se uma cor”
● “Menor ponto que forma uma imagem digital”
20
CSS - Textos
h1 {
Cor da fonte
color: red|blue|black|purple|mais;
Alinhamento do texto
text-align: left|right|center|justify;
text-decoration:none|underline|overline|line-through;
Decoração do texto
Text-transform: none|capitalize|uppercase|lowercase;
} Transformar o texto em
Captalizado (primeira de
cada palavra em
maiúscula) em Maiúscula
ou minúscula
21
CSS - Textos
p {
text-indent:medida; Espaçamento no início do parágrafo
letter-spacing:normal|medida; Espaçamento entre letras
word-spacing:normal|medida; Espaçamento entre palavras
line-height:normal|medida; Distância entre as linhas
22
CSS - Textos
h1 {
text-shadow: 12px 12px 12px #0000FF;
}
Deslocamento Deslocamento
Esmaecimento Cor
Horizontal Vertical
23
CSS - Fontes
● fontes utilizadas em uma página web
● fontes seguras - web safe fonts (http://cssfontstack.com )
● classificadas em 5 grupos:
○ serif: fontes serifadas. (acabamentos nas extremidades das hastes)
○ sans-serif: fontes não serifadas.
○ cursive: fontes com estilo semelhante à escrita manual
○ fantasy: fontes que possuem caracteres com decorações
○ monospace: fontes que possuem caracteres com largura
exatamente iguais.
24
“Acabamentos nas extremidades das hastes” 25
“Não serifadas” 26
“Caracteres com largura exatamente iguais” 27
“Fontes com estilo semelhante à escrita manual” 28
“Fontes que possuem caracteres com decorações” 29
CSS - Fontes
h1 {
font-family: “NomeDaFonte”,“NomeDaFonte”;
font-size: medida;
font-style: normal|italic;
font-weight: normal|bold;
30
CSS - Fontes (exemplo)
h1 {
font-family: "Arial", "Georgia" , "Courier New",
"sans-serif";
font-size: 40px;
font-style: italic;
font-weight: bold;
}
31
CSS - Fontes
● E se eu quiser uma fonte diferente?
@font-face
● A regra @font-face é utilizada para que você utilize
fontes fora do padrão do sistema em seus
aplicações Web.
● Para que isso funcione, nós disponibilizamos as
fontes necessárias em seu servidor e linkamos
estas fontes no arquivo CSS.
● A sintaxe é bem simples e tem suporte a todos os
navegadores, com algumas ressalvas.
○ https://caniuse.com/#search=%40font-face
32
CSS - @font-face
@font-face {
font-family: "Bitstream Vera Serif Bold";
src:
url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
● Na primeira linha você customiza o nome da font que

você usará durante todo o projeto.
● Na segunda linha definimos a URL onde o browser
procurará o arquivo da font para baixar e aplicar no
site.
● No body você está utilizando a nova fonte
33
CSS - repositório de fontes
● Google Fonts: https://fonts.google.com/
● Font Squirrel: https://www.fontsquirrel.com/
34
Obrigado!
Dúvidas?
35

Aula07 - introduçãoCSS

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula07 - introduçãoCSS

Enviado por

Direitos autorais:

Formatos disponíveis

Ling.

Prof. Danilo Camargo Bueno

“Folha de estilo em cascata é um mecanismo

○ IMPORTANTE: irá selecionar todos os elementos

<p>Segundo parágrafo. Segundo

text-indent:medida; Espaçamento no início do parágrafo

letter-spacing:normal|medida; Espaçamento entre letras

word-spacing:normal|medida; Espaçamento entre palavras

line-height:normal|medida; Distância entre as linhas

body { font-family: "Bitstream Vera Serif Bold", serif }

● Na primeira linha você customiza o nome da font que

Você também pode gostar