SlideShare uma empresa Scribd logo
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

Mais conteúdo relacionado

Mais procurados

Html
HtmlHtml
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
Anderson Luís Furlan
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
Professor Samuel Ribeiro
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
Gabriel Moura
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
ledsifes
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
Bruno Grange
 
Html Básico
Html BásicoHtml Básico
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
Silvio Sales do Nascimento Júnior
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
Jorge Ávila Miranda
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
Jessyka Lage
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
MelquisedequeBenvind1
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
Thiago Poiani
 
Criação de tabelas com HTML
Criação de tabelas com HTMLCriação de tabelas com HTML
Criação de tabelas com HTML
Leonardo Soares
 
Aula 1 - Introdução a POO
Aula 1 -  Introdução a POOAula 1 -  Introdução a POO
Aula 1 - Introdução a POO
Daniel Brandão
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
Tiago Antônio da Silva
 

Mais procurados (20)

Html
HtmlHtml
Html
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Aula 01 - JavaScript: Introdução
Aula 01 - JavaScript: IntroduçãoAula 01 - JavaScript: Introdução
Aula 01 - JavaScript: Introdução
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
 
Criação de tabelas com HTML
Criação de tabelas com HTMLCriação de tabelas com HTML
Criação de tabelas com HTML
 
Aula 1 - Introdução a POO
Aula 1 -  Introdução a POOAula 1 -  Introdução a POO
Aula 1 - Introdução a POO
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 

Destaque

Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
Léo Dias
 
Teoria do design aula 2 - Estudo das Cores
Teoria do design   aula 2 - Estudo das CoresTeoria do design   aula 2 - Estudo das Cores
Teoria do design aula 2 - Estudo das Cores
Léo Dias
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
Carlos Eduardo Kadu
 
Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]
Léo Dias
 
Tcc leonildo wagner reestruturação de website utilizando padrões w3 c 26-04...
Tcc leonildo wagner   reestruturação de website utilizando padrões w3 c 26-04...Tcc leonildo wagner   reestruturação de website utilizando padrões w3 c 26-04...
Tcc leonildo wagner reestruturação de website utilizando padrões w3 c 26-04...
Léo Dias
 
O que há de novo no PHP 5.3
O que há de novo no PHP 5.3O que há de novo no PHP 5.3
O que há de novo no PHP 5.3
Jose Berardo
 
Engenharia Social
Engenharia SocialEngenharia Social
Engenharia Social
Jefferson Matheus
 
Html5 - O futuro da Web
Html5 - O futuro da WebHtml5 - O futuro da Web
Html5 - O futuro da Web
Jose Berardo
 
Espionagem e Software Livre
Espionagem e Software LivreEspionagem e Software Livre
Espionagem e Software Livre
Átila Camurça
 
Html5 - Estrutura Básica
Html5 - Estrutura BásicaHtml5 - Estrutura Básica
Html5 - Estrutura Básica
André Aguiar
 
Web e HTML5
Web e HTML5Web e HTML5
Web e HTML5
Bruno Orlandi
 
HTML5 & CSS3 - A Evolução da Web
HTML5 & CSS3 - A Evolução da WebHTML5 & CSS3 - A Evolução da Web
HTML5 & CSS3 - A Evolução da Web
Manoel dos Santos
 
Certificacoes Desenvolvedores
Certificacoes DesenvolvedoresCertificacoes Desenvolvedores
Certificacoes Desenvolvedores
Jose Berardo
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
HTML5, JAVASCRIPT E JQUERY
HTML5, JAVASCRIPT E JQUERYHTML5, JAVASCRIPT E JQUERY
HTML5, JAVASCRIPT E JQUERY
Renato Melo
 
Html5 Aula 3
Html5 Aula 3Html5 Aula 3
Html5 Aula 3
Jose Berardo
 
javscript para iniciantes
javscript para iniciantesjavscript para iniciantes
javscript para iniciantes
bradock1964
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
Jose Berardo
 
Campanhas Inovadoras e Criativas na Web
Campanhas Inovadoras e Criativas na WebCampanhas Inovadoras e Criativas na Web
Campanhas Inovadoras e Criativas na Web
Gustavo Zimmermann
 
Redes linux excerto
Redes linux excertoRedes linux excerto
Redes linux excerto
Diógenes Calei
 

Destaque (20)

Curriculo para Designer leonildo wagner - 08-2016
Curriculo para Designer  leonildo wagner - 08-2016 Curriculo para Designer  leonildo wagner - 08-2016
Curriculo para Designer leonildo wagner - 08-2016
 
Teoria do design aula 2 - Estudo das Cores
Teoria do design   aula 2 - Estudo das CoresTeoria do design   aula 2 - Estudo das Cores
Teoria do design aula 2 - Estudo das Cores
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]Teoria do design aula 01 [conceitos basicos]
Teoria do design aula 01 [conceitos basicos]
 
Tcc leonildo wagner reestruturação de website utilizando padrões w3 c 26-04...
Tcc leonildo wagner   reestruturação de website utilizando padrões w3 c 26-04...Tcc leonildo wagner   reestruturação de website utilizando padrões w3 c 26-04...
Tcc leonildo wagner reestruturação de website utilizando padrões w3 c 26-04...
 
O que há de novo no PHP 5.3
O que há de novo no PHP 5.3O que há de novo no PHP 5.3
O que há de novo no PHP 5.3
 
Engenharia Social
Engenharia SocialEngenharia Social
Engenharia Social
 
Html5 - O futuro da Web
Html5 - O futuro da WebHtml5 - O futuro da Web
Html5 - O futuro da Web
 
Espionagem e Software Livre
Espionagem e Software LivreEspionagem e Software Livre
Espionagem e Software Livre
 
Html5 - Estrutura Básica
Html5 - Estrutura BásicaHtml5 - Estrutura Básica
Html5 - Estrutura Básica
 
Web e HTML5
Web e HTML5Web e HTML5
Web e HTML5
 
HTML5 & CSS3 - A Evolução da Web
HTML5 & CSS3 - A Evolução da WebHTML5 & CSS3 - A Evolução da Web
HTML5 & CSS3 - A Evolução da Web
 
Certificacoes Desenvolvedores
Certificacoes DesenvolvedoresCertificacoes Desenvolvedores
Certificacoes Desenvolvedores
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
HTML5, JAVASCRIPT E JQUERY
HTML5, JAVASCRIPT E JQUERYHTML5, JAVASCRIPT E JQUERY
HTML5, JAVASCRIPT E JQUERY
 
Html5 Aula 3
Html5 Aula 3Html5 Aula 3
Html5 Aula 3
 
javscript para iniciantes
javscript para iniciantesjavscript para iniciantes
javscript para iniciantes
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
 
Campanhas Inovadoras e Criativas na Web
Campanhas Inovadoras e Criativas na WebCampanhas Inovadoras e Criativas na Web
Campanhas Inovadoras e Criativas na Web
 
Redes linux excerto
Redes linux excertoRedes linux excerto
Redes linux excerto
 

Semelhante a Curso de css3 unidade 1 - introdução ao css

Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
Morvana Bonin
 
Css
CssCss
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
Sandra Oliveira
 
Aula 02 - Font End
Aula 02 - Font EndAula 02 - Font End
Aula 02 - Font End
mvcbotelho
 
Tutorial Css Parte 1
Tutorial Css  Parte 1Tutorial Css  Parte 1
Tutorial Css Parte 1
Renato Alves de Magalhães
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSS
Manoel Afonso
 
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Agrupamento de Escolas da Batalha
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
Eliene Resende
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
Eliene Resende
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha
fevooduck
 
Aula 07
Aula 07Aula 07
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
Andrea Dalforno
 
Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Cristofer Sousa
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
Fabrício Lopes Sanchez
 
CSS
CSSCSS
Css tutorial
Css tutorialCss tutorial
Css tutorial
Cezar Bruno
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
Sergio Finamore
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
Sergio Finamore
 

Semelhante a Curso de css3 unidade 1 - introdução ao css (20)

Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
 
Css
CssCss
Css
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
Aula 02 - Font End
Aula 02 - Font EndAula 02 - Font End
Aula 02 - Font End
 
Tutorial Css Parte 1
Tutorial Css  Parte 1Tutorial Css  Parte 1
Tutorial Css Parte 1
 
Internet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSSInternet I - Aula 04 - Coisando o HTML com o CSS
Internet I - Aula 04 - Coisando o HTML com o CSS
 
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha
 
Aula 07
Aula 07Aula 07
Aula 07
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Folha de estilo css
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
CSS
CSSCSS
CSS
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 

Curso de css3 unidade 1 - introdução ao css

  • 1.
  • 2. Unidade 1 - Conteúdo O QUE É CSS NOVIDADES DO CSS3 COMO FUNCIONA SINTAXE SELETORES PROPRIEDADES
  • 3. 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.
  • 4. 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.
  • 5. 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.
  • 6. 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.
  • 7. 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>
  • 8. 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.
  • 9. 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; }
  • 10. 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; }
  • 11. 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; }
  • 12. 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; }
  • 13. 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; }
  • 14. 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; }
  • 15. 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; }
  • 16. 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; }
  • 17. 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
  • 18. 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
  • 19. 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.
  • 21. 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.
  • 22. 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
  • 23. 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.
  • 24. 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
  • 25. Exemplo p { color: #eeeeee; font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 16px; font-family: sans-serif; }
  • 26. 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.
  • 27. 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.
  • 28. 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