TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão

Tamanho: px

Começar a partir da página:

Download "TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão"

Luiz Fernando Aldeia Mangueira
6 Há anos
Visualizações:

1 Luiz Leão

2 Conteúdo da Unidade Cascading Style Sheet (CSS)

3 Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

4 Linguagem CSS Introdução Ao invés de inserirmos a formatação dentro do documento, o desenvolvedor cria um link (ligação) para um arquivo que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta, portanto, modificar apenas um arquivo.

5 Linguagem CSS Introdução <head> <link rel="stylesheet href= arquivo.css" />... </head>

6 Linguagem CSS Introdução Outra forma de se utilizar as folhas de estilo é o uso da tag <style>, implementando os estilos para os elementos da página.

7 Linguagem CSS Introdução <style> Body{ color: #FF0000; font-family: Verdana; } </style>

8 Linguagem CSS Seletores É o recurso que utilizamos para buscar os elementos na página html, com a finalidade de modificarmos os seus dados de estilo;

9 Linguagem CSS Seletores Podem ser: Elemento Classe Elementos com Classe Pelo id Elemento com o id Lista de Elementos Elementos Filhos

10 Linguagem CSS Seletores Elemento body { } font-family: Arial, Verdana; background-color: #FF0000; margin: 5px 10px;

11 Linguagem CSS Seletores Classe.exemploClasse { } font-family: Arial, Verdana; background-color: #FF0000; margin: 5px 10px; <div class= exemploclasse >...</div>

12 Linguagem CSS Seletores Elementos com Classe div.exemploclasse { } font-family: Arial, Verdana; background-color: #FF0000; margin: 5px 10px; <div class= exemploclasse >...</div> <spam class= exemploclasse >...</spam> -> NÃO MUDA

13 Linguagem CSS Seletores Pelo ID #exemploid { } font-family: Arial, Verdana; background-color: #FF0000; margin: 5px 10px; <div id= exemploid >...</div> <div id= exemploid2 >...</div> -> NÃO MUDA

14 Linguagem CSS Seletores Elementos com ID div#exemploid { } font-family: Arial, Verdana; background-color: #FF0000; margin: 5px 10px; <div id= exemploid >...</div> <spam id= exemploid >...</spam> -> NÃO MUDA

15 Linguagem CSS Seletores Lista de Elementos div, spam { } font-family: Arial, Verdana; background-color: #FF0000; margin: 5px 10px; <div>...</div> <spam>...</spam> -> TAMBÉM MUDA

16 Linguagem CSS Seletores Elementos Filhos div > p { } font-family: Arial, Verdana; background-color: #FF0000; margin: 5px 10px; <div> -> NÃO MUDA <p>...</p> -> MUDA </div>

17 Linguagem CSS Estilos São divididos em vários grupos. Os principais são: Posição Dimensões Cores e Background Texto Fontes Boxes (Estruturais)

18 Linguagem CSS Estilos POSIÇÃO: Informações do posicionamento dos elementos display clear position z-index top direction right unicode-bidi bottom overflow left clip float visibility

19 Linguagem CSS Estilos DIMENSÕES: Informações sobre as dimensões dos elementos width min-height min-width max-height max-width vertical-align height

20 Linguagem CSS Estilos CORES E BACKGROUND: Informações sobre as cores e fundo dos elementos color background background-color background-attachment background-repeat background-image background-position

21 Linguagem CSS Estilos TEXTO: Informações sobre os textos dos elementos text-indent text-align text-decoration text-shadow letter-spacing word-spacing text-transform white-space line-height

22 Linguagem CSS Estilos FONTES: Informações sobre as fontes dos textos dos elementos font font-family font-style font-weight font-size

23 Linguagem CSS Estilos BOXES: Informações sobre as estruturas dos elementos margin padding-bottom border-color border-bottom-style margin-top padding-left border-top-color border-left-style margin-right border border-right-color border-width margin-bottom border-top border-bottom-color border-top-width margin-left border-bottom border-left-color border-right-width padding border-right border-style border-bottom-width padding-top border-left border-top-style border-left-width padding-right border-right-style

24 Linguagem CSS Estilos Margin Distâncias do objeto com relação as margens da tela margin: {{top}} {{right}} {{bottom}} {{left}} Valor numérico em pixels (px) margin: 100px 50px 20px 80px;

25 Linguagem CSS Estilos Border Borda dos objetos border: {{largura}} {{estilo}} {{cor}} Largura: valor numérico em pixels (px) Estilo: pode ser none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit, Cor: Pode ser por nome, RGB ou Hex border: 2px dashed blue;

Documentos relacionados

Cascading Style Sheets

Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,