Aula 09

Tecnologias Web

•

ESTÁCIO

0

Wiliam Bonetti

09/11/2017

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Tecnologias Web
João Paulo 
Brognoni Casati
Aula 9
*
Conteúdo da Aula
O que é CSS?
O uso das folhas de estilo
Sintaxe da Linguagem
*
*
O que é CSS?
CSS
Cascading Style Sheets
Folhas de estilo em cascata
Criada pela W3C
Possui linguagem própria
*
*
O que é CSS?
Objetivos
Definir um conjunto de regras para formatação de páginas web
Separa o conteúdo da página da formatação
Possibilidade de diagramação: Layouts
*
*
O uso das folhas de estilo
Três tipos de uso
Definição de estilos na página HTML
1 - Diretamente na TAG
2 - No cabeçalho da página HTML
Definição de estilos em arquivo separado
3 - É feito um LINK para o arquivo CSS no arquivo HTML.
*
*
O uso das folhas de estilo
Definição e aplicação de estilos diretamente na TAG HTML
Utiliza a propriedade style
É aplicado somente na TAG em que é definido
*
*
O uso das folhas de estilo
Exemplo:
*
<p style=“color: red”>Texto</p>
Propriedade style
Abertura da TAG
Definição de estilos
*
O uso das folhas de estilo
Definição de estilos no cabeçalho do arquivo HTML
Utiliza a TAG <style>
Os estilos definidos podem ser aplicados em diversos elementos do documento em que estão definidos
*
*
O uso das folhas de estilo
Exemplo:
*
<style type=“text/css”>
 h1 {
 color: red;
 }
 p {
 color: blue;
 }
 a {
 color: green;
 }
</style>
Inicia a folha de estilos
Definição de estilos
Fecha a folha de estilos
*
O uso das folhas de estilo
Definição de estilos em um arquivo .css
Podem ser utilizados em diversas páginas HTML
Facilitam a manutenção do site
Arquivo pode estar hospedado em qualquer local da Web
Para ser utilizado no HTML
Necessita de um LINK para a folha de estilos
*
*
O uso das folhas de estilo
Exemplo:
*
h1 {
 color: red;
}
p {
 color: blue;
}
a {
 color: green;
}
Arquivo:
estilos.css
<html>
 <head>
 <link rel=“stylesheet” type=“text/css”
 href=“estilos.css”/>
 </head>
 <body>
 ...
 </body>
</html>
Arquivo:
Index.html
*
O uso das folhas de estilo
*
*
Sintaxe da linguagem
Cada regra é dividida em seletores e bloco de declaração
O bloco de declaração é dividido em propriedades e valores
*
h1, h2 {
 color: red;
 font-width: bold;
}
Seletores
Bloco de declaração
Propriedade
Valor
*
Sintaxe da linguagem
Seletores:
Onde as regras serão aplicadas
Bloco de declaração:
Regras a serem aplicadas
*
*
Sintaxe da linguagem
Tipos de seletores
Seletor universal
Seletor de tipo
Seletor de classe
Seletor de ID
Seletor de pseudo-classe
*
*
Sintaxe da linguagem
Seletor universal
Definido por: *
Aplica a regra a todos os elementos da página web
*
* {
 color: red;
}
*
Sintaxe da linguagem
Seletor de tipo
Exemplo: h1, p, h4
Aplica a regra a todos os elementos do tipo que foi definido no seletor
*
p {
 color: red;
}
*
Sintaxe da linguagem
Seletor de classe
Exemplo: .txt_inicial
Utiliza a propriedade class do HTML
Aplica a regra aos elementos indicados
*
.txt_inicial {
 color: red;
}
<p> Primeiro parágrafo </p>
<p class=“txt_inicial”> Segundo parágrafo </p>
*
Sintaxe da linguagem
Seletor de ID
Exemplo: #txt_inicial
Utiliza a propriedade id do HTML
O ID não pode se repetir
Aplica a regra apenas ao elemento indicado
*
.txt_inicial {
 color: red;
}
<p> Primeiro parágrafo </p>
<p id=“txt_inicial”> Segundo parágrafo </p>
*
Sintaxe da linguagem
Seletor de pseudo-classe
Exemplo: a:hover
Define classes especiais de elementos
*
a:hover {
 color: red;
}
<a href=“pg2.htm”> Primeiro link </a>
<a href=“pg2.htm”> Primeiro link </a>
Tecnologias Web
João Paulo 
Brognoni Casati
Atividade 9
*
*
Atividade
1 – Qual o principal objetivo em se usar folhas de estilos?
Resposta:
Separação do conteúdo da página de sua formatação.
*
*
Atividade
2 – Cite duas vantagens em se utilizar arquivos .css separadamente do arquivo HTML.
Resposta:
Concentrar a manutenção da formatação em um arquivo
Aplicar a mesma formatação à várias páginas.
*
*
Atividade
3 – Quais são os três itens utilizados na linguagem de definição do CSS?
Resposta:
Seletores, propriedades e valores.
*
*
Atividade
4 – Porque seletores de ID podem ser aplicados apenas à um elemento da página?
Resposta:
Porque a propriedade ID identifica unicamente um elemento, não pode se repetir.