Progweb1 Css 190222215117 PDF

Programação Web 1
Professor: Mauro Jansen
CSS:
Cascade Style Sheets
Estrutura e elementos
básicos do CSS
Linguagem de Programação
Prof. Mauro Jansen Linguagem C – parte 1 2
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
HTML e CSS
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 É a característica que Valor a ser atribuído

elemento ou grupo desejamos modificar ou para a propriedade
de elementos html configurar no(s) (característica) indicada
que desejamos elementos(s) definidos
estilizar. Ex: h1, pelo seletor. Ex: color,
h2, p font, etc.
 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
Arquivo aplicandocss.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>
Prof. Mauro Jansen

Defnição CSS em arquivo
separado
Arquivo aplicandocss.html:
<!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 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
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 css\style.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
Arquivo css\classes.css (guardar numa subpasta css):
/* 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;}
Arquivo classes.html (somente conteúdo do body):

<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>
Prof. Mauro Jansen

Seletores
Padrão Significado Exemplo CSS
* Seletor universal: todo elementos * { color: #00000; }
e Seletor de tipo de elemento ou de tag: p { font-family: sans-serif; }
somente o elemento <e>
e,f Seletor agrupamento: aplica as características
aos elementos <e> e <f>
ef Seletor contextual: qualquer elemento <f> que h1 em { color: blue; }
estiver contido num elemento <e>
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/

Progweb1 Css 190222215117 PDF

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

Progweb1 Css 190222215117 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Programação Web 1

Professor: Mauro Jansen

Prof. Mauro Jansen

 O HTML é responsável pela estrutura do

Prof. Mauro Jansen

 Controle e facilidade de manutenção visual

Prof. Mauro Jansen

 O CSS tem como estrutura básica

Prof. Mauro Jansen

Identifica o É a característica que Valor a ser atribuído

h1 {color:green; font-size: 40px;}

Prof. Mauro Jansen

 As defnições CSS podem ser colocadas:

Prof. Mauro Jansen

Prof. Mauro Jansen

Arquivo style.css (guardar numa subpasta css):

h1 {color:green; font-size: 40px}

Prof. Mauro Jansen

 Dentro do arquivo .css. qualquer coisa

Prof. Mauro Jansen

Prof. Mauro Jansen

 Seletor é a defnição do elemento ou grupo de

Prof. Mauro Jansen

Prof. Mauro Jansen

 Defne que TODOS (*=todos) os elementos terão

Prof. Mauro Jansen

 Seleciona somente um elemento cujo

Prof. Mauro Jansen

 É útil quando queremos aplicar o as mesmas

Prof. Mauro Jansen

 Seleciona apenas elementos que tenham o

Prof. Mauro Jansen

Prof. Mauro Jansen

Arquivo css\style.css (guardar numa subpasta css):

/* seletor tag ou seletor elemento */

input[type="text"] {width: 200px; background-color: #ccc; height:

Prof. Mauro Jansen

 Seleciona elementos html com um atributo class

Prof. Mauro Jansen

/* classe para definir qualquer elemento c/ cor azul e centralizado */

Arquivo classes.html (somente conteúdo do body):

Prof. Mauro Jansen

e [atr] Seletor atributo: somente elementos <e> que

Prof. Mauro Jansen

Prof. Mauro Jansen

 width: largura fxa, em px ou %. Se não for

Prof. Mauro Jansen

 Crie uma arquivo .css que defna, para a tag

Prof. Mauro Jansen

 Mozilla Developer Network. Aprendendo HTML.

Você também pode gostar