Tecnologias para
Internet
Thyago Maia Tavares de Farias
Aula 6
Sumário
Stylesheets
Cascating Style Sheets (CSS)
Stylesheets
Tem a função de separar a formatação da página de seu
conteúdo;
Facilita a adaptação da apresentação da página à
aplicações e clientes diferentes;
Principais vantagens:
Adaptação para o formato em diferentes displays;
Padronização da apresentação gráfica de uma apresentação;
Por exemplo, no caso de uma mudança de fonte
em várias páginas HTML, alteraríamos apenas o
documento de estilo;
Cascating Style Sheets (CSS)
Linguagem que define como os documentos
HTML serão exibidos;
Vários documentos HTML podem acessar um
único arquivo CSS (folha de estilo), facilitando a
padronização de aplicações;
Graças ao CSS, deixamos de utilizar atributos de
formatação em tags HTML, e passamos a
trabalha com formatação em um arquivo CSS;
Cascating Style Sheets (CSS)
CSS economiza muito trabalho:
O mesmo define como os elementos HTML serão
exibidos;
Arquivos CSS permite mudar a aparência e o layout
de todas as páginas em um Web site, apenas
editando um único arquivo;
Cascating Style Sheets (CSS)
Tag usada em um documento HTML para
referenciar um arquivo CSS:
<link rel=“stylesheet” type=“text/css” href=“exemplo.css”>
Tal tag deverá ser declarada entre as tags
<head> e </head> (cabeçalho de uma página
HTML;
Cascating Style Sheets (CSS)
Sintaxe do CSS:
Uma regra CSS possui duas partes: um seletor e uma
ou mais declarações;
Um seletor é normalmente um elemento HTML que
você deseja formatar (Ex.: html, body, a, p, div, etc.);
Um arquivo CSS poderá ter vários seletores;
Cada declaração consiste em uma propriedade e um
valor (Ex.: background: #000000, etc.);
A propriedade é o atributo de estilo (formatação) a
ser alterado. Cada propriedade possui um valor;
Cascating Style Sheets (CSS)
Sintaxe do CSS:
seletor
{
propriedade1:
propriedade2:
...
propriedaden:
}
valor1;
valor2;
valor3;
Cascating Style Sheets (CSS)
Exemplo:
Seletor CSS que formata cor e alinhamento de fonte
em parágrafos HTML (<p>);
p
{
color: red;
text-align: center;
}
Cascating Style Sheets (CSS)
Exemplo anterior invocado em uma página
HTML:
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“exemplo.css”>
</head>
<body>
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
<p>Parágrafo 3</p>
</body>
</html>
Cascating Style Sheets (CSS)
O seletor id
Usado para especificar uma formatação para um
único elemento específico;
Criamos um identificador (id) para declarar um
seletor. O mesmo poderá ser utilizado como um
atributo de um elemento HTML.
Seletores id são declarados com # seguido de um
nome definido pelo usuário;
Cascating Style Sheets (CSS)
Exemplo:
Seletor id que alinha o texto de um elemento HTML
para a direita:
#direita
{
text-align: right;
}
Cascating Style Sheets (CSS)
Exemplo anterior invocado em uma página
HTML:
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“exemplo.css”>
</head>
<body>
<p>Parágrafo 1</p>
<p id=“direita”>Parágrafo 2</p>
<p>Parágrafo 3</p>
</body>
</html>
Cascating Style Sheets (CSS)
O seletor class
Usado para especificar uma formatação para um
grupo de elementos;
Diferentemente de um seletor id, o seletor class é
freqüentemente utilizado para vários elementos.
Seletores class são declarados com . seguido de um
nome definido pelo usuário;
Cascating Style Sheets (CSS)
Exemplo:
Seletor class que centraliza o texto de um elemento
HTML:
.centro
{
text-align: center;
}
Cascating Style Sheets (CSS)
Exemplo anterior invocado em uma página
HTML:
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“exemplo.css”>
</head>
<body>
<p>Parágrafo 1</p>
<p id=“direita”>Parágrafo 2</p>
<p class=“centro”>Parágrafo 3</p>
</body>
</html>
Download
