#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

Tamanho: px

Começar a partir da página:

Download "#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com."

Kevin Lopes Back
8 Há anos
Visualizações:

1 #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br

2 #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores e Propriedades. Com foco nos padrões de utilização e organização das folhas de estilo. Como organizar o projeto a partir de um projeto gráfico.

3 #Ambiente de Desenvolvimento IDE: Eclipse Galileo c:\ws\eclipse\eclipse.exe Workspace: c:\ws\ Criando o Projeto: File > New Project > Web > Static Web Project Nome do Projeto: ws3

$exe Workspace: c:\ws\ Criando o Projeto:$

4 #O que é CSS? Cascading Style Sheets Utilizado para aplicar formatação / estilo em páginas WEB e também em outras mídias. Funcionamento: a partir de um seletor podem ser aplicadas várias propriedades aos elementos

5 #CSS Inline x Folha de Estilo O CSS pode ser escrito diretamente no HTML através do atributo style ou em folhas de estilo separadas. Use sempre arquivos separados. <div style= color: red >Errado</div>

6 #Incluindo o CSS no HTML Inclua as folhas de estilo utilizando a tag <link>. Esta tag é usada para outras coisas por isso o atributo rel é obrigatório <link rel="stylesheet" href="file.css" /> Atributo Type é opicional <link rel="stylesheet" type="text/css" href="file.css" />

7 #Incluindo o CSS no CSS Uma folha de estilo pode incluir outras folhas de estilo. Utilize a para isso. Use esse método apenas para incluir arquivo css dentro de outros arquivos css, não no url("file.css");

Use esse método apenas para incluir arquivo css dentro de

8 #O que é um Seletor? Um código que faz referencia à um elemento do seu documento XHTML, podendo ser um elemento da HTML ou um Identificador informado (Classe ou ID). Ex.: body {}.titulo {} #menu {}

9 #O que é uma propriedade Qualquer estilo que pode ser aplicado à um seletor. Ex.: font-size: 11px; color: #f3f3f3; width: 80%; border: 5px solid black; background-image: url('tits.jpg');

10 #Sintaxe Sintaxe é simples e intuitiva. seletor { propriedade: valor da propriedade; }.seletor { color: red; }

11 #Tipos de seletores - HTML Utiliza-se o nome de qualquer elemento da HTML CSS: body { color: red; } HTML: <body> Eu vou ser um texto vermelho </body>

12 #Tipos de seletores - Classe Seletores de classe utilizam o ponto:. + nome da classe CSS:.preto { color: black; }.titulo { font-weight: bold; font-size: 14px; } HTML: <div class= titulo >Eu sou titulo</div>

13 #Tipos de seletores - ID Seletores de ID utilizam tralha: # + nome do elemento CSS: #menu { background-color: purple; color: white; } HTML: <div id= menu > Menu Legal </div>

14 #Seletor universal Seleciona todos os elementos, usado em alguns casos bem específicos CSS: * { margin: auto; color: black; }

15 #Conceitos - Cascata Define uma prioridade de aplicação de propriedades e de folhas de estilo quando há algum conflito. div { color: black; }.red { color: red; }

16 #Conceitos - Herança Elementos filhos herdam as propriedades dos seus elementos pai, quando não há conflito. div { color: blue; } <div> <span>eu vou ser Blue</span> </div>

17 #Conceitos Varias Classes Um elemento pode pertencer à várias classes ao mesmo tempo, recebendo todas as propriedades de cada uma das classes. <div class= vermelho bold underline > Sou um texto de varias classes </div>

18 #Combinando Seletores Pode ser criado um seletor que use mais de um seletor, com o objetivo de ser mais específico e/ou selecionar um elemento específico dentro de uma herança.

19 #Combinando Seletores - Tipo Seleciona um elemento de um tipo/classe/id específico. Basta juntar sem espaço os seletores div.titulo {} span.titulo{}

20 #Combinando Seletores - Descendentes Seleciona qualquer elemento descendente ao seletor da esquerda. Use espaço.classe1 { background-color: silver; }.classe1.classe2 { background-color: yellow; }

21 #Combinando Seletores - Filhos Seleciona qualquer elemento que seja FILHO ao seletor da esquerda. Use >.classe1 { background-color: silver; }.classe1 >.classe2 { background-color: yellow; }

22 #Seletores Especiais Existem vários outros seletores mais específicos, a maioria tem algum problema de incompatibilidade mesmo que sejam muito uteis. Ex.: Atributo Especifico: input [type=text] {}

23 #Propriedades Existem dezenas de propriedades CSS. Dividiremos da seguinte forma para serem explicadas: Backgrounds, Bordas, Classificação, Conteúdo, Contornos, Dimensões, Espaçamento, Fontes, Listas e marcadores, Margens, Posicionamento, Tabelas, Texto

24 #Propriedades - Background Propriedades que definem planos de fundo dos elementos. background-attachment background-color background-image background-position background-repeat

25 #Propriedades - Bordas Propriedades que definem bordas para os elementos border border-style border-color border-width (border-right-color, border-right-style, border-bottom-width...)

26 #Propriedades - Classificação Propriedades que definem o tipo de elemento alterando comportamento padrão. cursor clear display float position visibility

27 #Propriedades - Conteúdo Propriedades que definem o tipo de elemento alterando comportamento padrão, mas em sua maioria não são suportados pelos navegadores content * counter-reset * counter-increment * quotes

28 #Propriedades - Contornos Define contornos externos à borda (não suportada por alguns navegadores) outline outline-color outline-style outline-width

29 #Propriedades - Dimensões Tamanho dos elementos, exatos ou relativos height line-height max-width * max-height * min-height * min-width * width

30 #Propriedades Dimensões 2 - Medidas Existem várias medidas usadas por propriedades que definem tamanhos. Utilize sempre px (pixels) para tamanhos especificos e % para tamanhos relativos. 14Px 100%

31 #Propriedades - Espaçamento Define espaços dentro dos elementos padding padding-bottom padding-left padding-right padding-top

32 #Propriedades - Fontes Propriedades das fontes, não dos textos. São mais genéricas que as de texto font font-family font-size font-size-adjust font-stretch font-style font-variant font-weight

33 #Propriedades Listas e Marcadores Propriedades das listas (<ul> <li> e etc) list-style list-style-image list-style-position list-style-type marker-offset

34 #Propriedades Margens Define espaçamentos fora do elemento margin margin-bottom margin-left margin-right margin-top

35 #Propriedades Diferença entre padding e margin Padding define o espaçamento interno entre o limite do elemento e o seu conteúdo Margin define um espaçamento após o limite do elemento Navegadores interpretam a lagura final do elemento de diferentes formas

36 #Propriedades Posicionamento Define espaçamentos fora do elemento bottom clip left overflow (overflow-x, overflow-y) right Top Vertical-align * z-index

37 #Propriedades Tabelas Propriedades exclusivas para tabelas border-collapse border-spacing caption-side empty-cells table-layout

38 #Propriedades Texto Propriedades de texto color direction letter-spacing text-align text-decoration text-indent text-transform unicode-bidi white-space

39 #CSS 3 Isso tudo que vimos aplica-se a versão 2.0 e 2.1 da CSS, os navegadores atuais não suportam ou não interpretam todas as propriedades desta versão, mas estão se preparando para a versão 3.0 que mudará muita coisa facilitando nossa vida. Jquery adianta o suporte à várias vantagens da css3

Documentos relacionados

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver