Tecnologias para Web Design

Tamanho: px

Começar a partir da página:

Download "Tecnologias para Web Design"

Rafaela Festas Espírito Santo
10 Há anos
Visualizações:

1 Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente da HTML, ÿ Outras linguagens podem ser utilizadas ÿ Uma característica da CSS é que os estilos são combinados para definir o estilo final ÿ A especificação dos estilos pode estar no documento HTML ou num arquivo independente ø ÿ ýüüû úùø ö õøó

Outras linguagens podem ser utilizadas ÿ Uma característica da CSS é que os estilos são combinados para

2 Inserindo estilos num documento HTML - 1/2 ÿ Para especificar os estilos no documento HTML usa-se o elemento STYLE ÿ As tags <STYLE>... devem estar colocadas no cabeçalho do documento. <HTML> <HEAD>... <STYLE type = text/css >... </HEAD> ø ÿ ýüüû úùø ö õøó Inserindo estilos num documento HTML - 2/2 ÿ Recomenda-se delimitar as tags <STYLE> com comentários para compatibilidade com browsers mais antigos <STYLE <! > ø ÿ ýüüû úùø ö õøó

3 Associando um arquivo CSS a documento HTML ÿ Para que as regras de estilo sejam reutilizadas por mais de um documento utiliza-se o elemento LINK <LINK rel= stylesheet href= arquivo.css > ÿ Outra forma de inserir um arquivo é: <STYLE type= text/css uri( ø ÿ ýüüû úùø ö õøó Especificando estilos com CSS ÿ Uma especificação de atributos usando CSS é feita através de regras ÿ Cada regra é formada por um seletor e uma lista de pares atributo-valor que o modificam ÿ O seletor normalmente é um elemento HTML ÿ A lista é colocada entre chaves e cada par atributo-valor é separado por ponto-e-vírgula Elemento {atributo:valor; atributo:valor;... } ø ÿ ýüüû úùø ö õøó

css) ø ÿ ýüüû úùø ö õøó Especificando estilos com CSS ÿ Uma especificação de atributos usando CSS é feita através de regras ÿ Cada regra é formada por um seletor e uma lista de

4 Exemplo: estilos no corpo do documento ÿ Podemos modificar alguns atributos do elemento BODY com a seguinte especificação CSS <STYLE type= text/css > body {color: white; background: black; margin-left: 10%; margin-right: 10%; } ø ÿ ýüüû úùø ö õøó Definindo seletores ÿ O seletor é, normalmente, um elemento HTML ÿ Todos os elementos HTML são potenciais seletores ÿ Pode-se agrupar diversos elementos numa única regra ÿ Pode-se definir classes de elementos HTML às quais as regras aplicam-se. ø ÿ ýüüû úùø ö õøó

Definindo seletores ÿ O seletor é, normalmente, um elemento HTML ÿ Todos os elementos HTML são potenciais seletores ÿ Pode-se

5 Definindo atributos para classes de elementos ÿ Com CSS pode-se modificar atributos de um elemento HTML que pertençam a uma determinada classe ÿ Classes são definidas com a seguinte forma geral Elemento.nome_da_classe { atributo:valor;... } Elemento é opcional ÿ No documento HTML a classe é identificada pelo atributo class <Elemento class= nome_da_classe > ø ÿ ýüüû úùø ö õøó Definindo uma identidade para um elemento ÿ Pode-se identificar uma lista de atributos dandolhe uma identidade. ÿ Na CSS a identidade é especificada assim: #identificador { atributo: valor;... } ÿ Na HTML a referência ao identificador é feita com o atributo id <Elemento id= identificador > ø ÿ ýüüû úùø ö õøó

.. } Elemento é opcional ÿ No documento HTML a classe é identificada pelo atributo class <Elemento class= nome_da_classe > ø ÿ ýüüû úùø ö õøó Definindo uma identidade para

6 Cores ÿ Cores podem ser definidas de três formas: Nomes pré-definidos ÿ Black, white, blue, green, yellow, red, gray. Lime, maroon, acqua, fuchsia, nay, olive, purple, silver, teal Valores RGB ÿ rgb(0, 0, 0) - black ÿ rgb(255, 255, 255) - white Valores Hexadecimal ÿ # black ÿ #FFFFFF - white ø ÿ ýüüû úùø ö õøó Atributos 1/3 ÿ A linguagem CSS permite especificar uma série de atributos para cada um dos elementos ÿ Atributos de caracteres (font) Font-family, font-style, font-variant, font-weight, fontsize, font. ÿ Atributos de cores e fundo de tela (background) color, background, background-color, etc. ø ÿ ýüüû úùø ö õøó

black ÿ #FFFFFF - white ø ÿ ýüüû úùø ö õøó Atributos 1/3 ÿ A linguagem CSS permite especificar uma série de atributos para cada um dos elementos ÿ Atributos

7 Atributos 2/3 ÿ Propriedades de texto Word-spacing, letter-spacing, text-decoration, verticalalign, text-transform, text-align, text-indent, line-height ÿ Propriedades de caixa (box) Aplica-se a margens, preenchimento e bordas margin-top, -left, -bottom, -right padding-top, -left, -bottom, -right Border-color, border-style, border-top, etc. ø ÿ ýüüû úùø ö õøó Atributos 3/3 ÿ Propriedades de classificação Display, white-space, list-style-type, list-style-image, list-style-position, liststyle ÿ Unidades de valores Comprimentos ÿ Polegadas (in), Centímetros (cm), Milímetros (mm), Pontos (pt), picas (pc), pixels (px), relativas ao fonte (em) Percentual (%), pode-se usar +/- ø ÿ ýüüû úùø ö õøó

ø ÿ ýüüû úùø ö õøó Atributos 3/3 ÿ Propriedades de classificação Display, white-space, list-style-type, list-style-image, list-style-position, liststyle ÿ Unidades de valores

Documentos relacionados

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

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio [email protected] #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores