Unidade 1 - Conteúdo

O QUE É CSS

NOVIDADES DO CSS3

COMO FUNCIONA

SINTAXE

SELETORES

PROPRIEDADES

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 HTML, CSS e Javascript aumenta as possibilidades de uso, porém a versão 3 do CSS

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

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 - A + B

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.

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 - A B

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:

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 - a[href*=“string"]

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.

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.

Crie uma página e salve como exemplo1.html. Agora digite o código de exemplo

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;

}

OUTRAS PROPRIEDADES

Existem diversas outras propriedades que serão abordadas ao longo das próximas aulas

Começaremos com as propriedades de posicionamento e alinhamentos.

Sobre o autor

Formado Técnico em Informática pela Universidade Federal de Viçosa Campus Florestal/MG,

Graduado em Sistemas de Informação pela Faculdade Pitágoras Campus Divinópolis/MG.

Profissional certificado pela Microsoft nos exames Microsoft Office Specialist (MOS) de Word

2010, Powerpoint 2010 e Excel 2010 além de aprovado em diversos cursos da Microsoft Virtual Academy

(MVA) dentre eles: PowerShell 3.0, HTML5 - Homologado pelo W3C e SQL Server para DBAs Oracle.

Trabalha como designer gráfico e webmaster desde 2007, tendo feito diversos trabalhos de criação

de identidade visual contendo elementos como logos, cartões de visitas, banners, sites dinâmicos e outros.

Sobre o autor

Atuou como Instrutor na People - Informática e Idiomas, da cidade de Divinópolis em Minas Gerais, de

2011 até 2016, onde ministrou cursos de diversos assuntos como Adobe Photoshop, Adobe Illustrator, Adobe

Indesign, Adobe Dreamweaver, HTML, CSS, Flash, Actionscript, Windows 7, Windows 8, Office 2010, Excel

Avançado e Excel com VBA.

Também criador e responsável pelo conteúdo e manutenção dos blog’s cujo os endereços estão listados

abaixo, onde procura compartilhar parte do conhecimento com outros profissionais e estudantes de design e

programação.

rabiscandonophotoshop.blogspot.com.br

worldwildwebdesign.blogspot.com.br

Contatos

Skype: leo.diaz1985

Twitter: wilborn7

Facebook: www.facebook.com/wilborn7