Unidade 1 - Conteúdo

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 formatação para definir o estilo de uma página da web. Graças ao CSS é possível separar

o conteúdo da formatação além de configurar e controlar cada aspecto do design do layout de uma página.

É importante diferenciar o HTML do CSS. HTML organiza e entrega a informação enquanto que o CSS

formata esta mesma informação. Esta informação pode ser um vídeo, uma imagem, um texto ou outro elemento que o HTML possua. Na maioria das vezes está informação é um elemento visual.

A integração de

trouxe inúmeros novos recursos inclusive para animações simples sem o uso do Javascript.

HTML, CSS

e Javascript aumenta as possibilidades de uso, porém a versão 3 do CSS

História do CSS?

A linguagem CSS nem sempre existiu mas formatar e estruturar documentos digitais não é 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 não era a formatação e sim a estrutura dos dados. Mas a medida que ele foi evoluindo e ganhando popularidade agregou recursos para controle da

aparência. Com o tempo isto criou problemas. A linguagem começou a ficar muito complexa e difícil

de se manter. Este quadro se agravou com as diferenças entres os navegadores.

Em 1995 Håkon e Bert Bos apresentaram uma proposta da linguagem para W3C - World Wide Web Consortium .Em 1996 a recomendação oficial do CSS Nível 1 foi lançado. A aceitação da linguagem fez com que dois anos depois o CSS Nível 2 chegasse. As mudanças desencadeadas da Web foram muitas desde a adoção do CSS nas práticas de desenvolvimento. Depois de vários anos veio a necessidade de uma reformulação, e então chegamos ao CSS Nível 3.

A versão 3

CSS3 é a versão mais recente do CSS. Está versão homologada pela World Wide Web Consortium (W3C), é voltado para o conceito da Web 2.0 e para isto trás recursos para transições, imagens, e

efeitos para criação de animações.

Navegadores como Google Chrome, Opera, Safari, Mozilla Firefox e Internet Explorer a partir da versão 9 dão suporte ao CSS3. O novos recursos do CSS3 facilita o trabalho dos desenvolvedores e proporciona aos suários, pela variedade de transformações na apresentação de uma página.

Como funciona?

A principal função do CSS é separar a formatação de um conteúdo da estrutura HTML. O navegador

solicita ao servidor as informações. A estrutura em HTML é carregada e a nela uma ligação (link) de uma folha de estilo, um arquivo CSS que também será carregada. Caso hajam scripts estes também se juntarão ao outros.

O resultado apresentado no navegador a junção de todas estas linguagens e tecnologias.

Sintaxe

A sintaxe do código 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 são usadas como condições para a formatação. podemos atribuir qualquer propriedade para os elementos representados pelas tags no html e referenciados pelos seletores.

Por exemplo se temos a Tag <p> no código HTML e desejamos formata-la no código 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 condições em que faremos a formatação.

Tipos de Seletores

Seletores de Classe

Quando precisamos de aplicar a mesma formatação a elementos mesmo que sejam tags HTML diferentes criamos uma classe. Todos os itens com a mesma classe herdarão as características declaradas no CSS. O seletor da classe no CSS é iniciado com um ponto antes no nome. Veja o exemplo abaixo.

Exemplo:

Código HTML

<p class=“destaque”> Teste de Classe </p>

<div class=“destaque”> Este texto está formatado como o anterior</div>

Código 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 identificação. Neste caso apenas o objeto identificado será alvo daquelas modificações. No CSS representamos um ID com o caractere # antes do nome do seletor. Veja o exemplo abaixo.

Exemplo:

Código HTML

<p id=“titulo”> Teste de ID</p>

<div >Este texto está formatado como o anterior</div>

Código CSS

#titulo {

color: # eeeeee;

background:# cccccc;

}

Tipos de Seletores

Seletor Asterisco - *

Quando precisamos de aplicar a mesma formatação a todos elementos mesmo que sejam tags HTML diferentes aplicamos o seletor asterisco. Todos os itens herdarão as características declaradas no CSS. Isto´é muito útil para a técnica de reset. Veja o exemplo abaixo.

Exemplo:

Código HTML

<p >Teste de Asterísco * </p>

<div> Este texto está formatado como o anterior</div>

Código CSS

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

Tipos de Seletores

Seletor Adjacente -

Este tipo de seletor é representado com um sinal de mais + entre os elementos. Ele aplica a formatação ao elemento B que vem diretamente depois de A. Veja o exemplo abaixo.

A + B

Exemplo:

Código HTML

<p >Seletor Adjacente</p>

<div> Esta DIV será formatada.</div>

<div> Esta DIV não será formatada .</div>

Código CSS

p + div{

color: # ffffff;

background:# 000000;

font-weight: bold;

}

Tipos de Seletores

Seletor de Filhos -

Este tipo de seletor é representado sem sinais, utilizando apenas os nomes dos elementos, sua classe

ou id. Ele aplica a formatação ao elemento B que seja filho de A. Veja o exemplo abaixo.

Exemplo:

A

B

Código HTML

<div> Este <a> link </a> será formatado. <a>Este também</a></div>

<a> Este link não será formatado .</a>

Código 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 formatação ao elemento B que seja o primeiro filho de A. Veja o exemplo abaixo.

Exemplo:

Código HTML <ul> <li>MG

<ul> <li> Belo Horizonte </li> </ul>

</li>

<li>SP</li>

</ul> Código CSS

ul > li{

font-weight: bold;

}

Tipos de Seletores

Seletor not - A:not(B)

Este tipo de seletor é representado com uma expressão :not(). Ele aplica a formatação a todo elemento A com exceção do elemento B. Veja o exemplo abaixo.

Exemplo:

Código HTML

<p class=“subtítulo”>Este é o subtítulo e não será formatado</p>

<p>Este paragrafo será formatado.</p>

<p> Este também.</p>

Código CSS

p:not(.subtitulo){

color: # eeeeee;

font-weight: bold;

}

Tipos de Seletores

Seletor de atributo

Este tipo de seletor é representado com uma expressão elemento[atributo=valor do atributo]. Ele aplica a formatação a todo elemento que contenha naquele atributo o valor passado. Veja o exemplo abaixo.

- a[href*=“string"]

Exemplo:

Código HTML

<a href="http://www.google.com">Este link será formatado</a>

<a href="http://www.facebook.com">Este link não será formatado</a>

Código CSS

a[href*=“google"] {

color: # eeeeee;

font-weight: bold;

}

Tipos de Seletores

Existem diversos outros tipos de seletores que não foram abordados aqui. Infelizmente foi necessário

escolher alguns tipos para que o conteúdo não 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 aplicação foi usado por muito

tempo mas não a forma mais eficiente de

se trabalhar com CSS. Consiste em

declarar todo o conteúdo da formatação

CSS dentro da tag <style> na própria

página HTML.

como

exemplo1.html. Agora digite o código de exemplo

Crie

uma

página

e

salve

Exemplo 1

CSS EXTERNO

Outra forma de trabalhar é criar um arquivo onde ficará todo o Código CSS. O arquivo da folha de

estilo será salvo no formato .css e nele ficará toda formatação separada da estrutura do HTML. A

folha de estilo será relacionada à página HTML através da tag <link>.

Crie uma página e salve como exemplo2.html e digite o código HTML do exemplo 2. Agora crie uma

página e salve como exemplo2.css e digite o código 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 várias

páginas tanto a manutenção quanto a criação das mesmas se torna mais fácil e rápido. Isto porque você só fará alterações em uma única página, na folha de estilo e automaticamente todas as páginas

HTML que possuírem uma ligação com o arquivo CSS herdarão a formatação.

CSS EXTERNO

A conexão entre o arquivo HTML e arquivo CSS foi feita através da tag <link>.

<link href="exemplo2.css" type="text/css" rel="stylesheet" media="all">

href - Contém a url do arquivo

type – Contém 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 característica 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 números seguidos da unidade ou não como em font-size:16px.

PROPRIEDADES - FONT

Propriedade	Função
color	Cor da fonte
font-family	Tipo da fonte
font-size	Tamanho da fonte
font-style	Estilo da fonte
font-variant	Para fontes maiúsculas 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;

}