6- CSS

Tecnologias Web

•

ESTÁCIO

siqueira ADS

17/06/2015

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

CSS 
 Cascading Style Sheets
1
Titao Yamamoto – titaoyamamoto.com/estacio
1
Introdução
Como surgiu a tecnologia CSS
De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos.
Com a evolução tecnológica (aplicativos, software, hardware):
Houve a necessidade de uma maior flexibilidade para manipular visualmente os conteúdos.
Com a criação da primeira tag fonte atributo color, nasceu o conceito de estilização dos conteúdos HTML 
2
Titao Yamamoto – titaoyamamoto.com/estacio
Folhas de Estilo em Cascata
Como surgiu a tecnologia CSS? 
Com a inclusão de novas tags e atributos de estilização, a velha linguagem de marcação HTML, passou a ter 2 funções: 
Estruturar o conteúdo através da marcação
Dar uma aparência final a este conteúdo. 
PROBLEMA: como estilizar projetos de documentos HTML cada vez maiores e sofisticados? 
 SOLUÇÃO: criação da tecnologia CSS. 
3
Titao Yamamoto – titaoyamamoto.com/estacio
Folhas de Estilo em Cascata
Uma regra CSS, compõe-se de três partes:
	seletor { propriedade: valor; } 
Seletor: 
É o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra ser válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc.); 
Propriedade: 
 É o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background,etc.); 
 Valor: 
 É a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc.) 
4
Titao Yamamoto – titaoyamamoto.com/estacio
A regra CSS e sua sintaxe 
p { font-size: 12px; /* ponto-e-vírgula é facultativo */ } 
body {
color: #000; 
background: #fff; /*ponto-e-vírgula ́e facultativo */ 
font-weight: bold; } 
h3 { 
font-family: "Comic Sans MS"; /*valor com palavra composta, deve estar entre aspas duplas ou simples*/} 
h1, h2, h3, h4, h5, h6 { /*Agrupamento de Seletores*/ color: #0f0;} 
5
Titao Yamamoto – titaoyamamoto.com/estacio
Vinculando folhas de estilos à documentos 
As folhas de estilo podem ser vinculadas a um documento HTML de três maneiras distintas: 
Importadas ou linkadas: 
quando as regras CSS estão declaradas em um documento a parte do documento HTML. O arquivo de folha de estilo deve ser gravado com a extensão .css 
Incorporadas:
quando as regras CSS estão declaradas no próprio documento HTML. 
 Inline: 
quando as regras CSS estão declaradas dentro da tag do elemento HTML com uso do atributo style 
6
Titao Yamamoto – titaoyamamoto.com/estacio
Folha de estilo externa – Sintaxe 
O arquivo css da folha de estilo externa deverá ser linkado ou importado ao documento HTML, dentro da seção head do documento. 
A sintaxe geral para linkar uma folha de estilo chamada estilo.css: 
 <head> ... 
	<link rel="stylesheet" type="text/css" href="estilo.css"> 
... </head> 
A sintaxe geral para importar uma folha de estilo chamada estilo.css: 
 <head> ... 
	<style type="text/css"> </style>@import url("estilo.css"); 
 ... </head> 
7
Titao Yamamoto – titaoyamamoto.com/estacio
Folha de estilo incorporada ou interna – Sintaxe 
Ideal para ser aplicada a uma única página. Dever ser declarada na seção head do documento com a tag de estilo <style>, conforme sintaxe: 
<head> <style type="text/css"> 
body {
background: #f00; 
url(imagens/minhaimagem.gif); 
}
h1 {color: #00f; }
p {
margin-left: 15px; 
 padding: 1.5em; 
}</style> </head> 
8
Titao Yamamoto – titaoyamamoto.com/estacio
Folha de estilo inline – Sintaxe 
Um estilo inline só se aplica a um elemento HTML 
Ele perde muitas das vantagens de folhas de estilo, pois mistura a apresentação com a marcação . 
Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento. 
<p style="color:#000; margin: 5px;">
/*Aqui um parágrafo de cor preta e com 5 px nas 4 margens.*/ 
</p> 
9
Titao Yamamoto – titaoyamamoto.com/estacio
Folhas de estilo múltiplas
Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrará em ação, o EFEITO CASCATA e prevalecerão os valores da folha de estilo mais específica. 
Conflito: tamanho da fonte para o elemento h2 
Solução: h2 terá o tamanho igual a 10 pt. Pois a folha interna foi declarada depois da externa na seção head do documento. 
10
Titao Yamamoto – titaoyamamoto.com/estacio
Classes e IDs
Às vezes um parágrafo tem uma aparência diferente dos outros parágrafos em uma certa parte do texto. Para mudar o estilo dele, pode-se incluir as declarações em um atributo chamado Style.
Mas, tal procedimento torna difícil a localização e a gerência dos estilos, pode-se então usar um recurso recurso para marcá-lo de forma que seja considerado diferente. Isto pode ser feito atribuindo-lhe uma identificação única.
11
Titao Yamamoto – titaoyamamoto.com/estacio
Classes e Ids - Exemplo
<P Id=w779> Texto especial </p>
Para alterar as características deste parágrafo agora, pode-se usar o seu Id como seletor:
#w779{color:cyan}
Se isto estiver em um arquivo CSS, todas as páginas que o usam e que tiverem um elemento com o Id #w779 serão afetadas.
12
Titao Yamamoto – titaoyamamoto.com/estacio
Exemplo:
<html> 
<head> 
 <style> 
#w779{color:cyan}
 </style> 
</head> 
<body> 
<P Id=w779> Texto especial </p>
</body> 
</html> 
13
Titao Yamamoto – titaoyamamoto.com/estacio
Classes e Ids
Se quiséssemos que cada um tivesse uma cor diferente, poderíamos declara cada um como sendo de uma classe distinta:
<p class=padre>Eu retiro o que disse, João</p>
<p class=grilo>Retirando ou não retirando, o fato é que o cachorro enterrou-se em latim</p>
<p class=bispo>Um cachorro? Enterrado em latim?</p>
<p class=padre>Enterrado latindo, Senho Bispo, au, au, au, não sa-be?</p>
14
Titao Yamamoto – titaoyamamoto.com/estacio
Classes e Ids
Para dar a cada parágrafo de um mesmo personagem (mesma classe) os mesmos atributos, usa-se:
	P.grilo{color:maroon}
	P.padre{color:black}
	P.bispo{color:navy}
Desta maneira, todos os textos que deverão ser lidos pelos personagem “Bispo” estarão em azul marinho.
15
Titao Yamamoto – titaoyamamoto.com/estacio
Classes e Ids
Uma classe também pode conter descritos diferentes. Se todos os textos citados por um certo autor tivessem que estar em outra cor ou fonte, poderíamos criar uma classe sem citar o descritor:
.verde{color:green}
Todos os descritores que tiverem o atributo CLASS=verde serão afetados, por exemplo:
<P class=verde>,<h3 class=verde>,<table class=verde>
16
Titao Yamamoto – titaoyamamoto.com/estacio
Padding e Margin
Todos os elementos de HTML pode ser considerado como caixas. Em CSS, o termo "modelo de caixa" é usado quando se fala em design e layout. 
O modelo de caixa de CSS é essencialmente uma caixa que envolve elementos HTML, e é composto por: margens, bordas, preenchimento e conteúdo real. 
O modelo de caixa nos permite adicionar uma borda em torno de elementos, e para definir o espaço entre os elementos. 
17
Titao Yamamoto – titaoyamamoto.com/estacio
Padding e Margin
18
Content - O conteúdo da caixa, em que o texto e as imagens aparecem
Padding - Limpa uma área em torno do conteúdo. 
Border - A fronteira que está em torno do preenchimento e conteúdo 
Margin - Limpa uma área fora da fronteira. 
Titao Yamamoto – titaoyamamoto.com/estacio
Exemplo 
Borda
<html>
<head> <style type="text/css"> 
h3 { 
border-width: medium;
border-style: solid;
border-color: #0000FF; 
} p{ 
border-width: 6px; 
border-style: dashed; 
border-color: #FF0000; 
} 
</style> </head> 
19
<body>
<h3>Borda média, contínua e azul</h3> 
<p>Borda 6px, tracejada e vermelha</p> 
</body> 
</html> 
Titao Yamamoto – titaoyamamoto.com/estacio
Exemplo
Margin
<html>
<head><style>
p {
 background-color: yellow;
}
p.ex {
 margin-top: 100px;
margin-bottom: 100px;
 margin-right: 150px;
 margin-left: 50px;
}
</style></head>
20
<body>
<p>This is a paragraph with no specified margins.</p>
<p class="ex">This is a paragraph with specified margins.</p>
</body>
</html>
Titao Yamamoto – titaoyamamoto.com/estacio
Exemplo 
Padding
<html>
<head><style>
p.ex1 {
 padding: 2cm;
}
p.ex2 {
 padding: 0.5cm 3cm;
}
</style></head>
21
<body>
<p class="ex1">This text has equal padding on each side. The padding on each side is 2cm.</p>
<p class="ex2">This text has a top and bottom padding of 0.5cm and a left and right padding of 3cm.</p>
</body>
</html>
Titao Yamamoto – titaoyamamoto.com/estacio