Dream 06

DESENVOLVIMENTO DE SITES

Turma:

Professor:

Aula: Pág: Data:

Anderson

9279

06 26/09/201340-48

@CSS

@Criar um layout (css) tableless

@Atividades

@O estilo CSS permite que você retire da marcação HTML toda a formatação (apresentação) do documento WEB. Quem vai determinar cores, formas, tipos e tamanhos, posicionamento e em fim todo o “visual” da página são as CSS.

@controle total sobre a apresentação do site a partir de um arquivo central;

@ agilização da manutenção de design do site;

@ saída para diferentes tipos de mídia a partir de uma versão única de HTML;

@ redução do tempo de carga dos documentos Web;

@ elaboração de documentos consistentes com as aplicações de usuários futuras;

@ aumento considerável na portabilidade dos documentos Web.

@ Declaração CSS é o fragmento de uma regra CSS dentro dos colchetes { }. A declaração CSS compõe-se de duas partes: a propriedade e o valor. Uma regra CSS pode conter várias declarações separadas por um ponto-e-vírgula.

@As propriedades abaixo mostram as variações para as fontes:

@• color:...................cor da fonte

@• font-family:..........tipo de fonte

@• font-size:.............tamanho de fonte

@• font-style:............estilo de fonte

@• font-variant:.........fontes maiúsculas de menor altura

@• font-weight:.........quanto mais escura a fonte é (negrito)

@• font:....................maneira abreviada para todas as propriedades

@ <html> @ <head> @ <style type=”text/css”> @  @ </style> @ </head> @ <body> @ <h1>Cabeçalho com letras vermelhas</h1> @ <h2>Cabeçalho com letras verdes</h2> @ <p>Parágrafo com letras azuis</p> @ </body> @ </html>

@ <html> @ <head> @ <style type=”text/css”> @  @ </style> @ </head> @ <body> @ <h2>Família por nome: arial, helvetica, serif;</h2> @ <p>Família genérica: sans-serif;<p> @ </body> @ </html>

@ <html> @ <head> @ <style type=”text/css”> @  @ </style> @ </head> @ <body> @ <p>Parágrafo em declaração única</p> @ </body> @ </html>

@ <html> @ <head> @ <style type=”text/css”> @  @ </style> @ </head> @ <body> @ <p>Um espaçamento superior de 20px, @ um espaçamento direito de 40px, @ um espaçamento inferior de 80px @ e um espaçamento esquerdo de 5px</p> @ </body> @ </html>

@ <html> @ <head> @ <style type=”text/css”> @  @ </style> @ </head> @ <body> @ <p>Uma margem superior de 20px, uma margem direita de 40px, @ uma margem inferior de 80px e uma margem esquerda de 5px</p> @ </body> @ </html>

@USANDO DIVS

@Em HTML a tag <div> define um elemento do tipo bloco. Um elemento bloco - ou container -é como se fosse uma caixinha, com textos grandes e imagens. Ele se difere do elemento do tipo linha - ou inline - que é o caso da tag<span>.

@Eu quero inserir uma notícia no meu site. Quero que essa notícia tenha um título e abaixo do título uma imagem junto com o texto da notícia, eu poderia fazer assim: .

@<div id=“notícia”> @<span class=“titulo”>Notícia de hoje</span> @<div class=“texto”> @Texto da notícia com imagem @</div> @</div>

@Também podemos reparar que foram usadas duas “coisas” chamadas id e class.

@A tag <div>, em geral, não tem nenhum significado em HTML, é apenas um elemento do tipo bloco e só. Se for adicionado uma classou id a ela, poderá estilizar a sua <div> através do CSS com base no nome que você deu à classou id dessa <div>.

@ #noticia{ @ width: 400px; @ font-family: arial, sans-serif; @ }@ .titulo{ @ font-size: 24px; @ color: #FF0000; @ font-weight: bold; @ }@ .texto{ @ color: #CCCCCC; @ font-size: 11px; @ }

@O box model (modelo das caixas), em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha, ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento.

@Um elemento pode ser ‘flutuado’ à esquerda ou à direita com uso da propriedade float. Isto significa que o box e seu conteúdo são deslocados para a direita ou para a esquerda do documento (ou do bloco container).

@ Se desejamos que um texto seja posicionado em volta de uma figura, basta flutuarmos a imagem.

@Floats podem ser usados para construir colunas em um documento. Para criar as colunas estruturamos as colunas no código HTML usando <div> como mostrado a seguir:

@<div id=”column1”> @<p>Haec disserens qua de re agatur@et in quo causa consistat non videt...</p> @</div> @<div id=”column2”> @<p>causas naturales et antecedentes, @idciro etiam nostrarum voluntatum...</p> @</div> @<div id=”column3”> @<p>nam nihil esset in nostra @potestate si res ita se haberet...</p> @</div>

@A seguir, definimos a largura de cada coluna. Por exemplo 33% e declaramos float: left; para cada uma das colunas:

@#column1 { @float:left; @width: 33%; @} @#column2 { @float:left; @width: 33%; @} @#column3 { @float:left; @width: 33%; @}

@A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento.

@A propriedade clear pode assumir os valores left, right, both ou none.

@A regra geral é: se clear, for por exemplo definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.

No Site do Cedaspy, entrar com login e senha:Alterar a turma: 9279 Código Acesso: 123

Acessar o Provão Alunos – Setembro 2013,Marcar os módulos que já foram realizados no

máximo 02.Senha Provão: provaalunos

Atividade prática DreamweaverElaborar uma página com 02 boxes utilizando texto,

imagem no CSSBoas Atividades

Documents

Dream 06