PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em documentos Web. O princípio da HTML não está na formatação dos elementos, portanto cabe ao CSS cuidar do aspecto visual do documento. 1
UM POUCO DE HISTÓRIA Até 1993: Estilização era mínima, feita pelos próprios navegadores (Mosaic); 1994: Primeira proposta de adoção de CSS; 1996: CSS passa a ser recomendado pela W3c. VANTAGENS Facilidade na manutenção, pois mudanças são centralizadas; Funcionalidades não suportadas pelo HTML; Não é mais necessária utilizar tags para formatação de páginas; Maior eficiência no gerenciamento de layout. 2
REGRAS CSS Uma regra CSS consiste em uma declaração que segue uma sintaxe definindo como será aplicado um estilo a um ou mais elementos HTML. Quando temos um conjunto de regras CSS, dizemos que existe uma folha de estilos. REGRAS CSS Uma regra é composta por: Seletor; Propriedade; Valor. seletor { propriedade: valor; 3
SELETOR Um seletor é o elemento HTML identificado por uma tag, classe ou id, que indica para o qual a regra será válida. seletor { propriedade: valor; PROPRIEDADE A propriedade é o atributo do elemento HTML ao qual será aplicada a regra, por exemplo: font, color, background... seletor { propriedade: valor; 4
VALOR Consiste na característica específica a ser assumida pela propriedade. Font pode ser Arial, cor azul, cor de fundo verde... seletor { propriedade: valor; REGRA CSS ESTILO INTERNO <head> <style type= text/css > p{ font-size: 12px; color: #993366; </style> </head> <body> <p> Teste </p> </body> 5
REGRA CSS ESTILO INTERNO <head> <style type= text/css > body{ color: #0000cc; h1, h2, h3, h4, h5, h6 { font-family: Comic Sans MS ; </style> </head> CLASSES Em um site com CSS é comum a existência de uma classe, e nesta a definição de regras CSS..nome_da_classe{ propriedade: valor; 6
CLASSES O objetivo de classes é aplicar regras comuns a seletores (tags) diferentes. No CSS sintaxe consiste na combinação do sinal de ponto (.) seguido do nome da classe..nome_da_classe{ propriedade: valor; REGRA CSS CLASSES <head> <style type= text/css >.formatacao1{ font-family: Comic Sans MS ;.formatacao2{ font-size: 20px; font-family: Arial; </style> </head> 7
REGRA CSS CLASSES <head> <style type= text/css >.cor-um{ background-color: gray;.cor-dois{ background-color: lightblue; </style> </head> PÁGINA HTML COM CLASSES <body> <tabel border= 1 > <tr> <th> Disciplina </th> <th> Professores </th> </tr> <tr class= cor-um > <td> Redes </td> <td> Prof. Débora </td> </tr> <tr class= cor-dois > <td> Eletricidade </td> <td> Prof. Jean </td> </tr> </table> </body> 8
ID Outro seletor bastante usado é o por ID. Este seletor só pode ser utilizado uma vez dentro de um código HTML. #nome_do_id{ propriedade: valor; REGRA CSS ID <head> <style type= text/css > #tecnologia{ color: #545454; </style> </head> <body> <p id= tecnologia > Parágrafo formatado </p> </body> 9
VINCULANDO FOLHAS CSS As folhas de estilo são vinculadas no documento HTML em três diferentes formas: Estilo inline; Estilo interno; Estilo externo. ESTILO EXTERNO Uma folha é dita externa quando as regras CSS estão declaradas em um documento separado. Uma folha de estilo possui a extensão.css. Uma folha de estilo externa é ideal, pois podem ser reaproveitado em várias páginas. 10
ESTILO EXTERNO Para incluir uma página externa a um documento é usado a tag <link> entre as tags <head> em uma página HTML. <head> <link href= estilo.css rel= stylesheet type= text/css /> </head> ESTILO INTERNO Uma folha é dita interna quando as regras CSS estão declaradas no próprio documento HTML. <head> <style type= text/css > p{ color: #993366; </style> </head> 11
ESTILO INTERNO ESTILO INLINE Uma folha inline é aquela que tem as regras CSS declaradas dentro da alguma tag HTML. <body> <p style= color: #0066cc; font-size: 20px; > Programação em Ambiente Web I </p> </body> 12
PRIORIDADES DAS REGRAS Como as definições de estilos podem ser feitas de três formas diferentes, em determinado momento podem haver conflitos, e neste caso a precedência é: Escrita diretamente na tag (inline) Escrita no cabeçalho da página (interno) Escrita em um arquivo separado (externo) PROPRIEDADES REGRAS CSS 13
FONT font-style font-variant font-weight font-size font-family Efeitos de formatação (normal, itálico...) Aumenta o tamanho da fonte Intensidade da fonte (normal, negrito...) Tamanho da fonte Altera o tipo da face PROPRIEDADE FONT <head> <style type= text/css > div { font-style: italic; font-variant: small-caps; font-family: Arial; font-size: 11px; div{ font: italic small-caps 11px Arial; </style> </head> 14
TEXT text-decoration text-align text-indent text-transform Altera a formatação do texto. Podem ser usado os seguintes valores: underline (sublinhado), overline (sobrelinha) ou line-through (tachado) Define o alinhamento do texto, os possíveis valores são: center, left, right ou justify. Define o tamanho do recuo da primeira linha. Os valores podem ser passados em pontos ou pixels. Altera as letras, com os valores: capitalize (letras iniciais em maiúsculas), uppercase (todas letras em maiúsculas) e lowercase (todas em minúsculas). OUTRAS PROPRIEDADES letter-spacing line-heigth color background Define o espaçamento entre os caracteres. Os valores devem ser passados em pixels. Espaçamento entre as linhas. Os valores devem ser passados em pontos ou pixels. Define a cor do texto. Define a cor de fundo. Os valores podem ser passados através do nome da cor (inglês) ou do código RGB. 15
BACKGROUND color backgroundimage: url ( ) backgroundattachment backgroundrepeat backgorundposition Altera a cor do texto Insere uma imagem para ser utilizada como plano de fundo Define se a imagem ficará fixa (fixed) ou se acompanhará a barra de rolagem (scroll) Define como a imagem será repetida na tela, com os valores: no-repeat, repear, repeat-x e repeat-y. Posição inicial da imagem na área de apresentação, com os valores: left, top, bottom e center. PROPRIEDADE BACKGROUND <head> <style type= text/css > div { background-color: #ffc; background-image: url(fundo.gif); background-repeat: no-repeat; background-position: 20px 10px; div{ background: #ffc url(fundo.gif) no-repeat 20px 10px; </style> </head> 16
COMENTÁRIOS Comentários em CSS são descritos através dos códigos /* no inicio e */ ao final. p:first-line{ text-align: center; /* Texto centralizado */ color: black; font-family: Arial; BOX MODEL Uma regra CSS considera e tratam todos os elementos HTML como se fossem caixas. Nessas caixas algumas propriedades podem ser alteradas: Largura e altura; Bordas; Margens e espaçamentos. 17
BOX 18
MARGIN margin-top margin-right margin-left margin-bottom Define o tamanho da margem superior Define o tamanho da margem direita Define o tamanho da margem esquerda Define o tamanho da margem inferior Os valores podem ser utilizados de forma relativa ou absoluto. PROPRIEDADE MARGIN <head> <style type= text/css >.box{ margin-top: 20px; margin-right: 30mm; margin-bottom: 5pt; margin-left: 20px; </style> </head> 19
ABREVIANDO MARGIN <head> <style type= text/css >.box{ margin-top: 20px; margin-right: 5px; margin-bottom: 10 px; margin-left: 25px;.box{ margin: 20px 5px 10px 25px; </style> </head> PADDING padding-top padding-right padding-left padding-bottom Define o tamanho do espaçamento superior Define o tamanho do espaçamento à direita Define o tamanho do espaçamento à esquerda Define o tamanho do espaçamento inferior. Os valores podem ser utilizados de forma relativa ou absoluto. 20
PROPRIEDADE PADDING <head> <style type= text/css >.box{ padding-top: 20px; padding-right: 30mm; padding-bottom: 5pt; padding-left: 20px; </style> </head> ABREVIANDO PADDING <head> <style type= text/css >.box{ padding-top: 12px; padding-right: 2px; padding-bottom: 6px; padding-left: 1px;.box{ paddin: 12px 2px 6px 1px; </style> </head> 21
BORDER border-width border-style border-color Define a espessura da borda, com os valores: thin (borda fina), médium (borda média), thick (Borda grossa) e length (medida absoluta). Define o estilo da borda, com os valores: dotted, dashed, solid, double, groove, ridge, inset e ouset. Define a cor da borda PROPRIEDADE BORDER <head> <style type= text/css > p { border-syle: solid; border-bottom-style: dashed; border-color: #ff00bb; border-top-color: #00ff33; border-bottom-width: 10px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; </style> </head> 22
ABREVIANDO BORDER <head> <style type= text/css > div { border-width: 1px; border-style: solid; border-color: #f00; div { border: 1px solid #f00; </style> </head> ABREVIANDO BORDER <head> <style type= text/css > div { border-top-width: 2px; border-right-width: 1px; border-left-width: 3px; border-bottom-width: 5px; div { border-width: 2px 1px 3px 5px; </style> </head> 23
ABREVIANDO BORDER <head> <style type= text/css > div { border-top-color: #f00; border-right-color: #ccc; border-left-color: #0ff; border-bottom-color: #999; div { border-color: #f00 #ccc #0ff #999; </style> </head> ABREVIANDO BORDER <head> <style type= text/css > div { border-top-style: solid; border-right-style: ridge; border-left-style: double; border-bottom-style:dotted; div { border-style: solid ridge double dotted; </style> </head> 24
EFEITOS COM BORDAS EFEITOS COM BORDAS 25
EFEITOS COM BORDAS EFEITOS COM BORDAS 26
EFEITOS COM BORDAS BORDAS ARREDONDADAS <head> <style type= text/css > #bordas { width: 400px; height: 150px; background-color: #09f; border-radius: 10px; </style> </head> 27
EXERCÍCIOS 01 Crie uma regra CSS para formatação de parágrafo com as seguintes configurações: Cor da fonte: branca Tipo da face: Arial Cor de fundo: verde Borda superior com 2 px na cor azul e dashed Borda esquerda com 2 px, na cor amarela e dotted Borda inferior com 2 px, na cor vermelha e double Sem borda direita EXERCÍCIOS 02 Utilizando tabelas e regras CSS, crie um menu para uma página HTML, como o menu apresentado ao lado. 28
EXERCÍCIOS 03 Utilizando tabelas e regras CSS, crie a tabela abaixo: EXERCÍCIOS 04- Crie a seguinte página HTML: 29
CORES PSEUDOELEMENTO FIRST-LETTER Aplica a formatação do recurso de capitalizar um parágrafo, sua sintaxe é: p:first-letter{ font-size: 300%; 30
PSEUDOELEMENTO FIRST-LINE Apenas a primeira linha de um parágrafo ficar com letras maiúsculas, sua sintaxe é: p:first-line{ font-variant: small-caps; color: #0000ff; ESTILIZANDO LINKS São personalizados para que links visitados fiquem de cor vermelho e não visitado de cor azul. a:link{ color: blue; a:visited{ color: red; 31
ESTILIZANDO LINKS São personalizados para que links ativos fiquem com a cor de fundo azul e quando o cursor apenas fica sob o link, para que fique de cor laranja. a:active{ background-color: blue; a:hover{ color: orange; LAYOUT HTML + CSS 32
AGRUPANDO ELEMENTOS A tag <div> permite que sejam agrupados elementos a parte de ID CSS. Vejamos: <div id= formatação > <ul> <li> Franklin Roosevelt </li> <li> Lydon Johnson </li> <li> Bill Clinton </li> </ul> </div> IMAGENS FLUTUADAS EM BOX Quando uma imagem é inserida, uma box é feita automaticamente, assim usando o atributo float controlamos o posicionamento. 33
IMAGENS FLUTUADAS EM BOX <div id= picture > <img src= bill.jpeg /> </div> CSS: #picture{ float: left; width: 100px; DIVIDINDO TEXTOS COLUNAS #coluna1{ float: left; width: 33%; #coluna2{ float: center; width: 33%; #coluna3{ float: right; width: 33%; 34
PROPRIEDADE DISPLAY Esta propriedade afeta a maneira como tal elemento será posicionado. block inline inline-block Fará com que o elemento posicionado logo abaixo e terá a largura definida pelo atributo width. Os outros elementos serão posicionados um lado ao lado do outro, na ordem que forem criados no documento HTML. Fará com que outros elementos ao seu redor sejam posicionados um do lado do outro. Esse valor faz com que existam elementos inline e block. PROPRIEDADE POSITION Esta propriedade determina qual é o modo do posicionamento de um elemento em uma página. static relative absolute fixed Permanece sempre em seu local original, não aceitando valores. É possível passar coordenadas para o posicionamento de elementos, fazendo com os que os mesmos se encaixem. O elemento toma como referência algum elemento pai na estrutura obedecendo o valor das coordenadas. O elemento permanece fixo quanto o posicionamento vertical (left ou right) e horizontal (top ou bottom). 35
PROPRIEDADE POSITION img{ position: absolute; top: 100px; left: 100px; PROPRIEDADE POSITION pos1 { position: relative; top: 100px; left: 0px; pos2{ position: relative; top: 100px; left: 0px; 36
POSICIONANDO ELEMENTOS O princípio de posicionamento no CSS é baseado no sistema de coordenadas. h1{ position:absolute; top: 100px; left: 200px; UTILIZANDO Z-INDEX O CSS permite trabalhar com layers para montagem de uma página Web. Sendo assim: Elementos com número de índice maior se sobrepõem em relação aqueles com números menores. 37
UTILIZANDO Z-INDEX #ten{ position: absolute; left: 100px; top: 100px; z-index: 1; #jack{ position: absolute; left: 115px; top: 115px; z-index:2; OUTRO EXEMPLO Z-INDEX 38
OUTRO EXEMPLO Z-INDEX VALIDADOR CSS Para saber sobre eventuais erros em folhas CSS, a W3c criou uma página que retorna um relatório sobre a análise de uma página. Link da ferramenta http://jigsaw.w3.org/css-validator 39
EXERCÍCIOS 01 Com base neste do topo adaptado do site Globo.com, você deverá criar um código HTML para que este seja apresentado no navegador de forma semelhante a imagem a seguir. EXERCÍCIOS 02 O site da Globo utiliza um efeito hover para adicionar uma borda a uma imagem e sublinhar o texto relativo a um link que irá direcionar a uma outra página. Construa uma regra CSS para o efeito. 40
EXERCÍCIOS 03 Utilizando os recursos HTML e CSS, crie a página HTML apresentada abaixo. EXERCÍCIOS 04 Utilizando os recursos HTML e CSS, crie a página mostrada ao lado. 41
EXERCÍCIOS 42