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>
@ </head>
@ <body>
@ <h2>Família por nome: arial, helvetica, serif;</h2>
@ <p>Família genérica: sans-serif;<p>
@ </body>
@ </html>

@ <html>
@ <head>
@ 
@ </style>
@ </head>
@ <body>
@ <p>Parágrafo em declaração única</p>
@ </body>
@ </html>

@ <html>
@ <head>
@ 
@ </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>
@ </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 class
ou id a ela, poderá estilizar a sua <div> através
do CSS com base no nome que você deu à class
ou 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>
@<p>causas naturales et antecedentes,
@idciro etiam nostrarum voluntatum...</p>
@</div>
@<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 Dreamweaver
Elaborar uma página com 02 boxes utilizando texto,
imagem no CSS
Boas Atividades

Dream 06

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Dream 06

Mais de Anderson Maciel

Dream 06