Embed Size (px)
Citation preview
Tarlis Portela
Web Design
CSS
01Web Design
CONCEITOS
Histórico
• Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação;
• A medida que o HTML foi se popularizando e evoluindo, alguns controles de aparências foram incluídos. Isso fez com que a linguagem ficasse muito complexa;
• Outro problema era que os browsers tinham diferenças de implementações.
01
Histórico
• Håkon Wium Lie, vendo toda essa dificuldade, resolveu criar um jeito mais fácil para formatar a informação. Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets, em 1994;
• Em 1996, lançaram a recomendação oficial pelo W3C do CSS Level 1 (CSS 1);
• Atualmente encontra-se na versão CSS 3.
01
Folhas de Estilo (Style Sheets)
• CSS, ou Cascading Style Sheets é uma recomendação do W3C, assim como o XML e o HTML;
• Permite a separação do conteúdo dos documentos de sua apresentação.
01
Importância do estilo
• Existência de um padrão de cores e navegação para todo o site;
• Reutilização de código;
• Velocidade no carregamento das páginas;
• Administração centralizada;
• Personalização de sites.
01
02Web Design
ESTRUTURA
Anexando Style Sheets em documentos (X)HTML
• A linguagem HTML permite que qualquer trecho de código seja adicionado à página;
• Entretanto, você deve especificar a linguagem a ser utilizada, como no exemplo abaixo:
<META http-equiv="Content-Style-Type"
content="text/css">
02
Através de links
• Você pode criar uma Style Sheet em um arquivo separado para posteriormente aplicar tal estilo em todas as páginas do site.
<link rel="stylesheet"
href="http://server.com/mysheet.css"
type="text/css">
02
CSS no documento
• Os códigos de estilo podem ser colocados dentro de cada documento HTML.
<html><head>
<style type="text/css">
definições de estilo
</style>
</head><body> </body> </html>
02
Definindo estilos junto com o elemento
• São definidos estilos como atributo de um elemento.
<p style=”color: blue”>
Este é o parágrafo destacado
</p>
02
Importando Style Sheets• Estilos também podem ser
importados de outros arquivos.
<style type="text/css">
@import url(http://server.com/style.css);
</style>
02
Entendendo a ordem• O navegador estabelece uma
prioridade para cada estilo a ser aplicado como na lista a seguir:
– Estilos definidos junto com o elemento;
– Estilos definidos no documento;– Estilos anexados.
02
Entendendo a ordem• Embora não seja aconselhável,
você pode usar a palavra “important” para alterar esta precedência.
H1 {color: red ! important;
font-weight: bold;
font-family: sans-serif ! important}
02
Style Sheets para cada tipo de Mídia• CSS permite também estilos diferentes
para cada tipo de mídia utilizada;– Permitindo a utilização de um
documento por portadores de deficiência visual ou auditiva;
– Aplicação de estilos especificamente para impressão de documentos.
02
Style Sheets para cada tipo de Mídia@media print
{ BODY { font-size: 10pt } }
@media screen
{ BODY { font-size: 12pt } }
@media screen, print
{ BODY { line-height: 1.2 } }
02
Style Sheets para cada tipo de Mídia
02
Tipo Descrição
Screen Telas de computadores
Print Impressoras
Projection Projeções
Braile Dispositivos Braile
Speech Sintetizadores de voz
All Todos os dispositivos
Definições
• Cada definição de estilo é chamada de regra;
• Uma regra contém um seletor (que é o próprio elemento);
• Seguido da declaração (a definição do estilo).
H1 {color: blue}
02
regra
seletor
declaração
Definições
• A declaração é colocada entre chaves ({});
• Cada item na declaração possui duas partes:
– O nome da propriedade; e,
– O valor atribuído a esta;* Separado por dois pontos (:).
H1 {color: blue}
02
propriedade valor
Definições• Múltiplas propriedades podem ser
atribuídas em uma única declaração;• Separando cada atribuição com o sinal
de ponto e vírgula (;).
02
H1 {color: blue; font-size: 12pt; text-line: center}
Definições• Os elementos (ou seletores) podem ser
agrupados de modo a definir uma regra única para todo o grupo.
02
P, UL, LI {font-size: 12pt}
Herança
• Seletores contextuais definem a sequência exata de elementos para o qual um estilo será aplicado.
• Para definir dois estilos para o <LI>: – Quando for filho do elemento <UL>:
– Quando for filho do elemento <OL>:
02
UL LI {list-style-type: square}
OL LI {list-style-type: decimal}
Herança• Os elementos (ou seletores) podem ser
agrupados de modo a definir uma regra única para todo o grupo.
02
P, UL, LI {font-size: 12pt}
Herança• Os elementos herdam certas
propriedades de seus pais;• Por exemplo, todas os elementos dentro
do elemento <P> (<EM>).
02
<style type="text/css"> p {color: blue} </style>
<body><p>Parágrafo de texto <em>texto emphasized</em></p> </body>
Classes
• Uma classe define a variação de um estilo, o qual é referenciado através de uma ocorrência específica de um elemento utilizando o atributo CLASS.
02
h1.blue {color: blue}
h1.red {color: red}
h1.black {color: black}
<h1 class=”red”>red heading</h1>
Classes
• Uma classe não precisa de estar ligada à um elemento.
02
<h1 class=”red”>red heading</h1>
<p class=”red”>red paragraph</p>
.red {color: red}
IDs
• Para declarar o estilo para um ID é usado o símbolo (#);
• Somente aos atributos com aquele ID são aplicados os estilos.
02
<p id=”test”> parágrafo teste <p>
# test {color: red}
Pseudo-classes e Pseudo-elementos
• Pseudo-classes e pseudo-elementos podem ser usados como seletores na CSS, mas eles não existem dentro da HTML;
• Eles são 'inseridos' pelo browser, sob certas condições, para serem usados como elos de ligação com as folhas de estilo.
02
a:link {color: blue}
a:active {color: red}
a:visited {color: yellow}
Comentários• Assim como em qualquer linguagem de
programação, em CSS é possível adicionar comentários para melhor documentar o código.
02
/*------------------------------------------------------
Este é um bloco de comentario
------------------------------------------------------*/
Ocultando Style Sheets
• Para manter a compatibilidade com navegadores antigos CSS implementa a funcionalidade de ocultar o código CSS destes navegadores;
• Faz o CSS não funcionar no firefox;
02
<style type="text/css">
<!--h1 {color: red}
--></style>
Unidades de Medida
02
Unidade Descrição
px Tamanho em pixels (relativo só dispositivo)
em Tamanho relativo à fonte utilizada
ex Altura da fonte 'x'
in Polegadas (= 2.54 cm)
Unidades de Medida
02
Unidade Descrição
cm Centímetros
mm Milímetros
pt Pontos (1/72 polegadas)
pc Picas (12 pontos)
% Porcentagem
0 Valor '0' não requer unid.
03Web Design
SELETORES
Seletor Universal
• Significado:– Aplicável a todos os elementos.
• Padrão*
• Ex:* {
color: #000000;
}
03
Seletor de Tipo de Elemento
• Significado:– Seleciona qualquer elemento “<e>”;
• Padrãoe
• Ex:h1 {
font-family: sans-serif;
}
03
Seletor Contextual
• Significado:– Seleciona qualquer elemento <f> que
estiver contido num elemento <e>.
• Padrãoe f
• Ex:h1 em {
color: blue;
}
03
Seletor de Adjacente
Significado:– Seleciona o elemento <f> que estiver
imediatamente após um elemento <e>.
• Padrãoe + f
• Ex:h1 + h2 {
margin-top: -5mm;
}
03
Seletor de Classe
• Significado:– Seleciona o(s) elemento(s) que se aplicou
a “classe”.
• Padrãoe.classe
• Ex:h1.pastoral {
color: green;
}
03
Seletor de ID
• Significado:– Seleciona o elemento <e> identificado
com ID.
• Padrãoe#Id
• Ex:h1#chapter1 {
text-align: center;
}
03
Agrupamento de Seletores
Significado:– Seleciona os elementos <e> e <f> do
agrupamento.
• Padrãoe , f
• Ex:h1 , h2 {
font-family: sans-serif;
}
03
Seletor de Atributo
• Significado:– Seleciona o elemento <e> que contenha o
atributo indicado.
• Padrãoe[atrib]
• Ex:h1[title] {
color: blue;
}
03
Seletor de Atributo
• Significado:– Seleciona o elemento <e> com o mesmo
atributo e valor.
• Padrãoe[atrib=”valor”]
• Ex:spam[class=exemplo] {
color: blue;
}
03
Seletor de Atributo
• Significado:– Seleciona o elemento <e> em que o valor
esteja em uma lista de valores separados por espaços.
• Padrãoe[atrib~=”valor”]
• Ex:a[rel~=”copyright”] {
color: red;
}
03
<a rel=”copyright copyleft copyeditor” ...> … </a>
Seletor de Atributo
• Significado:– Seleciona o elemento <e> em que o valor
seja idêntico a “val” ou inicia-se com “val”.
• Padrãoe[atrib|=”val”]
• Ex:*[lang|=”pt”] {
color: red;
}
03
Pseudo-classe Primeiro Filho
• Significado:– Seleciona o primeiro elemento <e>
descendente do elemento-pai.
• Padrãoe:first-child
• Ex:div > p:first-child {
text-indent: 0;
}
03
Pseudo-classe Link
• Significado:– Aplica-se ao elemento <a> com hiperlinks
ou âncoras não visitados.
• Padrãoa:link
• Ex:a:link {
color: red;
}
03
Pseudo-classe Visited
• Significado:– Aplica-se ao elemento <a> com hiperlinks
ou âncoras já visitados.
• Padrãoa:visited
• Ex:a:link {
color: blue;
}
03
Pseudo-classe Active
• Significado:– Aplica-se ao elemento <e> quando este
for ativado pelo usuário.
• Padrãoe:active
Ex:a:active {
color: lime;
}
03
Pseudo-classe Hover
• Significado:– Aplica-se ao elemento <e> quando o
cursor estiver sobre ele, mas sem ativá-lo.
• Padrãoe:hover
Ex:a:hover {
color: yellow;
}
03
Pseudo-classe Focus
• Significado:– Aplica-se ao elemento <e> quando o foco
estiver posicionado nele.
• Padrãoe:focus
Ex:a:focus {
background: yellow;
}
03
Pseudo-classe Lang
• Significado:– Aplica-se ao elemento <e> se este estiver
marcado com o idioma “val”.
• Padrãoe:lang(val)
Ex:html:lang(pt) {
quotes: '<< ' ' >>';
}
03
Pseudo-elemento First-line
• Significado:– Aplica-se a primeira linha do elemento
<e>.
• Padrãoe:first-line
Ex:p:first-line {
text-transform: uppercase;
}
03
Pseudo-elemento First-letter
• Significado:– Aplica-se a primeira letra do elemento
<e>.
• Padrãoe:first-letter
Ex:p:first-letter {
font-size: 3em; font-weight: normal;
}
03
Pseudo-elemento Before
• Significado:– Aplica conteúdo especificado em posição
anterior ao elemento <e>.
• Padrãoe:before
Ex:p:before {
content: open-quote;
}
03
Pseudo-elemento After
• Significado:– Aplica conteúdo especificado em posição
posterior ao elemento <e>.
• Padrãoe:after
Ex:p:after {
content: close-quote;
}
03
04Web Design
MEDIDAS
Unidades de Tamanho Relativas
04
Unidade Descrição
px Tamanho em pixels (relativo só dispositivo)
em Tamanho relativo à fonte utilizada
ex Altura da fonte 'x'
Unidades de Tamanho Absolutas
04
Unidade Descrição
cm Centímetros
mm Milímetros
pt Pontos (1/72 polegadas)
pc Picas (12 pontos)
Porcentagem
04
Unidade Descrição
% Porcentagem
0 Valor '0' não requer unid.
Representação de Cores
04
Unidade Descrição
red Valor pré-definido
#RRGGBB Cor RGB hexadecinal
#RGB Cor RGB hexadecimal simplificada
rgb(R,G,B) Cor RGB (3 valores 0 a 255)
rgb(R%,G%,B%) Cor RGB (3 valores percentuais)
Modelo de Caixa
04
05Web Design
PROPRIEDADES
Guia de Referência
• Bordas;
• Margens;
• Espaçamento;
• Formatação visual;
• Efeitos visuais;
• Agregador de conteúdo, numeração e listas;
05• Cores e fundo;
• Paginação;
• Fontes;
• Texto;
• Tabelas;
• Interface com o usuário.
Tarlis Portela
Web Design
CSS
