docCSS CASCADING STYLE SHEETS
download 
Denúncia Transcrição
CSS CASCADING STYLE SHEETS
css
Cascading
Style Sheets
CSS
CASCADING
STYLE SHEETS
Oque é o CSS
• Cascading Style Sheets - Folhas de Estilo em Cascata
• Não é uma linguagem de programação, é uma linguagem de estilo.
• Define a apresentação de documentos HTML.
• Separação entre o formato e o conteúdo de um documento.
Oque é CSS
• Existem duas características essenciais que devem ser levadas em consideração na
montagem das páginas web:
• sua estrutura - a divisão do conteúdo em blocos de textos através da criação das
tabelas, dos marcadores, listas etc; A estrutura é controlada pelos marcadores ou
seletores HTML (<body>,<h1>, <p>, <ol>, <li>, etc).
• sua apresentação - a criação de efeitos visuais no texto pela definição das
características das letras usadas, o realce de blocos similares de texto, etc.
Histórico
• A CSS tem várias versões, a CSS 1 tornou-se uma recomendação pelo W3C no final de
1996 e contém propriedades básicas, a CSS 2 aprimorou isso e adicionou conceitos
avançados.
• O W3C começou antes do início deste milênio o trabalho da CCS 3. O nível 3 ainda
está em desenvolvimento e incluiu facilidades como bordas
arredondadas, sombras, duas imagens como background de um mesmo objeto, múltiplas
colunas de texto, fontes personalizadas, etc...
Utilizando CSS
• Incorporado ao documento
• Importado ao documento
• inline (diretamente na tag HTML)
Utilizando CSS > Estilo Incorporado
• Uma definição deste tipo deve ser usada quando não existe
um padrão comum aos vários documentos de um site - ou
então o site é composto de um único documento.
<html>
<head>
<title></title>
<style type="text/css">
h1 { text-align: center; color: blue }
P { font-family: serif }
</style>
</head>
<body>
<h1>Página sem formatação de estilos</h1>
<p>Texto texto texto texto.</p>
</body>
</html>
Utilizando CSS > Estilo importado
• A definição é feita num arquivo separado e
importado na página.
<html>
<head>
<title></title>
<link rel=“stylesheet” href=“formatar.css” type=“text/css”/>
</head>
...
Utilizando CSS > Estilo Inline
• A definição da CSS é feita diretamente na tag HTML
com o uso do atributo style.
<html>
<head>
<title></title>
</head>
<body>
<h1>Página com formatação de estilos</h1>
<p style=“font-family:verdana”>Ao longo do texto, as
<em>palavras chaves</em> estarão realçadas.</p>
</body>
</html>
Prioridade
• Sempre o mais próximo do elemento.
• 3º Arquivo importado
• 2º Incorporado
• 1º inline
Seletores
• Para estilizar um determinado elemento da página utilizando CSS, é necessário ter uma
maneira de selecionar esse elemento.
• Na CSS a parte de uma regra de estilo que seleciona elementos da página é
chamada de seletor.
• Formato de um seletor:
seletor {propriedade-css: valor;}
Seletores > Sintaxe
• Propriedades com valores múltiplos
• Definição de estilo:
body
{
background: white;
color: maroon;
font-family: helvetica, sans-serif;
}
• Estão especificadas 2 famílias de fontes a serem usadas: a
helvetica e a sans-serif. Neste caso, os valores possíveis para
uma mesma propriedade devem estar separados por vírgula
E a sintaxe correta é:
• Escrever o seletor e a seguir a declaração;
• A declaração deve estar entre { } (chaves);
• Na declaração, separar a propriedade e o valor por : (dois pontos);
• É permitido usar espaços em branco em qualquer quantidade entre cada
um dos caracteres da regra;
• É permitido agrupar declarações em uma mesma regra e neste caso as
declarações deverão ser separadas por ; (ponto-e-vírgula) podendo todas
elas estar em uma mesma linha ou em linhas distintas. É facultativo o uso
de ; (ponto-e-vírgula) após a última declaração na regra;
• É indiferente o uso de maiúsculas e minúsculas em uma regra CSS, contudo
as classes e ID's devem seguir a mesma grafia constante da marcação.
Tipos de Seletores
• Seletores de tipos/seletores de classes associadas
• Seletores de ID (usam a tag ID)
• Seletores de classes não-associadas (usam a tag
class)
Seletores de Tipo
• Seletores de tipos/seletores de classes associadas:
p {color: black}
h1 {font-weight: bold;
background-color: red;}
• Seleciona elementos da página pelo tipo da tag
utilizada
Seletores de Tipo
• Exemplo
• CSS: em {color: blue}
• HTML:
<body>
<p>This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>
Seletores de ID
• Exemplo:
• CSS: #introducao {font-style: italic; }
• HTML:
<p id=“introducao”>This is some text</p>
• Seleciona elementos da página utilizando o atributo ID.
• #: Identifica que é um seletor de ID.
Seletores de classes não
associadas
• Seletores de classes não-associadas:
.texto-vermelho {color: red;}
• Seleciona elementos da página usando o valor do atributo
class utilizado nas tag.
• . (ponto): Identifica que é um seletor de classes
não -associadas.
Seletores de classes não
associadas
• Exemplo
• CSS: .big { font-size: 110%; font-weight: bold; }
• HTML:
<body>
<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>
• É possível usar diferentes configurações para uma mesma classe:
li.big {color: red}
p.big {color: blue}
Seletores Descendentes
• Permite definir a formatação para um elemento interno
a outro.
• CSS: p em { color:red }
• HTML:
<body>
<h1>Heading <em>here</em></h1>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
</body>
• Somente afeta o elemento em interno a um parágrafo.
• IMPORTANTE: A formatação independe da quantidade
de níveis.
Seletores Filhos
• Define-se que a formatação deve respeitar a hierarquia.
• Apenas um nível após (filho).
• CSS: div > em { color: pink }
• HTML:
<h1>Heading <em>text</em></h1>
<div>This is some <em>text</em>
<p>This is a paragraph of <em>text</em></p>
</div>
• Somente afeta o elemento em interno a um parágrafo.
• A formatação é somente para elementos do primeiro
nível.
Seletores Universal
• Seleciona todos os elementos do documento.
• CSS: * { color: red }
• HTML:
<h1>Heading <em>text</em></h1>
<div>This is some <em>text</em>
<p>This is a paragraph of <em>text</em></p>
</div>
• Aplicará a regra CSS a todos os elementos do
documento.
Vale Apena Visitar
• Outros seletores:
• http://www.w3schools.com/cssref/css_selectors.asp
• Efeitos/Estilos prontos em CSS3
• http://www.css3maker.com/
• http://www.css3.info
• http://css3generator.com
• http://www.colorzilla.com/gradient-editor/
Fonte
http://www.maujor.com/tutorial/abreviacss.php
Documentos relacionados
CSS - Cascading Style Sheets
FOLHAS DE ESTILO EM CASCATA CSS (Cascading Style
definidos em um único arquivo central. A grande vantagem deste método é que, se você
quiser fazer uma mudança nos estilos da sua página, você só precisa alterar em um
único local. Para criar um lin...
