C S S     Cascading Style Sheets - ( )

  
CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata

CSS é uma linguagem para estilos que define o layout de documentos HTML. 

CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posi-
cionamentos e muito mais...

* Página melhor visualizada no " navegador Chrome "

Index


01 - Qual a diferença entre CSS e HTML?

02 - Estrutura CSS

03 - Cor de fundo da página + tamanho e cor da fonte

04 - Efeito ao passar com o mouse sobre o link

05 - Botão em css + evento onclick Javascript

06 - Formatando campo input

07 - Formatando links

08 - Borda em volta da tela

09 - Tipos, estilos de bordas

10 - Borda em volta do texto

11 - Mostrando imagem apenas no topo da tela

12 - Centralizando imagem na tela

13 - Borda e fundo em volta do texto

14 - Espaçamento entre as letras ( texto )

15 - Arquivo de estilos ( style.css )

16 - Formatando parágrafo e cabeçalhos 

17 - Ao passar com o mouse sobre os botoes a cor de fundo mudará

18 - Criando botão

19 - Muda a cor ao clicar no link

20 - Ajustando margens 

21 - Aplicando classe com id #

22 - Aplicando classe com "id  e class"

23 - Formatando cabeçalhos ( class + h1 )

24 - Formatando itens ( ul - il )

25 - Escrevendo texto na vertical




Objetivo

Mostrar como aplicar regras de CSS afim de formatar as páginas ( definir fontes, tamanhos, tipos de bordas, cores, a parte "estética" das páginas sejam elas na linguagem HTML, ASP, PHP etc... Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um ou mais elementos HTML.

01 - Qual a diferença entre CSS e HTML ?

HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. Um conjunto de regras CSS formam uma Folha de Estilos (CSS). OK, isto soa um tanto técnico e confuso mas continue lendo pois em breve fara sentido. Em tempos passados quando a Madonna era virgem e um sujeito chamado Tim Berners Lee inventou a World Wide Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto é um cabeçalho " ou "isto é um pará- grafo" usando tags HTML tais como <h1> e <p>. HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS  proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais. Excelente link para aprender css: http://www.w3schools.com/css/css_examples.asp Abaixo veremos como aplicar classes e podendo definir o tamanho da fonte, cor e muitos outros detalhes...

02 - Estrutura CSS

Obs: * Inicie o nome da classe com um ponto ou # Exemplo: .classe_1 ou #classe_1 * Para fazer comentários no meio do códiog use barra inclinada para direita e um asterisco. Exemplo: /* Comentando sobre o código ... */ * No final de cada linha de código adicionar um ponto e vígula. Exemplo: ; Vamos criar um exemplo mostrando como aplicar classes ( css ). [ Resultado ]

03 - Cor de fundo da página + tamanho e cor da fonte

Vamos veremos varios exemplos de como usar classes. [ Resultado ]

04 - Efeito ao passar com o mouse sobre o link

[ Resultado ]

05 - Botão em css + evento onclick Javascript

A combinação de códigos html, css e javascript numa mesma página é muito comum. [ Resultado ]

06 - Formatando campo input

[ Resultado ] ou Neste exemplo estamos usando css no início da página para não inserí-lo no meio do arquivo.

07 - Formatando links

[ Resultado ]

08 - Borda em volta da tela

[ Resultado ]

09 - Tipos, estilos de bordas

[ Resultado ] none = no border is drawn (regardless of the 'border-width' value). dotted = the border is a dotted line drawn on top of the background of the element. dashed = the border is a dashed line drawn on top of the background of the element. solid = the border is a solid line. double = the border is a double line drawn on top of the background of the element. groove = a 3D groove is drawn in colors based on the value. ridge = a 3D ridge is drawn in colors based on the value. inset = a 3D inset is drawn in colors based on the value. outset = a 3D outset is drawn in colors based on the value.

10 - Borda em volta do texto

[ Resultado ]

11 - Mostrando imagem apenas no topo da tela

[ Resultado ]

12 - Centralizando imagem na tela

[ Resultado ]

13 - Borda e fundo em volta do texto

[ Resultado ]

14 - Espaçamento entre as letras ( texto )

[ Resultado ]

15 - Arquivo de estilos ( style.css )

Vamos criar um arquivo de classes de nome arq_estilos.css assim todas as páginas acessarão os códigos contidos neste arquivo, com isto pouparemos a digitação destes códigos CSS em todos as páginas quando necessário. Conteúdo do arquivo: arq_estilos.css Abaixo abriremos o arquivo externo de classes ( arq_estilos.css ) que poderá ser acessado pelo projeto inteiro. [ Resultado ]

16 - Formatando parágrafo e cabeçalhos

[ Resultado ]

17 - Ao passar com o mouse sobre os botoes a cor de fundo mudará

[ Resultado ]

18 - Criando botão

[ Resultado ]

19 - Muda a cor ao clicar no link

20 - Ajustando margens

[ Resultado ]

21 - Aplicando classe com id #

[ Resultado ]

22 - Aplicando classe com "id e class"

[ Resultado ]

23 - Formatando cabeçalhos ( class + h1 )

[ Resultado ]

24 - Formatando itens ( ul - il )

[ Resultado ]

25 - Escrevendo texto na vertical

[ Resultado ]

26 - Cantos arredondados

[ Resultado ]

27 - Efeito na imagem ao passar o mouse

[ Resultado ]


"Wisdom is like a river, the deeper it is the less noise it makes"

Afim de aprender mais? Fale comigo: linux1.noip@gmail.com