html com css
DESCRIPTION
Aula de Ferramentas para criação de Web SitesTRANSCRIPT
HTML COM CSS
Nadijar Casarin
HTML e CSS
• HTML – Utilizado para estruturar paginas web;
• CSS – Utilizado para estilizar paginas web;
• Um depende o outro.
O que é CSS?
• CSS significa C cascading S style S sheets ou (Folhas de Estilo em Cascata)
• Os estilos definem como exibir elementos HTML
• Estilos foram adicionados ao HTML 4.0 para resolver um problema
• Folhas de estilo externas pode salvar um monte de trabalho
• Folhas de estilo externas são armazenados em arquivos CSS
Resolvendo um grande problema
• HTML nunca foi destinado a conter tags para a formatação de um documento.
• HTML se destina a definir o teor de um documento, tal como:
– <h1> Este é um título </ h1>
– <p> Este é um parágrafo. </ p>
• Quando tags como <font> e atributos de cor foram adicionados à especificação HTML 3.2, começou um pesadelo para os desenvolvedores web.
• Desenvolvimento de web sites de grande porte, onde as fontes e informações de cores foram adicionadas para cada página, tornou-se um processo longo e caro.
• Para resolver este problema, o World Wide Web Consortium (W3C), criou CSS.
• Em HTML 4.0, toda a formatação pode ser removido do documento HTML, e armazenado em um arquivo CSS separado.
• Todos os browsers suportam CSS hoje.
Resolvendo um grande problema
CSS poupa muito trabalho!
• CSS define como elementos HTML devem ser exibidos.
• Estilos são normalmente guardados em arquivos externos.
• Css. Folhas de estilo externas permitem que você altere a aparência e o layout de todas as páginas de um site, apenas editando um único arquivo!
Sintaxe CSS • Uma regra CSS tem duas partes principais: um seletor, e
uma ou mais declarações:
• O seletor é normalmente o elemento HTML que você deseja estilizar.
• Cada declaração consiste de uma propriedade e um valor.
• A propriedade é o atributo de estilo que você deseja alterar.
• Cada propriedade tem um valor.
Exemplo CSS
• A declaração CSS sempre termina com um ponto e vírgula, e os grupos de declaração são cercados por chaves: – p {color:red;text-align:center;}
• Para tornar a CSS mais legível, você pode colocar uma declaração em cada linha, como esta: – P
{ color:red; text-align:center; }
Sintaxe – Exemplo 01 <html> <head> <style> body {background-color:yellow;} h1 {font-size:36pt;}/*pode ser 36px*/ h2 {color:blue;} p {margin-left:50px;} </style> </head> <body> <h1>Este cabeçalho tem a fonte com tamanho 36 pontos</h1> <h2>Este cabeçalho é azul</h2> <p>Este parágrafo tem uma margem esquerda de 50 pixels</p> </body> </html>
Exemplo 01
<html> <head> <style> body {background-color:tan;} h1 {color:maroon;font-size:20pt;} hr {color:navy;} p {font-size:11pt;margin-left:15px;} a:link {color:green;} a:visited {color:yellow;} /*Só funiona em fontes*/ a:hover {color:black;} a:active {color:blue;} </style> </head>
<body>
<h1>Este é um cabeçalho 1</h1> <hr>
<p>Você pode ver que o estilo formatos de folha do texto</p>
<p><a href="http://www.w3schools.com" target="_blank">This is a link</a></p>
</body> </html>
Sintaxe – Exemplo 02
Exemplo 02
Comentários CSS
• Comentários são usados para explicar seu código, e pode ajudá-lo quando você editar o código-fonte em uma data posterior. Os comentários são ignorados pelos navegadores.
• Um comentário CSS começa com "/ *", e termina com "* /", como este:
/*Este é um comentário*/ p { text-align:center; /*Este é outro comentário*/ color:black; font-family:arial; }
Os Seletores id e classe
• Além de definir um estilo para um elemento HTML, CSS permite que você especifique seus próprios selecionadores chamados "id" e "classe".
O seletor ID • O seletor id é usado para especificar um estilo
para um elemento único e exclusivo.
• O seletor id usa o atributo id do elemento HTML, e é definido com um "#".
• A regra de estilo abaixo será aplicada ao elemento com id = "para1":
• HTML – <div id="para1"></div>
• Css – #para1{text-align:center; color:red;}
Obs.: Você NÃO iniciar um nome de ID com um número! Não vai funcionar no Mozilla / Firefox.
O seletor de classe
• O seletor de classe é usado para especificar um estilo para um grupo de elementos. Ao contrário do seletor id, o seletor classe é mais utilizado mais frequentemente.
• Isso permite que você defina um estilo particular de muitos elementos HTML com a mesma classe.
• O seletor de classe usa o atributo de classe HTML, e é definido com um "."
• No exemplo abaixo, todos os elementos HTML com class = "center" será alinhado ao centro:
.center {text-align:center;}
• Você também pode especificar que somente determinados elementos HTML devem ser afetados por uma classe.
• No exemplo abaixo, todos os elementos p com class = "center" será alinhado ao centro:
p.center {text-align:center;}
O seletor de classe
Obs.: Você NÃO iniciar um nome de classe com um número! Isso só é suportado pelo Internet Explorer.
Vincular CSS ao HTML
• Quando um navegador lê uma folha de estilo, ele irá formatar o documento de acordo com ele.
Exemplo com estilo
Exemplo com estilo
Maneiras de inserir CSS
• Há três maneiras de inserir uma folha de estilo:
– Folha de estilo externa
– Folha de estilo interna
– Estilo inline
Folha de Estilo Externa
• Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas páginas.
• Com uma folha de estilo externa, você pode mudar o visual de um site inteiro mudando um arquivo.
• Cada página tem link para a folha de estilo usando a tag <link>.
• A tag <link> vai dentro da seção head:
• Exemplo: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
• Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter qualquer tag html.
• Sua folha de estilo deve ser salvo com a extensão .css • Um exemplo de um arquivo de folha de estilo é mostrado
abaixo: hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}
Folha de Estilo Externa
Folha de Estilo Interna
• Uma folha de estilo interna deve ser usada quando o documento tem um estilo único.
• Você define estilos internos na seção head de uma página HTML, usando a tag <style>, como esta: <head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Estilos inline
• Um estilo Inline perde muitas das vantagens de folhas de estilo, misturando conteúdo com apresentação. Utilize este método com moderação!
• Para usar estilos Inline você usa o atributo de estilo na marca relevante.
• O atributo de estilo pode conter qualquer propriedade CSS.
• O exemplo mostra como alterar a cor ea margem esquerda de um parágrafo:
<p style="color:sienna;margin-left:20px">Este é um parágrafo.</p>
Vários Style Sheets
• Se algumas propriedades foram definidas para o mesmo seletor em diferentes folhas de estilo, os valores serão herdados pela folha de estilo mais específico.
• Por exemplo, uma folha de estilo externa tem estas propriedades para o seletor h3:
h3{color:red; text-align:left; font-size:8pt; }
• E uma folha de estilo interna tem estas propriedades para o seletor h3:
<head>
<style>
h3{text-align:right; font-size:20pt;}
</style>
</head>
Vários Style Sheets
• Se a página com a folha de estilo interna também possui links para a folha de estilo externa as propriedades para h3 serão:
<h3 style="color:red; text-align:right; font-size:20pt;">Este é um h3.</h3>
• A cor é herdada da folha de estilo externa e o alinhamento de texto e o tamanho da fonte é substituída pela folha de estilo interno.
Vários Style Sheets
Vários estilos em cascata em Um
• Os estilos podem ser especificados:
• dentro de um elemento HTML
• dentro da seção head de uma página HTML
• em um arquivo CSS externo
• Dica: Mesmo múltiplas folhas de estilo externas podem ser referenciadas dentro de um único documento HTML.
Ordem em cascata
• O estilo será usado quando há mais de um estilo especificado para um elemento HTML?
• De modo geral, podemos dizer que todos os estilos "em cascata" em uma nova folha de estilo "virtual", pelas regras a seguir, o número quatro tem a mais alta prioridade:
1. Padrão do navegador 2. Folha de estilo externa 3. Folha de estilo interna (na seção de cabeçalhoB) 4. Estilo inline (dentro de um elemento HTML)
• Então, um estilo inline (dentro de um elemento HTML) tem a prioridade mais alta, o que significa que ele irá substituir um estilo definido dentro da tag <head>, ou em uma folha de estilo externa
Nota: Se o link para a folha de estilo externa é colocada após a folha de estilo interna em HTML <head>, a folha de estilo externa irá substituir a folha de estilo interna! Sempre será executada na ordem de colocação.