Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação.

Tamanho: px

Começar a partir da página:

Download "Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação."

Rodrigo Fagundes Rios
7 Há anos
Visualizações:

1 Porque usar css? Cascading Style Sheets (css) sobrepõe as características padrões dos browsers São usadas para melhorar e controlar a aparência de uma página web.

2 Porque usar css? Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação. Esta separação permite que o website inteiro, ou páginas específicas, sejam modificados através do uso de uma página css.

3 Porque usar css? Através do uso de css o web designer tem grande flexibilidade e controle para criar e manter um website. Css também pode proporcionar a cada página uma aparência e um sentimento que seja consistente em todo o website.

4 Como é o CSS?

5 Sites de apoio para CSS Em inglês: stylesheet_guide/ Em português: tabela_conteudo.html

6 Web browser e css Os vários Web browsers interpretam css de diferentes maneiras ou às vezes, não interpretam nada. As páginas devem ser testadas no ambiente escolhido para assegurar que os resultados desejados são alcançados.

7 CSS e browsers Para a listagem completa sobre o suporte que os browsers oferecem ao css visite o site: browser_support/index.html Legenda:

8 Exemplo do site:

9 Tipos de estilos Os estilos são aplicados aos elementos por diversas formas: inline, na mesma linha dentro de uma tag html embebidos nas páginas entre a tag <head> e </ head> Externos uso de uma página.css

10 Estilo inline Este estilo é definido dentro de uma tag HTML. Ele afeta somente a tag em que ele está definido. Mais usado em aplicações DHTML (Dynamic Hipertext Markup Language), que usam JavaScript e posicionamento dinâmico de elementos html.

11 Exemplo de Estilo Inline Código: <p style="font-size:10pt;color:red;">este parágrafo foi definido com tamanho de fonte de 10pts e cor de texto vermelho. </p> Visualização: Este parágrafo foi definido com tamanho de fonte de 10pts e cor de texto vermelho.

12 Exemplo de Estilo Inline Código: <h2 style= color:green >Título em Verde</h2> Visualização: Título em Verde

13 Sintaxe de um estilo Inline <seletor style= atributo1:valor1; atributo2:valor2 > qualquer elemento html </seletor>

14 Estilo Embebido É definido na seção head de um documento html Este estilo só irá afetar as tags html que estão na página em que ele foi inserido.

15 Exemplo de um Estilo Embebido <HEAD> <style type="text/css"> <!-- p {font: 12pt "Currier, Times"; h1 color: black} {font: 15px Arial,Verdana"; color: #00CC00} -- > </style> </HEAD>

16 Sintaxe do Estilo Embebido <style type= link_type >  </style>

17 CSS Externa localização <head> <title>ecoturismo</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <link href="css/style.css" rel="stylesheet" type="text/ css /> </head>

18 Exemplo de um arquivo css: body {font-family: Arial, Helvetica, sans-serif; background-color: #FFFFFF; background-image: url(paper.gif)} a {font-size: 0.8em; font-weight: bold; color: #006699; text-decoration: none} ol {list-style-type: decimal} ul {list-style-type: square}

19 Sintaxe para um arquivo css: seletor { attribute1: value1; attribute2: value2; }

20 Sintaxe de um link tag <link href="url" rel="relacao" type="link /> href é a url do arquivo css rel é a relação entre o documento anexado e a página e relacao poderia ser por exemplo, stylesheet. type é a linguagem usada no documento lincado e link poderia ser text/css.

21 Precedências É importante observar a ordem de precedência entre estes estilos, ela vai determinar qual estilo será o adotado pelo browser, assim o estilo externo é sobreposto pelo estilo embebido que por sua vez é sobreposto pelo inline. Em suma, se dois ou mais estilos estão brigando por um elemento html, o estilo mais próximo ganha.

22 Precedências Um tag <link> deve preceder à um <style> quando ambos estão presentes na página <head> <title>ecoturismo</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <link href="css/style.css" rel="stylesheet" type="text/css /> <style type="text/css">  background-color: #FFCC99 } </style> </head>

23 Agrupamento de seletores Se você deseja fazer mudanças no estilo de vários elementos html e estas mudanças são iguais, é possível agrupar seletores. Resulta em menor codificação e conseqüente mais rapidez de download.

24 Agrupamento de seletores Por exemplo: p {color:#ff6666; font-family:verdana} h3 {color:#ff6666; font-family:verdana} dl {color:#ff6666; font-family:verdana} Poderiam ser agrupados como a seguir (note que os seletores devem ser separados por uma vírgula): p, h3, dl {color:#ff6666; font-family:verdana}

25 Impedir sobreposição de valores Para que você defina que um valor não seja sobreposto de nenhuma maneira você deve aplicar!important após o valor do estilo. Ex: h2 { color: #000000!important; } Neste exemplo todo h2 será de cor preta, mesmo que existir um estilo inline que defina outra coisa.

26 Atividade 5

27 Abra a página index.html Abra a página index.html Insira um link para uma página de estilo, antes da tag </head>, da seguinte maneira: <link href= imagens/estilo.css" rel="stylesheet" type="text/css />

28 Abra o editor de texto Comece um novo documento. Nele escolha a cor de fundo que você quer nas páginas. body {background-color: #E3FFFF} Para lista das cores recomendadas para web visite: reference/color_codes/

29 Salve a página Salve a página dentro do diretório imagens (que está na raiz do site) como estilo.css Teste e veja se a cor de fundo te agrada, senão, troque.

30 Definindo font-family Vamos decidir que tipo de fonte o browser irá mostrar o texto Para isto precisamos saber quais fontes são seguras de usar.

31 Fontes seguras para web O código HTML busca no computador do internauta a fonte definida para o site. Caso esta fonte não esteja instalada, o browser exibirá o texto com a fonte padrão (normalmente a Times New Roman) As fontes seguras para web são aquelas com maiores probabilidades de estarem instaladas no computador do internauta.

33 TrueType fonts (para Mac e Windows) Andale Mono Arial Comic Sans Courier New Georgia Impact Times New Roman Trebuchet MS Verdana

34 Fontes seguras para web O código HTML permite definir mais de uma fonte para um texto. caso a primeira da lista não esteja instalada, o browser busca pela segunda e assim sucessivamente. A maioria dos Softwares WYSYWYG já vem com listas de fontes seguras pré-definidas.

35 Font-family Para isto defina 3 tipos de fontes diferentes. Ex. p { font-family: Verdana, Arial, Helvetica; } Os browsers vão procurar primeiro a Verdana, se não tiver, procuram a Arial e ainda assim, se não encontrar, procuram a Helvetica. Caso nenhuma delas tiver, a fonte padrão do browser será exibida.

36 Font-size Ainda definindo o p inclua o tamanho desejado para fonte. p { font-family: Verdana, Arial, Helvetica; font-size: 11pt; } Tamanhos comumente usados são: pt (points) problemas: Mac Os usa 72ppi (pixels per inch) e Windows 96ppi de resolução de tela. Ou seja, no Mac, as fontes ficam sempre menores. px (píxels) o tamanho fica sempre fixo em relação à outros elementos. em medida relativa, proporcional à preferência dos usuários. % - porcentagem em relação ao texto regular

37 Color Para especificar a cor do texto use: p { font-family: Verdana, Arial, Helvetica; font-size: 11pt; } color:#ffffcc; Escolha qualquer valor hexadecimal para a cor.

38 Tipo de marcador para listas Defina um dos valores mais comuns para exibir a lista não ordenada: li { list-style-type: circle; } Valores: disc circle square

39 Títulos Especifique a aparência dos títulos. h2 { font-family: Impact, Georgia, Helvetica; font-size: 14pt; } font-weight: bolder; font-weight especifica a largura, ou negrito, de um tipo. Valores comuns: normal bold, bolder, lighter

40 Definindo a aparência de um link a { font-family: Arial, Verdana, Helvetica; font-size: 14pt; } font-weight: bold; text-decoration: none; Valores comuns para text-decoration: underline (padrão para a ) none overline line-through

41 Aparência de um link a:link { color: #330066; } Escolha uma cor diferente da cor do texto para destacar os links em sua página.

42 Aparência de um link já visitado a:visited { color: #CCCCCC; } Escolha uma cor diferente para indicar um link já visitado. Útil para que o usuário saiba por onde já andou.

43 Efeito mouse over a:hover { color: #339999; } Escolha uma cor para trocar quando o mouse passar em cima de um link. Útil para chamar a atenção do usuário para o link.

44 O que fazer agora? Salve sua página estilo.css. Faça upload dela e da index.html Insira um link para a página estilo.css em cada página de seu site. Obs.: lembre-se dos caminhos para o link. Em algumas páginas será necessário acrescentar../ antes de imagens/estilo.css, para que suba 1 nível na estrutura do site.

45 Obrigada pela atenção! Quando terminar, faça upload e mande avisando.

Documentos relacionados

PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues

PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues PROGRAMADOR WEB PROF. Esp. Andrew H. G. Rodrigues CSS - CASCADING STYLE SHEETS Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar a seguinte sintaxe: