12/03/2008 - 14:39 > 17.355 Visualizações > 43 comentários

CSS+Tableless no Dreamweaver – Parte 2

Olá! Na segunda parte de CSS+Tableless no dreamweaver, vamos aprender regras de agrupamento de seletores, seletores classe e seletores ID. Esta regra é bastante utilizada para incluir uma formatação em mais de um seletor (elemento html, div, id, etc…). Esta vídeo aula é imprescindível para você tem uma maior idéia das características da CSS.

Assista à vídeo aula

Agrupamento de seletores


h1, h2, h3, h4, h5, h6  {

color: #990000;
font-size:12px;
font-family: Arial, "Times New Roman", Times, serif;
}
Qualquer forma de título entre o H1 até o H6 terá a formatação acima.

Seletores classe

elemento HTML.classe


p.classe1 {

color:#FF6600;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}

Nota: Qualquer elemento HTML que esteja com o parágrafo (P) terá a formatação acima.

Leia mais e assista à vídeo aula:


.classe2 {
color:#003366;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
text-align:right;
}

Nota: Qualquer elemento HTML que for determinado por “Classe2″ terá a formatação acima.

EX:


<h1 class="classe2"> Título </h2> ou <p class= "classe2">

Seletor ID


#box1 {
background-color:#CCCC66;
border:#000000;
padding-top: 10px;
}

O conteúdo ficaria assim:



<div id="box1">

Aqui o conteúdo HTML que terá a formatação da "ID box 1"

</div>

Obs: O seletor ID difere do seletor classe por ser único e pode ser aplicado a um único elemento .

Posts relacionados

Felipe Cardozo

É sócio diretor do MX Masters, portal de desenvolvimento especializado em vídeo aulas. Trabalha com ferramentas OpenSource como Wordpress, Magento entre outros, além de ministrar palestras em universidades do Rio de Janeiro.

Outros posts deste autor

Este autor atualmente possui 281 posts

Veja todos os posts de Felipe Cardozo

Comentários / Deixe seu Comentário

43 respostas para 'CSS+Tableless no Dreamweaver – Parte 2'

João Alberto Diz:
8/04/08 às 11:05
Esta video aula não esta disponivel para downloads??
Felipe Cardozo Diz:
8/04/08 às 11:52
Olá João!
Infelizmente alguns vídeos ficaram bastante pesados para mandar pro servidor.

Porém, estamos otimizando algumas vídeo aulas para poder colocar todas para download.

Forte abraço!
André Diz:
12/04/08 às 16:30
estou gostando de aprender CSS em vídeo aulas
parabéns Felipe
Muito obrigado
Alexander Vaconcellos Diz:
2/05/08 às 22:03
Felipe! como faço para usar essa interação do Dw com o CSS? para na hora que for programar as linguagens entrem automaticamente domo no HTML?
Rafael Nery Diz:
21/05/08 às 0:37
Cara vc tirou uma duvida minha sobre padding continue postando essas aulas dia 1 vou adquirir meu DVD um abraço
Rafael Diz:
2/07/08 às 0:47
olá Felipe tudo bom ?eu queria tira uma duvida sobre css, qual codigo eu uso pra usa esse codiogs em css que vc esta esplicando na video aula,abraço..
Felipe Cardozo Diz:
4/07/08 às 1:35
Olá Rafael, tudo bem?
Não entendi ao certo. Você quer saber qual programa pode ser usado?
Rafael Diz:
4/07/08 às 17:25
Desculpa as palavras embaralhadas , srsr
obs:eu coloquei o index na mesma pasta aonde esta o estilo css da mesma forma que vc fez na primeira video aula ,+ ele naum respondem quando eu mudo em css os codigos o html naum vê a mudança , eu consegui fazer + agora voltou o mesmo ploblema , eu queria fazer sem pensa que foi por acaso que aconteceu .Abraço
Felipe Cardozo Diz:
4/07/08 às 19:39
Rafael, faz o seguinte: Compacte os arquivos e me envie para eu analisar.

contato[@]mxmasters.com.br

Fico no aguardo.

[]´s
Bruno Mendes Diz:
24/07/08 às 6:58
Olá Felipe,
estou adorando as videos aula de css,
mas estou com o mesmo problema que o Rafael,
eu crio o css e faço a alteração no arquivo html,
mas não aparece a alteração, só aparece quando
eu dou F12 para visualizar a pagina na internet.
Será que é alguma configuração no meu dreamweaver?
Você pode me ajudar?

Obrigado!
Felipe Cardozo Diz:
24/07/08 às 18:51
Olá Bruno!

Isso é natural. Algumas vezes o dreamweaver não mostra o conteúdo com o CSS. Os efeitos e configurações só aparecerão quando visto no HTML, ou seja, após o F12.

[]´s
Bruno Mendes Diz:
24/07/08 às 19:50
Entendi, mas acho isso muito ruim, pois toda alteração que faço
eu preciso fazer esse procedimento de salvar e visualizar (F12) e isso atrapalha um pouquinho…
mas não tem outro jeito mesmo né? então vou fazer minha páginas assim mesmo.

Obrigadão!
Parabéns pelo seu trabalho e de toda a equipe da MXMASTERS,
graças a vocês pessoas como eu (interessadas) conseguem aprender muito sobre WEB entre outros.

VALEU!
Marcos Vinícius Diz:
3/08/08 às 18:19
Eu tenho um problema parecido com o do Rafael. Quando eu criei meu estilos.css acompanhando a parte 3 da video aula “Criando Um Site Completo”, as mudanças que eu fazia surtiam efeito no layout que eu já tinha feito. Depois que eu fechei os arquivos e no dia seguinte os abri de novo pra terminar o meu site, as mudanças no estilo.css não fizeram mais efeito algum (nem dando F12, como no caso Bruno). Mas diferente do Rafael, eu não coloquei o index.html na mesma pasta que o estilos.css, pois montei uma estrutura idêntica ao do layout feito na video aula “Criando Um Site Completo”. Ambos, index.html e estilos.css devem necessáriamente ficar juntos na mesma pasta? Porque quando eu coloco eles juntos, o meu layout não aparece.
Felipe Cardozo Diz:
4/08/08 às 23:04
Marcos, não precisam estar na mesma pasta.

Se você coloca o arquivo.css numa pasta chamada estilos, você tem que colocar o caminho do css da seguinte forma:

estilos/arquivo.css

E por aí vai…

[]´s
Allan Diz:
6/09/08 às 18:26
Felipe, não estão aparecendo as video aulas, onde eu consigo elas?
Vinicius Felix/MG/18 Diz:
9/09/08 às 21:00
Muito bom deu pra tirar algumas duvidas.
E a formataçao fika bem padronizada sendo compativel com a maioria dos browsers existente inclusive no proprio linux

Vlw Felipe!
Jota Diz:
26/09/08 às 18:08
Olá, em 1º lugar parabéns pelo excelente conteúdo do site, o qual está me ajudando muito em meu aprendizado, pois sou “quase” um autodidata em webdesign, digo “quase” porque, apesar de nunca ter feito nenhum curso em relação a informática eu sempre busco aprender coisas na internet mesmo, e principalmente no mxmasters, pois as video-aulas são muito bem elaboradas.
Minha dúvida é a seguinte:
Acompanhei todos os vídeos do Felipe Cardozo sobre CSS e Dreamweaver e já estou fazendo meus sites todos em CSS/Tableless, mas ainda há uma grande dúvida, qual a melhor maneira de organizar várias fotos em uma página?
Por exemplo:
Eu estou fazendo um site para uma imobiliária e o cliente me pediu para fazer as páginas das fotos de imóveis com a seguinte disposição:
9 fotos por página, sendo que as fotos deverão ser distribuídas em 3 colunas e 3 linhas, não necessariamente uma “tabela”, mas ele quer que apareça cada foto com um texto descritivo embaixo da mesma. Tentei criar um “box” para cada foto e texto, deu um trabalhão para dispor as fotos e textos corretamente nas páginas, mas o site se comporta de maneira totalmente inesperada em alguns navegadores. Tentei fazer isso também com uma tabela mesmo, não tive conhecimento suficiente para organizar a tabela “CSSmente” no meio da página, mas sei também que essa não é a melhor maneira…
PS: Os programas que criam álbuns de fotos automaticamente (inclusive tem uma video-aula aqui) não adiantam nesse caso, pois apesar de os mesmos fornecerem o código html para que se possa personalizar as páginas daria um trabalho muito maior para inserir o menu (que o cliente quer que apareça em todas as páginas do site), o topo do site, etc.
Então fica aqui o meu probleminha, esperando que alguém possa me ajudar…
Grande abraço a todos…
Felipe Cardozo Diz:
9/10/08 às 11:26

OLá Jota, tudo bem?

A melhor maneira é através de List Item, as conhecidas (LI).

Irei desenvolver uma vídeo aula explicando isso para melhorar a compreensão…

[]´s
Filipe Goes Diz:
16/10/08 às 20:14
Muito bom ja to usando no meu projeto
Manoel Mendes Diz:
3/11/08 às 21:36
Muito bom Felipe !
mais uma aula assistida e compriendida !
Obrigado !
Juarez Silva Diz:
6/11/08 às 9:24
Olá Sr. Felipe Cardozo, queria parabenizá-lo pelas vídeo-aulas, realmente muito bem explicadas e de fácil entendimento, mas queria saber como trabalho com imagens e textos no mesmo “box” por exemplo, alinhando… Por ex: dentro de uma box tenho uma imagem alinhada à esquerda e o texto à direita..não sei se ficou bem explicado.
Abraço e fique com Deus
Felipe Cardozo Diz:
6/11/08 às 10:31

Oi Juarez, tudo bem? Eu entendi sim. Para fazer isso, basta colocar o “ e o
como align=left”, não esquecendo de colocar um margin na imagem para o texto não colar nela.

[]´s
Juarez Silva Diz:
7/11/08 às 1:16
Blz Felipe..vou testar. Lembrei também de uma video-aula sua em que vc fatia o layout do fire e exporta pro dreamweaver, no meu caso fiz um layout ficando centralizado no fire e quando coloquei as “fatias” no dream usando css, alguns itens não ficaram alinhados da forma em que estava no fire. Ql seria a forma correta de configuar esse layout?
Abraço e fique com Deus!
Alex Melo Diz:
8/02/09 às 20:14
Parabéns muito legal, estou assistindo para colocar todo o meu site que ainda esta em contrução, em CSS.
Valeu
Alex Melo Diz:
8/02/09 às 20:38
Muito bom, parabéns
Rodrigo Marcel Diz:
24/04/09 às 11:16
Eai, felipão.. tranquilo.
Tenho uma duvida.

Se eu quiser diminuir o espaçamento entre as linhas de dois paragrafos, como faço?

paragrafo 1

paragrafo 2

o line-height só altera as linhas dentro do mesmo paragrafo.
O que poso usar pra isso?
samara reis Diz:
16/07/09 às 22:32
olá felipe ql codigo css que faz com que possamos colocar
barra de rolagem no para o navegador firefox?
agradeço a resposta desde já
David CHC Diz:
17/07/09 às 8:33
@samara, não sei se entendi, se vc quer colocar uma barra de rolagem. Use overflow:auto; e defina uma altura e largura a esse elemento
Diego Oliveira Diz:
26/08/09 às 20:57
Cara, muito massa as video aulas.
Só uma observação que tenho a fazer é que vc esqueceu de ensinar como linkar o arquivo css pra a página poder importar os estilos desejados.
Tanto na 1ª aula quanto na segunda ficou faltando este pequeno detalhe.

Abraço.
Luis Armando Diz:
29/08/09 às 17:54
Sensacional as suas aulas, mas infelizmente a id #box1 não esta funcionando. nem o background e nem o border. sera q poderia ajudar? valeu !
Luis Armando Diz:
30/08/09 às 18:57
Felipe, ja consegui solucionar aqui… foi falta de atenção no codigo,mesmo…coloquei ao inves de . Tudo funcionando maravilha.
Sou fã ai do site …obrigado !
abraço
Bruno Diz:
5/10/09 às 14:18
como eu baixo essas aulas ?
David CHC Diz:
5/10/09 às 14:51
@Bruno, as aulas não são disponibilizadas para download, pq tenha pessoas q estavam vendendo as aulas, por esse motivo e entre outro, não posto para download.
Rodolpho Diz:
26/10/09 às 15:05
Muito boa essas aulas, da para tirar bastante dúvidas.

Obrigado.
nando Diz:
1/11/09 às 9:34
sao muito boas as suas vidio aulas so que eu tou a ter alguns problemas em arquivos que criei dame erros nao sei se sera da verção do dreamweaver eu utilizo o mx 2004
David CHC Diz:
1/11/09 às 10:08
@nando, qual o erro q apresenta?
nando Diz:
3/11/09 às 12:46
da um erro de compatiblidade
David CHC Diz:
3/11/09 às 12:55
@nando, o ideal é vc utilizar um versão mais nova. Mas aconselho, se quiser aprender tableless, usar o NotePad++ ou PsPad, são mais leve, vc vai se acostumar a digitar o código, que é a melhor maneira de desenvolver qualquer projeto.
Higgor bastos Diz:
11/01/10 às 17:17
olá tenho me empenhado no aprendizado de css mas estou tendo um problema e queria pedir a ajuda de vocês….o css que escrevi não aparece quando aperto F12…posso contar com seu conhecimento? Desde Já obrigado e parabens pelas aulas estão otimas!!!
Higgor Bastos Diz:
18/01/10 às 22:44
Olá Felipe tenho seguido suas aulas e quero deixar aqui expresso meu agradecimento, pois, embora saiba que muito ainda tenho para aprender, o material o qual voce nos disponibilizou foi que grande valia e utilidade, melhorou muito minha visão em relação atableless e css. Porém quero aproveitar o espaço para que talvez possa me esclarecer uma dúvida.
Publiquei este site (www.usoracional.xpg.com.br) e a formatação css não aparece. Se puder dar um olhada(claro ainda faltam as outras páginas) e me orientar sobre meus erros eu agradeceria muito…desde já obrigado!!!
David CHC Diz:
19/01/10 às 10:44
@Higgor Bastos, provavelmente vc deve está se referindo a imagem do #boxlogo pq não está aparecendo. Isso pq vc colocou o caminho absoluto do seu PC, veja:

background-image:url(file:///C|/ecologic/topo.jpg);

Por isso não vai aparecer, coloque o caminho correto da imagem, no caso se estivesse dentro de uma pasta chamado imagens, seria assim:

background-image:url(imagens/topo.jpg);

E certifique-se que a imagens está na sua hospedagem.
hIGGOR BASTOS Diz:
19/01/10 às 22:16
Ok. Muito obrigado!!!Resolvido
Washington Diz:
23/07/10 às 22:01
Muito Bom cara, sem duvida vocês são os melhores!