HTML e CSS

Programação para Internet Profª Vera Etec Jacinto Ferreira de Sá

1

HTML

No início o HTML era utilizado para construir páginas apenas para exibir informações. Com a evolução da Internet (imagem, audio, video, aplicativos...) a simples linguagem de marcação destinada a apresentar conteúdos carecia de uma maior flexibilidade no sentido de manipular visualmente os conteúdos.
2

HTML – História

Novas tags e atributos foram inventados, tais como a tag font e o atributo color que permitiam alterar a aparência de textos. Assim nasceu a estilização dos conteúdos. Novas tags e novos atributos de estilo foram introduzidos no HTML. A linguagem de marcação passou a exercer uma dupla função: estruturar o conteúdo através da marcação e apresentá-lo, ou seja, dar a aparência final.

3

HTML . Imagine o site de uma empresa com 180 páginas.Problemas    Documentos cada vez mais sofisticados e extensos. fugindo ao controle de seus criadores. Se você precisasse alterar a cor dos títulos de todas as páginas? <h1><font color="#00FF00">Título</font></h1> 4 .

.  Supondo uma média de 3 títulos por página. E se o seu cliente tivesse pedido para mudar a cor dos textos. e do fundo? Este exemplo simples dá uma dimensão de um dos problemas criados com a mistura de marcação com apresentação .estilização! 5   . você tem um total de 540 tags font para editar e mudar o atributo color.Fazendo contas..

6 .Solução  Dissociar linguagem de marcação da estilização. Surge a CSS Cascade Style Sheet ou Folha de Estilo em Cascata.

Algumas explicações...

Elemento HTML Elemento = tag de abertura + conteúdo + tag de fechamento <p>Este é um parágrafo</p>

Existem elementos de bloco e elementos em linha. QUAL A DIFERENÇA?

7

Elementos de bloco e em linha

Os elementos de bloco são exibidos como se tivessem uma quebra de linha antes e depois deles e ocupam toda a largura disponível. Os elementos em linha aparecem "em linha" dentro do fluxo de texto de sua página, ocupando somente a largura necessária ao conteúdo.
8

Estrutura do documento HTML

<B>texto</B>

9

10 .  Os elementos de bloco são utilizados como marcação de grandes blocos de conteúdo de uma página..Em outras palavras.. enquanto que os elementos em linha marcam pequeno pedaços de conteúdo..  Pra quê saber isso??? CSS..

entre eles:     o tipo de folha de estilo.O efeito cascata   o estabelecimento de uma prioridade para aplicação da regra de estilo ao elemento. o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo. o local físico da folha de estilo no seu todo. 11 . Para determinar a prioridade são considerados diversos fatores.

estilo inline (dentro de um elemento HTML). folha de estilo do usuário. declarações do usuário com !important.   declarações do desenvolvedor com !important. folha de estilo do desenvolvedor.    estilo externo (importado ou linkado).A prioridade para o efeito cascata em ordem crescente:    folha de estilo padrão do navegador do usuário. estilo incorporado (definido na seção head do documento). 12 .

CSS Cascade Style Sheets 13 .

CSS   São folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens:  Grande liberdade de formatação  Maior produtividade  Maior facilidade de atualização 14 .

um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os elementos do HTML. exclusivamente para marcar e estruturar o conteúdo do documento.Princípios   Utilizar os elementos (tags) HTML. 15 . A tarefa de estilização ficará a cargo das CSS que pode ser. inclusive. ou seja estilizar o conteúdo. Nenhum elemento HTML será usado para alterar a apresentação.

Sintaxe  A sintaxe CSS é constituida de três partes:    um seletor (selector) um propriedade (property) um valor (value) seletor { propriedade: valor.CSS . } 16 .

cor azul. é o elemento HTML identificado por sua tag.)....Sintaxe    Seletor: genericamente. <h1>. etc. ou etc.minhaclasse.. color. background.. Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial.. ou por uma ID.).. etc. etc. <form>. Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font. ou por uma classe. .) 17 . fundo verde. e para o qual a regra será válida (por exemplo: <p>.

Quando mais de uma propriedade for definida na regra. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma. 18 .Sintaxe    Escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. deve-se usar ponto-evírgula para separá-las.

deverá estar entre aspas duplas " ". /* (.) opcional */}  Seletor é o "documento todo" (body).Exemplos body {background: #FFFFFF. ou simples ': h3 { font-family: "Comic Sans MS" } 19  . Se o valor for uma palavra composta. a propriedade é o fundo do documento e o valor é a cor branca.

Sintaxe  Para maior legibilidade das folhas de estilo. é de boa prática usar linhas distintas para escrever cada uma das declarações — propriedade e seu valor: p{ text-align: right. color: #FF0000. } 20 .

h6 { color: green } 21 .CSS .h2.h4.Agrupamento  Os elementos podem ser agrupados: h1.h5.h3.

h3 { color: green } 22 . Color: black. Font-family:arial } h1. propriedade:valor} seletor { propriedade:valor. propriedade:valor.Sintaxes Sintaxe seletor { propriedade:valor} seletor { propriedade:valor.seletor { propriedade:valor } Exemplo body { background-color: #FFFFFF } p { text-align:center. color:red} p { text-align: center.h2.seletor. Propriedade:valor } seletor.

e termina com "*/" /* Este é um comentário */ p { text-align: center.Comentários em CSS  comentário em CSS começa com "/*". /* Este é outro comentário */ color: black. font-family: arial } 23 .

Por meio de uma inserção de um style sheet numa única página web.Implementação Os estilos podem ser inseridos nos documentos de três maneiras diferentes:  Externas –Por meio de um link direcionado para um arquivo de style sheet em separado. Também chamadas incorporadas. funcionando para uma ou mais páginas web. Em linha (ou inline) . Também chamadas importadas ou lincadas.Pelo acréscimo de atributos de estilo inline em algumas tags   24 . Internas .

Pode-se mudar a aparência de um site inteiro alterando apenas um arquivo (o arquivo da folha de estilo).css É ideal para ser aplicada a várias páginas. Não deve conter qualquer tag html 25 . A folha de estilo é um arquivo separado do arquivo html e que tem a extensão .Folha de estilo externa     É quando as regras CSS estão declaradas em um documento à parte do documento HTML.

<head> <link rel="stylesheet" type="text/css" href="meuestilo. dentro da tag <head> .Como Inserir um CSS externo  O arquivo css da folha de estilo externa deverá ser lincado ou importado ao documento HTML.css" /> </head> 26 .

</head> 27 . <style type="text/css"> @import url("estilo... </style> ..Externo com import  Sintaxe geral para importar folha de estilo chamada estilo....css").....css: <head> .

CSS Interno  deve ser usada quando um único documento tem um estilo particular define-se estilos internos na seção head usando a tag <style>  28 .

é ideal para ser aplicada a uma única página. Uma folha de estilo incorporada ou interna. válidas para o documento. são declaradas na seção <head> do documento com a tag de estilo <style> 29 .Folha de estilo interna    quando as regras CSS estão declaradas no próprio documento HTML. As regras de estilo.

30 .Exemplo ….CSS Interno .gif")} </style> </head> …. <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.

Um estilo inline só se aplica a um elemento HTML. margin-left: 20px"> Este é um parágrafo </p> . Perde muitas das vantagens das folhas de estilo pela mistura de conteúdo usar quando há uma única ocorrência de um elemento 31 <p style="color: sienna.Folha de Estilo Inline     Quando as regras CSS estão declaradas dentro da tag do elemento HTML.

CSS inline .Exemplo <HTML> <HEAD> </HEAD> <BODY style="background-color: yellow"> <h1 style="font-size:36pt. color=red">Este cabeçalho tem 36 pt e agora é vermelho</h1> <h2 style="color: blue">Este cabeçalho é azul</h2> <p style="margin-left: 50px">A margem deste parágrafo é de 50 pixels</p> <a style="color:green" href=“www. verde</a> </BODY> </HTML> 32 .microsoft.com”>E este é um link.

Exercício 1  Criar uma pagina HTML com:     Corpo .fundo amarelo Título 1.fundo verde Sub título . texto branco 33 .transparente 1 parágrafo – fundo preto.

Resultado <html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: black. color:white} </style> </head> <body> <h1>Este é o título 1</h1> <h2>Este é sub título</h2> <p>Este é um parágrafo</p> </body> </html> 34 .

css 35 .Exercício 2  Separar a folha de estilos do exercício anterior para um arquivo com o nome aula.

.. </BODY> </HTML> Arquivo aula..css"> </HEAD> <BODY> .. corpo do documento.Resultado <HTML> <HEAD> <TITLE>Aula teste</TITLE> <LINK rel="stylesheet" type="text/css" href=“aula.css body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: black. color:white} 36 .

center {text-align: center} <p class="right"> Este parágrafo será alinhado à direita.}  Exemplo: p.nomeclasse { propriedade: valor. </p> 37 .O Seletor class (classe)  Pode-se definir diferentes estilos para o mesmo tipo de elemento HTML. </p> <p class="center"> Este parágrafo será centralizado.right {text-align: right} p. Sintaxe: elemento.

Tipos de Classes  A classe pode ser :  associada a um tipo de elemento: p.p1 { color: red } <p class=p1>texto em vermelho</p>  genérica: .rd{ color:blue} <p class=rd>texto em azul</p> <h1 class=rd>texto tambem em azul</h1> 38 .

Seletores de ID   Um selector de ID permite identificar uma única ocorrência de um elemento HTML. Os selectores ID são criados pelo carácter # seguido do nome. background: black } <p id=nome>Só este elemento é que é identificado como nome</p> 39 . #nome { color:blue.

texto</p> <p> texto. texto. texto. texto</p> </div> <div class="zonacentral"> <h1>Título</h1> <p> texto. texto</p> </div> 40 . texto. texto</span>. mas permitem definir seções/blocos e são muito usados com CSS. texto. <span class="nota">texto.DIV e SPAN Existem dois elementos genéricos que não têm significado semântico nem produzem nenhum efeito. Permitem agrupar conteúdo em unidades lógicas: <div>: quebra o fluxo normal do documento <span>:mantém o fluxo normal do conteúdo <div class="zonaesquerda"> <p>texto. texto. texto. texto.

texto.Zonaesquerda { color: green } . texto 41 . texto.nota { color: red } Resultado: texto.DIV e SPAN Css . texto. texto Título texto. texto. texto. texto. texto texto texto. texto. texto.zonacentral { color: blue} .

Unidades de medida Unidade % em Descrição Percentagem de qualquer unidade 1 em é igual ao tamanho da fonte do elemento corrente ex px 1 ex é aproximadamente metade da altura da fonte pixels Unidade cm in mm pt Centímetros Polegadas Milímetros Ponto (1 pt é 1/72 polegadas ) Descrição 42 .

z) #rrggbb Um valor rgb Um número hexadecimal rgb(255.0%.0) rgb(100%.y.z%) Uma percentagem rgb 43 .0%) #ff0000 rgb(x%.0.y%.Unidades de cor Unidade Nome da cor Descrição O nome da cor Exemplo do vermelho red rgb(x.

Sansserif } font-family (herdado) text-decoration (não herdado) none underline overline line-through normal bold bolder lighter normal italic {font-decoration: overline} font-weight (herdado) Ajusta o peso do tipo { font-weight: bold } font-style (herdado) Texto em itálico {font-style: italic} 44 . in. px) percentagem nome do tipo de letranome da família da fonte Exemplo { font-size: 12pt } { font-size: 200% } { font-family: Trebuchet MS. cm.Texto Propriedade font-size (herdado) Descrição Ajusta o tamanho do texto Ajusta os tipos de letra e as alternativas (em ordem de preferência) Efeitos sobre o texto Valores tamanho (pt.

cm. cm. px) percentagem baseline sub super top text-top middle bottom { text-indent: 0. in.Texto Propriedade text-align (herdado) Descrição Alinhamento do texto Valores left Center right justify Exemplo { text-align: center } text-indent (herdado) indentação da primeira linha do texto Altura das linhas de um bloco de texto. tamanho (pt.5in } line-height (herdado) {line-height: 18p t} { line-height: 200% } { vertical-align: top } vertical-align (não herdado) Alinha o texto verticalmente dentro do elemento 45 . px) tamanho (pt. in.

in. cm.5in } 46 . cm. px) {padding-top: 0.Padding (espaçamento) Propriedade padding (herdado) Descrição Espaço entre a borda do elemento e o conteudo do elemento Em relação a cada um dos lados Valores tamanho (pt. in. px) Exemplo { padding: 20px } padding-top padding -left padding -bottom padding -right (herdado) tamanho (pt.

Cor e background Propriedade color (herdado) background-color (não herdado) Descrição Cor do texto Cor de fundo de um elemento Valores Unidades da cor Unidades da cor Exemplo { color: red } { background-color: black} Background-image (não herdado) Ajusta as imagens do fundo url {background-image: url(‘imagem1.jpg’)} 47 .

px) Exemplo { margin: 8px } { margin-top: 12pt } 48 . cm. px) tamanho (pt.Margens Propriedade margin (não herdado) margin-top margin-left margin-bottom margin-right (não herdado) Descrição Permite especificar a margem do elemento Permite especifar cada uma das margens Valores tamanho (pt. in. cm. in.

dotted. dashed. cor: valor da cor. estilo: none. dotted. Exemplo { border: 4px double green. double. solid. cor: valor da cor.Contornos Propriedade border (herdado) Descrição Ajusta o contorno do elemento Valores grossura: em pixels. dashed. grossura: em pixels. double. solid. } 49 . } border-top border-left border-bottom border-right (não herdado) Ajusta cada um dos contornos { border-top: 2px dotted red. estilo: none.

Listas Propriedade list-style-type (herdado) Descrição define a aparência do marcador de cada item de uma lista. } { list-style-type: upper-roman. Valores Não numéricos: disc circle square Numéricos: decimal decimal-leading-zero lower-roman upper-roman Lower-latin upper-latin Exemplo { list-style-type: disc. } 50 .

Posicionamento Com CSS é possível alterar o fluxo normal de uma página e definir o posicionamento de cada elemento 51 .

Posicionamento Todos os elementos têm a propriedade position que estabelece a forma de "cálculo" da posição de um elemento. 4 alternativas: static: o elemento é posicionado segundo o fluxo normal. fixed: o cálculo da posição é igual ao método absoluto. 52 . mas o elemento pai é a "janela de visualização" (viewport). absolute: permite posicionar relativamente ao elemento pai. O valor por defeito. relative: a posição da "caixa" é calculada em relação à posição normal (static).

é usada juntamente com: top: deslocamento do lado superior do elemento. As unidades podem ser: Fixas: pixels (px). percentagem (%) 53 . centímetros (cm).Posicionamento A propriedade position. points (pt). e: width: largura do elemento. height: altura do elemento. Relativas: em. left: deslocamento do lado esquerdo do elemento. bottom: deslocamento do lado inferior do elemento. milímetros (mm). right: delocamento do lado direito do elemento.

</div><br> <div class=parte2c> 3º sub bloco de informação <br> Este bloco também está inserido no 2º bloco. após o bloco anterior. </div> </div> <div class=parte3>3º bloco de informação </div> Div=parte1 Div=parte2 Div=parte2a Div=parte2b Div=parte2c Div=parte3 54 . </div><br> <div class=parte2b> 2º sub bloco de informação <br> Este bloco também está inserido no 2º bloco. após o bloco anterior.Posicionamento Exemplo: <div class=parte1>1º bloco de informação</div> <div class=parte2> 2º bloco de informação <br><br> <div class=parte2a> 1º sub bloco de informação <br> Este bloco está inserido no 2º bloco.

} . color:#ffffff. font-size:12pt. } . font-family:arial.parte2c { background-color:#666666. } . width:400px. font-family:arial. font-family:arial.parte3 { background-color:#cccccc. padding:20px. width:460px. width:460px. font-size:12pt. width:460px. font-family:arial. } .parte2a { background-color:#666666. } . margin-left:30px.parte1 { background-color:#cccccc. font-size:14pt. margin-left:30px. padding:20px. font-family:arial. font-size:14pt.parte2 { background-color:#222222.parte2b { background-color:#999999. width:400px. } 55 . font-size:12pt. width:400px. margin-left:30px. font-family:arial. padding:20px. font-size:14pt.Posicionamento Continuação do exemplo parte CSS: .

Resultado 56 .

Posicionamento Relativo A posição é calculada em relação à localização natural do elemento. } 57 . top: 10px. right: 50px. p{ position: relative.

} . padding:20px. } 58 . margin-left:30px. } . padding:20px. width:460px. } . width:460px. margin-left:30px. font-family:arial. font-family:arial. left:40px.parte2b { background-color:#999999. font-family:arial. font-size:14pt.parte2 { background-color:#222222. font-size:14pt. } .parte3 { background-color:#cccccc. } . width:400px. color:#ffffff. font-size:14pt. font-family:arial. font-size:12pt.parte2c { background-color:#666666. width:400px. padding:20px. top:20px.parte1 { background-color:#cccccc. position:relative.Posicionamento . font-size:12pt. font-family:arial. font-family:arial. width:460px.parte2a { background-color:#666666. width:400px. margin-left:30px. font-size:12pt.

Resultado 59 .

left: 50px. Nota o elemento que usa o absolute tem de estar dentro do elemento que usa o relative Neste caso o pai deste elemento passa a ser o body. left: 50px. p{ position: absolute. por isso o elemento foi lá para cima p{ position: absolute. top: 10px.Posicionamento Absoluto A posição do elemento é calculada em relação ao "pai". } div { position: relative. } 60 . Temos a questão de saber qual é o pai? Exemplo 1: Uso isolado do position absolute Exemplo 2: Uso do position absolute com position relative Neste caso o pai deste elemento passa a ser o elemento que tem a position relative. top: 10px.

} . font-family:arial. font-size:12pt.parte1 { background-color:#cccccc.parte3 { background-color:#cccccc. width:460px. font-family:arial. font-size:14pt. font-size:14pt. font-family:arial. padding:20px.parte2b { background-color:#999999. } 61 . } . padding:20px. padding:20px. margin-left:30px. color:#ffffff. font-size:12pt. } .parte2 { background-color:#222222. font-family:arial. font-family:arial. width:400px. font-size:12pt. position:absolute.parte2c { background-color:#666666. width:460px. width:400px. right:0. width:460px. margin-left:30px. top:0. font-family:arial. } .parte2a { background-color:#666666. font-size:14pt. margin-left:30px. width:400px.Posicionamento . } .

Resultado 62 .

parte3 { background-color:#cccccc. font-size:14pt.parte2b { background-color:#999999. font-size:12pt. width:460px. } . font-family:arial. color:#ffffff. margin-left:30px. width:400px. font-family:arial. width:400px. } . font-size:12pt. } . font-family:arial. top:0. right:0. margin-left:30px. width:460px. font-family:arial. font-family:arial. position:absolute. } . padding:20px.parte2 { background-color:#222222. font-size:12pt. width:460px. font-family:arial. font-size:14pt. padding:20px. font-size:14pt. padding:20px.parte2c { background-color:#666666. margin-left:30px. width:400px.parte2a { background-color:#666666.parte1 { background-color:#cccccc.Posicionamento . } . position:relative. } 63 .

Resultado 64 .

top: 50px.Posicionamento Fixo Igual ao posicionamento absoluto. } 65 . p{ position: fixed. mas relativamente à janela. left: 10px.

Posicionamento Float A propriedade float permite desligar o elemento do fluxo normal e deslocá-lo para a esquerda ou direita da linha. Valores possíveis: none. right. left. img { float: left. O mais interessante é que o restante conteúdo pode fluir paralelamente ao elemento. } 66 .

pt/~pedrogc/tm/css.Referências   Tutorial de CSS. Disponível em: http://maujor.icicom. Disponível em: www.up. Introdução ao Css.php COSTA.ppt 67 .com/tutorial/intrtut. Pedro.

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.