8
Introdução CSS Style Sheet Professor: Jolvani Aula 01

Aula 01 introdução css

Embed Size (px)

Citation preview

Page 1: Aula 01 introdução css

Introdução CSS

Style SheetProfessor: Jolvani

Aula 01

Page 2: Aula 01 introdução css

Style Sheet CSS

Este é mais um curso, aulas para Vc. Estas são

as aulas de CSS que vai tornar a sua vida, no

mundo Web, muito mais colorido como a

imagem.

Mas o que é CSS?

Vamos abrir nosso browser e ver na prática

www.w3c.org

CSS é uma abreviação do termo inglês

Cascading style sheet – Folha de estilos em

cascata.

Folha de estilos em cascata é um mecanismo

simples pra adicionar estilos (fontes, cores,

espaçamentos) aos documentos Web.

Page 3: Aula 01 introdução css

Style Sheet CSS

Então CSS é mais uma tecnologia que vimos

aqui que são normatizadas pelo consórcio

W3C

Logo no início vemos o html e CSS como a

base e a estrutura das aplicações Web.

Os dois aparecem juntos, inclusive aprender

CSS tem como pré-requisito o conhecimento

de html.

Ou seja, para ser um bom programador de

interface vc precisa conhecer as duas

tecnologias....

Na w3schools nos encontramos as referencias

e tutorias html, css, css3, outros scripts...

Page 4: Aula 01 introdução css

Style Sheet CSS

Por enquanto o CSS é o mais utilizado e suportado

pelos diferentes tipos de browsers, pois o CSS3

apesar de oferecer recursos poderosos não é

suportado por todos os browsers...

Nas aulas xhtml descobrimos que ele deve ser

usado somente para estruturar o nosso conteúdo,

somente para fazer as marcações semânticas...

E o visual, o estilo de nossa página, fica por conta

do css, essa é a grande “casada” do mundo web

Então quando a gente vê um portal como a

w3schools por exemplo ou W3C, esse design, esse

layout, essas cores são definidas por uma folha de

estilos que centraliza toda a construção desse

layout.

Page 5: Aula 01 introdução css

Style Sheet CSS

Cada browser pode exibir ou não o css... Vamos

fazer um teste e visualizar somente o html...

Dessa forma que foi construído o html dessa

página veja que não é nada amigável (bonito)...

Possibilidades que envolvem o css2, como o css3

não é suportado em todos os browser usar o css2

possibilita que todas as páginas criadas rodam em

todos os browsers...

A página css zen Garden é onde designers do

mundo inteiro criam css e aplicam a essa pagina.

Vamos a página www.csszengarden.com

Page 6: Aula 01 introdução css

Style Sheet CSS Nela podemos definir outro estilo selecionando ao lado

direito, altere e observe a diferença...

Veja toda estrutura diferente, todo layout diferente,

aplicado a mesma pagina, até parece outra pagina...

Parece que navegamos em portais diferentes...

Continuem navegando e percebam a flexibilidade que

possuímos em alterar layout, estilo visual sem mexer

nada no código html...

Page 7: Aula 01 introdução css

Style Sheet CSS Existem muitas paginas que falam sobre css como

cssmaina, apresentando vários projetos para a

construção de portais com recursos css

Também o portal tableless encontramos sobre html e css

Lembrando o html é usado para estruturar suas paginas

e o css é usado para apresentar visualmente aquela

página, então até a próxima aula....

Page 8: Aula 01 introdução css

Próxima Aula: Sintaxe CSS