Unidade 1 - Contedo

O QUE CSS
NOVIDADES DO CSS3
COMO FUNCIONA
SINTAXE
SELETORES
O que o CSS?
Cascading Style Sheets (Folhas de Estilo em Cascata) que voc deve conhecer pela sigla CSS uma
linguagem de formatao para definir o estilo de uma pgina da web. Graas ao CSS possvel separar
o contedo da formatao alm de configurar e controlar cada aspecto do design do layout de uma
pgina.
importante diferenciar o HTML do CSS. HTML organiza e entrega a informao enquanto que o CSS
formata esta mesma informao. Esta informao pode ser um vdeo, uma imagem, um texto ou outro
elemento que o HTML possua. Na maioria das vezes est informao um elemento visual.
A integrao de HTML, CSS e Javascript aumenta as possibilidades de uso, porm a verso 3 do CSS
trouxe inmeros novos recursos inclusive para animaes simples sem o uso do Javascript.


Histria do CSS?
A linguagem CSS nem sempre existiu mas formatar e estruturar documentos digitais no algo novo.
Desde os anos 70 j existiam linguagens como a SGML para estes fins. Mas o grande marco foi o
surgimento do HTML. Inicialmente a ideia do HTML no era a formatao e sim a estrutura dos dados.
Mas a medida que ele foi evoluindo e ganhando popularidade agregou recursos para controle da
aparncia. Com o tempo isto criou problemas. A linguagem comeou a ficar muito complexa e difcil
de se manter. Este quadro se agravou com as diferenas entres os navegadores.
Em 1995 Hkon e Bert Bos apresentaram uma proposta da linguagem para W3C - World Wide Web
Consortium .Em 1996 a recomendao oficial do CSS Nvel 1 foi lanado. A aceitao da linguagem fez
com que dois anos depois o CSS Nvel 2 chegasse. As mudanas desencadeadas da Web foram muitas
desde a adoo do CSS nas prticas de desenvolvimento. Depois de vrios anos veio a necessidade de
uma reformulao, e ento chegamos ao CSS Nvel 3.


A verso 3
CSS3 a verso mais recente do CSS. Est verso homologada pela World Wide Web Consortium
(W3C), voltado para o conceito da Web 2.0 e para isto trs recursos para transies, imagens, e
efeitos para criao de animaes.
Navegadores como Google Chrome, Opera, Safari, Mozilla Firefox e Internet Explorer a partir da verso
9 do suporte ao CSS3. O novos recursos do CSS3 facilita o trabalho dos desenvolvedores e proporciona
aos surios, pela variedade de transformaes na apresentao de uma pgina.

Como funciona?
A principal funo do CSS separar a formatao de um contedo da estrutura HTML. O navegador
solicita ao servidor as informaes. A estrutura em HTML carregada e a nela uma ligao (link) de
uma folha de estilo, um arquivo CSS que tambm ser carregada. Caso hajam scripts estes tambm se
juntaro ao outros.
O resultado apresentado no navegador a juno de todas estas linguagens e tecnologias.


Sintaxe
A sintaxe do cdigo CSS divida entre seletores e propriedades. Veja o exemplo da estrutura:

O seletor p aponta para o elemento HTML representado pela tag <p>

Seletores
Os seletores representam estruturas que so usadas como condies para a formatao. podemos
atribuir qualquer propriedade para os elementos representados pelas tags no html e referenciados
pelos seletores.
Por exemplo se temos a Tag <p> no cdigo HTML e desejamos formata-la no cdigo CSS criaremos o
seletor p e dentro das chaves { } vamos atribuir as propriedades e seus valores.
Exemplo:
p {
color: # 000000;
}
J vimos este exemplo ao falar da sintaxe.
Existem diversos tipos de seletores, e cada tipo permite alterar as condies em que faremos a
formatao.
Tipos de Seletores
Seletores de Classe
Quando precisamos de aplicar a mesma formatao a elementos mesmo que sejam tags HTML diferentes
criamos uma classe. Todos os itens com a mesma classe herdaro as caractersticas declaradas no CSS. O
seletor da classe no CSS iniciado com um ponto antes no nome. Veja o exemplo abaixo.
Exemplo:
Cdigo HTML
<p class=destaque> Teste de Classe </p>
<div class=destaque> Este texto est formatado como o anterior</div>

Cdigo CSS
.destaque {
color: # ffffff;
background:# 000000;
}

Tipos de Seletores
Seletores de ID
Quando o objeto a ser formatado nico utilizamos o seletor de ID para identificao. Neste caso apenas o
objeto identificado ser alvo daquelas modificaes. No CSS representamos um ID com o caractere # antes
do nome do seletor. Veja o exemplo abaixo.
Exemplo:
Cdigo HTML
<p id=titulo> Teste de ID</p>
<div >Este texto est formatado como o anterior</div>

Cdigo CSS
#titulo {
color: # eeeeee;
background:# cccccc;
}


Tipos de Seletores
Seletor Asterisco - *
Quando precisamos de aplicar a mesma formatao a todos elementos mesmo que sejam tags HTML
diferentes aplicamos o seletor asterisco. Todos os itens herdaro as caractersticas declaradas no CSS. Isto
muito til para a tcnica de reset. Veja o exemplo abaixo.
Exemplo:
Cdigo HTML
<p >Teste de Astersco * </p>
<div> Este texto est formatado como o anterior</div>

Cdigo CSS
* {
color: # ffffff;
background:# eeeeee;
}

Tipos de Seletores
Seletor Adjacente - A + B
Este tipo de seletor representado com um sinal de mais + entre os elementos. Ele aplica a formatao ao
elemento B que vem diretamente depois de A. Veja o exemplo abaixo.
Exemplo:
Cdigo HTML
<p >Seletor Adjacente</p>
<div> Esta DIV ser formatada.</div>
<div> Esta DIV no ser formatada .</div>
Cdigo CSS
p + div{
color: # ffffff;
background:# 000000;
font-weight: bold;
}

Tipos de Seletores
Seletor de Filhos - A B
Este tipo de seletor representado sem sinais, utilizando apenas os nomes dos elementos, sua classe
ou id. Ele aplica a formatao ao elemento B que seja filho de A. Veja o exemplo abaixo.
Exemplo:
Cdigo HTML
<div> Este <a> link </a> ser formatado. <a>Este tambm</a></div>
<a> Este link no ser formatado .</a>
Cdigo CSS
div a{
color: # cccccc;
font-weight: bold;
}

Tipos de Seletores
Seletor de Filhos Diretos - A > B
Este tipo de seletor representado com um sinal de maior > entre os elementos. Ele aplica a formatao ao
elemento B que seja o primeiro filho de A. Veja o exemplo abaixo.
Exemplo:
Cdigo HTML
<ul>
<li>MG
<ul> <li> Belo Horizonte </li> </ul>
</li>
<li>SP</li>
</ul>
Cdigo CSS
ul > li{
font-weight: bold;
}

Tipos de Seletores
Seletor not - A:not(B)
Este tipo de seletor representado com uma expresso :not(). Ele aplica a formatao a todo elemento A
com exceo do elemento B. Veja o exemplo abaixo.
Exemplo:
Cdigo HTML
<p class=subttulo>Este o subttulo e no ser formatado</p>
<p>Este paragrafo ser formatado.</p>
<p> Este tambm.</p>
Cdigo CSS
p:not(.subtitulo){
color: # eeeeee;
font-weight: bold;
}

Tipos de Seletores
Seletor de atributo - a[href*=string"]
Este tipo de seletor representado com uma expresso elemento[atributo=valor do atributo]. Ele
aplica a formatao a todo elemento que contenha naquele atributo o valor passado. Veja o exemplo
abaixo.
Exemplo:
Cdigo HTML
<a href="http://www.google.com">Este link ser formatado</a>
<a href="http://www.facebook.com">Este link no ser formatado</a>
Cdigo CSS
a[href*=google"] {
color: # eeeeee;
font-weight: bold;
}

Tipos de Seletores

Existem diversos outros tipos de seletores que no foram abordados aqui. Infelizmente foi necessrio
escolher alguns tipos para que o contedo no fique muito extenso. Recomendo que acessem os links
abaixo para ver mais detalhes.

www.w3.org/Style/CSS
www.w3schools.com/css
www.w3c.br



CSS INTERNO

Este tipo de aplicao foi usado por muito
tempo mas no a forma mais eficiente de
se trabalhar com CSS. Consiste em
declarar todo o contedo da formatao
CSS dentro da tag <style> na prpria
pgina HTML.

Crie uma pgina e salve como
exemplo1.html. Agora digite o cdigo de
exemplo
Exemplo 1
CSS EXTERNO

Outra forma de trabalhar criar um arquivo onde ficar todo o Cdigo CSS. O arquivo da folha de
estilo ser salvo no formato .css e nele ficar toda formatao separada da estrutura do HTML. A
folha de estilo ser relacionada pgina HTML atravs da tag <link>.

Crie uma pgina e salve como exemplo2.html e digite o cdigo HTML do exemplo 2. Agora crie uma
pgina e salve como exemplo2.css e digite o cdigo CSS do exemplo 2.
CSS EXTERNO
exemplo2.html exemplo2.css
CSS EXTERNO

Uma das vantagens de se trabalhar com o CSS em um arquivo externo que se voc tiver vrias
pginas tanto a manuteno quanto a criao das mesmas se torna mais fcil e rpido. Isto porque
voc s far alteraes em uma nica pgina, na folha de estilo e automaticamente todas as pginas
HTML que possurem uma ligao com o arquivo CSS herdaro a formatao.
CSS EXTERNO

A conexo entre o arquivo HTML e arquivo CSS foi feita atravs da tag <link>.
<link href="exemplo2.css" type="text/css" rel="stylesheet" media="all">
href - Contm a url do arquivo
type Contm o tipo do arquivo da folha de estilo
rel Com o valor stylesheet especifica que se trata de uma folha de estilo
media - Especifica o tipo de media de destino
PROPRIEDADES

Uma propriedade uma caracterstica a ser estilizada pelo CSS. Por exemplo se eu quiser alterar o
tamanho das letras utilizo a propriedade font-size . Existem diversos tipos de propriedades e cada
uma aceita certo de valores. Por exemplo font-size aceita apenas nmeros seguidos da unidade ou
no como em font-size:16px.
PROPRIEDADES - FONT
Propriedade Funo
color Cor da fonte
font-family Tipo da fonte
font-size Tamanho da fonte
font-style Estilo da fonte
font-variant Para fontes maisculas de menor altura
font-weight Intensidade do negrito
font Forma abreviada para todas as propiedades
Exemplo
p {
color: #eeeeee;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 16px;
font-family: sans-serif;
}