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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (7)

Semelhante a Dream 06

Semelhante a Dream 06 (20)

Mais de Anderson Maciel

Mais de Anderson Maciel (20)

Dream 06